Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Создание своего первого WooCommerce расширения. Часть 1.

Тема в разделе "WooCommerce - основы, описания, уроки.", создана пользователем D&B, 21 май 2015.

  1. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.264
    Симпатии:
    721
    Баллы:
    113
    Это первый пост из серии «создай WooCommerce расширение», которая будет состоять из двух частей.

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

    Все расширения – это WordPress плагины, которые «прицепляются» к функциям других плагинов, в данном случае – к WooCommerce. Чтоб создать WooCommerce расширение мы обычно цепляем и ядра и WordPress, и WooCommerce, что и позволяет нам добиться желаемых результатов.

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

    Вот, что вам нужно обязательно изучить, чтоб создать WooCommerce расширение или любой другого плагин:
    • Использование хуков (экшенов и фильтров) для модификации или добавления кода;
    • Использование глобальных переменных или функций для получения доступа к информации, хранящейся в другом плагине;
    • Использование методов класса для доступа к данным, например к корзине;
    • Дополнение классов для переписи частей класса или добавления новых методов;
    Мы начнем с использования фильтров для изменения того, что делает WooCommerce или любой другой плагин.

    Что такое фильтр?

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

    В документации плагина API вы сможете найти полезную информацию об экшенах и фильтрах (общее название – хуки (крючки):

    Вот пример простого фильтра:

    Код:
    $content = apply_filters( 'the_content', get_the_content() );
    Он позволяет нам изменять содержимое WordPress-записи. Как мы увидили выше, фильтр добавлен путем внедрения переменной в вызов apply_filters

    Тэг и значение присутствуют: тег - the_content’и вторая часть - get_the_content() – это то, что мы можем менять. К примеру, мы могли бы отфильтровать весь контент записи и изменить каждое “WordPress” на “Joomla”, если мы хотели бы взорвать весь мир:)

    Фильтры можно внедрять в одну или более переменных, как это сделано здесь:

    Код:
    apply_filters( 'the_title', $post->post_title, $post->ID )

    Этот фильтр может изменить заголовок записи (который является значением). ID записи также внедряется в качестве переменной в том случае, если мы только хотим изменить заголовок одной записи, а не всех постов скопом. Мы также можем использовать ID, если хотим применить функцию для определенной записи. Фильтр можно внедрить сразу во множество переменных, но только для одного значения.

    Чтоб использовать фильтр, нужно вызвать функцию add_filter. Структура очень простая:

    add_filter( 'filter_tag', 'my_function', priority, arguments);

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

    Давайте вернемся к the_content. Мы можем написать кастомную функцию (называется change_wp_to_joomla (см. ниже) для изменения контента каждого поста для нашего “Joomla-троллинга”, а затем добавить ее ко всем записям, используя:

    Код:
    add_filter( 'the_content', 'change_wp_to_joomla' );
    Если вместо этого мы используем фильтр типа the_title, нам нужно будем применить переменную, так что нам понадобится приоритет и аргументы, присутствующие в нашем вызове add_filter. Допустим, я хочу изменить заголовок одной записи, который мы определим с помощью ее ID. Мой вызов add_filter теперь добавляет ряд «аргументов». В этом случае их два: мой заголовок и ID записи. Вот как это выглядит:

    Код:
    add_filter( 'the_title', 'my_title_change_function', 10, 2);
    Приоритет по умолчанию – 10, но он меняется, когда наше дополнение начинает работать. Сначала запускается приоритет 1, а приоритеты побольше запускаются по мере загрузки страницы.

    Реальный пример #1: изменение значения

    Давайте начнем с фильтра, который имеет то значение, которое мы можем изменить без добавления лишних переменных. Фильтр WooCommerce loop_shop_columns – это хорошая отправная точка, так как это, по сути, контроль над количеством колонок товаров, отображаемых на странице магазина (количество товаров в строке).

    Фильтр выглядит так:

    Код:
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
    Это значит, что по умолчанию, отображаются четыре колонки товаров:

    Building Your First WooCommerce 1_1.jpg

    Наш тэг, который мы используем для добавления функции к фильтру – это loop_shop_columns, значение равно 4. Мы можем изменить это значение вместе с собственной функцией.

    Создайте функцию с уникальным именем – мы обычно используем названия, к которым с помощью префикса добавлено ‘skyverge’ или ‘sv’. Затем нам нужно «подключить» значение к нашей функции, чтоб изменить ее. Это то, что нам позволяет изменить фильтр. Здесь мы задать переменную, которую назовем $columns.

    Наконец, мы изменили значение в функции и внедрили необходимое в фильтр. Последняя часть очень важна – мы должны быть уверены, что включили отменяющее значение, которое обязательно, должно быть использовано.

    Код:
    function sv_change_shop_columns( $columns ) {
        $columns = 3;
        return $columns;
    }
    add_filter( 'loop_shop_columns', 'sv_change_shop_columns' );

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

    Теперь мы получили измененный макет магазина с тремя колонками вместо четырех:

    Building Your First WooCommerce 2_1.jpg

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

    Код:
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width:30%;
    }
    И теперь у меня получился исправленный макет магазина.

    Building Your First WooCommerce 3_1.jpg

    Реальный пример #2: использование переменной

    А что произойдет, если в фильтре вместе со значением также есть и переменная (или несколько переменных), которую мы можем изменить? Эти переменные дадут нам информацию, которую мы можем использовать для их изменения –это может быть товар (мы можем получить доступ к информации о товаре), корзина и все то, для чего мы хотим внедрить переменную.

    На этот раз давайте рассмотрим не-WooCommerce-пример. Я наткнулся на него, когда дополняла плагин Related Posts for WP от Barry Kooij.

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

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

    Building Your First WooCommerce 4_1.jpg

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

    Значение, которое необходимо изменить – это URL изображения, так что его нужно добавить в фильтр. Чтоб изменить изображение для правильной темы, необходимо знать какую тему мы ищем. В результате нам необходима переменная: id темы.

    Фильтр был немного упрощен для дальнейшего использования:

    Код:
    <img src="' . apply_filters( 'rp4wp_theme_icon', plugins_url( 'assets/images/themes/' . $theme->get_id() . '.png' ), $theme->get_id() ) . '" />
    Так что же он делает? Он ищет изображение с url типа ‘3.png’ в одной из папок плагина и доставляет эту иконку для темы номер 3. Если мы еще немного все упростим, то сможем увидеть, что происходит, структура фильтра выглядит так:

    Код:
    <img src="' . apply_filters( 'rp4wp_theme_icon', $image_url, $theme_id ) . '" />
    Наше изменяемое значение – это URL изображения, и мы можем использовать id темы (переменная), чтоб изменить его, если нужно.

    Новая тема была добавлена, как тема 25, а также было добавлено собственное изображение. Чтоб изменить это, я внедрил URL изображения и id темы в свою функцию. Я могу изменять URL изображения, но не могу изменить id темы, так как это не мое значение –может быть использовано при необходимости – я могу проверить, совпадает ли ID с моей пользовательской темой, затем вручную установить URL для изображения.

    Код:
    function sv_rp4wp_theme_icon( $image_url, $theme_id ) {
      
        if ( 25 == $theme_id ) {
            $image_url = plugin_dir_url( __FILE__ ) . 'assets/images/' . $theme_id . '.png';
        }
      
        return $image_url;
    }
    add_filter( 'rp4wp_theme_icon', 'sv_rp4wp_theme_icon', 10, 2 );
    Заметьте, что URL изображения был возвращен в конце, так что в любом случае это исходное значение, даже если оно не было изменено. Последняя часть моего сниппета также немного другая. Был добавлен приоритет и ряд переменных, так как мне нужно сказать фильтру, как много всего я внедрил в функцию, чтоб из всего этого были созданы пары.

    Продолжение
    Источник
     
    Последнее редактирование: 22 май 2015
    • Нравится Нравится x 2