В этой статье я расскажу, как в 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. Веб-инспектор < < < ◊ > > > Перевод сайта с Денвера на хостингт Бегет
