9 июля 2012

Настраиваем меню WordPress

wordpress menu-frontend Попался мне на глаза сегодня на форуме вопрос: «Добрый день друзья! пожалуйста подскажите как добавить герб по середине меню? помогите пожалуйста!»
Ссылка вот.
Сразу подумал, что решить можно с помощью jQuery, однако немного поразмыслил и решил прикрутить картинку, используя стандартное меню WordPress, немного CSS и один фильтр. В дальнейшем будет проще управляться. О том как создавать главное меню и зачем это нужно здесь
Для примера взял стандартный шаблон Twenty Eleven и создал главное меню, вот такое wordpress mainmenu
пункт меню, вместо которого выведем картинку, назвал central-picture и расположил его в центре, нам же нужно справа и слева одинаковое количество остальных пунктов меню, URL можно указать любой, затем прописываем класс (CSS Classes) пункта меню — тоже central-picture
В файл шаблона style.css добавляем следующие стили:

.central-picture {
    background: url("/press-tsentr/img/gerb.png") repeat-x scroll 0 0 transparent;
    height: 130px;
    width: 108px;	
    margin-top: -40px;	
}
#access {
	overflow: none;
	height: 43px;
}

В папку /img/ на сервере заливаем картинку. А теперь пояснения:

  • height и width — размеры изображения
  • margin-top — расстояние от верхней границы контейнера меню до картинки в пикселях
  • #access — ID контейнера главного меню и соответственно правила для него, для вашего случая смотрите исходный код чтобы найти ID или класс контейнера

А в файл functions.php дописываем вот такой код:

add_filter( 'walker_nav_menu_start_el', 'on_nav_menu_item', 20, 4 );
function on_nav_menu_item($item_output, $item, $depth, $args) {
	if ( $item->post_title == 'central-picture' ) {
		$item_output = '';
	}
	return $item_output;
}

Фильтр walker_nav_menu_start_el нужен чтобы заменить стандартный вывод html кода для пункта меню с картинкой. Сейчас я его просто сделал пустым, но при необходимости можно свой код написать. Ну а результат на самой первой картинке поста.
Еще вам буду полезны

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Один комментарий

Вы можете следовать любому комментарию через RSS 2.0 feed.

Вы можете оставить комментарий или trackback с вашего сайта.

  1. Стас:

    Есть ли способ в эту самую картинку поместить ссылку? Премного благодарен за ответ!

Оставьте комментарий

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере