Приветствую вас, дорогие читатели! Первый пост своего нового блога я бы хотел посвятить редактированию шаблонов WordPress. Я расскажу о том, как наиболее быстро и эффективно редактировать и настраивать под свои нужды WordPress шаблоны. Те люди, кто хоть раз создавал свой сайт на этом движке, непременно сталкивались с этой проблемой. Я, естественно, не исключение и мне тоже пришлось достаточно помучаться, пока я сам для себя не выработал оптимальную модель, которой и хочу поделиться с вами. Конечно, многие со мной поспорят об оптимальности того или иного способа, да и может быть метода в целом, но я, прежде всего, хочу дать совет новичкам, которые еще не имеют достаточного опыта и знаний.
Все современные шаблоны для WordPress верстаются при помощи блочных элементов (тегов) <div> под управлением таблицы стилей CSS, которая «подключается» к странице при помощи тега <link> еще в шапке между тегами <head>. Обычно файл таблицы стилей называют style.css, но в принципе его можно назвать как угодно, лишь бы было расширение .css. Элементу <div> присваивается какой-либо class или id для определения ему конкретного стиля, который вы указали в файле css. Например: <div class=”box”>…</div>. В таблице стилей в свою очередь должна быть соответствующая запись в виде класса box.
Для того чтобы редактировать шаблоны необходимо редактировать элементы <div> и, соответственно, таблицу стилей. Обращаю внимание на то, что я не затрагиваю редактирование текста или функций php, я говорю именно об изменении элементов <div> и связанных с ними стилей. Например, нужно изменить цвет или размеры блока в сайдбаре, или увеличить отступы, или требуется удалить надоедливые блоки с баннерами в сайдбаре, которые бывают во многих шаблонах, и т.д.
Ну что ж, от небольшого вступления давайте приступим к редактированию. Дабы не ходить далеко, рассмотрим на примере одного из элементов моего блога. Допустим, нам нужно увеличить толщину линии в подвале сайта (обычно footer.php), но мы не знаем какой class или id соответствует этому элементу <div>.
Наверняка многие слышали о сравнительно новом браузере Google Chrome. В нем есть очень полезная функция – Developer tools. Как мы ее используем: правой кнопкой мыши кликаем на элемент, в данном случае горизонтальная линия, и нажимаем «Просмотр кода элемента». Должно получиться вот так:
В левом окошке мы видим, что элементу <div> присвоен id=”bottom”. Чтобы убедиться в правильности выбора, просто наводим на строчку <div id=”bottom”>…</div> мышкой. При этом элемент на странице выделяется синей рамкой. Если вы выбрали не тот элемент, то найдите нужный, просто перебирая указателем мыши все варианты, а синяя рамка уже будет указывать на выбираемый элемент. Галочки напротив атрибутов служат для их отключения, т.е. можно просмотреть страницу (не закрывая Developer tools), отключив нужные атрибуты.
В правом окошке можно найти тот самый id bottom из таблицы стилей и его атрибуты. В начале, мы поставили задачу увеличить толщину этой линии. Для этого нужно изменить атрибут border-top с 5px на любое другое большее, например, 10 px.
Чтобы изменить border-top нам нужно открыть таблицу стилей. Можно это сделать через админ-панель на странице «Редактировать темы» (Внешний вид -> Редактор). На странице редактора, выбрав справа соответствующий файл css, нажмите Ctrl+F и введите в поиске нужный id или class, у нас это bottom. Теперь можно редактировать этот стиль как вам угодно, но главное всегда делайте резервные копии. Вернемся к нашей линии. Заменим 5px на 10px и посмотрим что получится.
Вот так можно быстро перекраивать шаблоны WordPress. Но это лишь тривиальный пример, ведь если включить фантазию, то можно здорово переделать весь дизайн.
