Дорогие читатели, в этой статье мы научимся редактировать шаблон WordPress.
Для тех, кто еще не знаком со структурой шаблона вордпресс, эта статья обязательна к прочтению. Содержание статьи:
Я вижу две основные причины, зачем нам это нужно:
- Большинство настроек блога связано с редактированием кода – html или css. Во многих своих статьях я пишу о том, что нужно отредактировать определенный файл темы. Если вы не знаете, как искать эти файлы и какими средствами удобнее их править, эта статья для вас.
- При создании блога вы установили на него тему (шаблон) из интернета и хотите что-то в ней изменить, добавить элементы дизайна или функциональные блоки. Но для этого обязательно обладать хотя бы минимальными знаниями HTML и CSS. Независимо, новичок вы или имеете опыт в создании сайтов, для редактирования шаблона WordPress вы должны понимать из чего он состоит и для чего нужна каждая его часть. Поэтому для начала рассмотрим структуру шаблона WordPress.
Структура шаблона WordPress
HTML-код шаблона WordPress разбит на несколько php-файлов. Сделано это для удобства: повторяющиеся на разных страницах куски кода вынесены в отдельные файлы и подключаются к каждой странице с помощью функции include. Шапка, футер и сайдбар находятся в отдельных файлах, а файл каждого типа страниц содержит только центральную область: 
Наиболее часто редактируемые файлы шаблона WordPress:
- index.php – Шаблон начинается с файла index.php, который выводит главную страницу сайта.
- header.php - Шапка сайта. В этот файл вынесена повторяющаяся на каждой странице сайта верхняя часть. Он начинается с тега , содержит полностью , в который вставляется большинство скриптов при настройке блога. В нем открывается тег и выводится логотип, слоган, верхнее меню и прочие элементы шапки.
- style.css – основной стилевой файл шаблона, в котором задается внешний вид элементов сайта. Чтобы редактировать шаблон WordPress, чаще всего приходится работать именно с этим файлом.
Остальные файлы:
- single.php – отвечает за отображение каждой отдельной записи. Т.е. внешний вид страницы, на которой вы сейчас читаете мою статью, настраивается именно в этом файле.
- page.php – вывод статической страницы блога. Новые страницы создаются в разделе «страницы» в левом меню, а их вид настраивается в этом файле.
- sidebar.php – отвечает за вывод сайдбара (боковой колонки блога), где находятся виджеты. Эта часть шаблона тоже повторяется на каждой странице WordPress сайта, поэтому вынесена в отдельный файл. Обычно не приходится редактировать этот файл, потому что все изменения производятся над . Однако никто не запрещает вписать какой-то код напрямую в файл sidebar.php.
- functions.php – файл с php-функциями темы. Все они влияют на внешний вид и работу сайта, определяют события при определенных действиях пользователей.
- footer.php – футер (подвал) сайта, его нижняя часть. Это тоже повторяющийся на всех страницах элемент. В него обычно вставляют счетчики посещаемости, копирайт и контактные данные.
- category.php – за вывод страницы с перечнем всех записей определенной категории отвечает данный файл.
- tag.php – вывод архива записей по соответствующему тегу прописан в этом файле.
- archive.php – архив всех записей за определенный месяц (год) настраивается здесь.
- search.php – выводит результаты поиска по блогу.
- comments.php – отображение комментариев к записям и страницам.
- 404.php – шаблон ошибки 404 – страница не найдена.
В зависимости от выбранной темы, в ней могут появиться и другие файлы, тогда придется самостоятельно разобраться для чего нужны они.
Как редактировать файлы шаблона WordPress
Сразу хочу предупредить, что не стоит лезть в код и пытаться самостоятельно его переделать, если вы ничего не понимаете в CSS и HTML. Другое дело, когда в каком-то уроке говорится вставить определенный код в определенное место файла. Обязательно сделайте бэкап файлов и базы данных, прежде чем вносить какие-то изменения! Для редактирования файлов темы WordPress сайта я предлагаю три варианта:
Настройка темы WordPress в админке
Если вы скачали и установили готовый шаблон WordPress, то многие настройки можно сделать, не влезая в код. Редактировать каждую тему вордпресс можно через админку блога.
Зайдите в раздел «Внешний вид»
— «Настроить»
, откроется окно с основными настройками темы. Здесь можно ввести название и описание сайта, которые отобразятся в шапке сайта после сохранения. Так же вы можете изменить цвет фона или фоновое изображение и другие настройки — разобраться не сложно. 
Большую часть настроек темы WordPress можно выполнить в разделе «Внешний вид»
-> «Имя вашей темы»
. 
Здесь можно загрузить логотип, фавикон и т.д. Настроек очень много, но честно сказать, я ими никогда не пользуюсь, так как мне проще работать с кодом, чтобы редактировать тему WordPress.
Вот и все! Выбирайте удобный для себя способ для редактирования шаблона WordPress в зависимости от ситуации и никогда не забывайте делать бэкапы. чтобы не пропустить новые полезные статьи.
P.S. Хочу напомнить вам, дорогие читатели, что если вы замечаете в моих статьях ошибки, не поленитесь нажать «Ctrl + Enter », чтобы с помощью я их исправила.
От автора: приветствую вас, друзья. В очередной статье на тему WordPress мы с вами рассмотрим вопрос, как изменить шаблон WordPress. Если вы еще никогда не сталкивались с необходимостью изменения шаблона WordPress, тогда обязательно прочтите данную статью, поскольку рано или поздно вам, скорее всего, придется столкнуться с вопросами настройки и редактирования шаблона WordPress.
Для начала давайте определимся с наиболее часто возникающими вопросами, с которыми сталкиваются пользователи при настройке шаблона WordPress под себя. Вот примерный их список:
как редактировать шаблон WordPress
изменить ширину шаблона на WordPress
как изменить размер шаблона WordPress
как изменить цвет шаблона WordPress
как изменить шрифт в шаблоне WordPress
И это лишь небольшой перечень проблем, с которыми вы можете столкнуться или которые вы сможете помочь решить другим, в том числе и за вознаграждение, если вы занимаетесь разработкой сайтов на заказ.
Все вопросы в списке выше можно решить двумя способами в зависимости от темы, которая используется для сайта. Начнем с самого простого варианта, который не требует знаний верстки. Этот вариант подойдет, если шаблон поддерживает редактирование из настроек.
Перейдем в раздел Внешний вид — Настроить и увидим главную страницу сайта и в левой части страницы доступные настройки сайта. Среди них могут быть и настройки оформления.
Для примера давайте попробуем изменить цветовую схему сайта. Зайдем в меню Цвета и изменим фон боковой и центральной частей сайта.
Как видим, это довольно удобно и изменить цвет шаблона WordPress достаточно просто — результат мы видим сразу же и можем его оценить.
Однако не всякая тема предлагает все необходимые нам настройки шаблона WordPress. Например, там вряд ли будут настройки, позволяющие изменить ширину шаблона на WordPress, например, даже в текущей теме нет настроек, позволяющих изменить шрифт в шаблоне и так далее. Как же быть в этом случае? Вот здесь нам и придется прибегнуть ко второму варианту и здесь уже необходимы некоторые навыки верстки.
Итак, нам потребуется редактировать чаще всего только один файл — это файл стилей style.css. Находится он в папке вашей темы. Давайте в качестве примера изменим цвет шрифта. Кстати, сделать это можно прямо из админки WordPress. Только будьте аккуратны и внимательны, чтобы случайно не «поломать» сайт. Лучше всего сделайте резервную копию темы перед тем, как что-то менять в ней. Итак, идем в меню Внешний вид — Редактор и по умолчанию у Вас должен быть открыт для редактирования файл стилей темы.
Если это не так, тогда выберите этот файл из списка справа, он называется Таблица стилей (style.css). Чаще всего цвет шрифта задается в body, поэтому найдем стили данного элемента и пропишем красный цвет для в качестве цвета шрифта.
После сохранения файла можем обновить сайт и увидеть красный цвет для основного шрифта на сайте.
Как видим, настройка шаблона WordPress под себя — достаточно несложная задача. Достаточно немного знаний CSS и вы сможете изменить шаблон WordPress и произвести необходимую настройку шаблона. По той же схеме мы можем решить и другие аналогичные задачи. На этом я с вами прощаюсь. Удачи и до новых встреч!
Однако такой подход имеет существенный недостаток. При следующем обновлении темы все настройки часто просто «слетают», так как обновление темы перезаписывает файлы таблицы стилей по новому.
В WordPress существует относительно простой механизм, позволяющий избежать этого недостатка — дочерные темы (Child Theme)
Многие блогеры, используя WordPress, не использует дочерные темы
или из-за отсутствия понимания каким образом их использовать, или из-за предполагаемой сложности их создания.
Далее я расскажу как настроить тему вордпресс под себя с помощью использования дочерной темы и покажу, что особой сложности это не представляет.
Почему надо использовать дочерную тему?
Дочерная тема позволяет вносить в сайт изменения, не затрагивая основной исходный код родительской темы, а это дает возможность обновлять родительскую тему без удаления изменений.
Для дочерной темы необходимо создать отдельный набор файлов, которые можно использовать для настройки сайта не затрагивая исходный код родительской темы вообще, но используя родительскую тему за основу. Это позволяет производить корректировку кода намного легче, а также гарантирует, что блогер никогда не испортит свою первоначальную тему, так как он никогда не проводит изменения ее «основных» файлов. А в случае ошибки он всегда может «выключить» дочерную тему и вернуться к оригиналу.
Как создать дочерную тему Вордпресс
Способ 1. С подключением стилей через правило @import
Для создания дочерной темы достаточно создать файл стилей style.css
и подключить к нему стили родительской темы с помощью правила @import.
В качестве примера, я создам дочерную тему для темы Twenty Twelve, входящей в «базовый комплект поставки» WordPress. Перво-наперво, у себя на компьютере я создаю новую папку для дочерной темы. Назову ее: / twentytwelve-child/.
В этой папке я создаю файл с именем style.css
и заполняю файл информацией, как показано ниже:
/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://divitheme.space */ @import url("../twentytwelve/style.css"); /* ниже устанавливайте свои настройки элементов темы*/
Строки Theme Name
(Имя темы) и Template
(шаблон родительской темы) — обязательные, строки Description (Описание), Author (Автор), Author URI (сайт автора) необязательные, и по усмотрению создателя быть им в теме или нет.
Важной частью этого файла являются строка: @import url("../twentytwelve/style.css"); Эта строка идентифицирует родительскую тему и импортирует CSS из нее. Когда ты будешь создавать «дочку» — то должен убедиться, что путь к файлу CSS твоей родительской темы является правильным, и что параметр «Template:» правильно определяет имя твоей родительской темы. Если ты используешь другую тему - настрой соответствующие названия для другой темы.
Обрати внимание — все названия должны быть чувствительны к регистру: название с большой буквы и название с маленькой - это разные названия!
Так как папка моей материнской темы называется «twentytwelve», и она с маленькой буквы, следовательно @import URL учитывает этот фактор.
Способ 2. С подключением стилей кодом в function.php
Во избежания лишних обращений к базе данных, что приводит к увеличение времени отображения страниц, Codex WordPress не рекомндует использовать правило @import для подключения стилей родительской темы
В этом способе для дочерной темы создаеться два файла: в дополнение к style.css в папке дочерной темы нужно создать файл function.php и вставить туда следующий код:
В этом способе запись @import url(‘../twentytwelve/style.css’); в файле style.css дочерной темы совершенно не нужна и файл style.css будет иметь следующий вид:
/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://divitheme.space*/ /* ниже устанавливайте свои настройки элементов темы*/
Как активировать дочерную тему
После того, как я создал папку дочерной темы и файл style.css в ней, я могу загрузить на сервер и активировать в WordPress вновь созданную дочерную тему. Загрузка и активация дочерней темы ничем не отличается от загрузки и активация обычный темы. Загрузить ее можно через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.
Обрати внимание, что перед тем, как загрузить дочерную тему, необходимо сначала создать ZIP-архив ее папки. Это можно сделать с помощью практически любого архиватора.
Да и еще, при активации дочерной темы также убедись, что у тебя в папке тем WordPress загружена родительская тема (в моем примере это тема «Twenty Twelve»).
Модифицикация CSS темы
Теперь я создал дочерную тему для Twenty Twelve и загрузил ее в WordPress. Так как в дочерной теме я импортирую CSS родительской, то при активации дочерная тема будет выглядеть так же, как и родительская. Для настройки своей темы я могу добавить любые изменения в файл CSS дочерной темы ниже строки @import... В этом случае вся новая информация CSS из дочерной темы добавляется после загрузки CSS родительской темы, и потому «дочерная» CSS в выдаче находится ниже CSS из родительской темы, а это значит, что все новые стили CSS будет перезаписывать исходные.
Например, предположим, что в моем примере я хочу изменить заголовок сайта. Сейчас шрифт «жирный» и серый, а я хочу сделать его тоньше и красным. Я могу добавить соответствующую CSS к дочерной теме в файле style.css следующим образом:
/*
* Theme Name: Twenty Twelve Child
* Template: twentytwelve
Description: Моя дочерная тема для Twentytwelve
Author: Александр Коваль
Author URI: https://divitheme.space
*/
@import url("../twentytwelve/style.css");
/* ниже устанавливайте свои настройки элементов темы*/
Site-header h1 a {color: #FF0000; font-weight: 300;}
Выбор темы для WordPress очень важный шаг перед предстоящей огромной работой. Ведь именно от этого будет зависеть какое «лицо» будет у вашего сайта или блога. В вашем распоряжение будут десятки тысяч, как бесплатных так и платных шаблонов, и их выбор будет зависеть только от вас. К выбору темы нужно подходить щепетильно, потому что разные темы имеют разную структуру и разметку, так же разное количество сайтбаров, стилей и многое другое. В этом уроке мы разберем как установить тему WordPress.
WordPress темы, что это от куда их брать
Шаблон для вашего сайта на WordPress можно получить несколькими способами:
- выбрать из общедоступных тем в каталоге wordpress.org;
- купить премиум тему у разработчиков и распространителей;
- заказать собственную тему у программистов;
- создать шаблон самостоятельно.
Каждый из вариантов поможет вам внедрить подходящую для вашего сайта тему, все различие в том на сколько ваш шаблон будет уникален и функционален.
При установлении тем доступных для скачивания с официального сайта WordPress вы в любом случае будете использовать ту, которая уже есть у кого то. Выбирая из популярных вы можете быть уверены что схожий шаблон есть у тысяч пользователей популярной платформы. Но не спешите расстраиваться ведь любую тему можно видоизменять и корректировать, которая может кардинально отличаться от основной. При желании вы можете изучить наши уроки по созданию дочерних тем и способов изменения внешнего вида сайта.
Покупая премиум тему у разработчиков вы обеспечите себе более-менее уникальную тему, которую использует меньшее количество пользователей сети, хотя опять же данный метод получения шаблона для сайта не намного лучше чем предыдущий. Ведь вы заплатите за то что уже есть у кого то другого. Преимуществом покупки таких тем является то, что они в общем идут более качественные и функциональные.
Что бы заказать уникальную тему у программистов-разработчиков вы потратите не малое количество денег, но в итоге получите именно то что желали и данная тема будет доступна только вам. Огромным преимуществом разработки собственной темы это ее уникальность, без лишнего кода и ненужных вам настроек и функционала. К тому же наличие такого шаблона придаст вашему сайту имидж в глазах пользователей.
Создание шаблона самостоятельно - кропотливый труд требующий не маленьких знаний программирования, верстки и дизайна. Данный способ доступен далеко не всем. Именно по этому темы которые продают и разрабатывают не так уж и дешевы.
Как выбрать и как установить тему WordPress
К статье прилагается видео урок по установке и настройке темы WordPress.
Для того что бы установить тему WorrdPress, нужно зайти в , во вкладке внешнего вида, затем перейти к темам.
Откроются доступные вам темы которые уже установлены. Что бы выбрать, а затем скачать и установить свеженький дизайнерский шаблон нужно перейти по ссылке сверху «Добавить новую».
Войдя в меню выбора темы вы увидите количество предлагаемых вам шаблонов. В моей версии их около двух тысяч.
Вам предлагают выбрать нужную вам тему по внешнему виду или подобрать параметры поиска самостоятельно, что вы и можете сделать перейдя во вкладку «Фильтр характеристик».
По предложенным характеристикам темы WordPress
можно сортировать по цветам, разметке страниц и функциям предоставленных в темах.
Темы можно просматривать онлайн и установить к себе в «движок». После установки опять переходим во вкладку «Темы» и найдя скачанную ранее нажимаем активировать.
После выполнения этого действия выбранная вами тема будет внедрена в ваш сайт и будет отображаться на всех страницах.
Настройка темы WordPress
Перейдя во вкладку меню «Внешний вид»/ «Настроить» нам откроется наш сайт и с левой стороны от него настройки темы, которые зависят от самой темы и ее функционал может отличаться. Здесь можно по предложенным параметрам, которые зависят от самого шаблона, настроить некоторое отображение в «реальном времени»:
- описание;
- настроить название сайта;
- шрифты;
- ширину экрана;
- корректировать разметку страниц, её цвет;
- навигацию и т.д.
Мы рассмотрели все возможные варианты как установить тему WordPress, мы можем видеть что это деяние не займет у вас много времени. Также с установленным шаблоном нам станет доступна настройка сайтбара и виджетов, но их мы рассмотрим в отдельном
Для того чтобы понять, как установить и настроить тему и другие незначительные нюансы будет рассмотрен пример на шаблоне с именем «Aldehyde», который можно с легкостью найти в бесплатных шаблонах проекта WordPress.
Заходим в административную панель сайта. Переходим в раздел меню “Внешний вид/Темы”. Жмём на кнопку добавить новую.
В поиске набираем название искомой темы, в нашем случае это «Aldehyde». Кликаем на кнопку “установить”, а затем “активировать”. После этого новая тема заработает. Теперь нам нужно настроить её под себя.
Настройка темы на примере шаблона «Aldehyde».
Для того чтобы приступить к настройке темы или шаблона необходимо перейти в меню к пункту “Внешний вид” и кликнуть по кнопке «Настроить».
В разделе Header settings (Настройки шапки):
- в подпункте “title, tagline & logo”необходимо добавить название, логотип и иконку сайта.
- в подпункте “social icons” устанавливаем социальные иконки. Здесь необходимо указать информацию в виде ссылок на соц. сети владельца сайта.
- далее идёт подпункт “изображение заголовка”. Здесь меняется изображение фона шапки.
Во втором разделе Design and layout (Дизайн и оформление) можно выполнить настройку дизайна и макета сайта. В этом разделе можно установить желаемое отображение контента в блоге (одна или несколько колонок). Помимо отображения контента раздел позволяет активировать или отключить на некоторых страницах или даже на всем сайте отображение боковых колонок. Еще в этом разделе можно применять различные таблицы стилей и устанавливать информацию в подвале сайта.
Раздел Design and layout содержит следующие подпункты:
- Blog layout – оформление ленты блога
- Sidebar layout – включение и выключение сайдбара (боковой колонки)
- Custom CSS – правка CSS стилей шаблона для продвинутых пользователей.
- Custom Footer Text – Добавление текста в подвал сайта.
- Theme Skins – выбор цветовой схемы шаблона.
- Цвета. Раздел позволяет выбрать цвет и фон имени и описания ресурса.
- Веб-шрифты Google. Раздел поможет выбрать различные шрифты от компании Google.
- Фоновое изображение. Тут можно закачать необходимое фото или картинку для фона.
В следующем разделе именуемым Main Slider (Основной слайдер) можно выбрать подходящие для него настройки. Но в первоначальной стадии он не является нужным, поэтому не рекомендуется пока обращать на него особое внимание. К недостаткам основного слайдера можно отнести высокую загруженность ресурса. Более того этот компонент можно по праву называть противником мобильных версий сайтов.
Затем идёт раздел Custom showcase (Пользовательская витрина). Здесь вы можете красиво оформить 4 блока с ссылками на важные страницы вашего сайта.
Далее будут предложены разделы виджетов и статичности главной страницы, их пока рекомендуется пропустить, потому что статичность основной страницы уже поддавалась настройке, а настройку виджетов более удобно совершить в основном меню конструктора. Для этого необходимо перейти в раздел внешнего вида и кликнуть по кнопке «Виджеты». После этого в левой части станут доступны различные для применения и использования виджеты. Путем перетаскивания мышью можно переместить понравившийся виджет в подвал или боковые колонки сайта. После этого надо произвести их легкую настройку и сохранить все действия.
Очень важно не загружать виджетами боковые колонки ресурса, гораздо эффективнее оставить только самые необходимые из них.
Настройка отображения и вида меню.
Для того чтобы практично настроить отображение меню ресурса, которое можно найти в категории «Внешний Вид» следует прибегнуть к следующей инструкции.
- Необходимо дать меню имя и кликнуть по кнопке «Создать».
- Добавить туда самые необходимые страницы верхней степени.
- В настройках такой страницы использовать текст ссылки для последующего его отображения.
- Необходимо поставить или убрать галочку в пункте автоматического добавления страниц верхней степени.
- Выбрать место для отображения меню на сайте. Данная тема поддерживает два меню в шапке.
