Редактирование шаблона WordPress: как изменить тему под себя? Настройка шаблона wordpress ebuy свой интернет-магазин Настройка темы wordpress под себя

Всем привет! Если кто-то давно следит за моим блогом, то должно быть заметил, что я постоянно меняю его внешний вид. Редактирование шаблона WordPress не такая сложная штука, как может показаться на первый взгляд. Достаточно знать структуру шаблона и иметь базовые знания HTML, CSS

Где скачать и как установить

Установка существует автоматическая установка и ручная.

Автоматическая целиком и полностью осуществляется через админку WP: перейдите в раздел «Внешний вид» — «Темы» и выберете закладку «Добавить новую». Вам сразу предложат на выбор несколько шикарных визуальных шкурок для вашего блога. Если сраз не нашли ничего подходящего, то воспользуйтесь поиском и фильтром характеристик. Нашли подходящую? Жмите «Установить»! Далее возвращайтесь в раздел «Внешний вид» — «Темы» и ищите ее. Остается только нажать на «Активировать» и полюбоваться новым оформлением своего блога.

При установке в ручную необходимо скачать архив с темой с официального сайта WP, распаковать его и полученную папку закинуть на ftp в директорию /wp-content/themes. Лично мне этот способ кажется проще и быстрее. Хотя я и визуальным не пользуюсь — не ищу легкой жизни. Так что в этом деле с меня можете пример не брать. Я ведь могу и плохому научить.

Опять же, остается только Активировать новую шкурку.

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

Сейчас я буду сильно умничать, но тем не менее постараюсь простым и понятным языком донести до вас суть вопроса. Главное слушайте меня внимательно. Здесь просто нужно уловить основную суть, и все станет понятно.

Страницу блока можно представить как совокупность содержания, структуры и представления.

Текст статей, страниц, создаваемые меню и виджеты определяют содержание страницы, шаблоны темы (php файлы) определяют структуру веб страница, а стили темы (файл style.css и всевозможные дополнительные шрифты и картинки) — графическое представление. Фактически, страница блога собирается как конструктор согласно шаблонам, графически оформляется согласно стилям и заполняется согласно созданному Вами контенту.

Для удобства, я бы разбил все файлы на две группы. Шаблоны первой группы определяют части страницы:

bookmark.php — не всегда присутствует, отвечает за социальные кнопки;
comments-old.php — необязательный шаблон, отвечает за представление старых комментариев;
header.php — определяет самую верхнюю часть исходного кода страницы: все что расположена в теге header и шапку сайта;
sidebar.php — место под меню и видженты;
comments.php — шаблон для комментариев. Обычно подключается только к записям (single.php) и страницам (page.php) (на своем блоге я отключил комментарии для страниц, ибо они служат в большей части для технической и общей информации);
searchform.php — необязательный шаблон, отвечает за форму поиска. Очень часто этот код не выносится в отельный файл;
functions.php — файл со скриптами и функциями темы;
и другие.

Шаблоны второй группы определяют структуру представления страницы в целом и формируются за счет подключения шаблонов первой группы с добавлением области контента:

archive.php — содержание рубрики;
single.php — отдельная запись;
index.php — главная страница;
search.php — результаты поиска;
page.php — созданная страница (не путать с записями);
404.php — страница ошибки 404, открывается при попытки зайти на несуществующую страницу.

Визуально структура шаблона wordpress выглядит так:

Что будет, если отсутствует один из шаблонов второй группы? Его функции возьмет на себя другой из группы. Это называется иерархией шаблонов, и об этом подробно написано в кодексе WordPress . Главное понимать, что шаблоны второй группы мало чем отличаются друг от друга — только контентом и дополнительными подключаемыми плагинами (например, хлебные крошки, социальные кнопки или похожие статьи). Поэтому недостающий файл темы несложно создать самому на основе уже имеющихся. Что из себя должен представлять его контент, можно подсмотреть в соответствующем файле другой темы.

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

1. WordPress имеет встроенный редактор:

К сожалению, стандартный редактор не умеет подсвечивать синтаксис кода, поэтому его удобно использовать только для внесения небольших коррективов. Он находится в разделе «Внешний вид» — «Редактор».

В правом столбце представлены все файлы темы WordPress, а в самом низу style.css — файл со стилями.

2. Подключитесь к ftp, на котором находится блог. Перейдите в директорию /wp-content/themes/название_темы и откройте нужный шаблон с помощью текстового редактора, установленного на Вашем компьютере. Это несколько дольше, но зато можно использовать редактор с подсветкой синтаксиса кода.

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

Спасибо за внимание!

Однако такой подход имеет существенный недостаток. При следующем обновлении темы все настройки часто просто «слетают», так как обновление темы перезаписывает файлы таблицы стилей по новому.

В 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://сайт */ @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://сайт*/ /* ниже устанавливайте свои настройки элементов темы*/

Как активировать дочерную тему

После того, как я создал папку дочерной темы и файл 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://сайт */ @import url("../twentytwelve/style.css");

/* ниже устанавливайте свои настройки элементов темы*/

Site-header h1 a {color: #FF0000; font-weight: 300;}

Прекрасная тема для wordpress с огромным количеством настроек, адаптивностью и все это на русском.

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

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

Настройка шаблона wordpress. Настройка слайдера.

Чтобы добавить слайды необходимо зайти во Внешний вид — Настройки темы — Слайдер и выбрать вкладку Настройки слайдера для записей/страниц. Очень важно чтобы слайдер был включен, иначе ничего он не будет работать, что логично. Перед собой вы увидите вот такие настройки.

Все, что вам осталось сделать так это добавить соответствующие ID записей или страниц в поля слайдов (в моем примере добавлены 1 и 17). Найти ID вы можете на вкладке Все записи или Все страницы. На картинке поле с ID отмечено красным.

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

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

Продолжая цикл статей рубрики « », ниже подробно рассмотрим, как установить и настроить тему для WordPress.

1. Активация предустановленных тем для WordPress

Для работы с темами оформления войдём в консоль WordPress и во вкладке «Внешний вид » выберем раздел «Темы ».

В движке WordPress изначально предустановленно несколько тем оформления, которые можно «примерить» на сайт, нажав кнопку «Посмотреть ». Кнопка «Активировать » применит эту тему к сайту.

2. Больше тем в каталоге WordPress

Чтобы получить доступ к гораздо большему выбору тем для WordPress, помимо тех, что идут в комплекте предустановленных, жмём «Добавить новую ».

Откроется каталог тем для WordPress. Просмотреть темы оформления избранные (образцово-показательные по мнению создателей движка), популярные среди пользователей или свежие, которыми каталог недавно пополнился, можно, используя соответствующие кнопки сортировки.

Для более конкретного поиска подходящей к тематике сайта темы оформления воспользуемся кнопкой «Фильтр », которая позволит выбрать, помимо расцветки, подходящий вариант с нужной разметкой колонок и с уже установленными функциями. После отметки нужных параметров жмём «Применить фильтры ».

Установка тем оформления из каталога проводится точно так же, как и в случае с изначально предустановленными в движок. Жмём кнопку «Просмотреть », чтобы наглядно оценить тему, и, если она подойдёт, нажимаем «Установить », а затем – «Активировать ».

3. Установка сторонних тем для WordPress, скачанных в Интернете

Темы оформления для сайта или блога можно найти не только в каталоге WordPress, но также и на различных сайтах в Интернете, в частности, в специальном разделе на официальном сайте движка WordPress.Org . Здесь также можно искать темы по отдельным коллекциям или с помощью фильтров.

Выберем здесь тему и скачаем её, нажав на кнопку «Download ».

Далее скачанный архив темы необходимо распаковать и перенести в папку с темами WordPress. В папке с файлами движка выбираем папку «wp-content», затем – «themes». Если сайт был создан на , этот путь может быть следующим:

С:\inetpub\wwwroot\имя-сайта\wp-content\themes\

Ну, или если сайт находится на платном хостинге, перемещаем тему в:

public_html/wp-content/themes /

Обновляем консоль WordPress. Только что вручную добавленная тема будет видна в списке установленных. Теперь её можно «примерить» на сайт, а в дальнейшем и активировать.

4. Настройка тем для WordPress

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

Чтобы внести в тему оформления свои коррекции, во вкладке «Внешний вид » выбираем раздел «Настроить ».

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

Для шапки сайта можно установить свой логотип.

Организацию сайта и его функционал можно настроить с помощью виджетов.

Главную страницу сайта можно сделать статической, отменив предустановленную в большинстве тем оформления настройку автоматической публикации новых статей.

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

Каждая отдельная тема оформления может содержать свои уникальные настройки, которых нет у других настраиваемых тем.

Установка и настройка тем для WordPress – только часть процесса создания «облика» сайта или блога. Есть ещё два важных вопроса, которые детально рассмотрены в статьях сайта:

Помогла ли Вам данная статья?

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

Первый шаг создания настроек

Создание настроек темы производится в файле functions.php вашего шаблона. Если его еще нет, то нужно его создать. После того, как вы его создадите, дабавьте в этот файл следующий код:

При переходе к пункту «Внешний вид» появится пункт «Настройки».

Создание панели настроек

Панель настроек является пунктом, который может содержать специальные секции с настройками:

WP_Customize_Manager::add_panel(WP_Customize_Panel|string $id, array $args = array())

Например:

$wp_customize->add_panel("panel_id", array("priority" => 10, "capability" => "edit_theme_options", "theme_supports" => "", "title" => "Заголовок", "description" => "Описание",));

Параметры:

args - аргументы
- capability - возможности, необходимые для панели. По умолчанию edit_theme_options
- theme_supports - тематические функции, необходимые для поддержки панели
- title - отображаемое название панели
- description - отображаемое описание панели
- type - тип панели

Создание секции настроек

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

WP_Customize_Manager::add_section(WP_Customize_Section|string $id, array $args = array())

Add_action("customize_register", function($customizer){ $customizer->add_section("example_section_one", array("title" => "Новые настройки", "description" => "Описание секции", "priority" => 11,)); });

Параметры:

id - обязательный параметр, идентификатор панели
args - аргументы
- priority - приоритет панели, определяющий порядок отображения панелей и разделов. По умолчанию 160
- panel - идентификатор панели, к которой относится секция
- capability - возможности, необходимые для секции. По умолчанию edit_theme_options
- theme_supports - тематические функции, необходимые для поддержки секции
- title - отображаемое название секции
- description - отображаемое описание секции
- type - тип секции
- active_callback - активный обратный вызов
- description_hidden - скрыть описание за значком справки, вместо встроенного над первым элементом управления. Значение по умолчанию false.

Добавление настроек

Существует несколько типов настроек:

Настройка в виде чекбокса (галочки):

$customizer->add_control("example_text", array("type" => "checkbox", "label" => "Выбрать", "section" => "example_section",));

Настройка в виде радио кнопок (флажков):

$customizer->add_setting("radio", array("default" => "val_1")); $customizer->add_control("radio", array("type" => "radio", "label" => "Переключатели", "section" => "example_section", "choices" => array("val_1" => "val_1", "val_2" => "val_2", "val_3" => "val_3",),));

Настройка в виде селекта (выпдающего списка):

$customizer->add_setting("select", array("default" => "item_1")); $customizer->add_control("select", array("type" => "select", "label" => "Список", "section" => "example_section", "choices" => array("item_1" => "Первый", "item_2" => "Второй", "item_3" => "Третий",),));

Настройка в виде списка страниц Wordpress:

$customizer->add_setting("pages", array("sanitize_callback" => "example_sanitize")); $customizer->add_control("pages", array("type" => "dropdown-pages", "label" => "Выберите страницу", "section" => "example_section",));

Настройка в виде палитры (выбора цвета):

$customizer->add_setting("colors", array("default" => "#FFFFFF", "sanitize_callback" => "sanitize_hex_color",)); $customizer->add_control(new WP_Customize_Color_Control($customizer, "colors", array("label" => "Палитра цвета", "section" => "example_section", "settings" => "colors",)));

Настройка в виде загрузки файлов:

$customizer->add_setting("files"); $customizer->add_control(new WP_Customize_Upload_Control($customizer, "files", array("label" => "Загрузить файл", "section" => "example_section", "settings" => "files")));

Настройка в виде загрузки изображений:

$wp_customize->add_setting("images"); $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, "images", array("label" => "Загрузка изображения", "section" => "example_section", "settings" => "images")));