vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи из рубрики data structure

Как написать виджет для WordPress

Пример виджета для WordPress

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

В WordPress для подобных задач используется область виджетов. Как писать виджет в WordPress подробно написано в кодексе. Но всегда есть нюансы.


Как написать short-code для WordPress

Пример написания short-code для WordPress

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

Должна быть возможность легко размещать такой вопросник в статье или на странице блога WordPress. Об этом была речь в предыдущем посте.


Как написать плагин для WordPress

Плагин для WordPress подсчета цены по компонентам

Любой товар состоит из элементов. Довольно часто производитель, поставив задачу написать электронный магазин, позволяет выбирать комплектацию заранее, до производства. Выбирая комплектующие есть возможность сэкономить или наоборот, согласиться с утверждением "Я этого достоин(а)" и заказать по полной.

Например можно представить пиццерию, где в меню указана стоимость составляющих - лепешка, сыр трех сортов, помидоры двух сортов, колбаса 5 видов. Комбинируете вы сами и постоянно видите, как ваш выбор отражается на цене.

Но это отвлеченный пример, а был конкретный - Demo, Plugin.


Пример написания WordPress плагина для недвижимости

WordPress плагин для агентств недвижимости

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

Чтобы разобраться, как это возможно, я решил написать плагин для агенств недвижимости. Расширять структуру данных не хотелось - это уже будет не WordPress. Решил сохранять JSON-определения объектов недвижимости в поле post_content и преобразовывать эти определения "на лету" - Demo, GitHub


Виджет для вывода списка рубрик Nested Set

Выбор всех статей по рубрике

В конце предыдущей статьи были указаны две вещи, которых не хватает для начала использования рубрикатора.

Первая из них - необходимо добавить поле rubric в таблицу post. С этой операцией связано и изменения в модели common/models/Post, которые очевидно касаются методов rules() и attributeLabels().

Кроме этого нужно добавить обработку выбранной пользователем рубрики в actionIndex() контроллера frontend/controllers/PostController.


Простые действия над деревом Nested Set

Что нужно учесть для CRUD

Все необходимые методы, для управления деревом Nested Set уже определены в расширении.

Поэтому изменения в стандартном контроллере совсем небольшие. Нужно, например, вместо стандартного метода save() модели использовать метод prependTo() расширения, а вместо delete(), deleteWithChildren().


Представления для операций с Nested Set

Что нужно учесть в представлениях при редактировании Nested Set

Мы, в общих чертах, разобрались с деревьями Nested Set и создали модель для хранения дерева. В модели определили пару простых методов.

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


Подключение расширения Nested Set

Определение данных и необходимых методов в модели

Мы получили общее представление о древовидной структуре данных называемой Nested Set. Теперь пришло время подключить к блогу соответствующее расширение.

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


Как устроена структура данных Nested Set

Как сделать рубрикатор

Рубрикатор, как средство поиска интересных статей, имеет свои недостатки - трудно придумать иерархию, названия рубрик, трудно потом решить к какой конкретно рубрике относится статья. "Но, так принято" - скажите вы и будете правы.

Поэтому, давайте делать рубрикатор.



Поиск



Как написать виджет для WordPress

Пример виджета для 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.

Leave a comment

Only authorized users can leave comments. Please log in or pass a registration.