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

Опубликовано: 01.09.2018

Столкнувшись с необходимостью вставить исполняемый скрипт на странице 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 в нужном месте страницы.

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

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

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

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

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

1) contacts.html

<!DOCTYPE html> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>  <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 = '[email protected]'; $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 — на отсутсвие или наличие полосы прокрутки во фрейме.

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

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