Самый эффективный метод добавления встроенных скриптов в WordPress

Опубликовано: 2022-06-16

The Most Effective Method for Adding Inline Scripts in WordPress

Встроенные скрипты — это два простых слова, от которых у разработчиков мурашки по коже. Встроенные скрипты — это простой способ добавить JavaScript (JS), CSS и HTML в текст вашего сообщения WordPress. Хотя их можно использовать для многих целей, одно из основных применений — внесение изменений на лету при публикации новой статьи WordPress. Некоторые могут возразить, что в этом нет необходимости, но это обеспечит бесперебойную и эффективную работу вашего сайта.

Одна вещь, которую упускают из виду большинство пользователей WordPress, — это добавление скриптов на свои сайты. Если вы хотите внедрить встроенный текст на одной странице или на всем веб-сайте, существует множество способов сделать это с помощью WordPress. Добавление встроенных скриптов на ваш веб-сайт WordPress может быть таким же простым, как только вы поймете, как правильно это сделать. В этом сообщении блога будут обсуждаться наиболее эффективные способы легкого добавления встроенных скриптов в WordPress. Продолжайте читать, чтобы узнать больше.

Добавление через Wp_print_scripts

Если вы хотите добавить встроенные тексты WordPress, то вам подойдет функция WordPress wp_print_scripts или/и admin_print_scripts. WordPress wp_print_scripts может отображать текстовые теги в заголовке документа, что обычно делается при включении файлов JS или CSS. Эта функция WordPress позволит вам сделать ваш сайт более интерактивным или добавить новые функции. Как и в случае с любой функцией WordPress, есть несколько простых правил, которым необходимо следовать, прежде чем использовать ее на своем веб-сайте.

Эта функция устанавливает три переменные на основе параметров плагина WordPress и выводит их во внешнем интерфейсе (раздел заголовка) с помощью хука admin_print_scripts. Чтобы добавить встроенные символы в область администратора, вы также можете заменить wp_print_scripts функцией admin_print_scripts и на этом закончить.

Когда WordPress устанавливается впервые, он поставляется со многими текстами, которые автоматически добавляются на сайт. Это может привести к увеличению времени загрузки и загрузки ЦП на вашем сервере. Одним из способов борьбы с этим является использование функции wp_print_scripts, поэтому вы загружаете тексты только тогда, когда они необходимы или желательны. Тем не менее, давайте кратко рассмотрим некоторые плюсы и минусы использования функции wp_print_script для добавления встроенных символов в ваш пост WordPress:

Плюсы:

  • Всегда просто добавить любой встроенный текст в «заголовок» страниц WordPress;
  • Код, который вы добавляете, не будет иметь никаких ограничений, что означает, что вы можете добавлять переменные JS, функции, методы, условные операторы или все, что вы хотите добавить на свой сайт.

Минусы:

  • Не существует специального способа связать добавленный вами код с зарегистрированными скриптами;
  • В большинстве случаев выходной код на различных факторах может не быть реальным и непротиворечивым способом управления расположением выходного кода. Однако вы всегда можете использовать параметр <priority> в разделе <add_action> для управления расположением вашего добавленного кода.

Используйте функцию wp_add_inline_script()

Недавно WordPress запустил новую функцию, применяемую для добавления встроенного JavaScript в сообщения WordPress. Однако эта новая интеграция совместима, начиная с версии WordPress 4.5, и это более заметный способ добавления встроенных текстов по сравнению с другими доступными вариантами. Мы определяем функцию wp_add_inline_script(), и вы ожидаете, что она безупречно выполнит свою работу. Даже самый опытный разработчик WordPress может подтвердить этот факт.

Функция wp_add_inline_script() — это способ добавить встроенные символы на ваш сайт без редактирования какого-либо кода на странице WordPress. Это позволяет вам вносить изменения в режиме реального времени без необходимости доступа по FTP или использования плагина. Эта функция также является одной из основных интеграций, которые вы можете использовать для настройки своего сайта WordPress. Процедура позволяет вам добавлять встроенные тексты в код вашего веб-сайта, что означает, что они будут добавлены непосредственно в теги HTML на вашей веб-странице. Это дает гораздо больше возможностей для настройки, чем использование внешних JS-файлов или ссылок на другие веб-сайты.

Плюсы:

  • Функция wp_add_inline_script() — это ценный способ добавления встроенных символов в ваш блог WordPress;
  • Это может быть простой и удобный способ для разработчиков добавить код JS без изменения темы WordPress или файлов плагинов или редактирования файла шаблона header.php;
  • Это может быть полезно для добавления скриптов, таких как код Google Analytics. Это избавляет вас от необходимости редактировать файл header.php каждый раз при обновлении функций или настроек Google Analytics.

Минусы:

  • Единственным недостатком функции wp_add_inline_script() является то, что она доступна только начиная с версии WordPress 4.5.

Используйте функцию wp_localize_script()

Функция wp_localize_script() — это полезная утилита WordPress для добавления встроенных символов на отдельные страницы вашего веб-сайта WordPress. Это идеально, если вам нужны быстрые и временные функции на ваших сайтах, такие как событие или рекламная акция. Эта функция принимает переменное количество аргументов и выводит список строк JS, добавленных в заголовок документа. Это может быть полезно, если, например, вы используете jQuery и хотите, чтобы код скрипта размещался только на определенных страницах.

Wp_localize_script() помещает ваш JS-файл в очередь и дает ему идентификатор/дескриптор «shapeSpace_script», который определяет ассоциативный массив, содержащий ваши переменные. Наконец, эти переменные JS передаются в wp_localize_script() для включения в зарегистрированный shapeSpace_script. В результате он позволяет вам применять любые переменные JS, такие как shapeSpace.varl и другие. Эта функция предназначена для локализации переменных JS для использования с языковым переводом и интернационализацией. Тем не менее, большинство разработчиков WordPress используют его как обычный способ добавления встроенных символов на свои сайты.

Плюсы:

  • Wp_localize_script() включает ассоциацию «read:require» с вашим существующим зарегистрированным скриптом. Это означает, что он обеспечивает отличный и последовательный способ управления относительным расположением пользовательского текстового вывода вашего веб-сайта.

Минусы:

  • Единственным недостатком является то, что вы можете добавлять только переменные JS ( var = 'value' ). Таким образом, невозможно добавить другие встроенные скрипты, такие как функции, условные операторы, уравнения и другие, с помощью wp_localize_script().

Использовать запасной вариант

Как упоминалось ранее, определенные методы, такие как wp_add_inline_script(), доступны только начиная с версии WordPress 4.5 или выше. Однако, собрав все вместе, вы можете создать надежный метод добавления встроенных символов в ваши файлы WordPress независимо от того, какую версию WordPress вы используете. Самый эффективный способ сделать это — использовать три функции в разделе заголовка (внешнего интерфейса) пост-плагина.

Первое, что нужно сделать, это поставить JS-файл в очередь и вызвать следующую функцию для добавления встроенных строк через функцию wp_add_inline_script(). Третья функция — это откат к чему-либо старше версии 4.5. Это, несомненно, будет работать на WordPress 4.5 и любой другой версии. Вот где происходит настоящее волшебство. Вы можете продолжить с резервным методом, который выполнит вашу работу над вариантом WordPress по вашему выбору, возвращаясь к 2.1 или чему-то еще.

Плюсы:

  • Вы можете иметь несколько JS-файлов на своем веб-сайте без добавления дополнительных HTTP-запросов для их одновременной загрузки. Это означает, что вы сможете сократить время загрузки для посетителей вашего сайта.
  • В случае сбоя одного сценария другие сценарии с той же резервной функциональностью будут по-прежнему работать, поскольку они загружаются асинхронно из разных потоков из-за их зависимости друг от друга.

Минусы:

  • При сбое скрипта пользователь в некоторых случаях увидит пустое место вместо кода. Может показаться, что это не так уж и важно, но это очень важно отметить как разработчика WordPress.

Резюме по добавлению встроенного скрипта в WordPress

Ограничение альтернативных методов, доступных в вашем распоряжении, делает функцию wp_add_inline_script() лучшим методом для добавления встроенных символов WordPress. В настоящее время это считается наиболее эффективным решением, и, вопреки распространенному мнению, эту функцию можно использовать в любой версии WordPress, если вы используете резервную технику. К вашему сведению, ниже приведен краткий обзор наиболее эффективных способов добавления встроенных скриптов в ядро ​​WordPress:

    • wp_add_inline_script() позволяет добавить любой JS-код в любой зарегистрированный скрипт;
    • wp_print_scripts или admin_print_scripts позволяет вам установить любой код в разделе интерфейса или заголовка;
  • wp_localize_script() также позволяет добавлять переменные JS в любой зарегистрированный скрипт;
  • Fallback позволяет создать полный метод, который точно работает с любой версией WordPress.

Примечание. Если вы хотите добавить встроенный стиль/CSS вместо JavaScript, WordPress предоставляет вам набор функций «добавить стиль», которые напоминают те, которые используются для добавления скриптов. Например, проверьте wp_print_styles и wp_add_inline_styles.

Вывод

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

Вы редактор WordPress с некоторым опытом добавления скриптов на сайты WP? Какой метод вы бы порекомендовали начинающему разработчику, который хочет быстро выполнить работу? Пожалуйста, не стесняйтесь использовать раздел комментариев, чтобы поделиться своим мнением и задать любые тревожные вопросы.

Биография автора:

Артур — специалист по цифровому маркетингу и бизнес-блогер. Он развивает интересные стартапы через различные социальные сети и делится своим опытом с клиентами, чтобы лучше продвигать их бизнес. В свободное время Артур изучает японский язык и пишет статьи о тенденциях цифровой трансформации.