Как создать меню для отдельной рубрики с помощью атрибута «style»

В этой статье я расскажу, как в WordPress сделать меню с красивыми маркерами, и как сделать меню для отдельной рубрики, которое будет выводится на страницах только одной рубрики.

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

Список, в редакторе WordPress, создаётся очень просто. Поясню для начинающих пользователей. То что перенос строки в визуальном редакторе осуществляется клавишей Enter, знают абсолютно все.

При этом между абзацами остаётся пробел в одну строку.

Чтобы этого пробела не оставалось, перенос строки осуществляется при нажатой клавише Shift. Значит, чтобы сделать список, нужно всего лишь переносить строки списка нажимая комбинацию Shift+Enter.

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

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

И если высота картинки плюс заданный отступ превышают размер шрифта, то картинки расположатся с каким либо смещением, и список не получится.

Обойти это препятствие можно следующим образом. Переводим редактор в режим HTML, и находим код загруженного изображения. Обычно он имеет такой громоздкий вид:

<a href="https://starper55plys.ru/wp-content/uploads/
2013/03/Bezyimyannyiy149.png">
<img title="Настройка All in One SEO Pack" 
src="https://starper55plys.ru/wp-content/uploads/
2013/03/Bezyimyannyiy149.png" alt=""
 width="502" height="256" /></a>

Так как размер шрифта по умолчанию составляет 14px, то отталкиваться будем от этого значения.

Первым делом в тег img перед атрибутом title прописываем внутренний стиль

style="margin: 0px 6px 0px 0px;"

Тем самым уменьшаем отступы в следующем порядке

1. Верхний отступ — 0px
2. Отступ от строки — 6px
3. нижний отступ — 0px
4. Отступ от левого края — 0px

Затем находим атрибуты width и height, и определяемся с размером картинки. Определяющей в этом случае является высота (height).

Если размер шрифта 14px, то расстояние между строк обычно по умолчанию — 1,5em, то есть половина размера шрифта, а значит — 7px.

Исходя из этого, размер картинки не должен превышать 14+7=21px, и значит,  значения в атрибутах width и height не должны превышать этой величины.

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

Должно получиться примерно так

Абзацы
Таблицы
Списки

Вот так можно сделать основное меню сайта, поместить его в виджет «Текст», расположить его в основной области виджетов, и это меню будет отображаться на каждой странице.

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

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

Но я хочу предложить Вам кое-что поинтереснее.

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

Переводим редактор в режим HTML, и находим код нашего списка. Код изображения состоит из двух частей. Первая часть заключена в тег <a>, и её можно просто удалить. Код и так очень громоздкий, а изображение отобразится и без этой ссылки.

После тега <img> (и всего что в нём заключено), вставляем ссылку на нужную страницу. Как делается ссылка можно прочитать в статье Ссылки.

Пример

<img class="alignleft size-full wp-image-5081" 
style="margin: 8px 6px 4px 0;" title="12"
 src="https://starper55plys.ru/wp-content/uploads/2013/08/12.jpg"
 alt="" width="10" height="10" />
<a href="https://starper55plys.ru/html-poznakomimsia/html-urok-2/ abzatsyi/">
<em>Абзацы</em></a>
<img class="alignleft size-full wp-image-5081" 
style="margin: 8px 6px 4px 0;" title="12"
 src="https://starper55plys.ru/wp-content/uploads/2013/08/12.jpg" 
alt="" width="10" height="10" />
<a href="https://starper55plys.ru/html-poznakomimsia/html-urok-3/ tablitsyi/">
<em>Таблицы</em></a>
<img class="alignleft size-full wp-image-5081" 
style="margin: 8px 6px 4px 0;" title="12"
src="https://starper55plys.ru/wp-content/uploads/2013/08/12.jpg" 
alt="" width="10" height="10" />
<a href="https://starper55plys.ru/html-poznakomimsia/html-urok-2/ spiski/">
<em>Списки</em></a>

Картинка этого кода показана выше.Теперь заключаем весь этот код в тег <p>, можно <h2>, или <h3> (от этого будет зависеть размер текста), и задаём ему внутренние стили.

<p style="font-family: Verdana; padding: 10px; 
margin: 0 0 20px 10px; width: 350px; line-height: 2em;
border-radius: 5px; 
 box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">
<img class="alignleft size-full wp-image-5081" 
style="margin: 8px 6px 4px 0;" title="12"
 src="https://starper55plys.ru/wp-content/uploads/2013/08/12.jpg"
 alt="" width="10" height="10" />
<a href="https://starper55plys.ru/html-poznakomimsia/html-urok-2/ abzatsyi/">
<em>Абзацы</em></a>
<img class="alignleft size-full wp-image-5081" 
style="margin: 8px 6px 4px 0;" title="12"
 src="https://starper55plys.ru/wp-content/uploads/2013/08/12.jpg" 
alt="" width="10" height="10" />
<a href="https://starper55plys.ru/html-poznakomimsia/html-urok-3/ tablitsyi/">
<em>Таблицы</em></a>
<img class="alignleft size-full wp-image-5081" 
style="margin: 8px 6px 4px 0;" title="12"
src="https://starper55plys.ru/wp-content/uploads/2013/08/12.jpg" 
alt="" width="10" height="10" />
<a href="https://starper55plys.ru/html-poznakomimsia/html-urok-2/ spiski/">
<em>Списки</em></a>
</p>

В результате получается вот такая картинка

Абзацы
Таблицы
Списки

Давайте разберём по порядку свойства и значения стилей, при помощи которых она у нас получилась.

font-family: Verdana; - вид шрифта
padding: 5px; - внутренний отступ от границ блока
margin: 0 0 20px 10px; - наружные отступы от внешних элементов
width: 350px; - ширина блока
/*Свойства задающие радиус углов*/
border-radius: 5px; - изменяется радиус
/*Свойства задающие "тень"*/
box-shadow:  0px 1px 3px;

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

Теперь давайте добавим в этот перечень позиционирование.

position: relative;
top: -100px;
left: 200px;

Абзацы
Таблицы
Списки

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

Теперь, когда внешний вид меню доведен до нужного состояния, нам остаётся перенести все стили (пока это свойства атрибута style), в файл style.css, темы оформления.

Для этого всем блокам задаём классы, с любым названием, затем вписываем эти классы в файл style.css, и проставляем в них те стили, которые мы подобрали для блоков в виде свойств атрибута style.

Сам же атрибут, вместе со свойствами, из html кода удаляется.

Можно ещё добавить фон для блока, вставить в него изображение, и много чего ещё. Но, чтобы всё это узнать, надо потратить несколько вечеров на знакомство с CSS.

Ведь все приведённые выше стили — это свойства и значения CSS.

P.S. Все коды приведённые выше — информационные. Если их скопировать, и вставить в редактор, то отобразятся они не совсем корректно.

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

Если кому-то захочется воспользоваться копированием, то в том редакторе, в который Вы вставите код, нужно будет подкорректировать переносы строки, то есть убрать тег <br>

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Чтобы однажды проснуться знаменитым, нужно для начала лет пятнадцать не спать.

Штопанные носки уже хорошо стоять не будут

Автобус. Час пик.
— Мужчина! Вы почему на меня легли?
— Но я же ничего не делаю!
— Ну так делайте что-нибудь!

Исправляем шаблон WordPress. Веб-инспектор < < < ◊ > > > Перевод сайта с Денвера на хостингт Бегет
 

Запись опубликована в рубрике WordPress. Добавьте в закладки постоянную ссылку.

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

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