Создание плагина Добавление в Избранное. Урок 3

Дата публикации: 2015-08-06

Создание плагина Добавление в Избранное

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

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

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

Создадим в папке плагина 3 папки: js, css и img для скриптов, стилей и картинок соответственно. В папке js создадим файл скриптов — wfm-favorites-scripts.js и пропишем в него тестовый код:

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

jQuery(document).ready(function($) {
 alert('Работает');
});

jQuery(document).ready(function($) {

alert('Работает');

});

В папке css создадим файл стилей wfm-favorites-style.css и пропишем пару простых правил для ссылки, добавляемой плагином:

p.wfm-favorites-link a{
 text-decoration: underline;
 text-decoration-style: dotted;
 border: none;
}
p.wfm-favorites-link a:hover{
 text-decoration: none;
}

p.wfm-favorites-link a{

text-decoration: underline;

text-decoration-style: dotted;

border: none;

}

p.wfm-favorites-link a:hover{

text-decoration: none;

}

Теперь давайте почистим главный файл плагина wfm-favorites.php. Сейчас в этом файле находится и хук и функция. Давайте создадим новый файл functions.php в корне папки с плагином и вынесем в него текущую и все следующие функции. Ну а в файле wfm-favorites.php подключим файл функций:

require __DIR__ . '/functions.php';
add_filter( 'the_content', 'wfm_favorites_content' );

1 2	require __DIR__ . '/functions.php'; add_filter( 'the_content', 'wfm_favorites_content' );

Если все сделано верно, то плагин должен работать без ошибок. Теперь подключим файлы стилей и скриптов. Для этого обратимся к еще одному хуку в файле wfm-favorites.php:

add_action( 'wp_enqueue_scripts', 'wfm_favorites_scripts' );

1	add_action( 'wp_enqueue_scripts', 'wfm_favorites_scripts' );

И опишем новую функцию в файле functions.php:

function wfm_favorites_scripts(){
 if( !is_single() || !is_user_logged_in() ) return;
 wp_enqueue_script( 'wfm-favorites-scripts', plugins_url('/js/wfm-favorites-scripts.js', __FILE__), array('jquery'), null, true );
 wp_enqueue_style( 'wfm-favorites-style2', plugins_url('/css/wfm-favorites-style.css', __FILE__) );
}

function wfm_favorites_scripts(){

if( !is_single() || !is_user_logged_in() ) return;

wp_enqueue_script( 'wfm-favorites-scripts', plugins_url('/js/wfm-favorites-scripts.js', __FILE__), array('jquery'), null, true );

wp_enqueue_style( 'wfm-favorites-style2', plugins_url('/css/wfm-favorites-style.css', __FILE__) );

}

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее