web дизайн >

Выпадающее меню тегов, рубрик, архивов через css

Как сделать выпадающее меню тегов, рубрик, архивов

Сейчас на многих блогах я заметил тенденцию не использовать вывод, например тегов, облаком меток (плагин wp-cumulus и др.) или кучей надписей (стандартный вариант wordpress), и поэтому сегодня я решил осветить вопрос Как сделать выпадающее меню для тегов, рубрик и архивов без плагинов.

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

У меня стоят выпадающие теги (метки) и архивы. Посмотреть можете действие в самом верху средней колонки. Делать выпадающие рубрики я посчитал нецелесообразным. Они ведь должны быть на виду. Такую выпадающую менюшку я видел еще на блоге Шакина.

Собственно приступим к делу. Вот как будет выглядеть выпадающее меню:

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

Сначала решите, что вы будете выводить в сайдбаре. Если что-то у вас выводится виджетом, то отключите его в адмике блога. Если выводится кодом, то соответственно вам надо удалить в файле sidebar.phpwp_list_categories (если делать выпадающие рубрики), wp_get_archives — (если делать выпадающие архивы) и wp_tag_cloud (если делать выпадающие метки).

Сделать выпадающее меню меток:

Если использовали виджеты для вывода меток, удалите его. Если они выводятся кодом — удаляем wp_tag_cloud в файле sidebar.php.

В файл function.php в самый конец перед последними  знаками ?> вставляем данный код:

function dropdown_tag_cloud( $args = '' ) {
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
'exclude' => '', 'include' => ''
);
$args = wp_parse_args( $args, $defaults );

$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags

if ( empty($tags) )
return;

$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
if ( is_wp_error( $return ) )
return false;
else
echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}

function dropdown_generate_tag_cloud( $tags, $args = '' ) {
global $wp_rewrite;
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 255,
'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
);
$args = wp_parse_args( $args, $defaults );
extract($args);

if ( !$tags )
return;
$counts = $tag_links = array();
foreach ( (array) $tags as $tag ) {
$counts[$tag->name] = $tag->count;
$tag_links[$tag->name] = get_tag_link( $tag->term_id );
if ( is_wp_error( $tag_links[$tag->name] ) )
return $tag_links[$tag->name];
$tag_ids[$tag->name] = $tag->term_id;
}

$min_count = min($counts);
$spread = max($counts) - $min_count;
if ( $spread <= 0 )
$spread = 1;
$font_spread = $largest - $smallest;
if ( $font_spread <= 0 )
$font_spread = 1;
$font_step = $font_spread / $spread;

// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
if ( 'name' == $orderby )
uksort($counts, 'strnatcasecmp');
else
asort($counts);

if ( 'DESC' == $order )
$counts = array_reverse( $counts, true );

$a = array();

$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';

foreach ( $counts as $tag => $count ) {
$tag_id = $tag_ids[$tag];
$tag_link = clean_url($tag_links[$tag]);
$tag = str_replace(' ', ' ', wp_specialchars( $tag ));
$a[] = "\t$tag ($count)";
}

switch ( $format ) :
case 'array' :
$return =& $a;
break;
case 'list' :
$return = "\n\t

";
$return .= join("
\n\t

", $a);
$return .= "
\n\n";
break;
default :
$return = join("\n", $a);
break;
endswitch;

return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}

Теперь последний штрих. Открываем файл sidebar.php и в необходимое место вставляем данный код:

Сделать выпадающее меню архивов:

— отключаем виджеты вывода архивов или код wp_get_archives. вставляем в необходимое место в файле sidebar.php код:

<select name=\"archive-dropdown\" onChange='document.location.href=this.options[this.selectedIndex].value;' id="arch">
<option value=\"\"><?php echo attribute_escape('Выбрать месяц'); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

Сделать выпадающее меню рубрик:

— проделывает те же действие, что и в предыдущих вариантах. (удаляем виджеты, удаляем коды)

вставляем в необходимое место код:

<form action="<?php bloginfo('url'); ?>/" method="get" id="cat">
<?php
$select = wp_dropdown_categories('show_option_none=Выбрать рубрику&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
<noscript><input type="submit" value="View" /></noscript>
</form>

Указываем ширину меню:

Открываем файл style.css и в самом конце дописываем:

#arch, #cat, #tag {width:170px; }

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

Напомню, что если ваши теги, рубрики, архивы находятся в noindex, то есть закрыты от индексации в файле robots.txt или в плагине All in One SEO Pack, в котором часто допускаются ошибки в настройке, которые могут привести к некачественной индексации вашего блога поисковиком. Ссылки на неиндексируемые разделы плохо влияют на PR ваших страниц, так что, если уж запретили индексировать данные разделы, попытайтесь уменьшить  количество ссылок на них или вообще убрать со страниц.

Блогнат. Учебник блоггера


Читать ещё:

Комментирование закрыто.