Как вставить HTML, CSS и JS в PHP-код?
Опубликовано: 08.10.2017
Когда вы разрабатываете свой модуль, то иногда прибегаете к помощи верстки (HTML и CSS) и дополнительным скриптам.
Вставка произвольного кода в модуль Joomla для встраивания скриптов, html и php
Все это можно подключать отдельно – что-то в теле страницы, что-то в отдельных файлах. Но некоторые дополнения лучше вставлять непосредственно в сам PHP-файл.
Сегодня я покажу два варианта, как можно вставить HTML, CSS или JavaScript в код PHP.
Как правильно добавлять код в functions.php. WordPress
Первый вариант вставки элементов в 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; ?>Весьма удобный способ для реализации ваших идей.