Как создать пользовательское навигационное меню WordPress с кодом?

Не используя плагины, как создать пользовательское навигационное меню WordPress с кодом?
У меня есть Wordpress ver 3.2.1
и Buddypress ver 1.5.1

Я хотел бы создать меню.

Я хотел бы поместить buddypress элементы навигации меню в один (социальный) объект. при передаче мыши по этому объекту, это появляется buddypress пункты меню в стиле Выпадающее Меню.

Можно ли помочь мне? Спасибо и жаль о моем плохом английском языке!

0
13.06.2014, 12:23
2 ответа

Хорошо, в первую очередь, можно использовать функцию меню в более новом WordPress.

Сначала Вы хотите активировать то, что Вы хотите использовать эту функцию через свой functions.php файл.

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' ),  
'secondary' => __('Secondary Navigation', 'your_theme_name')  
) ); 

Вышеупомянутый код определяет, если у Вас есть больше чем одно меню. Если Вы хотите всего одно меню, удаляют вторичное устройство. Если бы Вы делаете это, это выглядело бы примерно так в Вашем functions.php файле:

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' )
) );

Это теперь даст Вам опцию добавить объекты страницы через пункт меню при Появлении в бэкенде.

Затем в Вашей теме Вы захотите добавить это туда, где Вы хотите, чтобы меню появилось:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' =>   'primary' ) ); ?>

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

Затем все остальное сделано полностью с помощью CSS.

/*****************************************
Style declarations for Top Menu
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}

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

3
19.02.2020, 23:37
  • 1
    Без проблем! Весело проведите время с ним. :) –  Nicole 28.10.2011, 19:15

WordPress имеет Пользовательские встроенные Навигационные меню.

Просто регистр a theme_location для каждого меню в functions.php, затем перейдите в Dashboard -> Appearance -> Menus создать пользовательское меню и применить пользовательское меню к соответствующему Местоположению (местоположениям) Темы.

Остальное - вопрос CSS (или jQuery, если Вы действительно хотите пойти тем путем).

3
19.02.2020, 23:37

Теги

Похожие вопросы