Как изменить Woocommerce с помощью дочерей темы. Часть 11 - создание плагина для добавления слайдера

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

Создание основной папки плагина и файла

Для начала создадим папку wcslider для нашего будущего плагина в папке plugins нашего сайта (ваш сайт> wp-content> plugins)

В папке создадим файл wcslider.php и 2 папки css и js

В файле wcslider.php зарегистрируем наш плагин прописав следующую информацию

<?php

/*

Plugin name:BxSlider for Woocommerce

Plugin URI: https://www.lenakso.top // ваш url

Description: Adds slider into Woocommerce

Version:1.0

Author: Your Name

Author URI:

Text domain: woocommerce

*/

Переходим в админпанель сайта – плагины и находим наш плагин.

Можно его активировать

Чтобы никто не смог зайти на страницу плагина по прямой ссылке пропишем в файле wcslider.php

// Error if someone opens this diractly

defined('ABSPATH') or die("Go away!");

для проверки введем в адресную строку прямой адрес плагина и увидим такое сообщение

Добавление CSS и JS файлов из

Перейдем на сайт плагина jQuery https://bxslider.com

Зайдем на страницу установки (install) и загрузим архив.

Распакуем его. Нам понадобятся всего 2 файла

jquery.bxslider.min.css – поместим его в ранее созданную папку css
jquery.bxslider.min.js – поместим в папку js

Также в папку css поместим папку image

Подключим скрипты и стили в файле wcslider.php

// подключить скрипты и стили

function wcslider_scripts(){

wp_enqueue_style('bxslider', WCSLIDER_PATH . '//www.lenakso.top/css/jquery.bxslider.min.css');

if(wp_script_is('jquery','enqueue')){

return;

}

else{

wp_enqueue_script('jquery');

}

wp_enqueue_script('bxslider', WCSLIDER_PATH . '//www.lenakso.top/js/jquery.bxslider.min.js');

}

add_action('wp_enqueue_scripts', 'wcslider_scripts');

Написание функции для отображения шорткода

Создадим шорткод для отображения слайдера

//Create a shortcode

// use: [wcslider]

function wcslider_shortcode(){

$args = array(

'post_per_page' => 10,

'post-type' => 'product',

'meta-key' => '_thumbnail_id',

);

$slider_products = new WP_Query($args);

echo "<ul class ='bxslider'>";

while($slider_products->have_posts()): $slider_products->the_post(); ?>

<li>

<a href="<?php the_permalink();?>">

<?php the_post_thumbnail('shop_catalog'); ?>

<?php the_title('<h3>', '</h3>'); ?>

</a>

</li>

<?php endwhile; wp_reset_postdata();

echo "</ul>";

}

add_shortcode('wcslider', 'wcslider_shortcode');

Что бы узнать принципы работы WP_Query() ознакомьтесь с этой статьей.

Добавим шорткод на главную

Вызов слайдера в footer

Теперь нужно вызвать сам слайдер. После add_shortcode(‘wcslider’, ‘wcslider_shortcode’); добавим следующий код

/* вызов слайдера */

function wcslider_execute(){?>

<script>

$ = jQuery.noConflict();

$(document).ready(function(){

$('.bxslider').bxSlider({

auto: true,

caption: true,

minSlides: 4,

maxSlides: 4,

slideWidth: 250,

slidemargin: 10,

moveSlides: 1,

keyboardEnabled: true

});

});

</script>

<?php

}

add_action('wp_footer', 'wcslider_execute');

Обратите внимание, что в строке $(‘.bxslider’).bxSlider класс .bxslider должен совпадать с классом ul => echo «<ul class =’bxslider’>» из функции wcslider_shortcode() выше. Это очень важно!

Все опции слайдера можно найти на сайте https://bxslider.com/options/

Добавление избранных товаров

Перейдем в админпанель> товары

В woocommerce есть возможность пометить любой товар с помощью звездочки.

Давайте выведем эти товары в слайдере

В функцию wcslider_shortcode() добавим такие строки

'tax_query' => array(

array(

'taxonomy' => 'product_visibility',

'fiels' => 'name',

'terms' => 'featured',

'operator' => 'IN'

)

)

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

//Create a shortcode

// use: [wcslider]

function wcslider_shortcode(){

$args = array(

'post_per_page' => 10,

'post-type' => 'product',

'meta-key' => '_thumbnail_id',

'tax_query' => array(

array(

'taxonomy' => 'product_visibility',

'fiels' => 'name',

'terms' => 'featured',

'operator' => 'IN'

)

)

);

$slider_products = new WP_Query($args);

echo "<ul class ='bxslider'>";

while($slider_products->have_posts()): $slider_products->the_post(); ?>

<li>

<a href="<?php the_permalink();?>">

<?php the_post_thumbnail('shop_catalog'); ?>

<?php the_title('<h3>', '</h3>'); ?>

</a>

</li>

<?php endwhile; wp_reset_postdata();

echo "</ul>";

}

add_shortcode('wcslider', 'wcslider_shortcode');

Перейдем на главную страницу и посмотрим на результат. Убрать заголовок и изменить внешний вид слайдера можно с помощью стилей в файле style.css

В следующей статье мы настроем экран входа в систему.

Как изменить Woocommerce с помощью дочерей темы. Часть 13 – настройка bootstrap меню и регистрация пользователей