Виджеты в WordPress

Хотите больше практики? Рекомендую тогда посмотреть мой видеоурок по виджетам.

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

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

Как добавить или удалить виджеты (для начинающих)

Чтобы создать виджет в WordPress, для начала у вас должен быть подключен хотя бы один сайдбар, если у вас с этим трудности, тогда вам следует прочитать подробное руководство по работе с сайдбарами (там также описано, как добавить поддержку виджетов в теме WordPress). Также виджеты можно вывести на сайте непосредственно через PHP-код при помощи функции the_widget().

Если с этим разобрались, переходим в админке на страницу Внешний вид > Виджеты. Видите список доступных виджетов? Для того, чтобы добавить виджет на сайт, нужно перетащить его в одну из областей справа (сайдбаров).

Добавление виджета в сайдбар.
Добавляем виджет календаря в главную боковую колонку.

В более поздних версиях WordPress есть и другой способ добавления виджета — вам достаточно кликнуть по его заголовку и из выпадающего списка выбрать сайдбар, в который вы хотите его добавить:

Альтернативный способ добавления виджета в сайдбар.

Когда виджет будет добавлен, мы увидим его настройки. В виджете «Календарь» это заголовок:

Настройки виджета «Календарь»

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

Для того, чтобы удалить виджет, нажимаем ссылку «Удалить» (её видно на предыдущем скриншоте). Если же вы хотите лишь временно отключить виджет, сохранив его настройки, перетаскиваем его в блок «Неактивные виджеты», который находится под блоком «Доступные виджеты».

Отключение стандартных виджетов WordPress

Если вы не используете и не планируете использовать какой-либо из стандартных виджетов WordPress, вы можете полностью отключить его при помощи функции unregister_widget(), после чего виджет перестанет отображаться в админке на странице Внешний вид > Виджеты, также он исчезнет и со страниц сайта.

Для отключения виджетов можете воспользоваться готовым кодом ниже:

  1. Вставьте код в файл functions.php текущей темы.
  2. Удалите или закомментируйте строки с теми виджетами, которые удалять не нужно.
  3. И только потом можете сохранить файл.
function true_remove_default_widget() {
	unregister_widget('WP_Widget_Archives'); // Архивы
	unregister_widget('WP_Widget_Calendar'); // Календарь
	unregister_widget('WP_Widget_Categories'); // Рубрики
	unregister_widget('WP_Widget_Meta'); // Мета
	unregister_widget('WP_Widget_Pages'); // Страницы
	unregister_widget('WP_Widget_Recent_Comments'); // Свежие комментарии
	unregister_widget('WP_Widget_Recent_Posts'); // Свежие записи
	unregister_widget('WP_Widget_RSS'); // RSS
	unregister_widget('WP_Widget_Search'); // Поиск
	unregister_widget('WP_Widget_Tag_Cloud'); // Облако меток
	unregister_widget('WP_Widget_Text'); // Текст
	unregister_widget('WP_Nav_Menu_Widget'); // Произвольное меню
}
 
add_action( 'widgets_init', 'true_remove_default_widget', 20 );

Эта функция позволяет удалять не только стандартные виджеты. В качестве параметра функции вы можете указать название класса любого виджета (например который был зарегистрирован в каком-либо плагине).

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

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

Добавить свой виджет с настройками в WordPress совсем не трудно, но конечно для этого не помешало бы хоть немного разбираться в PHP. Описывать как работает PHP-код в этом посту я не буду, просто задайте свой вопрос в комментариях, если у вас возникнут какие-либо трудности с кодом.

А сейчас мы будем создавать виджет популярных постов — выведем отсортированные по количеству комментариев записи через WP_Query.

По своей структуре наш виджет будет похож на стандартный виджет WordPress «Свежие записи», т е он будет иметь похожие параметры (заголовок и количество отображаемых постов) и похожий HTML-шаблон для вывода постов (заголовки записей со ссылками в виде <ul>-списка).

Вставляем этот код в functions.php:

<?php
class trueTopPostsWidget extends WP_Widget {
 
	/*
	 * создание виджета
	 */
	function __construct() {
		parent::__construct(
			'true_top_widget', 
			'Популярные посты', // заголовок виджета
			array( 'description' => 'Позволяет вывести посты, отсортированные по количеству комментариев в них.' ) // описание
		);
	}
 
	/*
	 * фронтэнд виджета
	 */
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] ); // к заголовку применяем фильтр (необязательно)
		$posts_per_page = $instance['posts_per_page'];
 
		echo $args['before_widget'];
 
		if ( ! empty( $title ) )
			echo $args['before_title'] . $title . $args['after_title'];
 
		$q = new WP_Query("posts_per_page=$posts_per_page&orderby=comment_count");
		if( $q->have_posts() ):
			?><ul><?php
			while( $q->have_posts() ): $q->the_post();
				?><li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li><?php
			endwhile;
			?></ul><?php
		endif;
		wp_reset_postdata();
 
		echo $args['after_widget'];
	}
 
	/*
	 * бэкэнд виджета
	 */
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		if ( isset( $instance[ 'posts_per_page' ] ) ) {
			$posts_per_page = $instance[ 'posts_per_page' ];
		}
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>">Заголовок</label> 
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'posts_per_page' ); ?>">Количество постов:</label> 
			<input id="<?php echo $this->get_field_id( 'posts_per_page' ); ?>" name="<?php echo $this->get_field_name( 'posts_per_page' ); ?>" type="text" value="<?php echo ($posts_per_page) ? esc_attr( $posts_per_page ) : '5'; ?>" size="3" />
		</p>
		<?php 
	}
 
	/*
	 * сохранение настроек виджета
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		$instance['posts_per_page'] = ( is_numeric( $new_instance['posts_per_page'] ) ) ? $new_instance['posts_per_page'] : '5'; // по умолчанию выводятся 5 постов
		return $instance;
	}
}
 
/*
 * регистрация виджета
 */
function true_top_posts_widget_load() {
	register_widget( 'trueTopPostsWidget' );
}
add_action( 'widgets_init', 'true_top_posts_widget_load' );

Я перетащил этот код «как есть» (естественно удалив первую строчку <?php) в файл functions.php стандартной темы TwentyTwelve, в итоге в списке виджетов на странице Внешний вид > Виджеты мы видим наш виджет:

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

Давайте перетащим его в какой-нибудь сайдбар справа:

Параметры виджета

Вот и всё, указываем заголовок виджета (если нужно), количество постов, которое мы хотим вывести и нажимаем «Сохранить» — после этого виджет появится на сайте.

Список плагинов с полезными виджетами

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

Для того, чтобы добавить какой-либо из этих плагинов к себе на сайт, копируете его название, переходите в админке в Плагины > Добавить новый и вставляете в форму поиска скопированное название.

Подробно описывать каждый плагин я не буду — описание почти каждого из них тянет на новый пост. Устанавливайте, смотрите, тестируйте (на момент публикации этого поста каждый из плагинов был протестирован мною лично и всё работало отлично).

  • Beautiful Yahoo Weather — виджет прогноза погоды, довольно неплохой и красивый по сравнению с аналогами. Но для этих целей наверное лучше использовать текстовый виджет WordPress в связке с информерами от Gismeteo, Яндекса и т.д.
  • NextGEN Gallery — плагин для создания и управления галереями изображений в WordPress, одна из функций которого — виджет галереи.
  • Search by Google — форма поиска по сайту от Google (Google Custom Search).
  • Slick Contact Forms — виджет формы обратной связи.
  • Tabbed Login Widget — виджет авторизации, сделан в виде трех вкладок — «Вход», «Регистрация», «Забыли пароль», весьма удобный.
  • WP Currency Converter — конвертер валют.
  • WP Editor Widget — используйте редактор WordPress для заполнения этого виджета.
  • WP-Cumulus — добавляет флэш-облако тегов и/или категорий.
  • WP-Polls — удобный плагин для создания опросов на сайте.
  • Yet Another Related Posts Plugin (YARPP) — мощный плагин для вывода похожих записей.
  • Youtube Channel Gallery — виджет со свежими видео с канала на YouTube. Виджет выглядит очень красиво, хорошо и легко настраивается.

Со временем список будет пополняться.

Я не стану рассматривать все остальные виджеты социальных сетей (Facebook, Вконтакте, Twitter и т.д.) — в принципе официальные виджеты вполне удобные — просто копируем код, который нам дают и вставляем его в вордпрессовский виджет «Текст».

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 69

Комментирование этого поста более не доступно.
  • серька 25 сентября 2014 #

    я удаляю все виджеты и в панели виджетов их действительно нет но на сайте они весят все! как исправить? старый шаблон у меня

    • Миша 26 сентября 2014 #

      попробуйте также удалить их из сайдбара 🙂

  • серька 26 сентября 2014 #

    как из сайдбара то я их удалю?

    • Миша 26 сентября 2014 #

      Надо нажать ссылку Удалить:

  • Ильнур 16 октября 2014 #

    А если нет витжитов не на панели стоит WP4 как их вернуть

    • Миша 16 октября 2014 #

      А есть ссылка в меню Внешний вид > Виджеты?

      • ильнур 16 октября 2014 #

        в моем wp 4 такой ссылки нет

        • Миша 16 октября 2014 #

          Всё понятно, тогда нужно сперва активировать сайдбар, об этом написано здесь.

          • Ильнур 17 октября 2014 #

            спасибо заработало... но вкладки Фон нет ...

  • Сергей 17 октября 2014 #

    Здравствуйте Миша. Пытаюсь подключить виджет стандартным способом в function.php:

    require_once( get_template_directory() .'/functions/widgets/widget-tweets.php' );

    а не получается, и что самое интересное, в других темах все нормально, все работает. Не подскажете, в чем может быть причина? Где-то в теме запрещено подключение? Не пойму блин.
    Полазил в кодексе вордпресс и смог подключить только таким способом:

    require plugin_dir_path( __FILE__ ) . '/functions/widgets/widget-tweets.php' );

    а теперь сижу и думаю, так вообще можно подключать?
    Может таким способом нельзя подключать виджеты.
    Но больше волнует первый вопрос, почему не подключаются виджеты.
    Помогите пожалуйста Миша. Заранее благодарен.

    • Миша 17 октября 2014 #

      Сергей, здравствуйте!
      Так подключать нельзя ни в коем случае — для того, чтобы в теме появились виджеты, нужно зарегистрировать области для них, всё подробно расписано в этом посту.

      • Сергей 17 октября 2014 #

        Нет Миша, вы меня не поняли. Все области уже у меня зарегистрированы и виджеты уже есть в теме, я просто хочу подключить еще один виджет, вообщем у меня есть платная тема, я из нее выдернул виджет твитера, создал папку "widgets" в своей теме,все по аналогии платной темы, и вот хочу добавить его к уже существующим, вот таким образом(через файл function.php):

        require_once( get_template_directory() .'/widgets/widget-tweets.php' );

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

        • Сергей 17 октября 2014 #

          Все, нашел проблему, просто я баран. 🙂
          Прошу прощения, что отвлекаю по пустякам.

          • Миша 17 октября 2014 #

            Ок ) в чем была проблема?

            • Сергей 17 октября 2014 #

              В моих кривых руках и в невнимательности. 🙂
              В админ панель темы подключал, а не к теме самой.
              Говорю же, баран слепошарый я.

  • Ильнур 17 октября 2014 #

    Во вкладке Внешний вид есть только пункты Темы, Редактор и Настроить, больше ничего нет.
    Пункты: Виджеты, Меню, Заголовок, Фон отсутствуют...

    переустанавливал WP, Ставил на другой компьютер ничего не помогает

  • Ильнур 17 октября 2014 #

    может дело в том что я создаю свой новый шаблон

  • Дмитрий 29 октября 2014 #

    Добрый день!
    а где именно находится стиль виджета?
    хочу изменить цвет фона и рамки блока где выводятся виджеты.

    • Миша 29 октября 2014 #

      Добрый день!
      Вероятнее всего — в файле style.css прямо в папке с темой.
      Если нет, то кликните правой кнопкой по виджету и выберите пункт меню «Проверить элемент» (для Google Chrome) и там будет видно, в каком файле какие стили находятся.

  • Константин 13 ноября 2014 #

    Здравствуйте!
    Сделайте поиск по блогу, чтобы эту статью найти пришлось через расширенный поиск гугла искать...

    • Миша 13 ноября 2014 #

      Добрый день!
      Поиск в планах 🙂 а пока что можете воспользоваться URL запросом https://misha.blog/?s=поисковой_запрос

  • Лена 4 декабря 2014 #

    Плагин активирован, а новые виджеты не появились ? 🙁

  • Роман 4 января 2015 #

    Всем привет. уто может помочь? Поставил стандартный виджет избранных постов в боковую панель. Там вводится миниатюра и название поста. И в кириллице там где название длинное проставляется троеточие(�...) и перед троеточием появляется маленький ромбик и знак вопроса. Ну как при не корректном отображение кириллицы. Что делать? как его убрать ? Если что вот сайт смотрите в правой боковой http://applives.ru/

    • Миша 4 января 2015 #

      Привет!
      Ищите функции строковые функции и добавляйте в ним приставку mb_, например substr -> mb_substr.

  • Роман 5 января 2015 #

    Михаил , можно немного подробнее, где искать и что искать ? 🙂

    • Миша 6 января 2015 #

      Могу скинуть разве что ссылку на мануал по mb-функциям http://php.net/manual/en/ref.mbstring.php 🙂 Либо пообещать, что напишу пост, подробно охватывающий этот вопрос (выйдет в публикацию 16 января).

  • Роман 6 января 2015 #

    Вот это по Мужски!!! 🙂 спасибо

  • Сергей 8 января 2015 #

    Здравствуйте, Михаил! В конце Вашей статьи Вы пишите "просто копируем код, который нам дают и вставляем его в вордпрессовский виджет «Текст»." Идея такая - меня не устраивает внешний вид виджета "поиск по сайту" и я хочу вставить в него иконку, которая будет хорошо вписываться в общий внешний вид сайта. Если я правильно понял, виджет "текст" может принимать любой вид, главное вставить в него правильный php код. Вставлять картинку (иконку) я научился, а вот где взять код того же виджета "поиск по сайту" не пойму. Помогите пожалуйста.

    • Миша 9 января 2015 #

      Здравствуйте!
      PHP-код виджет текст «Текст» не поддерживает, только HTML.

  • Сергей 9 января 2015 #

    Верно, ошибся. HTML. Я нашел, как мне кажется, форму поиска, у себя на сайте. Она находится здесь - wp-icludes/default/widgets.php и выглядит она как длинная непонятная запись. Могу ли я прислать Вам её, что бы разобраться что куда вставлять?

    • Миша 10 января 2015 #

      Оттуда код брать не нужно.

      Вот вам форма:

      <form action="http://адрес вашего сайта">
      <input type="text" name="s" id="s" />
      <button>Поиск</button>
      </form>
  • Алексей 25 февраля 2015 #

    Здравствуйте! подскажите пожалуйста что нужно добавить в код вашего виджета а что убрать чтобы сделать виджет "Рубрики"

    • Миша 26 февраля 2015 #

      Доброго времени суток!
      Ну, функция wp_list_categories() вам поможет.

  • Алексей 26 февраля 2015 #
    /*** Начало виджета ***/
    class devise_widget extends WP_Widget {
    function __construct() {
    parent::__construct(
    // Основной ID вашего виджета
    'devise_widget', 
    // Название виджета, которое будет отображаться в админке
    __('Виджет рубрики', 'devise_widget_domain'), 
    // Описание виждета
    array( 'description' => __( 'Рубрики на сайте', 'devise_widget_domain' ), ) 
    );
    }
    // Создаем фронт-энд виджета
    // Здесь происходят действия
    public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );
    // параметры виджета before и after определены темой
    echo $args['before_widget'];
    if ( ! empty( $title ) )
    echo $args['before_title'] . $title . $args['after_title'];
    // Здесь испольняется код и выводится результат
        echo '<ul class="rubric">';
        wp_list_categories('show_count=0&title_li=&hide_empty=0');
        echo '</ul>';
    echo $args['after_widget'];
    }
    // Бек-энд виждета
    public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
    $title = $instance[ 'title' ];
    }
    else {
    $title = __( 'Новый заголовок', 'devise_widget_domain' );
    }
    // Админ.форма виджета
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php 
    }
    // Обновляем виджет
    public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
    }
    } // Класс devise_widget здесь заканчивается
    // Регистрируем и подгружаем виджет
    function devise_load_widget() {
    	register_widget( 'devise_widget' );
    }
    add_action( 'widgets_init', 'devise_load_widget' );
    /*** конец виджета ***/

    Посмотрите пожалуйста я не чего лишнего не написал?

    • Миша 26 февраля 2015 #

      На первый взгляд — всё ок.

      • Алексей 11 апреля 2015 #

        Здравствуйте Подскажите пожалуйста! Как можно запретить в коде, чтобы на сайте не отображалась "Общая рубрика" а в админке она присутствовала чтобы можно было добавлять туда посты?

        • Миша 12 апреля 2015 #

          Добрый день! Это нужно создавать собственный виджет. При помощи get_categories() например.

          • Алексей 12 апреля 2015 #

            в коде выше самописного виджета использовал

            wp_list_categories('show_count=0&title_li=&hide_empty=0');

            добавил туда параметр

            wp_list_categories('show_count=0&title_li=&hide_empty=0&exclude=1');

            все сработало
            так ли необходимо делать через get_categories() ? будет ли это лучшем вариантом?

            • Миша 13 апреля 2015 #

              Оба варианта хорошие.

  • Руслан 24 марта 2015 #

    Доброго времени суток! Подскажите, как удалить виджеты, которые использовались в предыдущей теме? Тема удалена и заменена другой, а виджеты остались висеть на сайте. В сайдбаре их нет.

    • Миша 25 марта 2015 #

      Доброго времени суток!
      Возможно, если вы в сайдбар ничего не добавляли, у вас там висят стандартные виджеты.

  • Елена 23 мая 2015 #

    Миша здравствуйте. Подскажите пожалуйста как можно убрать сайдбары с двух страниц, оставив их на других? У меня так и было, не знаю, что я такое сделала, но сейчас они появились на всех страницах. Есть возможность это сделать без кодирования и программирования? Я впервые делаю, вернее корректирую сайт, в функционале wordpress разобралась, но могу пользоваться только готовыми опциями и функциями.

    • Миша 24 мая 2015 #

      Здравствуйте!
      Если вы совсем не хотите залазить в код, то можете воспользовать плагинами по управлению сайдбарами (напрмиер custom sidebars).

      • Елена 24 мая 2015 #

        Миша, спасибо за ответ. Не то, что бы я не хотела залазить в код, просто не умею.
        Загрузила плагин, теперь вижу 2 кнопки Create a new sidebar и Import/Export sidebars. Получается мне нужно все сайдбары заново создать, чтобы ими управлять? или есть возможность старые удалять?

        • Миша 25 мая 2015 #

          Дело в том, что я очень мало какими плагинами пользуюсь, поэтому точно вам подсказать не могу.

          Но если хотите, можете связаться со мной через вк или емайл и я вам спокойно всё сделаю через код.

          • Елена 26 мая 2015 #

            Миша спасибо большое! обязательно свяжусь!

  • Елена 24 мая 2015 #

    Там, где можно выбрать места для размещения, ставить галки, не получается, ничего не меняется

  • daria 29 мая 2015 #

    Пытаюсь внедрить виджет paymaster для тест оплаты в Текст в виде html. Все просто исчезает и ничего нет...

    • Миша 29 мая 2015 #

      То есть виджет просто не появляется? Или сайт исчезает весь?

  • alx dh 17 июня 2015 #

    Доброго дня.
    Спасибо за статью.
    Небольшое замечание по коду.
    Вот в этом кусочке у вас тэг списка (ul) не закрыт:
    $q = new WP_Query("posts_per_page=$posts_per_page&orderby=comment_count");
    if( $q->have_posts() ):
    ?>have_posts() ): $q->the_post();
    ?><a href=""><?php
    endif;
    wp_reset_postdata();

    • Миша 17 июня 2015 #

      Добрый день!
      Исправил, спасибо!

  • Евгений 4 сентября 2015 #

    Здравствуйте!
    Есть виджет, который выводит либо все статьи, либо из определенной категории.
    Выглядит это так - http://www.picshare.ru/view/6717284/
    Как сделать, что прописать, чтобы вместо выбора категорий, можно было выбирать "Post Type" (как вот здесь - http://www.picshare.ru/view/6717285/), т.к. использую Custom Post Types UI...

    Вот сам код виджета:

    <?php
     
    /**
     * Displays latest or category wised posts in a 4 block layout.
     */
     
    class awaken_four_block_posts extends WP_Widget {
     
    	/* Register Widget with WordPress*/
    	function __construct() {
    		parent::__construct(
    			'four_block_widget', // Base ID
    			__( 'Awaken: Four Block Posts Widget', 'awaken' ), // Name
    			array( 'description' => __( 'Displays posts by four blocks per row.', 'awaken' ), ) // Args
    		);
    	}
     
     
    	/**
    	 * Back-end widget form.
    	 *
    	 * @see WP_Widget::form()
    	 *
    	 * @param array $instance Previously saved values from database.
    	 */
     
    	public function form( $instance ) {
    		//print_r($instance);
    		$defaults = array(
    			'title'		=>	__( 'Latest Posts', 'awaken' ),
    			'category'	=>	'',
    			'number_posts'	=> 4,
    			'sticky_posts' => true,
    			'offset' => 0
    		);
    		$instance = wp_parse_args( (array) $instance, $defaults );
    		$number_posts   = isset( $instance['number_posts'] ) ? absint( $instance['number_posts'] ) : 4;
    		$offset	=	isset( $instance['offset'] ) ? absint( $instance['offset'] ) : 0;
     
    	?>
     
    		<p>
    			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'awaken' ); ?></label>
    			<input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr($instance['title']); ?>"/>
    		</p>
    		<p>
    			<label><?php _e( 'Select a post category', 'awaken' ); ?></label>
    			<?php wp_dropdown_categories( array( 'name' => $this->get_field_name('category'), 'selected' => $instance['category'], 'show_option_all' => 'Show all posts' ) ); ?>
    		</p>
    		<p>
    			<label for="<?php echo $this->get_field_id( 'number_posts' ); ?>"><?php _e( 'Number of posts:', 'awaken' ); ?></label>
    			<input type="text" id="<?php echo $this->get_field_id( 'number_posts' ); ?>" name="<?php echo $this->get_field_name( 'number_posts' );?>" value="<?php echo $number_posts; ?>" size="3"/> 
    		</p>
    		<p>
    			<label for="<?php echo $this->get_field_id( 'offset' ); ?>"><?php _e( 'Number of posts to skip:', 'awaken' ); ?></label>
    			<input type="text" id="<?php echo $this->get_field_id( 'offset' ); ?>" name="<?php echo $this->get_field_name( 'offset' );?>" value="<?php echo $offset; ?>" size="3"/> 
    		</p>
    		<p>
    			<input type="checkbox" <?php checked( $instance['sticky_posts'], true ) ?> class="checkbox" id="<?php echo $this->get_field_id('sticky_posts'); ?>" name="<?php echo $this->get_field_name('sticky_posts'); ?>" />
    			<label for="<?php echo $this->get_field_id('sticky_posts'); ?>"><?php _e( 'Hide sticky posts.', 'awaken' ); ?></label>
    		</p>
     
    	<?php
     
    	}
     
     
     
    	/**
    	 * Sanitize widget form values as they are saved.
    	 *
    	 * @see WP_Widget::update()
    	 *
    	 * @param array $new_instance Values just sent to be saved.
    	 * @param array $old_instance Previously saved values from database.
    	 *
    	 * @return array Updated safe values to be saved.
    	 */
     
    	public function update( $new_instance, $old_instance ) {
    		$instance = $old_instance;
    		$instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );	
    		$instance[ 'category' ]	= $new_instance[ 'category' ];
    		$instance[ 'number_posts' ] = (int)$new_instance[ 'number_posts' ];
    		$instance[ 'sticky_posts' ] = (bool)$new_instance[ 'sticky_posts' ];
    		$instance[ 'offset' ] = (int)$new_instance[ 'offset' ];
    		return $instance;
    	}
     
     
     
     
    	/**
    	 * Front-end display of widget.
    	 *
    	 * @see WP_Widget::widget()
    	 *
    	 * @param array $args     Widget arguments.
    	 * @param array $instance Saved values from database.
    	 */
     
    	public function widget( $args, $instance ) {
    		extract($args);
     
    		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : '';
    		$number_posts = ( ! empty( $instance['number_posts'] ) ) ? absint( $instance['number_posts'] )  : 4; 
    		$sticky_posts = ( isset( $instance['sticky_posts'] ) ) ? $instance['sticky_posts'] : false;
    		$category = $instance['category'];
    		$offset = ( ! empty( $instance['offset'] ) ) ? absint( $instance['offset'] ) : 0;
    		// Latest Posts
    		$latest_posts = new WP_Query( 
    			array(
    				'cat'	=>	$category,
    				'posts_per_page'	=>	$number_posts,
    				'post_status'         => 'publish',
    				'orderby'         => 'rand',
    				'ignore_sticky_posts' => $sticky_posts,
    				'offset'	=>	$offset
    				)
    		);	
     
    		echo $before_widget;
    		if ( ! empty( $title ) ) {
    			echo $before_title . $title . $after_title;
    		}
    		?>
     
    		<div class="awaken-3latest">
    			<div class="row">
    				<?php $i = 1; ?>
    				<?php 
    				if ( $latest_posts -> have_posts() ) :
    					while ( $latest_posts -> have_posts() ) : $latest_posts -> the_post(); ?>
     
    					<div class="col-xs-12 col-sm-6 col-md-3">
    						<div class="awaken-block-post">
    							<?php if ( has_post_thumbnail() ) { ?>
    								<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured', array('title' => get_the_title()) ); ?></a>
    							<?php } else { ?>
    								<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><img  src="<?php echo get_template_directory_uri(); ?>/images/thumbnail-default.jpg" alt="<?php the_title(); ?>" /></a>
    							<?php } ?>
     
    							<?php the_title( sprintf( '<h1 class="genpost-entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>						
    							<?php if ( 'post' == get_post_type() ) : ?>
    								<div class="genpost-entry-meta">
    									<span class="post-date-two"><?php the_time('j.m.y'); ?></span>
    									<span class="post-prosmotr-two"><?php global $post; echo get_post_meta($post->ID, 'views', true); ?></span>
    								</div><!-- .entry-meta -->
    							<?php endif; ?>
     
    						</div><!-- .awaken-block-post-->
    					</div><!-- .bootstrap-cols -->
     
    					<?php if( $i%4 == 0 ) {
    						echo '</div><!--.row--><div class="row">';
    					} ?>
    					<?php $i++; ?>
    				<?php endwhile; ?>
    				<?php endif; ?>
    			</div><!-- .row -->
    		</div>
     
    	<?php
    		echo $after_widget;
     
    	}
     
     
    }
     
    // register awaken three block posts widget
    function register_awaken_four_block_posts() {
        register_widget( 'awaken_four_block_posts' );
    }
    add_action( 'widgets_init', 'register_awaken_four_block_posts' );

    Заранее спасибо!

    • Миша 5 сентября 2015 #

      Здравствуйте!
      В переменной $defaults указать параметр post_type, вот так:

      $defaults = array(
      	'title'		=>	__( 'Latest Posts', 'awaken' ),
      	'category'	=>	'',
      	'number_posts'	=> 4,
      	'sticky_posts' => true,
      	'offset' => 0,
      	'post_type' => array('post', 'ваш_тип_поста') // вот он
      );
      • Евгений 5 сентября 2015 #

        Почему-то не срабатывает.... пробовал как у вас, и пробовал заменять 'category' => '', на 'post_type' => array('post', 'ваш_тип_поста')...
        В коде виджета по-моему далее идет построение самого виджета:

        <p>
        			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'awaken' ); ?></label>
        			<input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr($instance['title']); ?>"/>
        		</p>
        		<p>
        			<label><?php _e( 'Select a post category', 'awaken' ); ?></label>
        			<?php wp_dropdown_categories( array( 'name' => $this->get_field_name('category'), 'selected' => $instance['category'], 'show_option_all' => 'Show all posts' ) ); ?>
        		</p>
        		<p>
        			<label for="<?php echo $this->get_field_id( 'number_posts' ); ?>"><?php _e( 'Number of posts:', 'awaken' ); ?></label>
        			<input type="text" id="<?php echo $this->get_field_id( 'number_posts' ); ?>" name="<?php echo $this->get_field_name( 'number_posts' );?>" value="<?php echo $number_posts; ?>" size="3"/> 
        		</p>
        		<p>
        			<label for="<?php echo $this->get_field_id( 'offset' ); ?>"><?php _e( 'Number of posts to skip:', 'awaken' ); ?></label>
        			<input type="text" id="<?php echo $this->get_field_id( 'offset' ); ?>" name="<?php echo $this->get_field_name( 'offset' );?>" value="<?php echo $offset; ?>" size="3"/> 
        		</p>
        		<p>
        			<input type="checkbox" <?php checked( $instance['sticky_posts'], true ) ?> class="checkbox" id="<?php echo $this->get_field_id('sticky_posts'); ?>" name="<?php echo $this->get_field_name('sticky_posts'); ?>" />
        			<label for="<?php echo $this->get_field_id('sticky_posts'); ?>"><?php _e( 'Hide sticky posts.', 'awaken' ); ?></label>
        		</p>

        Мне кажется здесь нужно заменить на что-то другое вот этот кусок:

        <p>
        			<label><?php _e( 'Select a post category', 'awaken' ); ?></label>
        			<?php wp_dropdown_categories( array( 'name' => $this->get_field_name('category'), 'selected' => $instance['category'], 'show_option_all' => 'Show all posts' ) ); ?>
        		</p>
  • Евгений 5 сентября 2015 #

    Да и дальше в коде куча настроек, в которые тоже думаю что-то надо вставить или заменить...

  • Евгений 5 сентября 2015 #

    По-хорошему было-бы именно заменить ВЫБОР КАТЕГОРИЙ на ВЫБОР POST TYPE.
    В коде довольно часто встречается 'category'

    • Миша 6 сентября 2015 #

      Вы бы хотели, чтобы виджет помимо записей выводил и другие типы?
      Вопрос — тот тип поста, который вы хотите вывести, поддерживает категории?

  • Евгений 6 сентября 2015 #

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

  • campusboy 17 сентября 2015 #

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

  • Григорий 13 ноября 2015 #

    Добрый день! Подскажите, пожалуйста, как в файле robots.txt запретить индексацию страниц, созданных при помощи виджета "новости"?

  • Надежда 16 ноября 2015 #

    Добрый день! Такая проблема возникла - был правый сайдбар, и не стало его. В консоли WP он есть, и то что я на него поместила, тоже есть. Просматриваю код страницы, и там есть то, что я установила в правый сайдбар, вот только не видно на странице. Где я накосячила?? Сильно в php не понимаю, просто иногда редактирую как советуют... но копию обязательно перед редактированием сохраняю, вдруг что не так, можно восстановить. А тут вроде всё вернула, а сайдбар так и не показался.

    • Миша 17 ноября 2015 #

      Добрый день!
      В HTML-коде страницы значит он есть?

      • Надежда 17 ноября 2015 #

        Да, есть.

        • Миша 18 ноября 2015 #

          Значит проблема именно в CSS стилях сайта.

          • Надежда 18 ноября 2015 #

            Видимо, после обновления темы что-то изменилось. Сейчас пытаюсь найти, где написано про правый сайдбар.

  • Иван 28 февраля 2016 #

    Миша подскажите как в приведенном примере виджета популярных записей сделать так чтобы каждая строка в виджете (каждая популярная статья) выводилась со своим css классом. У меня этих строк - 3 мне нужно чтобы у каждой был свой класс

    • Миша 28 февраля 2016 #

      Имеет ли значение, какие классы будут у этих записей?

      Если нужно просто сделать уникальный класс, неважно какой, то достаточно использовать любое слово + ID записи, например:

      ?><ul><?php
      while( $q->have_posts() ): $q->the_post();
      	?><li class="moi-klass-<?php echo $q->post->ID ?>"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li><?php
      endwhile;
      ?></ul><?php

      Если нужно какие-то конкретные классы прописать, то там уже не обойтись без if в цикле.

      • Иван 28 февраля 2016 #

        Спасибо большое! Я думаю это то что нужно!