Боковое меню

Боковое меню

 

Меняем дизайн бокового меню в шаблоне WordPress!

 

Чтобы изменить дизайн меню сайта в коде Html и сделать его наиболее красивым, нужно хоть немного быть уверенным в том, что вы точно знаете, чего хотите и что именно вы делаете! Данный код проверен на сайте ucoz, одинаково хорошо работает как там, так и здесь.

 

Приступим!

 

Допустим, мы хотим изменить шапку в боковом меню (смотри рисунок 1)

 

 

боковое меню

Картинка-1

 

Для этого:

Заходим в Консоль Word Press – Внешний вид-Редактор, щелкаем по style css (Таблица стилей). Находим код, отвечающий за боковое меню, приведенный ниже.

 

.art-BlockHeader .t

{

height: 30px;

color: #000000;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: bold;

           white-space : nowrap;

           padding: 0 6px;

           line-height: 30px;

}

.art-BlockHeader .l, .art-BlockHeader .r

{

            display:block;

            position:absolute;

            z-index:-1;

            height: 30px;

            background-image: url(‘images/BlockHeader.png’);

}

 

смотри изображение-2, чтобы увеличить картинку щелкни по ней!

 

 

боковое меню

картинка 2

 

На картинке №1 показан первоначальный вид меню, после того, как мы внесем изменения в коде, боковое меню изменится! В первоначальном меню установлены параметры цвет текста черный (color: #000000;), установленный размер текста 12px (font-size: 12px;), а так же установленный цвет шапки блога, который я задал в программе при создании шаблона ('images/BlockHeader.png')… В настоящее время, как вы видите, я изменил немного дизайн бокового сайтбара, просто изменив немного стиль.

 

Красивое боковое меню

 

Приступаем к редактированию:

 

Меняем цвет текста на пример на синий #000080, меняем размер шрифта с 12 на 16px, в строке background-image: url('images/BlockHeader.png'); меняем на цвет белый background-image: url(‘#FFFFFF’); или же меняем на картинку, url которой у вас заготовлен за ранее, т.е. ваш логотип залит на яндекс картинки или расположен где то в другом месте.

Вам лишь потребуется зайти на яндекс, кликнуть по картинке, которая откроется в новом окне, и скопировать адрес ссылки и вставить в код background-image: url(‘СЮДА’); пример на картинке.

Также  вы можете зайти к себе в медиафайлы и скопировать ссылку на картинку там, в низу на картинке показан адрес изображения, который необходимо скопировать и вставить в код!

 

 

 боковое меню

 

Когда все изменения внесены, нажимаем обновить файл, обновляем страницу и смотрите, что у вас получилась, в моем примере это выглядит так

 

 боковое меню

 

 

или вот так с установленным белым цветом!

 

 боковое меню  

 

Далее, что можно сделать еще; так это убрать или изменить иконку!

 

 боковое меню  

 

 

Изменить или удалить иконку также легко! Опускаем таблицу стилей чуть ниже и видим следующий код:

 

.art-header-tag-icon

{
        height: 30px;

      background-position: left top;

      background-image: url(‘images/BlockHeaderIcon.png’);

      padding: 0 0 0 12px;

      background-repeat: no-repeat;

      min-height: 12px;

      margin:0 0 0 5px;

}

 боковое меню

 

 

Чтобы удалить иконку достаточно внести некоторые изменения путем удаления части кода — background-image: url(‘удаляем’);, иконка исчезнет.

Если вы хотите поменять иконку, создайте свой файл или скачайте с интернета c сайта iconfinder и залейте на сервер в папку wp-content-themes-ваш шаблон сайта-images, имя иконке задайте images/BlockHeaderIcon.png с установленными размерами.

Получаем конечный результат! 

 

 боковое меню

 

 

Горизонтальное меню!

 

Код данного меню так же может использоваться в программе Adobe Muse, где его можно установить как горизонтальным, так вертикальным, на WordPress данное меню так же может быть и вертикальным! 

Чтобы добавить горизонтальное меню WordPress, вставляем в самом низу в style CSS данный код заменив перед этим, cсылки на свой блог!

 

#menu{
width:100%;
margin:0;
padding:0;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
display:block;
float:left;
}
#menu li a{
font-family:sans-serif;
display:block;
float:left;
height:50px;
color:#616161;
font-size:18px;
font-weight:bold;
background:url(http://effectprost.ru/menu/menu_left6.png) no-repeat left;
line-height:49px;
padding:0 0 0 20px;
text-decoration:none;
}
#menu li a span{
display:block;
float:left;
background:url(http://effectprost.ru/menu/menu_right6.png) no-repeat right;
height:50px;
color:#616161;
line-height:49px;
padding:0 20px 0 0;
}
#menu li a:hover{
display:block;
float:left;
background:url(http://effectprost.ru/menu/menu_left_h6.png) no-repeat left;
height:50px;
}
#menu li a:hover span{
display:block;
float:left;
background:url(http://effectprost.ru/menu/menu_right_h6.png) no-repeat right;
color:#fff;
height:50px;
}

 

2. Вставляете данный код в любое место на сайте,(можете вставить в Header или Futer вашего сайта), обновляете файл и пользуетесь новым меню!

 

-<div id="menu">
-<ul>
-<li><a href="http://effectprost.ru/"><span>Защита сайта</span></a></li>
-<li><a href="http://effectprost.ru/2014/05/17/o-nas/"><span>Блог: Онас</span></a></li>
-<li><a href="http://effectprost.ru/2014/04/19/programmy-dlya-sajta/"><span>Программы</span></a></li>
-<li><a href="http://effectprost.ru/lenovo-k920/"><span>Lenovo K920</span><a/></li>
-<li><a href="http://effectprost.ru/o-sajte/"><span>О Сайте</span></a></li>
-<li><a href="http://effectprost.ru/kontakty/"><span>Контакты</span></a></li>
-</ul>
-</div>

 

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

 

Дополнительное боковое меню WordPress!

 

Это самый простой и как многие считают наилучший вариант создания дополнительного меню, в боковой панели! Как создать дополнительные боковые панели столько, сколько хочется именно вам, смотрите "Боковая панель"?

 

Приступим к созданию:

 

Когда вы создали новую статью, и отредактировали ее, перейдите в правую колонку, где вы обновляете страницу и уберите галочку  Exclude Pages. 

 

 

боковое меню

 

Убрав галочку, вы тем самым отключаете видимость страницы в основном меню. Заходим в Внешний вид — Виджеты, нажимаем левой клавишей мыши на «Текст» и не отпуская, перетаскиваем в боковую колонку, в то место где вы хотите видеть свою меню, этим самым вы создаете свою как бы личную рубрику! 

 

 

боковое менюбоковое меню

 

 

Копируете адрес вашей страницы и вставляете в поле: (вставляем ссылку на страницу <li><a href="http://effectprost.ru/bokovoe-menyu/"><span>Боковое меню</span></a></li>,  так выглядит ссылка на вашу страницу. Обратите внимание, как выглядит у меня боковое меню в созданной мною рубрике! Вот и все вы создали свою рубрику и соответственно меню!

 

 

боковое меню

 

Вот так выглядит созданное только что меню, Удачи Вам друзья!

 

боковое меню

 

 Так же вы можете узнать о необходимых плагинах, отвечающих за вывод меню здесь. И как правильно защитить свой сайт!

 

Виджет бокового меню.

 

Отличный виджет для создания и редактирования бокового меню "edit sidebar".

 

  1. Владельцы сайтов могут добавлять и удалять элементы на сайте, нажав на боковой панели "Редактировать" ссылку в нижней части боковой панели.

 

Виджет бокового

картинка 1.

 

  1. Вы можете редактировать, удалять или добавлять новые элементы в боковой панели. Нажмите кнопку "Добавить элемент боковой панели".
  2.  

 

Виджет бокового

картинка-2.

 

  1. В диалоговом окне выберите тип элемента страницы, что именно вы хотите добавить.

 

Виджет бокового

картинка-3.

 

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

 

 

Виджет бокового

 

картинка-4

 

Виджет бокового

 

Картинка-5

 

Виджет бокового

 

Картинка-6

 

Изменить местоположение или ширину боковой панели

 

  1. Нажмите кнопку "Изменить макет сайта", картинка-7.

 

Виджет бокового

 

картинка-7.

 

  1. В диалоговом окне вы можете выбрать место боковой панели и ширины. Когда вы закончите, нажмите "ОК", картинка-8.

 

 

Виджет бокового

 

картинка-8.

 

  1. Нажмите кнопку "Сохранить изменения", картинка-9.

 

 

Виджет бокового

 

картинка-9.

  1. После того, как ваши изменения были подтверждены, нажмите "Вернуться на сайт", картинка-10-11.

 

 

Виджет бокового

 

картинка-10

 

Виджет бокового

 

картинка-11

 

 

Изменение внешнего вида боковой панели.

 

  1. Есть много способов, изменения и настройки боковой панели. В области Управление сайтом, нажмите кнопку "Цвета и шрифты", картинка-12.

 

 

боковое меню

 

картинка-12

 

  1. Перейдите в раздел Sidebar Gadgets для просмотра и изменения в боковой панели переменных. Когда убедитесь что все сделано так, как хотите вы, нажмите "Сохранить изменения" и вернитесь обратно на ваш сайт, картинка-13.

 

 

Виджет бокового

картинка-13