Как изменить шапку сайта на WordPress или добавляем произвольные объекты

На этом блоге, да и на многих других я сталкивался с проблемой, что в шапке то нет категорий, то они там есть. Буквально за месяц до написания этой статьи в одном магазине на openCart пришлось убирать вывод категорий и размещать в шапке статьи. Причем без разницы скачали ли вы бесплатный шаблон для сайта или вам его сделала веб студия, к примеру веб-студія SEOOWL. Поэтому, наконец пришла пора рассказать как убрать рубрики из шапки и разместить там произвольные объекты в WordPress.

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

категории в шапке wordPress

После недолгий раздумий, я пришел к выводу что категории надо выводить в панели виджетов — слева, а на верх, вместо рубрик надо вставлять произвольные элементы. К примеру контакты, и HTML карту сайта. Почему именно эти страницы? Об этом подробнее

  • Как и любой другой порядочный блогер я создаю блог по целому ряду причин:
    а)Ради удовольствия
    б)Чтобы помогать людям
    в) чтобы на нем зарабатывать деньги
    поэтому я хочу чтобы люди имели контакт со мной. Ради внесения предложений, вопросов, и ради рекламодателей, которым надо куда писать, чтобы разместить свой банер, рекламную статью или еще что-то.
  • HTML карта сайта, прошу не путать с xml картой сайта (которая тоже обязательно должна быть) поможет пользователям быстро ориентироваться по сайту, а также поисковикам лучше индекировать наш сайт. Кстате как создать HTML карту сайта вы можете прочитать в статье по ссылке.

В результате должно получиться что-то типа как на картинке ниже:

произвольные элементы в шапке WordPressНа верху карта сайта и контакты, слева рубрики. Для этого разобьем задачу на два этапа, первый — выносим рубрики на лево, второй — выносим произвольные элементы в шапку сайта на WordPress.

Как вывести рубрки в боковое меню в WordPress

  1.  Заходим в панель администратора сайта
  2. Переходим в раздел «Внешний вид»->Виджеты
    wordpress внешний вид виджеты
  3. Перетащить из левого квадртата «Рубрики» в Правый квадратДобавляем категории в левое меню
  4. После чего вы сможете назвать блок рубрик так как вам нравиться, а также выбрать внешний вид.Добавляем категории в левое меню внешний вид

После того как вы сохраните изменения, можете зайти на главную страницу и посмотреть что получилось. Если вы хотите какие-то блоки поменять местами это можно сделать просто перемещая блоки драг & дропом.

Как вынести ссылки в шапку WordPress

Если вывести категории в левое меню очень просто, то вывести произвольные ссылки в шапку, к примеру Контакты или карту сайта будет чуть сложнее. Для этого:

  1. Зайдите по FTP в корень сайта
  2. Найдите файл header.php по маршруту
    wp-content/themes/<span style="text-decoration: underline;">Ваша тема</span>


Далее, нам надо убрать вывод рубрик, и вместо него подложить код произвольных страниц. В 99% случаев вывод рубрик осуществляется кодом:

<em><div class="secondary-navigation"></em>
 <em> <nav id="navigation" ></em>
 <em> <?php if ( has_nav_menu( 'primary-menu' ) ) { ?></em>
 <em> <?php $walker = new mts_Walker; wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu', 'container' => '', 'walker' => $walker ) ); ?></em>
 <em> <?php } else { ?></em>
 <em> <ul class="menu"></em>
 <em> <?php wp_list_categories('title_li='); ?></em>
 <em> </ul></em>
 <em> <?php } ?></em>
 <em> <a href="#" id="pull"><?php _e('Menu','mythemeshop'); ?></a></em>
 <em> </nav></em>
 <em> </div></em>
 <em> </div></em>

Советую вам искать этот участок по строчке

 <em><nav id="navigation" > </em>или <em><?php wp_list_categories('title_li='); ?></em>

Замените его на:

<div class=»secondary-navigation»>
<nav id=»navigation» >
<ul class=»menu»>
<li><a href=»http://napositive.com.ua/karta«>Карта сайта</a><li>
<li><a href=»http://napositive.com.ua/kontakti«>Контакты</a><li>

</ul>

</nav>
</div>
</div>

Подчеркнутый код вы естественно меняете на свой. В паре идут URL адрес и название. (Рекомендую прочитать какие правильно делать ссылки в OpenCart). Если вам надо не две ссылки, как у меня, а скажем три или дестяка, то ничего страшного. Вы можете дублировать строчку:

<li><a href="http://<span style="text-decoration: underline;">адрес_статьи</span>"><span style="text-decoration: underline;">Название</span></a><li>

Сколько вам нужно раз. Главное чтобы не вылизало за пределы выделенного места  в шаблоне.

Если у вас остались вопросы — пишите в комментариях, попробую на на них ответить.

загрузка...
8 комментариев
    • Andrey
    • Andrey

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *