My WordPress Note
Рабочие заметки веб-мастера по wordpress и даже больше
WordPress: Вставка javascript в запись или страницу
Добавление записей и страниц в вордпресе не вызывает особого труда и не требует специфических знаний. В этом заслуга достаточно простых и в то же время удобных текстовых редакторов. Однако есть в них одна крайне неприятная особенность: в целях безопасности они перекодируют кавычки «» и другие используемые в скриптах знаки в специальные html-символы, что приводит к неработоспособности вставляемых java-скриптов. Да и в случаях, когда эти символы остаются на месте, скрипты все равно удивительным образом отказываются работать. От этого не спасает и переключение редактора в режим текста (HTML). В общем, внедрение javascript к себе на страницу/запись та ещё морока. Но что же делать, когда тот или иной скрипт крайне необходим на данной странице, а добиться его корректной вставки на страницу не получается? Придется придумывать обходные пути и немного изменять код используемой вами темы оформления.
Самый простой и, наверное, очевидный способ добавления javascript на сайт — добавить его в хэдер (header.php) или футер (footer.php) нашей темы оформления через редактор тем. Но как правило специфические скрипты нам нужны на определенной странице или в определенном месте в тексте записи. Поэтому данный вариант подходит только для скриптов, которые работают на всем сайте. В нашем же случае идеальным был бы вариант добавления необходимого кода в какую-то определенную область в редакторе страницы/записи, и чтобы затем этот код выводился в определенном месте на странице.
Здесь мы сталкиваемся с двумя вариантами развития событий, которые определяются условиями работы скрипта. Для примера возьму любой таймер (пусть будет один из измененных мной от timergenerator), а второй, скажем, скрипт опроса от сервиса UpToLike.ru.
как поставить скрипт на хостинг
Оговорюсь заранее, что в обоих случаях будут использоваться стандартные вордпресовские произвольные поля. Если у вас они не отображаются при редактировании страницы/записи, то их необходимо включить. Нажимаете «Настройки экрана» в правом верхнем углу страницы и в выехавшем окошке ставите галочку возле «Произвольные поля».
cleo скрипты для gta san andreas скачать
Вставка javascript-кода в
В случае с таймером, скрипт должен находиться в хэде сайта, а место отображения таймера определяется невидимым блоком
В следующий раз на новой странице это поле уже будет в списке и вам необходимо выбрать его оттуда. То есть один раз вставив своеобразную ссылку на это поле в хэдер, мы можем задавать разные коды для этого поля на разных страницах, и он будет выводится в нужном месте.
После того, как вы задали новое имя поля или выбрали уже готовое из списка, а также добавили совершенно любой текст в поле справа «Значение», нажимаете кнопку «Добавить произвольное поле», и оно перемещается вверх, где значение можно будет изменить. Как вы уже поняли, код яваскрипт необходимо будет вставлять именно в поле «Значение» напротив добавленного произвольного поля.
Допустим, что вы уже вставили необходимый код в произвольное поле и опубликовали страницу/запись. Однако Ваш код еще нигде не выводится. Чтобы это исправить необходимо зайти в редактор тем и вставить перед закрывающим тегом следующий php-код, который отвечает за вывод содержимого произвольного поля:
При этом вместо моего postcode вы должны ввести название вашего произвольного кода.
После этого можете вернуться на страницу, куда вы вставляли ваш яваскрипт-код, и просмотреть исходный код страницы (сочетание клавиш в браузере как правило ctrl+u). Если вы все сделали правильно, то перед закрывающим хэад должен стоять ваш добавленный на страницу яваскрипт-код.
При это отмечу, что таким образом можно добавлять в «голову» сайта не только яваскрипт-код, но и css-код.
Вставка javascript-кода в текст записи/страницы
Необходимость вывода определенного кода в тексте страницы у меня возникла при вставке скрипта опроса от uptolike.ru в предыдущей статье. Простой яваскрипт, который вставляется ссылкой на сайт, не требует особого шаманства. Он работает и так. А вот когда мы пытаемся вставить код, состоящий из нескольких строк, то вордпрес навязчиво пытается добавить туда свои теги перевода строк или теги абзацев, что полностью выводит вставляемый яваскрипт-код из строя. Чтобы обойти это можно использовать произвольные поля, где такого явления не наблюдается и код публикуется в его исходном виде.
Для вывода кода в тексте страницы я использую шорткоды. Это обычный текст определенного вида, который вордпрес заменит на необходимый нам код. С шорткодами вы можете столкнуться, если используете плагины вставки аудизаписей или видео на страницу.
Чтобы использовать шорткод для вставки javascript-кода на страницу необходимо добавить в конец файла темы functions.php следующий php-код:
Затем создаете произвольное поле, как я описал в предыдущем пункте и выводите его на странице в нужном месте, используя следующий шорткод:
[customscript]Имя вашего произвольного поля[/customscript]
В дальнейшем вам не нужно проводить дополнительных манипуляций. Просто создаете или выбираете произвольное поле, добавляете его и выводите с помощью шорткода.
Источник: http://mywpnote.ru/hitrosti-wordpress/wordpress-vstavka-javascript-v-zapis-ili-stranitsu/