WordPress: Вставка javascript в запись или страницу

Добавление записей и страниц в вордпресе не вызывает особого труда и не требует специфических знаний. В этом заслуга достаточно простых и в то же время удобных текстовых редакторов. Однако есть в них одна крайне неприятная особенность: в целях безопасности они перекодируют кавычки «» и другие используемые в скриптах знаки в специальные html-символы, что приводит к неработоспособности вставляемых java-скриптов. Да и в случаях, когда эти символы остаются на месте, скрипты все равно удивительным образом отказываются работать. От этого не спасает и переключение редактора в режим текста (HTML). В общем, внедрение javascript к себе на страницу/запись та ещё морока. Но что же делать, когда тот или иной скрипт крайне необходим на данной странице, а добиться его корректной вставки на страницу не получается? Придется придумывать обходные пути и немного изменять код используемой вами темы оформления.

Самый простой и, наверное, очевидный способ добавления javascript на сайт — добавить его в хэдер (header.php) или футер (footer.php) нашей темы оформления через редактор тем. Но как правило специфические скрипты нам нужны на определенной странице или в определенном месте в тексте записи. Поэтому данный вариант подходит только для скриптов, которые работают на всем сайте. В нашем же случае идеальным был бы вариант добавления необходимого кода в какую-то определенную область в редакторе страницы/записи, и чтобы затем этот код выводился в определенном месте на странице.

Здесь мы сталкиваемся с двумя вариантами развития событий, которые определяются условиями работы скрипта. Для примера возьму любой таймер (пусть будет один из измененных мной от timergenerator), а второй, скажем, скрипт опроса от сервиса UpToLike.ru.

Оговорюсь заранее, что в обоих случаях будут использоваться стандартные вордпресовские произвольные поля. Если у вас они не отображаются при редактировании страницы/записи, то их необходимо включить. Нажимаете «Настройки экрана» в правом верхнем углу страницы и в выехавшем окошке ставите галочку возле «Произвольные поля».

proizvolniepolya

В случае с таймером, скрипт должен находиться в хэде сайта, а место отображения таймера определяется невидимым блоком <div> с заданным классом. Поэтому вывод кода скрипта, размещенного в произвольном поле, мы должны осуществить в «голове» сайта (а сам невидимый блок будет вставляться в текстовом редакторе (вкладка Текст) в виде обычного html-кода). Для начала необходимо создать произвольное поле, где мы будем размещать наш javascript-код. В первый раз необходимо воспользоваться ссылкой «Введите новое» в области произвольных полей.

vstavka_javascript_1

В следующий раз на новой странице это поле уже будет в списке и вам необходимо выбрать его оттуда. То есть один раз вставив своеобразную ссылку на это поле в хэдер, мы можем задавать разные коды для этого поля на разных страницах, и он будет выводится в нужном месте.

vstavka_javascript_2

После того, как вы задали новое имя поля или выбрали уже готовое из списка, а также добавили совершенно любой текст в поле справа «Значение», нажимаете кнопку «Добавить произвольное поле», и оно перемещается вверх, где значение можно будет изменить. Как вы уже поняли, код яваскрипт необходимо будет вставлять именно в поле «Значение» напротив добавленного произвольного поля.

vstavka_javascript_3

Допустим, что вы уже вставили необходимый код в произвольное поле и опубликовали страницу/запись. Однако Ваш код еще нигде не выводится. Чтобы это исправить необходимо зайти в редактор тем и вставить перед закрывающим тегом <head> следующий php-код, который отвечает за вывод содержимого произвольного поля:

<?php echo get_post_meta($post->ID, 'postcode', true); ?>

При этом вместо моего postcode вы должны ввести название вашего произвольного кода.

vstavka_javascript_4

После этого можете вернуться на страницу, куда вы вставляли ваш яваскрипт-код, и просмотреть исходный код страницы (сочетание клавиш в браузере как правило ctrl+u). Если вы все сделали правильно, то перед закрывающим хэад должен стоять ваш добавленный на страницу яваскрипт-код.

При это отмечу, что таким образом можно добавлять в «голову» сайта не только яваскрипт-код, но и css-код.

Вставка javascript-кода в текст записи/страницы

Необходимость вывода определенного кода в тексте страницы у меня возникла при вставке скрипта опроса от uptolike.ru в предыдущей статье. Простой яваскрипт, который вставляется ссылкой на сайт, не требует особого шаманства. Он работает и так. А вот когда мы пытаемся вставить код, состоящий из нескольких строк, то вордпрес навязчиво пытается добавить туда свои теги перевода строк или теги абзацев, что полностью выводит вставляемый яваскрипт-код из строя. Чтобы обойти это можно использовать произвольные поля, где такого явления не наблюдается и код публикуется в его исходном виде.

Для вывода кода в тексте страницы я использую шорткоды. Это обычный текст определенного вида, который вордпрес заменит на необходимый нам код. С шорткодами вы можете столкнуться, если используете плагины вставки аудизаписей или видео на страницу.

Чтобы использовать шорткод для вставки javascript-кода на страницу необходимо добавить в конец файла темы functions.php следующий php-код:

function customscript_shortcode($atts, $text) {
   global $post;
   return get_post_meta($post->ID, $text, true);
}
@add_shortcode('customscript','customscript_shortcode');

vstavka_javascript_5

Затем создаете произвольное поле, как я описал в предыдущем пункте и выводите его на странице в нужном месте, используя следующий шорткод:

[customscript]Имя вашего произвольного поля[/customscript]

В дальнейшем вам не нужно проводить дополнительных манипуляций. Просто создаете или выбираете произвольное поле, добавляете его и выводите с помощью шорткода.

WordPress: Вставка javascript в запись или страницу: 17 комментариев

  1. Roman

    Благодарю вас за статью! Но пожалуйста помогите разобраться, я все сделал по первому варианту со вставкой в head. Мне нужно добавить калькулятор на страницу, java script в коде страницы виден, но калькулятор не считает, а выдает значение NaN вместо суммы.

    1. vetraz Автор записи

      Не хочу показаться грубым, но я, к сожалению, не телепат. Как минимум нужно видеть страницу. А вообще правильно будет обратиться к создателю скрипта или же пытаться разобраться в его документации (если такая есть).

  2. ksandra

    Здравствуйте. Подскажите пожалуйста, как вставить скрипт, который выводит несколько форм поиска на один id записи ?
    Дано: …

    Не выводит остальные страницы поиска. В настройках WP количество записей стоит 5 000, но у этого поисковика не столько. Код рабочий, и страницы перелистываются на 2,3,4,5 и т.д , если вставить в header или footer. А так , если нажать 2, или 3 стр или «Далее»,не работает и выводит пустую запись.
    Помогите решить пожалуйста, вот ссылка

    1. vetraz Автор записи

      Приветствую. Боюсь, я вам не могу ничем помочь. Обращайтесь к фрилансерам.

  3. Ярослав

    Отлично, воспользовался Вашим рецептом для установки на странице скрипта изменения приветствия в зависимости от времени суток! Добавляю в закладки!

  4. Сергей

    Спасибо!
    Давно искал как вставить произвольное поле в текст статьи.
    Только у меня была мысль одним шорткодом ( скажем [ch] ) вставить код, хранящийся в каком-нибудь file.php, и состоящий из нескольких произвольных полей со стилями + карта, фотка и т.д.
    Чтобы получался как бы небольшой сайдбар (или 2) с произвольными полями.
    А так нужно будет вставлять в текст каждой записи целую конструкцию и закрывать ее в [customscript][/customscript]. Но по крайней мере это уже работает.
    С Новым Годом !!!

  5. Дмитрий

    Спасибо,просто и доступно объяснено,как вставлять js-код в странички на wp. До этого искал в интернете находил сложные и не понятные мне решения этой проблемы.

  6. Алиса

    О, наконец-то я нашла то, что мне нужно! Спасибо огромное! Как раз нужно было скрипт вставит на страницу, а я в php вообще ноль. Но все получилось) Css тоже так иногда вставляю.

  7. Влад

    Здравствуйте. никак не получается вставить по вашей инструкции. тему делал сам для сайта, может из за этого?

    1. vetraz Автор записи

      Добрый день! Расскажите подробнее, что и как вы делали? способы работают независимо от того, кто делал темы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *