Как на сайте WordPress быстро вставить любой скрипт в статью?

Часто бывает необходимо где-то на странице вставить HTML-теги ли какой-либо скрипт на языке JavaScript (например, рекламный блок или какой-нибудь информер). Конечно, переключив визуальный редактор в режим Текст, вставленный код будет без проблем выполнен. Но если один и тот же блок необходимо вставить в нескольких местах поста да еще и на сотне страницах, то в таком случае нужно искать более быстрое решение этой задачи.

Что такое JavaScript?

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

Типичный фрагмент кода JavaScript может выглядеть следующим образом:

<!-- Пример 1 --!>

<script type="text/javascript"> 
    // JavaScript-код
</script>

<!-- Пример 2 --!> 

<script type="text/javascript" src="js/jquery.min.js"></script>

Теперь, если вы добавите фрагмент кода в контентную часть записи или страницы WordPress, он будет удален при сохранении.

Как быстро вставить любой скрипт в статью?

Каких либо стандартных инструментов для облегчения вставки кода в контент WordPress не предоставляет. Поэтому будем использовать сторонние решения. Рассмотрим наиболее простые способы.

Способ 1. Плагин Shortcoder

Бесплатный плагин Shortcoder позволит одним нажатием кнопки вставлять сохраненный лишь однажды код в текст записи или страницы. Для этого, после установки и активации дополнения, необходимо в админ-панели перейти в раздел Настройки -> Shortcoder.

Страница настроек плагина Shortcoder

Для начала нам нужно добавить необходимый код и сохранить его для будущей вставки. Для этого нажимаем кнопку Create a new shortcode.

Добавление нового кода в плагине Shortcoder

В поле Name следует указать имя сохраняемого кода, а в большом текстовом блоке собственно вставить сам код.

Добавление нового кода в плагине Shortcoder

Настройка Disable this Shortcode for administrators позволяет запретить показ кода для администратора. Кроме того, в блоке Visibility Вы сможете указать, для каких устройств будет отображаться код. Доступны следующие варианты: только на мобильных (опция On mobile devices alone), только на десктопах (On desktops alone) и для всех устройств (On both desktop and mobile devices). Для сохранения следует нажать кнопку Create shortcode. Все, Ваш код сохранен. Теперь его можно вставлять в контент. Для этого необходимо открыть на редактирование запись или страницу и поставить курсор в то место, где ожидается вставка кода.

Визуальный редактор

Теперь, чтобы вставить код, нужно нажать появившуюся на панели инструментов кнопку. Во всплывающем окне Вы увидите список сохраненных кодов (в нашем случае — это Clearfy banner). Для его вставки необходимо нажать кнопку Quick insert.

Вставка кода в текст записи

В итоге в тексте статьи появится специальный шорткод.

Страница редактирования записи

Читайте подробнее: Что такое шорткод и как его правильно использовать на сайте WordPress.

После обновления страницы или записи (кнопка Обновить), вставленный Вами код будет исполнен и отображен.

Страница записи

Отметим, что один и тот же код можно добавлять сколько угодно раз. Вы таким образом сможете добавить необходимое количество нужных кодов и вставлять их где это будет необходимо.

Способ 2. Плагин Insert Headers and Footers

Иногда вам будет необходимо скопировать и вставить фрагмент кода JavaScript на свой сайт, чтобы добавить сторонний инструмент. Эти скрипты обычно должны присутствовать в разделе заголовка или внизу перед тегом </body> вашего сайта. Таким образом, код будет загружаться при каждом просмотре страницы. Например, код Google Analytics должен присутствовать на каждой странице вашего сайта, чтобы он мог отслеживать посетителей вашего сайта. Вы можете добавить его в файлы header.php или footer.php темы WordPress. Однако после ее обновления эти изменения могут быть перезаписаны. Для решения этой проблемы можно воспользоваться бесплатным плагином Insert Headers and Footers. После его установки и активации следует в админ-панели перейти в раздел Настройки -> Insert Headers and Footers. На странице настроек вы увидите две области для вставки кода. Первый отвечает на «шапку» сайта, а второй за «подвал».

Страница настроек плагина Плагин Insert Headers and Footers

Теперь вы можете вставить скопированный заранее код JavaScript в одно из этих полей, а затем следует нажать Save. После этого плагин будет автоматически загружать вставленный код на каждой странице вашего сайта.

Способ 3. Ручной режим

Этот способ предусматривает внесение кода в основной конфигурационный файл активной WordPress-темы — functions.php.

Если вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.

Во-первых, давайте посмотрим, как добавить код в заголовок сайта WordPress (wp_head). Для этого нужно будет добавить в указанный файл следующие строки:

function wpschool_javascript_in_header() {
    ?>
        <script>
            // JavaScript-код
        </script>
    <?php
}
add_action( 'wp_head', 'wpschool_javascript_in_header' );

Предположим, вам нужно загрузить JavaScript-код только на определенной записи WordPress. Для этого следует добавить условную логику в код.

function wpschool_javascript_in_header() {
    if ( is_single ( '16' ) ) { 
        ?>
            <script type="text/javascript">
                // JavaScript-код
            </script>
        <?php
    } 
}
add_action( 'wp_head', 'wpschool_javascript_in_header' );

Если более подробно рассмотреть приведенный выше код, то можно заметить, что мы обернули код JavaScript вокруг условной логики, чтобы соответствовать конкретному идентификатору (ID) записи. Вы можете использовать это, заменив «16» своим собственным ID. Заметим, что этот код работает исключительно с записями, не включая страницы.

Рассмотрим другой пример, который подойдет для страниц.

function wpschool_javascript_in_header() {
    if ( is_page ( '10' ) ) { 
        ?>
            <script type="text/javascript">
                // JavaScript-код
            </script>
        <?php
    } 
}
add_action( 'wp_head', 'wpschool_javascript_in_header' );

Мы можем использовать тот же код с небольшой модификацией, чтобы добавить JavaScript-код в раздел «подвала» вашего сайта.

function wpschool_javascript_in_footer() {
    ?>
        <script>
            // JavaScript-код
        </script>
    <?php
}
add_action( 'wp_footer', 'wpschool_javascript_in_footer' );


Вместо того, чтобы подключить нашу функцию к wp_head, мы теперь подключили ее к wp_footer. Вы также можете использовать его с условными тегами для добавления JavaScript в определенные записи или страницы.

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

Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 2
  1. Пользоваель

    Шорткод отображается, но скрипт не работает. Вместо нудного содержимого пустая строка

    1. Михаил Петров author

      Добрый день!

      Пробуйте 2 и 3 способы.

      С уважением Михаил

Задать вопрос