Вставка виджетов или баннеров между анонсами постов в WordPress

 

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

Делается это не сложно и не долго, причём без специальных плагинов, а эффект от этого может быть просто поразительным (особенно при хорошем посещении 🙂 )

В данной статье разберёмся, как это делается.

Для этого нам понадобится внести изменения в файлы шаблона сайта:

  • файл функций темы — functions.php
  • файл основного шаблона — index.php
  • файл архивов — archive.php

Будем делать это из консоли администратора WordPress.

На всякий случай лучше всего будет скопировать эти файлы на себе на жёсткий диск.

Открываем редактор тем, в нём файл functions.php

Ищем register_sidebar

register_sidebar(
  array(
  'name'          => esc_html__( 'Right Sidebar', 'someTheme' ),
  'id'            => 'sidebar-1',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Left Sidebar', 'someTheme' ),
  'id'            => 'sidebar-2',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Head Sidebar', 'someTheme' ),
  'id'            => 'sidebar-3',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

и пропишем туда, например, настройки двух (например) виджетов (можно и одного, и сколько угодно): один виджет будет отвечать у нас за вывод блока только после первого анонса, второй — с шагом 3 — после 3-го, 6-го и 9-го (при условии, что на одной странице 10 анонсов)

register_sidebar(
  array(
  'name'          => esc_html__( 'Widget after first announcement', 'someTheme' ),
  'id'            => 'sidebar-4',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Widget between announcements', 'someTheme' ),
  'id'            => 'sidebar-5',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

т.е. sidebar-4 — это идентификатор виджета после первого анонса, а sidebar-5 — идентификатор виджета между анонсами с шагом 3.

В итоге должно получиться вот так:

register_sidebar(
  array(
  'name'          => esc_html__( 'Right Sidebar', 'someTheme' ),
  'id'            => 'sidebar-1',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Left Sidebar', 'someTheme' ),
  'id'            => 'sidebar-2',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Head Sidebar', 'someTheme' ),
  'id'            => 'sidebar-3',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Widget after first announcement', 'someTheme' ),
  'id'            => 'sidebar-4',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

register_sidebar(
  array(
  'name'          => esc_html__( 'Widget between announcements', 'someTheme' ),
  'id'            => 'sidebar-5',
  'description'   => esc_html__( 'Add widgets here.', 'someTheme' ),
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
  )
);

Сохраняем

Теперь эти два виджета станут доступны в консоли администратора в меню Внешний вид -> Виджеты.

 

После этого открываем файл index.php

В нём находим такую строчку:

while ( have_posts() ) : the_post();

и заменим её на:

while ( have_posts() ) : the_post(); $postcounter++;

т.е. таким образом мы добавляем счётчик постов.

Находим также строчку

endwhile;

она должна быть ниже где-то недалеко

и ПЕРЕД НЕЙ пропишем:

if ( $postcounter == 1 ) {
dynamic_sidebar('sidebar-4') ;
}

этот код для вставки виджета после 1-го анонса (если вставить виджет нужно не после 1-го, а после 2-го, меняем 1 на 2)

if ( $postcounter % 3 == 0 ) {
dynamic_sidebar('sidebar-5') ;
}

этот код для вставки виджета между анонсами с шагом 3 (если вставить виджет нужно не с шагом 3, а с шагом 4, то меняем % 3 на % 4).

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

while ( have_posts() ) : the_post(); $postcounter++;

	get_template_part('template-parts/content', get_post_format());

	if ( $postcounter == 1 ) {
	dynamic_sidebar('sidebar-4') ;
	}

	if ( $postcounter % 3 == 0 ) {
	dynamic_sidebar('sidebar-5') ;
	}

endwhile;

Сохраняем

Затем открываем файл archive.php и делаем с ним то же самое, что и с файлом index.php.

После этих действий идём в виджеты и вставляем там баннеры.

Поделиться ссылкой:

 

Читайте также