Создание меню в WordPress

26 марта 2016

Создание меню в WordPress
Автор: Анфиса Бреус

 menu2

В новом WordPress 3.0 есть замечательная функция "меню", которая позволяет создать произвольное меню, не зависимо от того хотите вы включить в него страницы, рубрики или просто ссылки на тот или иной ресурс.

До выхода нового WordPress создать собственное меню было достаточно проблематично и блогерры, довольствовались либо меню из страниц, либо из рубрик.

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

Делается это очень просто.

Для начала давайте проверим, поддерживает ли ваш шаблон данную опцию.

Идем в административную панель блога => Внешний вид => Меню

Откроется страница для создания меню.

Если в меню вы видите вот такую надпись:

На желтом фоне по центру:

Или слева:

Это значит, что шаблон вашего блога был создан до выхода новой версии WordPress  и требует некоторой модификации.

Изменения старого шаблона WordPress

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

1. Идем в раздел Внешний вид => Редактор => и открываем файл под названием functions.php.

2. Вставьте в этот файл следующий код :

1 register_nav_menus( array(
2     'primary' => 'Основное меню'
3 ) );

3. Сохраните файл.

4. Откройте файл header.php и найдите строку отвечающую за вывод меню. В большинстве случаев это будет выглядеть вот так:

1 <ul>
2 <li><a href="<?php echo get_settings('home'); ?>">Главная</a></li>
3 <?php wp_list_pages('title_li='); ?>
4 </ul>

5. Замените этот код на следующий:

1 <div id="access">
2 <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
3 </div>

6. Сохраните файл.

7. Откройте файл style.css и пропишите стиль. Вы можете поменять стиль на свой вкус. Я даю самый простой вариант.

1 #access .menu-header,
2 div.menu
3 {
4     margin: 0 auto;
5     width: 940px;
6 }
7
8 #access {
9     background: #000;
10     display: block;
11     float: left;
12     margin: 0 auto;
13     width: 940px;
14 }
15 #access .menu-header,
16 div.menu {
17     font-size: 13px;
18     margin-left: 12px;
19     width: 928px;
20 }
21 #access .menu-header ul,
22 div.menu ul {
23     list-style: none;
24     margin: 0;
25 }
26 #access .menu-header li,
27 div.menu li {
28     float: left;
29     position: relative;
30 }
31 #access a {
32     color: #aaa;
33     display: block;
34     line-height: 38px;
35     padding: 0 10px;
36     text-decoration: none;
37 }
38 #access ul ul {
39     box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
40     -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
41     -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
42     display: none;
43     position: absolute;
44     top: 38px;
45     left: 0;
46     float: left;
47     width: 180px;
48     z-index: 99999;
49 }
50 #access ul ul li {
51     min-width: 180px;
52 }
53 #access ul ul ul {
54     left: 100%;
55     top: 0;
56 }
57 #access ul ul a {
58     background: #333;
59     line-height: 1em;
60     padding: 10px;
61     width: 160px;
62     height: auto;
63 }
64 #access li:hover > a,
65 #access ul ul :hover > a {
66     background: #333;
67     color: #fff;
68 }
69 #access ul li:hover > ul {
70     display: block;
71 }
72 #access ul li.current_page_item > a,
73 #access ul li.current_page_ancestor > a,
74 #access ul li.current-menu-ancestor > a,
75 #access ul li.current-menu-item > a,
76 #access ul li.current-menu-parent > a {
77     color: #fff;
78 }
79 * html #access ul li.current_page_item a,
80 * html #access ul li.current_page_ancestor a,
81 * html #access ul li.current-menu-ancestor a,
82 * html #access ul li.current-menu-item a,
83 * html #access ul li.current-menu-parent a,
84 * html #access ul li a:hover {
85     color: #fff;
86 }

Готово!

Создание меню WordPress

1. Теперь снова идем в раздел Внешний вид => Меню и если Вы все сделали правильно строка с предупреждением, что тема не поддерживает функцию меню исчезнет.

2. В блоке "Заголовок меню" вписываем произвольное название. Например: "Главное меню" => Нажать на кнопку "Создать меню"

3. После этого активируется левая сторона настроек по созданию меню.
В первом блоке "Области темы" выбираем только что созданное меню "Главное меню"

Настройка пунктов меню:

Произвольные ссылки - любая ссылка на внешний ресурс или внутреннюю страницу блога
Страницы - отметить галочками те страницы, которые Вы хотите видеть в меню. Предварительно нужно создать страницы.
Рубрики - отметить галочками те рубрики, которые вы хотите видеть в меню. Предварительно нужно создать рубрики.

Не забудьте нажать на кнопочку "Добавить в меню".

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

С помощью мышки вы можете перетаскивать пункты меню менять их местами.

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

На этом все.

Для того, чтоб серьёзно заниматься бизнесом и испытывать удовольствие и удовлетворение от хорошо отлаженного, многофункционального и быстрого сайта -  лучшим решением будет, конечно ,шаблон "AB-INSPIRATION"

Смотреть на сайте: http://mlmcentr.ru/krepih/1

Вот и всё!!!    Если Вы ничего не поняли, Но создать блог вы всё равно хотите.
Нет проблем! За небольшую денежную сумму, вы получите свой новенький отдельно-стоящий блог в лучшем виде !

Подробности здесь:    ЗАКАЗАТЬ БЛОГ

Интересная статья? Поделитесь ею пожалуйста с другими:

 

Комментарии на блоге

Один комментарий к “Создание меню в WordPress”

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

В Vkontakte

В Facebook