Вывод списка страниц и категорий в виде выпадающего меню WordPress
+9

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

Для генерирования выпадающего меню в WordPress существуют замечательные функции wp_dropdown_categories() и wp_dropdown_pages().
И именно их мы будем использовать в этом уроке для представления меню списка категорий и страниц.

Выпадающее меню категорий (виджет)

Но, для объективности картины в целом, я не могу не упомянуть о возможности создать подобное меню с помощью готового виджета в WordPress — «Рубрики»

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

Выпадающее меню категорий (виджет)

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

Функция wp_dropdown_pages() позволяет вывести список определенных страниц WordPress в элементе select,
а функция wp_dropdown_categories() — список категорий WordPress.

Ниже я привожу несколько примеров, подходящих в большинстве случаев.

Выпадающее меню WordPress со списком категорий и кнопкой «Посмотреть»

Выпадающее меню категорий wordpress

<li id="categories">
	<form action="<?php bloginfo('url'); ?>" method="get">
	<div>
	<?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
	<input type="submit" name="submit" value="<?php _e('View', 'themedomain') ?>" />
	</div>
	</form>
</li>

Выпадающее меню категорий wordpress

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

Выпадающее меню Woordpress со списком категорий (с использованием JavaScript)

Выпадающее меню категорий wordpress

<li id="categories">
	<?php
	$args = array(
	  'show_option_none' => __('Select category', 'themedomain'),
	  'depth' => 1,
	  'hierarchical' => 0,
	);
	wp_dropdown_categories($args); ?>
<script type="text/javascript"><!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
		if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
			location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
		}
    }
    dropdown.onchange = onCatChange;
--></script>
</li>

Выпадающее меню категорий wordpress

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

Меню, построенное на данном примере, не будет работать, если у пользователя отключен JavaScript.

Выпадающее меню WordPress со списком категорий с использованием JavaScript (работает также без JavaScript)

Выпадающее меню категорий wordpress (javascript)

<li id="categories">
	<form action="<?php bloginfo('url'); ?>/" method="get">
	<div>
<?php
$args = array(
  'show_option_none' => __('Select category', 'themedomain'),
  'show_count' => 1,
  'orderby' => 'name',
  'echo' => 0,
);
$select = wp_dropdown_categories($args);
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
	<noscript><div><input type="submit" value="<?php _e('View', 'themedomain') ?>" /></div></noscript>
	</div></form>
</li>

Этот пример лишен недостатков предыдущего — меню будет работать и при отключенном JavaScript.
При включенном JavaScript будет происходить переход как в предыдущем примере.
При отключенном — как в первом (по нажатию на кнопку «Просмотреть»).

Выпадающее меню со списком страниц WordPress

Выпадающее меню страниц wordpress

<li id="pages">
 <h2><?php _e('Pages:', 'themedomain'); ?></h2>
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_pages(); ?>
   <input type="submit" name="submit" value="<?php _e('View', 'themedomain') ?>" />
   </form>
</li>

В данном примере меню будет содержать список всех страниц блога (сайта).

А следующий пример позволит вывести в выпадающее меню список страниц-потомков страницы с id=537

<li id="pages">
 <h2><?php _e('Pages:', 'themedomain'); ?></h2>
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_pages('child_of=537'); ?>
   <input type="submit" name="submit" value="<?php _e('View', 'themedomain') ?>" />
   </form>
</li>

Выпадающее меню страниц WordPress

+9
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: WordPress, Уроки Wordpress теги: . Прямая ссылка на запись.

Комментарии к записи Вывод списка страниц и категорий в виде выпадающего меню WordPress: 2

  1. Илья сказал(а):

    Очень познавательная статья!

  2. jimka сказал(а):

    Приветствую!
    А как сделать что бы переход страниц осуществлялся не по нажатию кнопки, а автоматически при выборе, как в примере с рубриками?

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

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