Бот-информер доступности сайта   •   Магазин расширений
3 647 просм
0 комм
Поделиться:

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

Когда вы разрабатываете свой модуль, то иногда прибегаете к помощи верстки (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;
?>

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

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария