Артём Мáлков

Как вставить HTML, CSS и JS в PHP-код?

23 авг3 коммАртём Мáлков

Когда вы разрабатываете свой модуль, то иногда прибегаете к помощи верстки (HTML и CSS) и дополнительным скриптам.

Все это можно подключать отдельно – что-то в теле страницы, что-то в отдельных файлах. Но некоторые дополнения лучше вставлять непосредственно в сам PHP-файл.

Сегодня я покажу два варианта, как можно вставить HTML, CSS или JavaScript в код PHP.

Первый вариант вставки элементов в PHP-код

Я думаю, что если вы хоть немного знакомы с PHP, то знаете, что такое «echo» (тег, с помощью которого вы можете вывести сообщение на экран).

Вот с помощью него и можно вывести один из перечисленных ранее кодов. Пример:

<?php

	$content = "<div class='main'>Hello, world!</div> <style>.main {color: red;}</style> <script src='/jquery.nicescroll.js'></script>";

	echo $content;

?>

На что здесь стоит обратить внимание? Кавычки. Если вы используете внешние кавычки в виде " ", то внутренние кавычки элементов должны быть ' ' и наоборот, иначе вы получите ошибку. Если вы принципиально хотите использовать одинаковые и внешние, и внутренние кавычки, то во внутренних ставьте знак экранизации:

<?php

	$content = "<div class=\"main\">Hello, world!</div> <style>.main {color: red}</style> <script src=\"/jquery.nicescroll.js\"></script>";
	
	echo $content;

?>

В этом случае все будет работать корректно.

Второй вариант вставки элементов в PHP-код

Этот вариант мне нравится куда больше, чем первый. Здесь мы будем также использовать «echo», как и в предыдущем варианте, но добавим еще элемент «HTML»:

<?php

	echo <<<HTML

		<style>
			.main {
				color: red;
			}
		</style>

		<script src="/jquery.nicescroll.js"></script>

HTML;

?>

Сюда вы можете вставлять любой элемент, будь то HTML-код или же JavaScript. Кавычки здесь не играют роли (можете вставить любые), а по желанию можно внедрить переменные для вывода:

<?php

	$content = "<div class='main'>Hello, world!</div>";

	echo <<<HTML

		{$content}

		<style>
			.main {
				color: red;
			}
		</style>

		<script src="/jquery.nicescroll.js"></script>

HTML;

?>

Весьма удобный способ для реализации ваших идей.

Рекомендуем к просмотру
Как подключить CSS (каскадные таблицы стилей) к HTML?
Статьи и советы
Подгрузка информации с другой страницы сайта на jQuery
Модули и скрипты
Замена кавычек «лапок» кавычками «ёлочками» на PHP
Статьи и советы
3
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 20
    766
      •  Гости
    19 окт в 18:59

    Спасибо! У меня получилось.

    • 28
    766
      •  Гости
    30 мая в 11:18

    Комментатор, что выше - судя по тексту, дебил полный, а картинка так ниче

    • 1
    766
      •  Гости
    3 дек в 07:18

    судя по фото, дебил полный, а текст так ниче

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge