5-02-2013, 16:31 Посмотрели: 5191 Добавил: Alex V

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


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

Тем самым есть вероятность того, что пользователь будет просматривать больше страниц на сайте и соответственно проводить больше времени на сайте, что хорошо скажется на поведенческом факторе сайта. А на ПФ все больше обращают внимание поисковые системы. Главное не перестарайтесь, так как в любом случаи такой тулбар занимает место на сайте и у пользователя остается меньше пространства на сайте.

Давайте же приступим к реализации этого плана.

1. Добавляем меню в файл funсtions.php



Вставляем этот код в папку с нашим активным шаблонов в файл functions.php:

register_nav_menus( array(
        'topnavigation' => __( 'Top Navigation', 'ИМЯ ВАШЕЙ ТЕМЫ' )
    ) );


Если вы уже используете или шаблон используют по умолчанию функцию register_nav_menus, то просто добавьте в неё строчку меню ‘topnavigation‘.

2. Создаем меню в админ панели



Заходим в админ панель и открываем подменю, для работы с меню. Здесь мы создадим новое меню и зададим ему область ‘Top Navigation’. Создайте тут нужные вам пункты меню, например «Блог», «Лучшие заметки»… В примере будут использоваться такие пункты Home, Store, Events и Blog. Советую протестировать с пунктами меню, посмотреть на количество просмотров и общее время на сайте, чтобы вывести туда действительно нужные пункты.
Например у вас может весть в фиксированном меню, пункт «Заметки», но на него не кто не будет переходить (это только пример), тогда и нет смысла его там размещать. Вообщем метрика и вебвизор вам в помощь.

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


3. Вызываем меню в шаблоне



Думаю понятно, что если это фиксированное меню, то его нужно выводить сразу после тега body. Обычно он лежит в файле header.php, head.php (в зависимости от вашего шаблона).

Так же очень важно разместить наше меню или же тулбар (почему-то он мне сильно на него похож) в собственном контейнере div. И ему нужно задать свой стиль, в данном примере это topnavigation, вы же можете назвать его как захотите, главное чтобы в стилях вы его так же назвали. Если вы не опытный вебмастер и плохо знаете css и html, то советую оставить такой же стиль как и в примере.

Вставляем код в файл header.php в папке с шаблоном, после тега body:

    <div id="topnavigation">
        <?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?>
    </div>


У нас уже будет первый результат, аля:

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


Но, как-то не похоже на фиксированное меню или на тулбар? Сейчас будем это исправлять. Только сначала можете немного отвлектись и почитать статью как зарабатывать деньги не работая, а потом не забудьте доделать менюху.

4. Добавляем стили для меню



Заходим в файл со стилями шаблона, обычно это style.css. И вставляем туда этот код:

    #topnavigation {
        width: 100%;
        background-color: #999;
    }


Мы сделали ему ширину на 100% и залили фон, тут с настройками можете поиграться. Но главное ширина должна быть 100%.

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


Уже лучше?

5. Сдвигаем меню в центр



Теперь нам нужно снова вернуться в файл header.php, чтобы меню окружить элементом nav.
Для этого просто замените код на этот или же просто окружите его элементом nav:

    <div id="topnavigation">
        <nav><?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?></nav>
    </div>


Задаем стили для элемента nav:

    #topnavigation nav {
        width: 940px; //у вас ширина контейнера может быть другой 
        margin: 0 auto;
    }
    #topnavigation li {
        display: inline;
        padding: 10px;
        margin: 20px 0;
    }


Теперь меню должно выглядеть вот так:

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


Со стилями вы можете делать все что угодно, гуляй фантазия.

6. Фиксируем меню или делаем из него тулбар



Когда вы опускаете страницу вниз, то наше только что созданное меню пропадает? Не пугайтесь, мы просто ещё не успели зафиксировать его. Сейчас мы зафиксируем меню и нас получиться настоящий тулбар, который будет отображаться у всех посетителей сайта.

Изменим стили для #topnavigation которые мы уже правили в 4 пункте этого мануала:

    #topnavigation {
       width: 100%;
        background-color: #999;
        position: fixed; // Фиксируем меню вверху окна
        z-index: 1; // Помещаем его поверх всех остальных элементов
        height: 50px; // Устанавливаем высоту
    }

Но теперь у нас другая проблема, элементы которые находятся ниже, теперь спрятаны под нашим тулбаром:

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


Исправить это можно просто. Нужно узнать какой div у нас расположен ниже нашего меню и сделать ему немного больше отступ. Вверху мы задали высоту в 50px нашему меню, поэтому нужно сделать отступ не меньше чем в 50 px + сделать запас примерно на 10 px, чтобы было немного красивее.
В моей случае div который идет после меню, это div id=”page” (в вашем случаи может быть другое название, если будут проблемы с определением пишите в комментариях адрес сайта и я помогу вам.) Теперь ему нужно задать отступ в 60 px, как мы подсчитали вверху.

Редактируем Css этого класса:

    #page {
        padding-top: 60px; // Высота элемента topnavigation плюс небольшой отступ для визуальной привлекательности
    }


Финальный результат:

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


Теперь можете менять ему фон, делать любой отступ и все что душе угодно!

Спасибо за внимание!
Рубрика записи: Советы

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

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Юзер панель
Я тебя не знаю!
Зарегистрируйся, либо

войди под своим логином!

Fuck, я забыл свой пароль!

Восстановить данные =0
Новое на сайте
Известная социальная сеть Instagram приступила к тестированию новой...
Недавно, в приложения для Android и iOS социальной сети Twitter была...
Недавно, в Google "Мой бизнес" разработчики добавили новейший способ, как...
Недавно стало известно о том, что соцсеть Facebook по упоминанию в русских...
Недавно, представитель корпорации Google, Джон Мюллер (John Mueller)...
Голосуем

Ваша любимая CMS?


DataLife Engine
WordPress
Joomla
Drupal
LiveStreet
UCOZ
Самопис
Php+Includ
Статика