vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи помеченные 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

Иногда производители предоставляют возможность покупателю самостоятельно выбрать на сайте комплектацию товара. В этом случае, при разработке сайта, нужно предусмотреть возможность показа текущей цены на видном месте (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.

Оставить комментарий

Только авторизованные пользователи могут оставлять комментарии. Пожалуйста авторизуйтесь или пройдите регистрацию.