Главная / Создание и продвижение сайтов / САЙТОСТРОЕНИЕ / WordPress / Как добавить скрипт на страницу WordPress

Как добавить скрипт на страницу WordPress

Столкнувшись с необходимостью вставить исполняемый скрипт на странице WordPress-сайта, многие начинающие вебмастера нередко сталкиваются и с определенными затруднениями. Как обычно поступает вебмастер, упираясь в задачу, реализацией которой до этого ему заниматься не приходилось?.. Правильно, ищет информацию по теме в сети. Но здесь-то его (вебмастера) и подстерегают неприятные сюрпризы. Впрочем, обо всем – по порядку!

Поскольку с движком WordPress мое знакомство, как и у многих, происходит по принципу «решаем проблемы по мере их поступления», к суперпродвинутым пользователям этой постоянно развивающейся CMS я себя причислять не решаюсь. Поэтому тоже всегда прежде изучаю и прорабатываю (проверяю) информацию, изложенную на заслуживающих доверия ресурсах. Если по каким-то причинам в открытом доступе информация отсутствует, а решение проблемы затягивается, обращаюсь за советом к специалистам с форумов. Например, многие непонятные с первого захода вопросы по другому популярному движку для создания интернет-магазинов PrestaShop, мне удалось прояснить лишь общением в специализированных форумах, посвященных этой CMS. Как говорят, правильно сформулированный вопрос – уже половина ответа ))

Сегодня я хочу познакомить вас с простым способом добавления скрипта в записях WordPress. Основные моменты («сюрпризы»), с которыми сталкивается новичок при поиске информации в интернет, и о которых я упоминал в самом начале – это:

  • Отсутствие актуальной информации по теме. В ТОПе выдаче Яндекса мне сплошь и рядом попадались статьи, датированные и 2010-м и даже 2007-м годом. Увы, многое из того, что работало раньше, уже не работает.
  • Недостаток знаний у владельца сайта для применения некоторых решений. Преодолеть этот барьер наскоком не всегда удается. Некоторые барьеры и вообще кажутся непреодолимыми на определенном этапе.
  • Недостаток времени. А реализовать задуманное требуется сегодня или, в крайнем случае, завтра.

Кроме того, сейчас блоги на WordPress достаточно индивидуальны. А вызвано это различными установленными версиями движка и плагинов, специфической комбинацией плагинов, настройками на хостинге, в конце концов… По этим причинам вебмастеру приходится искать наиболее простые решения, которые работают не зависимо от версии, установленных плагинов и настроек хостера.

Зачем вообще добавлять скрипты в записи блога (сайта) на WordPress? Причины прозаичны: нужен скрипт оплаты на странице, скрипт обратной связи, код рекламной сети, вывод интерактивной карты и т.п. В WordPress предусмотрена вставка скриптов в футере (путем редактирования файла footer.php) и сайдбаре – с помощью виджетов. Но простая и понятная вставка скриптов в тело записи средствами движка почему-то не предусмотрена. Скрипт, добавляемый в пост в режиме редактирования html, не отображается на странице, попросту пропадает. Вот и приходится искать обходные пути – самые разные.

Так вот. О том, как добавить скрипт на страницу WordPress, информации в сети предостаточно. Интернет предлагает нам следующие пути решения проблемы:

  • Использование функции wp_enqueue_script, используемой для регистрации нужных скриптов в WordPress. Наиболее распространенный способ – вызов функции в файле шаблона. Реализуется разными способами. Требует понимания принципа работы движка, знания его структуры.
  • Правка файла functions.php. Необходимо знание того, куда и что нужно добавить, чтобы и скрипт запускался, и тема продолжала работать как прежде.
  • Использование Произвольных полей WordPress. Относительно простое, но не всегда работающее решение. Возможно, вам повезет и на вашем сайте скрипт, внедренный в запись WordPress с помощью произвольных полей, заработает. У меня на паре сайтов произвольные поля напрочь отказывались работать со скриптами.
  • Использование плагинов, добавляющих на сайт шорткоды (shortcode). Элегантное решение, заключающееся в следующем. Для исполнения различных скриптов простым добавлением в предлагаемую плагином форму создаются сниппеты кода. Плагин реализует вызов встроенных в движок функций самостоятельно, вебмастеру же остается добавить в запись конструкцию типа [short_code], вызывающую исполнение необходимой функции. Достоинство метода в том, что нет привязки к шаблону, шорткоды можно применять в любой теме WordPress. Примеры плагинов для создания шорткодов: Shortcoder, Shortcode Exec PHP, Shortcodes Ultimate. К сожалению, тоже не на всех шаблонах и не у всех вебмастеров этот метод срабатывает.
  • Использование конструкции iframe вида <iframe width=» » height=» » src=»http://sajt.ru/stranica.html» frameborder=» » scrolling=» «></iframe> Это позволяет выводить в теле страниц (записей) блога содержимое из внешних файлов. Все, что нужно вебмастеру – загрузить файл со скриптом на хостинг – в корень или в специально отведенную для этого папку, затем прописать в процессе редактирования записи вывод содержимого этого файла с помощью iframe в нужном месте страницы.

kak-dobavit-script-na-stranicu-wordpress

Необходимость в скриптах на страницах WordPress стала появляться у меня сравнительно недавно. И, как полагается, я перепробовал все возможные варианты их добавления. Но именно последний метод срабатывал всегда, я им активно пользуюсь и в настоящее время. Приведу пару примеров добавления скрипта в WordPress, реализованных в предыдущей записи Регистрация в каталогах сайтов. На этой странице выводится две конструкции вида <script>: форма обратной связи и форма оплаты Webmoney.

На многих сайтах для реализации контактной формы раньше я с успехом использовал популярный плагин Contact Form 7, легкий в настройках, простыми манипуляциями в котором создать продвинутую форму обратной связи, а затем добавить шорткод в тело записи или страницы, не составляло большого труда. На этом сайте Contact Form 7 нормально работать отказался, как и форма от Вебмани. Проблема была решена с помощью iframe.

Последовательность действий при вставке скрипта в запись WordPress:

  1. Создаем в текстовом редакторе типа Notepad++ пустую страницу, добавляем в нее необходимый код (скрипты для решения самых разных задач на сайте есть в свободном доступе в сети).
  2. Сохраняем страницу с расширением html в кодировке UTF-8 без BOM.
  3. Забрасываем эту страницу к себе на сервер, в папку с сайтом (или внутреннюю папку на сайте).
  4. Выводим в нужном месте статьи (редактирование в режиме Текст) ссылку на наш файл.

Я использовал готовый шаблон формы обратной связи, реализованный на двух файлах:

1) contacts.html

<!DOCTYPE html>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

<!-- атрибут required говорит, что заполнение поля обязательно -->
<form method="POST" id="feedback-form">
Ваше имя:</br>
<input type="text" name="nameFF" required placeholder="Имя" x-autocompletetype="name"></br>
Email для связи:</br>
<input type="email" name="contactFF" required placeholder="Ваша почта" x-autocompletetype="email"></br>
Сообщение:</br>
<textarea name="messageFF" required placeholder="Адрес Вашего сайта" rows="5"></textarea></br>
<input type="submit" value="отправить">
</form>

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "http://vervekin.ru/scripts/contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение отправлено.\nЯ отвечу Вам в течении 2-х дней.\nСпасибо за обращение!');    
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
</script>

2) contacts.php

<?
if (array_key_exists('messageFF', $_POST)) {
   $to = 'mojadress@mail.ru';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['nameFF'];
}
?>

Привожу содержимое этих файлов здесь, возможно, кому-то пригодится тоже. Не забудьте изменить адрес электронной почты и путь к вашему файлу contacts.php, делается это простым редактированием страниц.

Дальше необходимо открыть запись WordPress и в режиме Текст добавить ссылку на первый файл:

<iframe width=»450″ height=»220″ src=»http://vervekin.ru/scripts/contacts.html» frameborder=»0″ scrolling=»no»></iframe>

— где параметры width и height отвечают за размеры вставки, параметр frameborder тега указывает на толщину (в данном случае — отсутствие) границы фрейма, а параметр scrolling — на отсутсвие или наличие полосы прокрутки во фрейме. Готовый результат будет выглядеть примерно так:

Формы оплаты Яндекс-денег и Webmoney были взяты на money.yandex.ru и merchant.webmoney.ru соответственно — в первом случае необходимо быть авторизованным пользователем Яндекс-денег, во втором — нужно иметь сертификат системы не ниже формального, с проверенными паспортными данными. Вывод этих форм на странице осуществляется подобным же образом.

Надеюсь, эта статья была полезной для вас.

Расскажите об этой статье в соцсетях:

13 комментариев

  1. Александр Каратаев

    Приветствую, Константин! Очень полезная статья для тех, кто сталкивается с подобными проблемами… Я когда начинал работать с WordPress, то все коды вставлял в functions.php и мне казалось это идеальным решением. Но потом, я понял, что это совершенно неправильный путь, о чём, кстати пишут сами разработчики движка… Где-то у них на wp-mag.ru есть статья — Вся правда о functions.php. В итоге, сейчас мой functions практически девственно чист — там только то, что от самого движка. Но грамотно сделанные шаблоны имеют возможность добавления своих кодов, например, в моей теме есть файлик custom_functions.php, который изначально ничего, кроме открывающего и закрывающего php-тегов, не содержит. Туда можно смело вставлять свой код — этот файл не затрагивается обновлением темы, а в самом functions.php по умолчению присутствует вызов этого файла на исполнение — очень, в принципе, удобно.
    wp_enqueue_script и wp_enqueue_style используется в плагинах, в моих, кстати, тоже. Можно, как Вы правильно написали, вставлять эту конструкцию и в шаблон. Только при обновлении шаблона это исчезнет. Правда такие обновления бывают нечасто, так, что метод, подсказанный Вами очень даже интересен.
    Про плагины шорткодов…

    Плагин вносит изменения в файл functions.php самостоятельно

    не совсем так, вернее совсем не так. Подобные плагины никоим образом не изменяют functions.php, а свои вставки они реализуют путём вызова встроенных в движок функций add_filter() и add_action().
    iframe тоже иногда использую, например, чтобы вывести на странице PDF-файл… Но вообще, использовать iframe надо очень осторожно — именно через него в большинстве случаев и проникает всякий вредоносный код.
    А вот вывод форм оплаты я реализовал во всплывающем окне — вот можно посмотреть: blog.ddw.kz/podderzhka-proektov-avtora-etogo-bloga По-моему очень даже ничего получилось…

    • Спасибо за замечания, Александр, поправил. Да и про functions.php надо будет внимательней почитать. Многостраничный топик об этом файле под названием «Плюшки файла functions.php» видел еще на нулледе, но все не выберу никак время разобрать эту тему, может, что и для собственного сайта пригодилось бы. Вашу форму обязательно посмотрю, всплывающие окна — это интересно, пока не работал с ними.

  2. Полезная статья, в которой подробно все описано. Спасибо за материалы и за грамотное их изложение.

  3. Надежда Давыдова

    Отказалась от использования iframe ввиду того, что на моем блоге стоит реклама Адсенс, правилами которой строжайше запрещено транслировать в фреймах страницы других сайтов. Хотя и удобный способ, но Гугл несгибаем (

    • С необходимостью вывода чужого контента во фреймах пока не сталкивался. А если выводится содержимое собственного сайта?

    • На моем блоге тоже стоит реклама Адсенс, причем около года, но фреймы я активно использую, вроде все в порядке

  4. Будем пробовать. Способ и впрямь несложный.

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

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

  7. Не использовал раньше этот функционал. Интересные возможности он дает, если подумать. Обязательно проверю на своем сайте.

  8. Здравствуйте! Спасибо за такую подробную статью! Хотелось бы у вас уточнить такой вопрос: мне нужно вставить скрипт внутрь тега в html документ каждой страницы моего сайта, но так, чтобы код виджета не был установлен на главную страницу, страницы разделов, контакты и т.д. Подскажите, куда этот код вставлять? Совсем уже запуталась. В поисках ответа и зашла на ваш сайт. Заранее спасибо!

    • Не совсем понятно, чего именно вы хотите. В статье описан простой способ вставки скрипта в единичную запись Вордпресс. Скрипт, вставленный в виджет, отображается согласно возможностям и настройкам вашей темы, если тема позволяет настраивать главную — наверное, можно скрывать и отображать необходимые виджеты. Если же вам необходимо выводить скрипт в каждой записи, я бы смотрел в сторону редактирования single.php. С каждым шаблоном приходится разбираться индивидуально. Не видя шаблона, сложно сказать.

  9. Не прошло название тега. Попробуем так _head></head_

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

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