Основы правильного редактирования шаблонов Wordpress. Редактирование шаблона WordPress: как изменить тему под себя

Неумелое редактирование шаблона WordPress может привести к плачевным последствиям. Удаление даже одной строки из кода темы может сделать ее полностью неработоспособной. Поэтому в этом вопросе нужно разбираться досконально.

Особенности шаблонов для WordPress

Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html . Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:

В состав темы входит несколько основных групп файлов:

• CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
• Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php ;
• functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
• Изображения – рисунки, которые используются в качестве фона.

Благодаря использованию шаблонов в WordPress удалось отделить внешнее представление сайта от программного кода. Поэтому они никак не влияют друг на друга, и их версии можно обновлять по отдельности.

Все установленные темы доступны для просмотра через интерфейс админки сайта. Для этого нужно перейти в раздел бокового меню «Внешний вид » — «Темы». Некоторые параметры внешнего вида шаблона можно установить в пункте «Theme Options »:

• Поменять цвет меню;
• Установить цвет ссылок;
• Выбрать один из вариантов структуры сайта;
• Задать расположение меню;
• Установить цвет фона для контента.

Список параметров, доступных в «Theme Options», может быть разным для каждой из тем.

Для продвинутых пользователей в панели администрирования WordPress имеется встроенный редактор шаблонов. Он также доступен в разделе меню «Внешний вид »:

На диске (или хостинге ) файлы всех установленных тем хранятся в папке wp-content/themes/ . В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:

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

Создаем новую рубашку для своего сайта

Создавать тему будем пошагово:

1) Заходим в директорию wp-content/themes/ и создаем папку theme_test . В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css . Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver . Внутри комментариев прописываем название темы:

/*Theme Name: Theme_test*/. /************************************************ Defaults ************************************************/

Так мы даем понять WordPress , что это стилевой файл новой темы;

3) Создаем с помощью того же редактора файл index.php . Вставляем в него код:

Сохраняем файл в папке нашей темы. Теперь здесь два файла, предназначенных для создания шаблона WordPress :

На данном этапе новая тема уже видна через админку сайта в списке установленных:

Если активировать тему, то в окне браузера сайт будет выглядеть вот так:

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

За структуру подвала отвечает шаблон footer.php.

Так что перед тем, как сделать шаблон для WordPress , нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php . Затем разнесем по ним код одноименных частей страницы.

Содержимое footer.php :

Содержимое header.php :

Вот таким образом мы создали одностраничный шаблон для блога.

Более легкий способ

Создание тем для WordPress требует хороших знаний и практического опыта веб-программирования. Поэтому был разработан целый ряд программных приложений, позволяющих создавать уникальные темы даже обычным пользователям. Рассмотрим их на примере программы TemplateToaster .

Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS . Также можно загрузить уже готовые темы:

Весь инструментарий приложения сосредоточен в верхней части. В самом окне редактора отображается черно-белый шаблон страницы сайта. Выделяя каждый из элементов дизайна, с помощью верхней панели инструментов устанавливаются значения множества параметров отображения: – ресурс имеет англоязычный, но вполне понятный интерфейс. Для начала работы нужно пройти простую процедуру регистрации. Сервис позволяет не только создавать, но и скачивать разработанные шаблоны:

• yvoschaap.com – этот генератор также страдает англоязычностью. Для начала работы с ним не требуется регистрация. Поддерживается создание шаблонов и их скачивание. Но интерфейс немного трудноват для восприятия и имеет более узкий набор параметров для настройки:

Какой вариант создания шаблона выбрать?

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

От автора: приветствую Вас уважаемые читатели. Шаблон – важный элемент любого хорошего сайта, так как он формирует структуру и дизайн отображаемых данных. Соответственно в процессе разработки, так или иначе, необходимо вносить множество правок в оформление сайта. Поэтому в данной статье мы с Вами поговорим о том, как редактировать шаблон в Joomla 3.

Для тех кто не знает, шаблон — это специальный файл или набор файлов, которые отвечают за формирование оформления, структуры и дизайна отображаемых данных. При этом, как правило, шаблон не формирует данные и логически их не обрабатывает. Вся отображаемая информация передается в шаблон из ядра CMS и только лишь отображается в определенных местах страницы и в необходимом виде. Таким образом, в шаблоне содержится минимум логики, которая необходима для отображения данных.

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

Для CMS joomla редактирование шаблона можно выполнить двумя способами.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Поэтому, редактировать шаблон Joomla, Вы можете непосредственно в менеджере шаблонов, на странице конкретного шаблона.

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

К примеру, в стандартном шаблоне Beez3 предусмотрены настройки, которые Вы видите на рисунке выше.

Второй способ предусматривает внесение правок в файл стилей шаблона, потому как все оформление шаблона, помимо его структуры, сосредоточено там.

Напомню, что шаблоны Joomla располагаются в каталоге templates, файловой структуры CMS. Поэтому переходим в данную папку, а далее в каталог интересующего шаблона, где Вы и найдете искомый файл стилей. К примеру, в Beez3 стили располагаются в дополнительной папке css.

Узнать непосредственный путь к подключаемым файлам стилей, можно из исходного кода сайта. То есть выбираете необходимый шаблона в качестве шаблона по умолчанию и переходите в пользовательскую часть. Далее просматриваете исходники.

И наконец, последний способ, который заключается в редактировании кода файлов шаблона. Это наиболее эффективный способ, так как Вы самостоятельно, вносите правки в код и формируете необходимый дизайн. При этом, конечно Вы, должны знать принцип работы шаблонов Joomla. Если данный способ Вас заинтересовал, Вам будет полезен наш курс .

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

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

Для редактирования шаблона я уже подвел основу, теперь я должен взять первый файл в разработку. Я открою файл index.php, так как он работает как скилет в устанавливаемом шаблоне для wordpress: указывает всем другим файлом на порядок и время загрузки в браузер пользователя. Открыв этот файл программой Notepad++ я обращаю внимание на первую строку.
Вижу следующий код

1

Он значит, что первым при генерации страницы блога загружается файл header.php. Обращаю внимание, что перед этой строкой нет ничего написанного. Теперь я для выполнения редактирования и адаптации шаблона открываю файл header.php.

В самом начале работы смотрю на количество строк в файлах: в файле index.php 49 строк, но 17 пустых, а в файле header.php – 58 строк, из которых 31 – пустая. Когда я буду завершать работу редактирования шаблона, я удалю все пустые строки, браузер при загрузке страницы будет экономить время при чтении кодов – эта такая минимальная работа по адаптации шаблона для блога.

Перед редактированием файлов index.php и header.php меняю кодировку документов на UTF-8, я рассказывал об этом в предыдущей статье «Редактирование шаблона WordPress»

1 строка – очень важна для верификации документа, она подтверждает, что страница написана на верном языке, руководствуясь принятыми стандартами. Я за эту строку не переживаю – есть и пусть будет. Иду дальше.

Я обращая внимание на строку 2 – браузером

Ниже этого кода идет большой контейнер, в котором размещены 8 строк, с которыми я тоже должен разобраться.

Обращаю внимания на 4 строку,

1	; charset= " />

которую я заменю на строку

1	< meta http- equiv= "Content-Type" content= "content=" text/ html; charset= UTF- 8 " />

Она говорит браузерам и поисковым системам, что страницы данного блога написаны с использованием кодировки UTF-8, только опять же зачем мне лишняя нагрузка.

Продолжаем дальше оптимизировать шаблон – строка 5 или title страницы. Она очень важна для поисковой оптимизации блога. Поэтому я обязан его использовать, но и здесь его заполнение реализовано с помощью PHP – кода. А так этот код работает

А теперь маленькое отступление. Дело в том, что я для поисковой оптимизации блога использую плагин All in One SEO Plugin . С его помощью я прописываю все заглавные title, Description, Keywords для самого блога, и для каждой отдельной страницы. Вот такой код

Первая часть кода

вытягивает из базы данных блога название поста, вторая часть кода

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

В 6 строке идет подключение файла

О нем я недавно написал заметку. Я должен прописать путь к этому файлу, начиная с названия домена.

В вашем варианте можно поменять только адрес, если будете редактировать шаблон блога для себя.

8 строка – должен прописать абсолютный путь к файлу xmlrpc.php.

Он короткий, вроде безобидный, но когда будет генерироваться главная страница блога, он загрузит очень много кода: стили плагина постраничной навигации, плагин капчи, All in One SEO Plugin, wp-syntax, Google Analytics, topsy. У Вас могут загружаться свойства, стили других установленных плагинов. Кроме того, выполняется вывод рабочих скриптов с папки CMS WordPress wp-includes.

Вывод один. Я должен оценить необходимость для блога каждого такого плагина, и решить нужен он или пустить под нож. Как пример, я не могу обойтись без плагина All in One SEO Plugin, очень много потратил времени на поиски плагина wp-syntax. Они грузят мой блог, но и отдача от них велика.

А вот без плагинов Вордпресс

Многим пользователям иногда хочется отредактировать какой-нибудь шаблон, чтобы изменить внешний вид своего сайта: поменять цвет, вставить сайдбар или убрать лишний виджет, стереть какое-либо слово со страниц или перевести его на другой язык. У пользователей появляется много подобных желаний.

Где лежат файлы

Папки с темами можно найти в поддиректории установки WordPress

\wp-content\themes

В каждой папке лежит отдельная тема.
А файл настроек WordPress wp-config.php, он тоже может понадобиться, находится в основной директории.

Структура тем WordPress

При установке новой темы WordPress вы скачиваете архив, состоящий из нескольких десятков файлов, которые отвечают за отображение информации сайта. Эти файлы представляют из себя смесь php команд, html тегов, css форматирования и простого текста. Все они связаны между собой и служат для вывода разных типов страниц. Чтобы показать информацию на отдельно взятой странице WordPress, грубо говоря, берет несколько файлов из этой папки и соединяет их последовательно в один большой файл, который, после всех дополнительных обработок, становится веб-страницей вашего сайта. У каждого типа страницы есть свой основной файл:

• single.php – используется WordPress для вывода записей;
• page.php – вывод страниц;
• archive.php, category.php и т.п. – показывает страницы списков;
• image.php – прикрепленное изображение;
• 404.php – ошибка;

WordPress берет один такой файл и исполняет, а внутри него обычно происходит обращение к нескольким другим файлам, отвечающим за вывод шапки, контента, комментариев, футера и сайдбаров. Вот пример файла, используемого для показа страниц в стандартной теме Twenty Fourteen:

/** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages and that * other "pages" on your WordPress site will use a different template. * * @package WordPress * @subpackage Twenty_Fourteen * @since Twenty Fourteen 1.0 */ get_header(); ?>

Некоторые из функций обращаются к другим файлам:

• get_header() – показывает содержимое файла header.php (шапку);
• get_template_part("content", "page") – шаблон с указанным именем;
• comments_template() – комментарии comments.php;
• get_sidebar() – сайдбары с виджетами;
• get_footer() – футер сайта.

Обычно в темах у всех основных файлов похожая структура, хотя там могут встречаться какие угодно другие названия, но суть не в этом. Чтобы отредактировать определенное место в шаблоне, его нужно найти, именно для этого я и описываю структуру тем WordPress в общих чертах. Более подробно с ней можно ознакомиться в справке . Чтобы убрать какой-то сайдбар с сайта полностью, его можно закомментировать в основном шаблоне:

//get_sidebar();

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

Чем редактировать шаблон

Лучше всего, чтобы тестовая версия сайта была установлена локально, тогда можно без страха отладить все изменения и уже готовый результат перенести на хостинг. Для просмотра файлов можно использовать один популярный бесплатный редактор Notepad++ с подсветкой синтаксиса. С его помощью можно легко копаться поиском сразу во всех файлах шаблона:

Укажите путь к своей теме

В меню надо указать папку для поиска, в нашем случае это будет папка с редактируемой темой и теперь если потребуется найти некую специфическую функцию, слово или тег, то Notepad++ окажется незаменимым помощником в этом деле, он безошибочно выдаст все вхождения фразы во всех файлах. Здесь же в настройках можно указать как именно искать слова: целиком или же только часть.

Специфические функции шаблона

Все функции, имя которых начинается с названия темы, объявлены в специальном файле functions.php. Этот файл работает как плагин, только для тем. Он может подключать другие файлы, которые функционируют точно так же, используемые для удобства разделения разной информации по логическим блокам. Таким образом все функции в шаблонах WordPress можно разделить на два типа: встроенные в само ядро и функции из файла functions.php.

Стили темы

Стили, отвечающие за оформление внешнего вида сайта, объявляются в файлах с расширением css. Все темы WordPress содержат один основной файл стилей с названием style.css. Если нужно поменять цвет, например, ссылок на сайте, то достаточно внести изменения в этот файл:

A { color: #0033cc; }

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

#my-sidebar { display: none; }

Как найти нужный элемент

Если вы пользуетесь Chrome, то у вас в контекстном меню, всплывающем по клику правой кнопкой на любом элементе страницы, есть пункт “Просмотр кода элемента” . Это меню выводит на экран окно инструментов для разработчика. Здесь очень удобно искать названия классов и id элементов, причем, при наведении мышки на строку с html в окне developer tools элементы подсвечиваются и на самой странице сайта.

Окно инструментов разработчика в Chrome
Зная id элемента, остается прописать для него нужный стиль в файл style.css. Если вы не можете найти нужное место в style.css для переопределения стиля, то, в крайнем случае, можно задать ему наивысший приоритет с помощью оператора!important:

#my-sidebar { display: none !important; }

Теперь точно должно сработать.

Стирать или не стирать

Любая ненужная строка может в последствии оказаться необходимой для чего-то или просто появится желание отменить изменения. Поэтому вместо того, чтобы убирать код совсем во время правки шаблона, его можно комментировать.
php:

//Sample Comment

/* Sample Comment */

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

Обновление тем

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

Дочерний шаблон

Вместо того, чтобы править исходную тему, можно создать свой личный дочерний вариант для правки. Чтобы сделать дочернюю тему нужно создать новую папку в том же разделе, где лежит основная тема, и скопировать туда файл style.css исходной темы. В этом файле (в самом начале) надо заменить название на свое и указать для нее родительскую тему.
Например, чтобы сделать дочернюю тему для Twenty Fourteen заголовок можно поменять следующим образом:

/* Theme Name: Twenty Fourteen Child Theme URI: //example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: I AM Author URI: //example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fourteen-child */

После этого появится возможность выбрать новую тему Twenty Fourteen Child в админке WordPress. В эту папку можно копировать те файлы, в которых планируется производить изменения (кроме functions.php и ему подобных). Так очень удобно редактировать шаблон WordPress, потому что видно именно те файлы, в которых есть изменения.

С более полным и корректным на настоящий момент способом создания дочерней темы можно ознакомиться .

Внимание! Использование визуального редактора для редактирования шаблона сайта недоступно в версиях с 14.0. В более ранних версиях необходимо быть очень внимательным: возможны непредвиденные искажения кода. Рекомендуется редактировать шаблон в режиме HTML-кода.

С помощью визуального редактора возможно изменение шаблона сайта.

Шаблон дизайна - это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный HTML-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты.

Внимание! В шаблоне дизайна сайта крайне не рекомендуется использовать комплексные компоненты.

Примечание: Чтобы использовать визуальный редактор при редактировании шаблона в версиях до 14.0 отметьте опцию Использовать визуальный редактор для редактирования шаблонов сайта в настройках Главного модуля (Настройки > Настройки продукта > Настройки модулей > Главный модуль ):

Редактирование шаблона

Для редактирования шаблона сайта выполните следующие действия:

В обоих случаях откроется форма редактирования выбранного шаблона:

Теперь можно переходить непосредственно к редактированию шаблона сайта.

При использовании визуального редактора в режиме редактирования шаблонов дизайна сайта панель инструментов включает в себя еще одну дополнительную панель - панель Редактирование шаблона . Эта панель содержит вспомогательные инструменты для редактирования шаблона дизайна сайта.

Редактирование служебных областей шаблона

На панели редактирования шаблона располагается кнопка Редактировать служебные области шаблона () , при нажатии на которую открывается форма редактирования:

Эта форма состоит из двух закладок: Верхняя часть и Нижняя часть , которые служат для редактирования верхней и нижней частей шаблона дизайна сайта соответственно. Кроме того, на форме располагается кнопка , с помощью которой можно восстановить содержимое служебных областей по умолчанию.

Добавление рабочей области Work Area

Для добавления рабочей области Work Area в шаблон сайта служит кнопка - Разделитель шаблона #WORK_AREA# . При нажатии на нее в рабочую область редактора, в которой отображается внешний вид шаблона, будет добавлен ярлык . Размещение этого ярлыка и определяет расположение рабочей области страниц сайта.

Примечание : Без Work Area шаблон сохранить невозможно.

Предпросмотр шаблона

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

Работа с кодом

Отметим некоторые особенности использования php-кода в коде шаблона. Есть некоторые тонкости при прерывании html-кода php-скриптом. Например, можно писать так:

" title="Посетите сайт">OurSite

Аналогично, и с рисунками (тег img).

Перечислим атрибуты, которые обрабатываются для ссылок и рисунков:
для тега атрибуты: href, title, class, style
для тега атрибуты: src, alt, class, style
Т.е. вместо этих атрибутов можно вставлять

Код таблицы тоже можно прерывать php-скриптом:

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