Статьи помеченные hook
Как написать виджет для WordPress
Пример виджета для WordPress
Иногда производители предоставляют возможность покупателю самостоятельно выбрать на сайте комплектацию товара. В этом случае, при разработке сайта, нужно предусмотреть возможность показа текущей цены на видном месте (demo).
В WordPress
для подобных задач используется область виджетов. Как писать виджет
в WordPress подробно написано в кодексе. Но всегда есть нюансы.
Как написать short-code для WordPress
Пример написания short-code для WordPress
На сайте магазина нужно, чтобы пользователь мог, выбирать комплектацию товара отвечая на вопросы. Вопросы должны сопровождаться наглядными картинками.
Должна быть возможность легко размещать такой вопросник в статье или на странице блога WordPress
. Об этом была речь в предыдущем посте.
Пример написания WordPress плагина для недвижимости
WordPress плагин для агентств недвижимости
Привлекательность WordPress в большом количестве тем оформления. Иллюзия легкости, с которой можно поменять тему, не дает покоя разработчикам. Сейчас на WordPress работают даже магазины.
Чтобы разобраться, как это возможно, я решил написать плагин для агенств недвижимости. Расширять структуру данных не хотелось - это уже будет не WordPress. Решил сохранять JSON-определения объектов недвижимости в поле post_content
и преобразовывать эти определения "на лету" - Demo, GitHub
Поиск
Метки
Как написать виджет для WordPress
Пример виджета для WordPress
- 1. Как написать плагин для WordPress
- 2. Как написать short-code для WordPress
- 3. Как написать виджет для WordPress
Иногда производители предоставляют возможность покупателю самостоятельно выбрать на сайте комплектацию товара. В этом случае, при разработке сайта, нужно предусмотреть возможность показа текущей цены на видном месте (demo).
В WordPress
для подобных задач используется область виджетов. Как писать виджет
в WordPress подробно написано в кодексе. Но всегда есть нюансы.
Виджет должен отображаться на определенной странице нюанс первый
Сначала определяем класс виджета Sum.php
, затем регистрируем его и определяем hook (полный текст виджета можно посмотреть на gitHub).
add_action( 'widgets_init', 'register_lisette_cost_calculator_sum_widget' ); function register_lisette_cost_calculator_sum_widget() { register_widget('Lisette_Cost_Calculator_Sum' ); } class Lisette_Cost_Calculator_Sum extends WP_Widget { ... }
Виджет должен отображать html
код во frontend и backend. Что именно отображать определяют методы wedget
и form
соответственно.
public function widget( $args, $instance ) { ... } public function form( $instance ) { ... }
В методе form
определяются параметры виджета (нам нужен только заголовок). Заполненные поля проходят проверку и санацию в методе update
.
В методе widget
определяется, что будет выводиться в области виджетов для посетителей сайта. Нам важно, чтобы виджет отображался только на той странице, где будет размещен калькулятор стоимости заказа (на других страницах в нем просто нет смысла). Поэтому в начале виджета добавлена следующая проверка.
public function widget( $args, $instance ) { // show widget only on page cost-calculator $pagename = get_query_var('pagename'); if ( is_page() && $pagename == 'cost-calculator' ) {
Виджет должен оставаться на месте при прокрутке нюанс второй
Во-первых нужно в конструкторе добавить css
класс для обертки виджета.
public function __construct() { // add class for wrapping div $widget_ops = [ 'classname' => 'fixed-box fixed', ]; $control_ops = []; parent::__construct( 'lisette_cost_calculator_sum', 'Lisette_CC Sum', $widget_ops, $control_ops ); }
Во-вторых, нужно определить этот класс в таблице стилей css/fixed.css
.
.fixed-box { height: 60px; width: 305px!important; } .fixed-div { height: 60px; width: 100%; } .fixed { position: fixed; z-index: 9999; }
и подгрузить эту таблицу, вместе с jQuery
кодом js/fixed.js
, который отвечает за то, чтобы блок с текущей ценой оставался на месте.
$(document).ready(function($) { $nav = $('.fixed-div'); $nav.css('width', $nav.outerWidth()); $window = $(window); $h = $nav.offset().top; $window.scroll(function() { if ($window.scrollTop() > $h) { $nav.addClass('fixed'); } else { $nav.removeClass('fixed'); } }); });
Полный текст виджета и плагина в целом можно посмотреть на gitHub.
Заключение
Плагин Lisette-cost-calculator
обозримый, функциональный и может помочь разобраться с тем, как писать плагины для WordPress.
Оставить комментарий
Только авторизованные пользователи могут оставлять комментарии. Пожалуйста авторизуйтесь или пройдите регистрацию.
Можно авторизоваться, используя социальную сеть-
-
-
-