Понимание и использование виджетов в WordPress

 

 

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

Эта статья призвана помочь начинающим пользователям ВордПресс разобраться с виджетами и научиться создавать столько виджетов, сколько будет необходимо. Если вам мало встроенных в дефолтные темы ВордПресс виджетов (таких как Календарь, Теги, Категории и т.д.) и вы хотите иметь большее влияние на отображение вашего сайта – вероятно и вам эта статья пригодится.

 

Отображение виджета: а) регистрация области виджета

Есть два основных шага для начала отображения нового виджета в WordPress. Во-первых, нужно зарегистрировать новую область виджета в файле functions.php шаблона, во-вторых, нужно вызвать эту новую область нового виджета где-то в нужном файле вашей темы.

Сначала нужно решить, где вы хотите видеть новый виджет и какую задачу он должен решать. Вариантов масса: это может быть виджет показа последних 5 статей в футере, виджет рекламного баннера в шапке сайта, виджет погоды, виджет последних комментариев, поиск и т.д. и т.п.

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

 

 

Чтобы зарегистрировать область виджета создайте в файле functions.php вашей темы новую функцию с уникальным именем. Эта функция будет вызывать системную функцию ВордПресс register_sidebar.

Пример кода:

function registraciya_oblasti_widgeta() {
	register_sidebar( array(
		'name'          => 'Новая область виджетов',
		'id'            => 'mesto-dlya-reklami',
		'description'   => 'Описание: Это новая область для виджетов, в которой мы будем потом показывать виджет с рекламой.',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'registraciya_oblasti_widgeta' );

 

P.S. Ваша тема уже может содержать функцию, которая вызывает регистрацию области, поэтому сначала проверьте наличие такой функции вызывающей register_sidebar. Если она существует, тогда регистрацию новой области виджета можно сделать простым копированием/вставкой участка кода register_sidebar (....); и изменив потом имя, описание и ID новой области. Образец можете подсмотреть в дефолтной теме для WordPress Twenty Fifteen в файле functions.php в функции twentyfifteen_widgets_init().

 

После того как вы добавили новую область, можете проверить ее появление в админке сайта: перейдите в Консоль — Внешний вид – Виджеты и там должен появиться новый блок «Новая область виджетов».

 

Отображение виджета: б) вывод области виджета в шаблоне сайта

Теперь мы должны подключить вновь созданную область виджетов в шаблоне. Без этого мы не сможем ее увидеть на сайте (во фронтенде), даже если и в админке она видна.

Анализируем поставленную задачу и решаем, что наиболее подходящим местом для будущего виджета с рекламой будет боковая колонка сайта – сайдбар. В нашей «подопытной» теме Twenty Fifteen, сайдбар выводится отдельным файлом-шаблоном, а именно sidebar.php. Открываем этот файл и добавляем область виджета в нужное место, т.е. после подключения уже существующей области виджетов с идентификатором «sidebar-1».

Пример кода:

...
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>

<!-- Дальше идет подключение нашей новой области -->
<?php if ( is_active_sidebar( 'mesto-dlya-reklami' ) ) : ?>
			<div class="widget-s-reklamoy">
				<?php dynamic_sidebar( 'mesto-dlya-reklami' ); ?>
			</div>
		<?php endif; ?>
....

 

В этом примере кода мы используем две встроенные функции WordPress: is_active_sidebar (которая проверяет активна ли область виджетов и есть ли в ней добавленные виджеты) и dynamic_sidebar (которая выводит все добавленные в область виджеты). Условием if проверяем активность области виджетов с идентификатором “mesto-dlya-reklami” и если условие возвращает true, т.е. область есть и в ней есть виджеты, выводим область в блоке div с классом widget-s-reklamoy.

Ничего сложного!

Теперь можем проверить отображение виджетов в этой области виджетов, путем добавления в нее тестовых виджетов (пока мы не создали новый целевой виджет для рекламы). Для этого в админке перейдите в Консоль — Внешний вид — Виджеты и простым перетаскиванием с левой колонки «Доступные виджеты» переместите виджет Текст в блок «Новая область виджетов» в правой колонке. Впишите любой текст и нажмите Сохранить. Обновите фронтенд сайта и в боковой колонке должен появиться добавленный текст.

 

Подобным образом мы можем теперь создавать новые области виджетов в нужных нам местах сайта и добавлять туда целевые виджеты. Регистрируете область виджета и подключаете ее в нужном месте и в нужном шаблоне (например, чтобы отображать область в футере сайта – нужно редактировать файл темы footer.php и так далее). Затем через Консоль «вкладываете» в эту область необходимые виджеты, чтобы они появились на самом сайте.

 

Создание нового виджета

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

 

 

Для создания нового экземпляра виджета нужно проделать несколько шагов:

• Зарегистрировать виджет
• Создать Класс для хранения функций виджета
• Написать функцию construct для конструирования виджета
• Написать функцию widget для вывода виджета во Front-end
• Написать функцию form для отображения формы в меню Внешний вид – Виджеты
• Написать функцию update, чтобы виджет можно было обновлять из формы

 

 

Базовая структура экземпляра виджета в WordPress выглядит так:

 

class Reklamniy_Widget extends WP_Widget {
  function __construct() { }
  function widget($args, $instance) { }  	
  function form($instance) { }
  function update($new_instance, $old_instance) { }  	
}
function registraciya_widgeta_function() {
  register_widget('Reklamniy_Widget');
}
add_action( 'widgets_init', 'registraciya_widgeta_function' );

 

 

Давайте более детально рассмотрим этот код на практическом примере (показ рекламного блока 300х600 Google AdSense с помощью виджета). Ниже представлен рабочий код подобного виджета с комментариями.

 

<?php
/*
Plugin Name: Рекламный виджет
Description: Виджет для показа рекламного блока 300x600 Google AdSense в боковой колонке сайта
Version: 1.0
Author: SebWeo
Author URI: https://sebweo.com
*/

/* Класс виджета. Этот класс обрабатывает все то, что должно быть обработано для виджета: настройки, форму, отображение в Front-end и обновление настроек */
class Reklamniy_Widget extends WP_Widget {

  function __construct() {
   parent::__construct(

    /* уникальный ID виджета */
    'sebweo_reklamniy_widget',

    /* заголовок виджета - отображается в настройках в меню Виджеты */
    __('Reklamniy Blok', 'sebweo-loc-domen' ),

    /* опции виджета, здесь мы передаем класс CSS, и описание для данного виджета */
    array (
      'classname' => 'reklamniy-widget',
      'description' => __( 'This widget displays the ads in the site sidebar', 'sebweo-loc-domen' )
    )

  );
 }


/* функция для отображения виджета во фронтенде сайта */
function widget($args, $instance) {
  extract($args);
  /* заголовок */
  $title = apply_filters ('widget_title', $instance ['title']);

  /* уникальный код рекламодателя, в формате ca-pub-xxxxxxxxxxxxxxxx */
  $data_ad_client = $instance['data_ad_client'];

  /* выбранный слот для рекламного кода */
  $data_ad_slot = $instance['data_ad_slot'];

  echo $before_widget;

  if ( $title ){
    echo '<aside class="widget reklamniy-widget">'."\n";
    echo '<h4 class="widget-title">'.$title.'</h4>';
  } else {
    echo '<aside class="widget reklamniy-widget">';
  }
  /* ниже выводим код рекламного объявления */
  ?>

  <div class="google-ad-300x600">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Ads300x600 -->
    <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px"
      data-ad-client="<?php echo $data_ad_client; ?>"
      data-ad-slot="<?php echo $data_ad_slot; ?>">
    </ins>
   <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>

  <?php
  echo $after_widget;
 }


/* функция отображает форму для указания настроек виджета в меню Виджеты */
function form($instance) {
  /* настройки по умолчанию */
  $defaults = array(
    'title' => __( 'Zagolovok', 'sebweo-loc-domen' ),
    'data_ad_client' => 'ca-pub-xxxxxxxxxxxxxxxx',
    'data_ad_slot' => '1234567890'
  );
  $instance = wp_parse_args((array) $instance, $defaults);

  /* ниже идет html-разметка формы */
  ?>
  <p>
    <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:' , 'sebweo-loc-domen' ); ?></label>
    <input class="widefat" type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
  </p>
  <p>
    <label for="<?php echo $this->get_field_id('data_ad_client'); ?>"><?php _e('Google ad-client number:', 'sebweo-loc-domen'); ?></label>
    <input type="text" id="<?php echo $this->get_field_id( 'data_ad_client' ); ?>" name="<?php echo $this->get_field_name( 'data_ad_client' ); ?>" value="<?php echo esc_attr( $instance['data_ad_client'] ); ?>" />
  </p>
  <p>
    <label for="<?php echo $this->get_field_id('data_ad_slot'); ?>"><?php _e('Google ad-slot number:', 'sebweo-loc-domen'); ?></label>
    <input type="text" id="<?php echo $this->get_field_id( 'data_ad_slot' ); ?>" name="<?php echo $this->get_field_name( 'data_ad_slot' ); ?>" value="<?php echo esc_attr( $instance['data_ad_slot'] ); ?>" />
   </p>
  <?php
 }


/* функция для сохранения изменений в настройках виджета */
function update($new_instance, $old_instance) {
  $instance = $old_instance;
  $instance['title'] = strip_tags( $new_instance['title'] );
  $instance['data_ad_client'] = strip_tags($new_instance['data_ad_client']);
  $instance['data_ad_slot'] = strip_tags($new_instance['data_ad_slot']);
  return $instance;
}

}

/* функция регистрации нового экземпляра виджета */
function registraciya_widgeta_function() {
    register_widget('Reklamniy_Widget');
}
/* с помощью хука widgets_init вызываем функцию регистрации виджета */
add_action( 'widgets_init', 'registraciya_widgeta_function' );

?>

 

 

Просто скопируйте выше указанный код и вставьте его в текстовый файл ReklamniyWidget.php и потом загрузите его в папку плагинов сайта по адресу /wp-content/plugins/. Затем активируйте плагин в Консоли и начните экспериментировать с виджетом.

В настройках виджета сейчас доступно 3 опции: Заголовок виджета, Уникальный номер рекламного клиента Google AdSense, Уникальный номер слота для размещения рекламного блока. Две последние опции вы можете узнать при создании рекламного объявления в сервисе Google AdSense.

 

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