How to add custom javascript to your wordpress site

Как добавить javascript в wordpress

Как добавить пользовательский JavaScript на Свой сайт WordPress?

Post author: admin
Запись опубликована: 25 ноября, 2021
Post category: JavaScript язык программирования

Когда вы хотите изменить тему своего сайта, одна вещь, которую необходимо сделать, — это добавить в него пользовательский JavaScript. Однако есть и другие доступные варианты, если вы не хотите добавлять его на свой сайт. Например, просто добавьте «Сценарий верхнего и нижнего колонтитулов» в качестве опции, которая гораздо менее навязчива по сравнению с другими.

Ну, эта статья не о различных альтернативах, а в основном о JavaScript, который можно добавить на ваш сайт WordPress. Как вы можете точно выполнить эту задачу? Мы поделимся с вами подробностями в разделе ниже.

Опции для добавления JavaScript на сайт WordPress

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

1. Добавьте Пользовательский файл JavaScript

Прежде всего, вы должны сохранить файл в формате .js. После этого вы можете добавить это в папку http://wp-content/themes/your-theme/js/. Когда вы сделаете это, перейдите в настройки, где перед вами будут два варианта. Вы можете добавить его либо в верхний, либо в нижний колонтитул. Вот как это может быть просто.

2. Добавьте Пользовательский JavaScript Без Файла

Эта опция проста для добавления пользовательского JavaScript без файла. Вам не нужно сохранять этот файл в формате .js. Скорее, вы можете напрямую загрузить его в папку http://wp-content/themes/your-theme/js/. Заголовок будет местом, куда вы его добавите, а затем перейдете к настройкам сохранения, когда завершите процесс.

Одна Вещь, Которую Ты Никогда Не Должен Делать

Хотя совершенно очевидно, что гораздо лучшим вариантом для добавления пользовательского JavaScript на ваш сайт WordPress является использование тега «СКРИПТ». Это добавляется непосредственно в заголовок или footer.php. Однако вам никогда не следует этого делать. Поскольку WordPress имеет определенную последовательность загрузки, поэтому эту последовательность необходимо соблюдать, и эта опция не должна использоваться.

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

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

Вывод

Как вы можете видеть, пользовательский JavaScript нетрудно добавить на сайт WordPress. Это займет несколько минут, если вы знаете, как это сделать. Мы подробно объяснили информацию, в которой вы узнаете о каждом пункте. Следуйте шаг за шагом и не вносите изменения самостоятельно.

30 ноября, 2021

Подключаем файлы с скриптами и стилями к теме wordpress с помощью плагина zia3-css-js

Функционал данного плагина позволяет подключить файлы глобально ко всему сайту или только к отдельной странице, или записи блога. Загрузите файлы со стилями и скриптами в соответствующие папки вашей темы wordpress. Вам не нужно ничего прописывать в functions.php, просто установите плагин и активируйте его. Далее идите на любую страницу и прокрутите ее вниз. Там вы увидите список не подключенных и подключенных файлов. Поставьте галочки в чекбоксы напротив файлов, которые следует подключить. Если стили нужно вставить только для какой-то одной страницы, то вставьте их в соответствующее поле. Для ccs будет одно поле, а для java script другое. Обновите страницу

Правильный путь подключения файлов css и js к wordpress

Правильный способ подключения стилей и скриптов состоит в том чтобы подключить их через систему регистрации wordpress в файле functions.php. Для этого используется специальная функция для регистрации и подключения стилей и скриптов. Называется она wp_register_style().

Подключенный таким образом стили потом можно легко объединить и сжать в один файл с помощью плагинов кеширования. Ниже приведен пример кода, с помощью которого были зарегистрированы и поставлены в очередь на подключение в header документа файлы со стилями css.

На примере видно что я подключил файл со стилями библиотеки bootstrap и файл custom.css с собственными стилями. Вы можете скопировать этот код, вставить в свой файл functions.php и изменить названия файлов и пути к ним. Так же обязательно измените идентификаторы файлов со стилями. Идентификатор это каждый первый параметр этой функции, например: wp_register_style (‘bootstrap‘). Он должен быть уникальным для каждого файла со стилями иначе wordpress его не увидит. Проверить подключение можно нажав на ctrl+U и посмотреть исходный код страницы. На скриншоте ниже видно что файлы успешно подключены.

Таким же образом подключаю второй файл со скриптами, тольк в этом случае сделаю это с помощью функции wp_register_script() :

Если в коде страницы скрипты вы не обнаружите значит, они не подключились. Скорее всего, вы совершили какую-то ошибку и нужно внимательно всё посмотреть ещё раз.

How do you add JavaScript to WordPress pages and posts?

We’ll take a look at three options for adding JavaScript to WordPress:

Disable WordPress filtering of script tags
Using a plugin to enable script loading
Using Advanced Custom Fields

Let’s get into the details.

Method 1: Disable WordPress filtering of script tags

If you trust that your authors won’t get themselves into trouble, you can disable the blocking of script tags from within JavaScript. In wp-config.php within your root web directory, you’ll need to enable custom tags by adding the following line of code:

define( 'CUSTOM_TAGS', true );

Within your functions.php page, you can add the following code:

function add_scriptfilter( $string ) {
global $allowedtags;
$allowedtags = array( 'src' => array () );
return $string;
}
add_filter( 'pre_kses', 'add_scriptfilter' );

Note: Once again, we have to warn against using the above method. Enabling the script tag via this method disables the security feature sitewide for any user permission level.

Method 2: Use a plugin to enable script includes

There are plenty of WordPress JavaScript plugins out there for managing your pages or posts. At times, you will need to load your JavaScript within the <head> tags of the page or after your content adjacent to your </body> tag.

Sometimes you may wish to load JavaScript sitewide; other times specific to a single page or post. After testing many of the plugins, the most comprehensive plugin we found was Scripts n Styles.

The plugin allows you to include scripts at a global level, sitewide:

Or you may insert scripts at the page or post level:

The plugin allows you to include both an external script source or to copy and paste your own JavaScript within the <head> tags or above the </body> tag.

If you’re using this plugin, you may wish to modify user permissions and incorporate contributors much more than authors. Authors would be able to publish the post and put the JavaScript live; contributors would only be able to save the posts without publishing them.

Method 3: Use Advanced Custom Fields

Advanced Custom Fields is a widely used plugin that allows you to implement custom fields without having to develop a ton of code.

With more than 1 million installations, Advanced Custom Fields is a proven, well-developed, and well-supported plugin.

Install and activate the plugin and you will have a new menu option in your Administrative menu called “Custom Fields.” Our goal with this example is to add a field that’s available only to administrators that will embed either a JavaScript source file or JavaScript code within the head or before the closing body tag.

1. Navigate to Custom Fields > Custom Fields and click Add New.

2. Name your Field Group. We named ours JavaScript Settings.

3. We enabled a rule to display the option only if the logged in user type was Administrator, ensuring that the fields could only be applied by an administrator of the site.

4. We’d like to display the fields in a section beneath the content area on the text editor, so we’re going to select Standard on the style of the Field Group.

5. Now we need to add our Header Script and Footer Script custom fields and output them correctly. There are two key settings; the field name that will be referenced later in the template code and the formatting. You must set the formatting to the “Convert HTML into tags” option so that the contents that are pasted are properly executed in the template.

At this point, the fields will properly display within the Administration panel when an administrator is logged in. Any data entered will be saved and associated with the page or post once it’s saved or published. However, they will not display within the template until you edit your template files.

6. Within header.php in the active template, we will add:

<?php the_field(‘header_script'); ?>

before the </head> tag.

Within footer.php in the active template, we will add:

<?php the_field(‘footer_script'); ?>

before the </body> tag.

7. Save the template files, update the page or post that you’ve specified JavaScript in, and click publish. The page or post will now be published with the JavaScript properly inserted into the template.

The Advanced Custom Fields option offers quite a bit of functionality. You may want to define your rules specific to certain users, published pages, or page templates rather than Administrators and all posts and pages. We’d highly recommend narrowing down access to adding scripts to only the pages, posts and users that they are required for.

3 способа добавления CSS и JavaScript файлов

1. Использование параметров темы

Если вам нужно в Wordpess добавить Javascript и CSS коды для быстрой настройки сайта, то можно использовать параметры темы. Некоторые темы имеют встроенную функцию, с которой легко получить доступ с панели инструментов WordPress.

ПЛЮСЫ:

Лучший способ настроить маленькие вещи с помощью CSS и Javascript
Лучший способ в WordPress добавить Javacscript и CSS малого и среднего размера
Никакой настройки и установки не требуется — она уже встроена!

МИНУСЫ:

Сложнее поддерживать и обновлять
Вы не можете добавлять файлы напрямую (файлы .css или .js извне), если не знаете кодировки html и php.
Нельзя выбрать, будет ли код помещен в wp_header или wp_footer.

2. Использование плагина

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

В отличие от встроенного решения, вы можете добавить теги <script> </ script> в плагин Insert Headers and Footers.

Insert Headers and Footers by WPBeginner

Author(s): WPBeginner

Current Version: 1.6.0

Last Updated: 12.07.2021

ПЛЮСЫ:

Можете выбрать код местоположения
Отличная альтернатива встроенному решению
Быстрый и простой способ добавить пиксель Facebook или пользовательские коды Google Analytics.
Отличный способ для сторонних интеграций

МИНУСЫ:

Нужна установка и настройка плагина
Трудно поддерживать и обновлять
Вы не можете добавлять файлы напрямую, как в встроенной функции.

3. Использование дочерней темы

Рекомендую использовать «Дочернюю тему», если вы хотите внести изменения в средних и крупных маштабах, потому что это самый безопасный способ настройки вашего веб-сайта. С дочерней темой вы сможете поддерживать свои коды и легко обновлять файлы основной темы.

Можете начать добавлять свои CSS-коды и настраивать свой веб-сайт прямо из раздела «Внешний вид»> «Редактор». Если вы хотите добавить внешние CSS-файлы и файлы Javascripts, то вы должны вызвать их и написать несколько строк кода в файл functions.php. Также и для отключения JavaScript в WordPress необходимо редактировать этот файл.

Вот как это необходимо выполнять:

Подготовьте свои CSS или Javascript файлы, если это удаленный источник, подготовьте ссылку.
Создайте файл с именем functions.php, если его нет в наличии
Добавьте следующий код в functions.php

function add_theme_codes() {
wp_enqueue_style(‘style’, get_stylesheet_directory_uri().’/Имя_файла.css’, ‘all’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’);

1
2
3
4

functionadd_theme_codes(){

wp_enqueue_style(‘style’,get_stylesheet_directory_uri().’/Имя_файла.css’,’all’);

}

add_action(‘wp_enqueue_scripts’,’add_theme_codes’);

С помощью этого кода вы создаете новое действие для таблицы стилей и вызываете его из каталога дочерней темы. Допустим, у вас есть файл «custom.css», который необходимо добавить на сайт.

С начало загрузите файл в директорию wp-content/themes/name-child через FTP, а затем создайте файл functions.php. После добавьте приведенный выше код и замените «/Имя_файла.css» на «custom.css» или любое другое имя нужного вам файла. В завершающем этапе вы должны добавить файл functions.php и в свою дочернюю тему.

function add_theme_codes() {
wp_enqueue_style (‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’, ‘all’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’);

1
2
3
4

functionadd_theme_codes(){

wp_enqueue_style(‘style’,’https://code.jquery.com/jquery-3.2.1.js’,’all’);

}

add_action(‘wp_enqueue_scripts’,’add_theme_codes’);

В приведенном выше примере мы не использовали get_stylesheet_directory_uri(), поскольку исходный файл удален. Кроме того, вы можете вызывать различные файлы с вашего сервера, используя ссылки, подобные приведенным выше.

ПЛЮСЫ:

Лучший для всех видов настроек
Лучше всего для сторонних и комплексных интеграций
Легко поддерживать и редактировать
Вы можете добавлять локальные или удаленные файлы напрямую
Один из самых безопасных способов обновления

МИНУСЫ:

Нужно немного настройки
Требует немного знаний кодирования (или вы должны быть готовы учиться)
Не самый быстрый способ для небольших настроек

Используйте надежный фреймворк/тему

За каждым WordPress-сайтом лежит тема или фреймворк, и это иногда может приводить к проблемам. Каждая тема написана по-разному, и потому одни зачастую темы лучше, чем другие. Дефолтные WordPress-темы типа Twenty Fifteen, очень быстрые, потому что легковесные.

Будьте осторожны, когда покупаете темы на таких мега популярных сайтах, как ThemeForest и Creative Market. Несмотря на то, что там много великолепных тем, вы должны понимать, что разработчики часто добавляете функции просто, чтоб увеличить продажи. Так что главное — найти правильных разработчиков. И именно о таких мы не раз писали на страницах этого сайта.

Так же, такие легкие фреймворки, как Thesis Theme framework и Genesis также известны тем, что на их основе разрабатываются быстрые и хорошо написанные темы.

Часто задаваемые вопросы

Как добавить файл Javascript в WordPress?

Самый простой способ добавить файл Javascript в WordPress — использовать плагин «Вставить верхние и нижние колонтитулы».

Войдите на свой сайт и установите плагин Headers and Footers.
После того, как он установлен, нажмите Активировать
Сохраните код JavaScript или файл в новый файл с расширением .js .
Загрузите его на свой сайт в следующую папку:
Перейдите в «Настройки» > «Вставить верхние и нижние колонтитулы».
Добавьте следующее к сценариям в заголовке:

Могу ли я использовать Javascript в WordPress?

Да, есть много способов использования Javascript в WordPress. Если вы хотите добавить простой скрипт, вы можете использовать плагин «Headers and Footers», чтобы добавить скрипт в заголовок, а затем вызвать скрипт из любой части темы, сообщения или плагина, из которого вы хотите его использовать.

Как добавить свой собственный код в WordPress?

Лучший способ добавить свой собственный код в WordPress — это файл functions.php. Рекомендуется создать дочернюю тему, а затем добавить собственные изменения в дочернюю тему, чтобы не нарушать возможность обновления вашей темы.

Как мне отредактировать Javascript в WordPress?

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

Регистрация кода JavaScript

Перед регистрацией вашего кода JavaScript нужно определиться с несколькими параметрами:

идентификатор файла (то есть имя, под которым WordPress будет знать ваш код);
зависимость от других скриптов и библиотек (например, от jQuery);
номер версии (не обязательно);
где будет вставляться код из файла в страницу HTML (заголовок или нижний колонтитул).

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

Примеры

Для иллюстрации силы функций будем использовать пример двух фалов JavaScript.

Первый будет называться base.js, который содержит некоторую функцию:

function makeRed(selector){
  var $ = jQuery; //используем псевдоним $ в данном контексте
  $(function(){
    $(selector).css('color','red');
  });
}

Файл base.js зависит от jQuery. Версия данного фала будет 1.0.0, а включать его нужно в нижний колонтитул.

Второй файл custom.js использует код JavaScript на сайте:

makeRed('*');

Файл custom.js вызывает функцию, определенную в файле base.js, то есть зависит от него.

Как и base.js, custom.js будет иметь версию 1.0.0 и включается в нижнем колонтитуле страницы.

Файл custom.js также неявно зависит от jQuery. Но в данном случае нет необходимости указывать зависимость.

Зарегистрируем наш код JavaScript с помощью функции . Она принимает следующие аргументы:

строка, идентификатор файла
строка, источник файла
массив (опционально), зависимости
строка (опционально), номер версии
true/false (опционально, по умолчанию false), флаг размещения фала в нижнем колонтитуле

При регистрации скриптов лучшим методом является использование крючка для выполнения операции один раз для всех скриптов.

Для регистрации скриптов в нашем примере нужно добавить следующий код в файл темы functions.php:

function mytheme_register_scripts() {
  //base.js – зависит от jQuery
  wp_register_script(
    'theme-base', //идентификатор
    '/wp-content/themes/my-theme/base.js', //источник
    array('jquery'), //зависимости
    '1.0.0', //версия
    true //выполняем в нижнем колонтитуле
  ); 

  //custom.js – зависит от base.js
  wp_register_script(
    'theme-custom',
    '/wp-content/themes/my-theme/custom.js',
    array('theme-base'),
    '1.0.0',
    true
  );
}
add_action('init', 'mytheme_register_scripts');

Регистрировать jQuery не нужно.

Выполнение регистрации не включает никакого кода JavaScript в код HTML.

Чтобы внести добавить соответствующий вывод в код HTML, нужно включить наши файлы в очередь. В отличие от регистрации, включение в очередь выполняется очень коротким кодом.

Primary Sidebar

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Download Now

I need help with …
Starting a Blog
WordPress SEO
WordPress Performance
WordPress Errors
WordPress Security
Building an Online Store

Useful WordPress Guides

24 Must Have WordPress Plugins for Business Websites
7 Best Email Marketing Services for Small Business (2022)
5 Best Drag and Drop WordPress Page Builders Compared
30 “Proven” Ways to Make Money Online Blogging with WordPress
How Much Does It Really Cost to Build a WordPress Website?
Free Recording: WordPress Workshop for Beginners

How to Choose the Best WordPress Hosting for Your Website
How to Choose the Best Blogging Platform (Comparison)
How to Choose the Best Domain Registrar (Compared)
How to Register a Domain Name (+ tip to get it for FREE)
How to Create a Free Business Email Address in 5 Minutes (Step by Step)
How to Install WordPress — Complete WordPress Installation Tutorial

5 Best Contact Form Plugins for WordPress Compared
Which is the Best WordPress Popup Plugin? (Comparison)
5 Best WordPress Membership Plugins (Compared)
7 Best WordPress Backup Plugins Compared (Pros and Cons)
5 Best WordPress Ecommerce Plugins Compared
12 Best Live Chat Software for Small Business Compared (2022)

Best WooCommerce Hosting in 2022 (Comparison)
The Truth About Shared WordPress Web Hosting
When Do You Really Need Managed WordPress Hosting?
HostGator Review — An Honest Look at Speed & Uptime (2022)
SiteGround Reviews from 4464 Users & Our Experts (2022)
Bluehost Review from Real Users + Performance Stats (2022)

How to Properly Move Your Blog from WordPress.com to WordPress.org
How to Properly Move WordPress to a New Domain Without Losing SEO
How to Switch from Blogger to WordPress without Losing Rankings
How to Properly Switch From Wix to WordPress (Step by Step)
How to Properly Move from Squarespace to WordPress
How to Move WordPress to a New Host or Server With No Downtime

6 Best Business Phone Services for Small Business (2022)
How to Create an Email Newsletter the RIGHT WAY (Step by Step)
64 Best Free WordPress Blog Themes for 2022
How to Install Google Analytics in WordPress for Beginners
14 Best WordPress SEO Plugins and Tools That You Should Use
How to Choose the Best Website Builder in 2022 (Compared)

Why You Should Start Building an Email List Right Away
Why is WordPress Free? What are the Costs? What is the Catch?
What’s the Difference Between Domain Name and Web Hosting (Explained)
WordPress.com vs WordPress.org – Which is Better? (Comparison Chart)
How to Properly Move WordPress from HTTP to HTTPS (Beginner’s Guide)
How to Code a Website (Complete Beginner’s Guide)

Deals & Coupons (view all)

Знает ли WordPress о вашем скрипте и его потребностях?

Вот некоторые вещи, о которых вам нужно подумать, когда вы пишете JavaScript для WordPress:

Есть ли уже включенная библиотека, которую я могу использовать?
Могу ли я использовать включенную версию?
Нужно ли мне загружать мой скрипт в клиентскую и администраторскую часть?
На каких страницах клиентской и администраторской части мне нужно загружать мой скрипт?

Ответы на эти вопросы помогут вам узнать, что вам нужно сделать, чтобы зарегистрировать и загрузить ваш скрипт. Это происходит с помощью WordPress функции wp_register_script, и вот как ее нужно использовать согласно WordPress Codex:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Так что это за переменные и нужны ли они нам все время? Это описано на странице Codex, так что я коротко опишу:

$handle — ее вы будете использовать для того, чтобы ссылаться на этот конкретный скрипт, когда вам нужно будет добавить его в очередь, и вам нужно вставлять эту переменную в самом конце.
$src — путь к исходному файлу вашего плагина или темы.
$deps — массив, который включает $handle для всех скриптов, которые могут понадобиться вашему скрипту (то есть, зависимости).
$ver — номер версии вашего скрипта, которая может быть использована для уничтожения кэша. По умолчанию, WordPress будет использовать свою версию в качестве версии вашего скрипта.
$in_footer — вы хотите, чтобы ваш скрипт загружался в подвале? Установите значение этой переменной true или false. По умолчанию оно установлено в false, так что скрипт загружается в шапке, где wp_head(), а если вы укажете true, скрипт будет загружаться в подвале, где в теме указан wp_footer().

Что такое “уничтожение кэша”?

Браузеры запоминают, какие скрипты и таблицы стилей они загружали для конкретного сайта, основываясь на URL скрипта и таблиц стилей. Если вы измените URL, даже просто добавив туда запрос, браузер предположит, что это новый файл, и загрузит его.

Хостинг для демо

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

Размещение базы данных MySQL может осуществляться тысячами способов, поэтому я оставлю эту часть на ваше усмотрение и сосредоточусь на размещении только экземпляра WordPress и приложения Vue.

Вот как это сделать с Heroku:

Зайдите в их панель и создайте новый проект.

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

Затем измените строки подключения к базе данных. Это можно сделать очень легко в файле wp-config.php со следующими атрибутами:

define( 'DB_NAME', '{YOUR_DB_NAME}' );
define( 'DB_USER', '{YOUR_DB_USER}' );
define( 'DB_PASSWORD', '{YOUR_DB_PASSWORD}' );
define( 'DB_HOST', '{YOUR_DB_HOST}' );

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

Ура, вам нужно только разместить ваше приложение Vue, и все будет готово!

Я воспользовался бесплатным аккаунтом Netlify, что означает, что он перенесет демо в публичное репо и подключит его к проекту Netlify.

Итак, после того, как запушили код, перейдите на панель инструментов Netlify и используйте следующую конфигурацию для сайта:

Taдa!

Просто измените свой метод fetch, чтобы он указывал на ваш новый экземпляр Heroku (а не на ваш локальный хост), и все готово.

Приложение будет извлекать данные из вашего экземпляра Heroku, который сам подключен к вашей удаленной базе данных. Он проанализирует данные и отправит их обратно клиенту, чтобы отобразить маркеры на карте.

Заключение

Mapbox также впечатляет. Это был мой первый раз, когда я игрался с Maps API, и это отличный сервис, с хорошей документацией. Всегда круто пробовать что-то новое.

Должно быть, я потратил 2-3 часа на все это!

Вы можете попробовать свою интеграцию, чтобы определить более сложные объекты, что займет немного больше времени, но сама идея останется прежней! Таким образом, мы могли бы визуализировать гораздо больше, чем просто маркеры, и сделать нашу карту более насыщенной.

Любые вопросы? Не стесняйтесь оставлять комментарии, чтобы высказать свои мысли, отзывы и вопросы. Если вам понравился этот пост, уделите секунду или поделитесь им в Twitter!

Spread the love

5
Поделились

Выход за рамки простого плагина

Если вы все же это сделали, то, надеюсь, мы сойдемся во мнении, что создать простой плагин WordPress относительно легко. Но что, если вы хотите создать плагин, который делает больше, чем просто выполнение одной простой задачи?

Действия и фильтры в WordPress

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

Все это, вы можете почитать в кодексе WordPress.

Вот некоторые ссылки на кодекс wordpress:

API плагинов: хуки, действия и фильтры
API плагинов: Справка по action
API плагинов: список фильтров

Conclusion

The above three methods are the cleanest way to add Javascript to WordPress. In general, tweaking the code directly should be done by advanced users who have significant code experience and can be sure they know how to revert any changes they’ve made. Otherwise, it is best to stick to plugins. If you’re not comfortable tweaking the code yourself, it would be great to get in touch with our partners on Fiverr who can get it done for your today

About the Author

Author: David AttardWebsite: https://www.linkedin.com/in/dattard/

David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

Post a Comment
One more thing…
Did you know that people who share useful stuff like this post look AWESOME too? ;-)Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let’s reap the benefits together. Thank you for sharing and being nice!Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.
View the discussion thread.

Как избежать этих проблем?

Просто не трогайте . В папке с темой есть файл functions.php в который нужно добавить следующий код.

<?php
if ( !is_admin() ) {
	function register_my_js() {
		wp_enqueue_script( 'my-script', get_bloginfo( 'template_directory' ).'/my-script.js', array( 'jquery' ), '1.0', true );
	}
	add_action('init', 'register_my_js');
}
?>

Этот код подключит скрипт на всех страницах сайта, кроме админки. Если нужно подключать скрипт только на части страниц, можно в условие проверки добавить , и т.д.

Кроме того, библиотеку jQuery явно подключать не нужно, т.к. она указана в массиве зависимостей (третий параметр ). WordPress подключит её сам до вашего плагина.