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

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

• 1. Как написать плагин для WordPress
• 2. Как написать short-code для WordPress
• 3. Как написать виджет для 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.