Редактирование шаблона WordPress
Привет, дорогие друзья! Наверняка вы понимаете, что редактирование шаблона wordpress, практически всегда, является необходимым атрибутом при создании блога.
Ведь хотим мы того или нет но скачанные нами темы не всегда удовлетворяют всем нашим требованиям к дизайну и оформлению блога. И поэтому мы просто вынуждены вносить какие-то изменения в код шаблона.
Естественно, вы должны понимать, что перед тем как изменять что-то в шаблоне, вам как минимум, необходимо знать HTML и CSS. Только в этом случаи у вас получиться произвести качественное редактирование шаблона wordpress.
В данной статье я постараюсь максимально подробно рассказать о том, как редактировать скаченную вами тему. Вы узнаете, какие именно инструменты я использую для облегчения работы с шаблоном, чтобы максимально эффективно тратить свое время на данный процесс. В общем, приступим!
Перед тем как приступить непосредственно к изменению оформления шаблона необходимо разобраться в том, с каких файлов состоит шаблон wordpress.
Поверьте, это очень важно, так как обладая данной информацией, вы сможете существенно ускорить процесс редактирования темы. Дело в том что в шаблоне wordpress организовано всё таким образом, что каждый файл темы отвечает за отдельную область и функционал блога.
Вот смотрите, когда вы скачиваете и устанавливаете тему, в папке шаблона вы видите несколько файлов:
Так вот, каждый из данных файлов отвечает за какую-то свою часть сайта (если можно так выразиться). И чтобы отредактировать, к примеру, главную страницу нам не нужно пересматривать все файлы шаблона и искать нужную нам область для изменения.
Мы просто заранее знаем, что за главную страницу отвечает файл index.php и именно его нам необходимо редактировать. И так же само дела обстоят с другими файлами. Все в принципе просто, надеюсь, вы это поняли.
А теперь давайте рассмотрим, какой же файл за что отвечает.
style.css — файл, в котором находятся все стили шаблона. Как раз здесь и необходимо писать новые стили оформления.
index.php — как вы поняли, этот файл отвечает за главную страницу. Важно знать, что в этом файле можно отредактировать не всю главную страницу, а только ту область, которая выступает в качестве содержимого сайт.
page.php — файл, который можно использовать для редактирования статических страниц сайта.
archive.php — выводит записи с архива. То есть, если на вашем блоге есть блок, показывающий записи с архива, редактирование данного файла, позволит изменить оформления этих записей.
single.php — файл отвечающий за каждую конкретную запись. Получается, когда с главной страницы мы нажимаем на заголовок анонса записи, или же на ссылку читать далее, мы попадаем на страницу, которую и отображает данный файл.
Соответственно для редактирования этих записей, мы работаем с данным файлом (single.php).
category.php — как вы понимаете файл, который выводит записи по категориям.
search.php — файл, выводящий записи по поиску.
header.php — достаточно важный файл, так как чаще всего именно его необходимо редактировать. Как вы наверняка поняли с названия, это файл отвечает за вывод шапки сайта.
footer.php — файл, который выводит нижнюю часть сайта. Данную часть называют футер или подвал.
sidebar.php — боковая часть блога. Именно здесь выводятся различные виджеты и функциональные решения.
404.php — данный файл отображает страницу ошибки 404, которая появляется в случаи, когда пользователь вводит неверный адрес страницы.
Как видите, ненужно копаться в различных файлах и искать код, который необходимо изменить. Все структурировано и понятно.
А сейчас давайте рассмотрим, какие же инструменты я использую для того чтобы очень быстро редактировать шаблон.
Как редактировать шаблон, используя расширение FIREBUG
Здесь нам необходимо скачать специальное расширения для браузера Mozilla Firefox и соответственно сам браузер у нас тоже должен быть. Думаю, на том, как скачать браузер и установить на него данное расширения останавливаться не стоит…
После того как мы все сделали, открываем браузер, здесь в правом верхнем углу должна появиться специальная кнопка, которая включает расширение FireBug. Нажимаем данную кнопку.
После чего внизу у вас должна появиться дополнительная панель, которая отображает HTML- код сайта, который вы просматриваете.
Данный код располагается в иерархическом виде, где самый верхний элемент — это непосредственно тех html, который содержит в себе тег body, а той в свою очередь содержит в себе все последующие теги в такой же иерархии.
Так вот, предположим нам необходимо отредактировать название статьи (допустим, уменьшить шрифт). Для этого мы нажимаем специальную кнопку, находящуюся в панели окна расширения FireBug.
После нажатия на данную кнопку у вас появится возможность увидеть область, которая отвечает за отображения заголовка.
То есть, как это понять? Когда вы курсор мышки наводите на необходимую для редактированья область (в нашем случаи это заголовок поста) вокруг данного заголовка появляется рамка, а справа в области просмотра кода показываются стили, которые отвечают за оформления заголовка. Так вот, данные стили и необходимо редактировать.
Насколько я знаю, непосредственно в браузере эти стили редактировать нельзя, так что идем к файлам нашего шаблона и правим содержимое файла style.css.
Здесь я думаю, у вас проблем не возникнет, так как название класса, отвечающего за отображения заголовка, вы знает, остается только написать свой стиль.
Вот так вот и происходит редактирование шаблона wordpess. Надеюсь у вас все получиться, а если нет, то обязательно пишите в комментариях, что именно у вас не вышло и я обязательно вам помогу.
В общем, это все что я хотел вам сегодня рассказать. Если вам понравилась данная статья, прошу подписаться на обновления блога, чтобы не пропустить выхода новых, интересных постов.
