В определённых случаях на странице потребуется вставить HTML-теги или какой-нибудь скрипт, написанный на JavaScript (например, рекламную панель или информер). Естественно, если переключить визуальный редактор на режим Текст, то код будет выполнен корректно. Однако, когда нужно разместить один и тот же блок в нескольких частях поста или на множестве страниц, лучше найти более эффективное решение для выполнения этой задачи.
Одним из удобных способов является использование плагинов, таких как Insert Headers and Footers или Code Snippets. Они позволяют добавить скрипты в нужные области сайта без необходимости редактирования каждой статьи вручную. Вы можете разместить код в шапке, подвале или в определённых местах контента.
Также можно создать шорткод, который будет выводить необходимый скрипт. Для этого нужно добавить функцию в файл functions.php вашей темы. Пример того, как создать шорткод:
<?php
function my_custom_script() {
return '<script src="URL_вашего_скрипта.js"></script>';
}
add_shortcode('my_script', 'my_custom_script');
?>Теперь, чтобы вставить ваш скрипт в статью, достаточно использовать шорткод [my_script]. Это значительно упрощает процесс и позволяет избежать дублирования кода.
Помимо этого, стоит обратить внимание на гаджеты WordPress, которые также могут быть использованы для вставки кода в боковые панели или другие области вашего сайта.
Что такое JavaScript?
JavaScript представляет собой язык программирования, который работает не на сервере, а непосредственно в браузере пользователя. Это даёт возможность добавлять различные функции на сайт, не замедляя его работу. Например, чтобы интегрировать видеоплеер, калькулятор или любую другую стороннюю услугу, достаточно просто скопировать и вставить необходимый код JavaScript на свою страницу.
Пример типичного кода на JavaScript может выглядеть следующим образом:
Теперь, если вы добавите определённый фрагмент кода в содержимое записи или страницы на платформе WordPress, он будет удалён при сохранении.
С помощью JavaScript разработчики могут создавать интерактивные элементы на веб-страницах, такие как выпадающие меню, слайдеры изображений и формы обратной связи. Это также позволяет обрабатывать данные, введенные пользователями, без необходимости обновления страницы, что значительно улучшает пользовательский опыт. Кроме того, JavaScript активно используется в библиотеке и фреймворках, таких как React, Vue.js и Angular, что делает его незаменимым инструментом для современных веб-разработчиков.
Важно отметить, что JavaScript является кроссплатформенным языком. Это означает, что он может работать на различных устройствах и платформах, включая десктопы, мобильные телефоны и планшеты. Это открывает бесконечные возможности для создания адаптивных и многофункциональных веб-приложений.
Наконец, сообщество JavaScript активно развивает стандарты, чтобы язык оставался современным и соответствовал требованиям времени, так что его возможности постоянно растут.
Как быстро вставить любой скрипт в статью?
К сожалению, стандартные инструменты для упрощения процесса вставки кода в контент WordPress отсутствуют. Поэтому мы будем использовать внешние решения. Разберем несколько простых методов.
Метод 1. Плагин Shortcoder
Для начала необходимо добавить нужный код и сохранить его для последующего использования. Для этого нажмите на кнопку Create a new shortcode.
В поле Name следует ввести название для сохраняемого кода, а в большом текстовом блоке ввести сам код, который вы хотите сохранить.
Настройка 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.
После того, как вы обновите страницу или запись с помощью кнопки Обновить, добавленный вами код будет выполнен и представлен на экране.
Важно отметить, что один и тот же код можно использовать столько раз, сколько необходимо. Это позволит вам добавлять нужное количество кодов и вставлять их в необходимых местах.
Иногда может возникнуть необходимость вставить фрагмент кода JavaScript на ваш сайт, чтобы интегрировать внешний инструмент. Эти скрипты, как правило, размещаются в разделе заголовка или перед закрывающим тегом вашего сайта. Это необходимо для того, чтобы код загружался при каждом переходе на страницу. Например, код Google Analytics должен присутствовать на всех страницах сайта для отслеживания посетителей. Вы можете добавить его в файлы header.php или footer.php вашей темы WordPress. Однако при обновлении темы такие изменения могут быть потеряны. Для решения этой проблемы существует бесплатный плагин Insert Headers and Footers. После его установки и активации, откройте админ-панель и перейдите в раздел Настройки -> Insert Headers and Footers. На открывшейся странице настроек вы увидите две области для вставки кода: первая для “шапки”, вторая для “подвала”.
Теперь вы можете вставить скопированный JavaScript-код в одно из этих полей, а затем нажать Save. Таким образом, плагин будет автоматически добавлять вставленный код на каждой странице вашего сайта.
Способ 3. Ручной способ
Данный метод подразумевает добавление кода в основной файл конфигурации активной темы WordPress – functions.php.
Если вы не уверены, как редактировать functions.php, вы можете воспользоваться плагином ProFunctions.
Сначала давайте рассмотрим, как внести код в заголовок сайта WordPress (wp_head). Для этого в указанный файл нужно вставить следующие строки:
function site_javascript_in_header() < ?> add_action( 'wp_head', 'site_javascript_in_header' );
Предположим, вы хотите загрузить JavaScript-код только на определенной записи. Для этого нужно упростить код с помощью условной логики.
function site_javascript_in_header() < if ( is_single ( '16' ) ) < ?> > add_action( 'wp_head', 'site_javascript_in_header' );
Если более детально изучить приведенный код, можно заметить, что JavaScript обернут в условие, относящееся к конкретному идентификатору (ID) записи. Вы можете заменить “16” на нужный вам ID. Обратите внимание, что данный код работает только для записей, страницы он не затрагивает.
Рассмотрим аналогичный пример, который подходит для страниц.
function site_javascript_in_header() < if ( is_page ( '10' ) ) < ?> > add_action( 'wp_head', 'site_javascript_in_header' );
Мы можем модифицировать предыдущий код, чтобы добавить JavaScript-код в раздел “подвала” вашего сайта.
function site_javascript_in_footer() < ?> add_action( 'wp_footer', 'site_javascript_in_footer' );
Вместо подсоединения функции к wp_head, теперь она подключена к wp_footer. Также можно использовать этот метод с условными тегами для добавления JavaScript в определенные записи или страницы.