vash-web.ru

Веб-разработка, WordPress, мобильные устройства...


vash-web.ru

WordPress — добавление верхнего, фиксированного меню в шаблон

Многие шаблоны в WordPress идут без верхнего меню. А если оно и есть, то пользы немного, потому что, даже при небольшой прокрутке, сразу исчезает из виду. Сегодня расскажу и покажу, как я добавил фиксированное, верхнее меню в шаблон этого сайта (изначально тема идет вообще без встроенного меню). И так начинаю. Открываю к КонсолеРедактор и в основном разделе CSS создаю новый индентефикатор — #top-menu. Вписываю вот такой код в таблицу стилей:

/* =Top navigation Menu*/
—————————————————————
#top-menu{
margin: 0 0;
width: 100%;
height: 38px;
}

Далее вставляю следующий код:

#topnav {
display: block;
position: fixed;
float: center;
margin: 0px auto;
width: 100%;
padding:1px;
color:#666666;
}
#topnav,
div.menu {
font-size: 14px;
}
#topnav ul,
div.menu ul {
list-style: none;
margin: 0;
}
#topnav li,
div.menu li {
background: #a8d0fd;
box-shadow: 0px 0px 3px #ebebeb inset;
border-radius:6px;
-moz-border-radius:4px;
-khtml-border-radius:6px;
border-top:1px solid #ebebeb;
border-left:1px solid #ebebeb;
border-bottom:1px solid #ebebeb;
border-right:1px solid #ebebeb;
float: left;
position: relative;
margin-right:1px;
}
#topnav a {

box-shadow: 0px 0px 3px #ebebeb inset;
border-radius:6px;
-moz-border-radius:4px;
-khtml-border-radius:6px;
border-top:1px solid #ebebeb;
border-left:1px solid #ebebeb;
border-bottom:1px solid #ebebeb;
border-right:1px solid #ebebeb;
color: #666666;
display: block;
line-height: 35px;
padding: 0px 10px;
text-decoration: none;
}
#topnav ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 35px;
left: 0;
width: 180px;
height: 35px;
}
#topnav ul ul li {
min-width: 180px;
}
#topnav ul ul ul {
left: 100%;
top: 10;
}
#topnav ul ul a {
background: #b0d7fc;
line-height: 1em;
padding: 2px;
width: 160px;
height: auto;
}
#topnav li:hover > a,
#topnav ul ul :hover > a {
background: #EBEBEB;
color: #444444;
}
#topnav ul li:hover > ul {
display: block;
}
#topnav ul li.current_page_item > a,
#topnav ul li.current-menu-ancestor > a,
#topnav ul li.current-menu-item > a,
#topnav ul li.current-menu-parent > a {
color: #fff;
}
* html #topnav ul li.current_page_item a,
* html #topnav ul li.current-menu-ancestor a,
* html #topnav ul li.current-menu-item a,
* html #topnav ul li.current-menu-parent a,
* html #topnav ul li a:hover {
color: #fff;
}

Основная часть позаимствована из другого шаблона. Часть изменена и адаптирована к данной теме.  Затем открываю в редакторе — Функции темы(functions.php) и регистрирую созданное меню, добавив такие строки:

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
‘top’ => __( ‘Top Navigation’, ‘Имя темы’ ),
) );

После этого, снова в редакторе, выбираю файл — Заголовок (header.php) и после — body, вставляю такой код:

<div id=»top-menu»>

 <div id=»topnav»> <?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘fallback_cb’ => ‘wikiwp_top_nav’, ‘theme_location’ => ‘top’ ) ); ?> </div>

 </div>

Далее перехожу в Консоль Управления на вкладку Меню и вижу, что появилось одно, поддерживаемое темой, меню —

Top Navigation.

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




Поделиться мнением








Ввод в сообщение текстовых символов смайлов (типа - :-) и :-P ) автоматически преобразовываются в картинки (перед вставкой должен быть пробел - можно скопировать и вставить)...
ПРИМЕРЫ:

:-) улыбающийся :-D громко смеющийся :-))) смеющийся :-( Озадаченность или недовольство
:-|| Сердитый, разгневанный ;-) подмигивающий :-P показывающий язык :clap: браво, хлопать в ладоши
:arrow: Биться головой в стенку...

В комментариях вы можете использовать эти HTML Теги и атрибуты к вашему комментарию:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>