Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 28.03.2024)
439970
солдат
347
самолетов
325
вертолетов
6914
танков
13237
ББМ
10963
артиллерия
729
ПВО
1021
РСЗО
14595
машин
26
корабли и катера
Понимание и использование виджетов в WordPress
Опубликовано Обновлено: 23.07.2017

Понимание и использование виджетов в 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.

 

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *