Больше результатов...

Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Post Type Selectors
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

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

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

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!

Асинхронный JavaScript

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

Что такое Ajax и как он работает?

Ajax объединяет несколько различных языков программирования, таких как HTML, CSS, JavaScript и другие. В действительности он работает за кулисами, чтобы принимать запросы от веб-браузера, отправлять их на сервер и передавать результаты обратно в браузер.

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

Чем полезен Ajax?

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

Как веб-пользователи, мы постоянно пользуемся преимуществами Ajax. Одним из примеров является функция автозаполнения поиска Google:

Функция автозаполнения поиска

Другие примеры, с которыми вы, возможно, знакомы, это комментарии в Facebook и лайки в Instagram. Ajax работает везде, где взаимодействуя с веб-страницей мгновенно получаете информацию в ответ.

Начало работы с Ajax в WordPress

Когда дело доходит до WordPress, есть несколько способов, где может пригодиться Ajax. Рассмотрим URL-адрес и то, как его использовать вместе с перехватчиками функций WordPress.

URL-адрес Ajax в WordPress

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

В WordPress ваш файл admin-ajax.php имеет URL-адрес. Он предоставляет информацию, необходимую для отправки данных для обработки, и имеет жизненно важное значение для разработки.

WordPress использует вызов wp_localize_script() для использования URL-адреса Ajax для подключения функций JavaScript и PHP, поскольку PHP не может напрямую отразить их без посторонней помощи.

Как использовать хук действий Ajax в WordPress

WordPress использует хуки в своем программировании, чтобы плагины и темы могли взаимодействовать с ядром WordPress. Хуки бывают двух видов: «действия» и «фильтры». С Ajax вы будете использовать обработчики действий для выполнения функций.

Действия позволяют добавлять данные в WordPress или изменять его работу. С Ajax нужно использовать действие wp_ajax_(action). Затем к нему можно подключить пользовательскую функцию, которая будет выполняться во время вызова Ajax.

Например, этот пример кода WordPress показывает, как вызов Ajax и объект JavaScript могут быть объединены в одном файле для выполнения действия:

<?php 

add_action( 'wp_ajax_my_action', 'my_action' );

function my_action() {
	global $wpdb; // this is how you get access to the database

	$whatever = intval( $_POST['whatever'] );

	$whatever += 10;

        echo $whatever;

	wp_die(); // this is required to terminate immediately and return a proper response
}

Вы также можете создавать отдельные файлы JavaScript для своих действий. Вам просто нужно обязательно использовать URL-адрес Ajax, чтобы вызовы не терялись.

Смотрите также:

Советы по ускорению загрузки сайта WordPress до 97%.

Как использовать Ajax, работая с плагином-примером (4 шага)

Если хотите поэкспериментировать с Ajax, лучше всего создать с ним плагин. К счастью, существует множество примеров кода или базовых плагинов, с которых можно начать. В примере ниже будем использовать загружаемый образец кода плагина WordPress Plugin Boilerplate.

Шаг 1. Создайте соответствующие файловые структуры

Сначала нужно назвать свой плагин и создать для него соответствующие файловые структуры. Имя должно быть уникальным и не конфликтовать ни с каким другим инструментом в каталоге плагинов WordPress. Потому, что когда пользователь загружает ваш плагин, он попадает в его каталог wp-content/plugins/.

После того, как определились с именем, нужно создать как минимум три следующих файла в собственном каталоге wp-content/plugins/:

  • имя-плагина.php
  • имя-плагина.js
  • имя-плагина.css

Файл .php нужно поместить в папку нового плагина и создать отдельные подпапки для файлов JavaScript и CSS, в которых будут храниться файлы. Все файлы, необходимые для работы вашего плагина, должны быть расположены в одной главной папке.

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

Шаг 2. Выберите для начала образец кода

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

Как упоминалось ранее, в нашем примере будем использовать WordPress Plugin Boilerplate. Пример кода поставляется вместе с файлами, которые понадобятся для завершения создания плагина. Этот образец плагина соответствует стандартам кодирования и документации WordPress. Чтобы начать работу с кодом, скачайте ZIP- файл из раскрывающегося меню Code:

Plugin Boilerplate

Шаг 3. Включите действия в свой код

Пример кода плагина, который мы используем, построен с помощью объектно-ориентированного программирования. Оно помогает программистам организовывать свой код и создает шаблон разработки, которым легко делиться и многократно использовать.

Кроме того, код поставляется со всеми файлами, необходимыми для разработки плагинов, включая файлы активации и деактивации в каталоге /includes/. Вы также обнаружите, что при необходимости легко найти общедоступные и административные файлы.

Давайте взглянем на наш образец плагина, просмотрев начало файла plugin-name.php:

<?php

/**
* The plugin bootstrap file
*
* This file is read by WordPress to generate the plugin information in the plugin
* admin area. This file also includes all of the dependencies used by the plugin,
* registers the activation and deactivation functions, and defines a function
* registers the activation and deactivation functions, and defines a function
* that starts the plugin.
*
* @link              http://example.com
* @since             1.0.0
* @package           Plugin_Name
*
* @wordpress-plugin
* Plugin Name:       WordPress Plugin Boilerplate
* Plugin URI:       
* Description:       This is a short description of what the plugin does. It’s displayed in the WordPress admin area.
* Version:           1.0.0
* Author:            Your Name or Your Company
* Author URI:        http://example.com/
* License:           GPL-2.0+
* License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain:       plugin-name
* Domain Path:       /languages
*/

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

Теперь нужно сделать несколько вещей, чтобы соединить все точки, в том числе:

  • Убедитесь, что URL-адрес Ajax доступен для вашего скрипта. Для этого можете использовать wp_localize_script().
  • Создайте класс plugin-name с классом Plugin-Name{} в файле plugin-name.php. Здесь будете определять свои хуки действий.
  • Создайте соответствующую функцию JavaScript в файле plugin-name.js.

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

if ( is_admin() ) {
    add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
    add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
    add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
    // Add other back-end action hooks here
} else {
    // Add non-Ajax front-end action hooks here
}

Обратите внимание на несколько вещей в этом примере.

Во-первых, эти действия будут доступны всем на сайте, вне зависимости от того, вошли они в учетную запись или нет. На это указывает вызов wp_ajax_nonpriv_().

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

Чтобы понять процесс, происходящий в этом наборе действий, также важно знать, что my_frontend_action вызовет PHP-функцию my_frontend_action_callback().

Шаг 4. Протестируйте и отладьте свой плагин

После того, как вы настроите все хуки действий и соответствующие функции, вы захотите протестировать и, возможно, отладить свой плагин (если есть какие-либо проблемы). Узнайте у вашего веб-хостинга, может ли он предложить инструмент отладки как часть своего пакета хостинга.

Из этой статье вы узнали об Ajax и принципах его работы, а также познакомились с тем, как начать работу с ним в WordPress, создав свой первый плагин.

Источник: wpengine.com

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Комментарии к записи: 0

Добавить комментарий