Изменение шаблона WordPress

Изменение шаблона WordPress

Изменение шаблона WordPress кажется достаточно трудной задачей. Ведь если зайти в папку с темой, которая располагается по адресу ваш_сайт. ru/wp-content/themes/ваша_тема, то можно увидеть множество различных файлов. На самом же деле, есть очень простой способ изменить внешний вид сайта, и нам понадобится только один файл чтобы сделать это, чуть позже расскажу какой.

В идеале уникальный дизайн создается в несколько этапов. Сначала дизайнер рисует картинки всех страниц сайта, чаще всего в Фотошопе. Затем верстальщик пишет каждую страницу на чистом HTML/CSS. После этого интегратор берет страницы, которые сделал верстальщик и встраивает их в WordPress с учетом особенностей движка. Это сложный путь, позволяющий делать качественные профессиональные шаблоны, которые даже можно продать за деньги. Нам этот путь не подходит.

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

И так для того, чтобы выполнить нашу задачу, нам потребуется:

Знания CSS

Доступ в админку WordPress

Firebug

Было бы хорошо если бы вы имели фтп доступ к файлам своего сайта и какой-нибудь html-редактор, но можно обойтись и без этого.

Что такое Firebug? Это очень удобный инструмент (обычно встроенный в браузер), позволяющий посмотреть исходный html-код любой страницы в интернете и определить, какие стили прописаны для каждого элемента на странице. Инструмент этот в разных браузерах называется по-разному, но суть от этого не меняется.

Если вы используете браузер Google Chrome, то Firebug можно запустить, нажав кнопку F12. Внизу экрана появится область, где слева будет виден исходный код, а справа будут отображаться стили для выбранного элемента. Также можно запустить Firebug нажав на любом элементе на странице и выбрав пункт Проверить элемент. В этом случае справа вы сразу увидите стили прописанные для выбранного вами элемента.

В браузере Firefox подобный инструмент запускается аналогично. Нажимаете правой кнопкой на любом элементе страницы и выбираете из появившегося контекстного меню пункт Исследовать элемент.

В браузере Opera пункт контекстного меню называется Проинспектировать элемент.

Вот собственно алгоритм работы:

Выбрать на своем сайте элемент, внешний вид которого вы хотите поменять.

Щелкнуть на нем правой кнопкой и выбрать пункт Проверить элемент или другой подобный.

Посмотреть, какие стили назначены для данного элемента, как называется класс заданный для него и в какой строке файла стилей находится описание стилей этого элемента.

Зайти через админку Wordpres в редактор файлов темы, выбрать файл стилей, найти в нем нужный класс и задать для него собственный стиль.

Вот собственно и все. Четвертый пункт может выглядеть и так:

4. Соединиться с ftp-сервером, на котором находится ваш сайт, зайти в папку темы, открыть файл стилей, найти нужный класс, задать для него собственный стиль и сохранить.

Я делаю именно так. Мне гораздо проще править файл через html-редактор, чем через встроенный редактор WordPress.

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


Карта сайта


Информационный сайт Webavtocat.ru