Начало работы с WordPress: подготовка к созданию вашей собственной темы на основе дочерней

Содержание цикла статей "Начало работы с WordPress":

1. Начало работы с WordPress: выбор между WordPress.com и WordPress.org
2. Начало работы с WordPress: подготовка к настройке WordPress на отдельном хостинге
3. Начало работы с WordPress: ручная установка WordPress
4. Начало работы с WordPress: первые шаги по совершенствованию вашего нового сайта
5. Начало работы с WordPress: подготовка к созданию вашей собственной темы на основе дочерней
6. Начало работы с WordPress: изменение внешнего вида вашего сайта с помощью CSS
7. Начало работы с WordPress: изменение структуры вашего сайта
8. Начало работы с WordPress: настройка функциональности сайта посредством редактирования functions.php

Итак, ваш сайт запущен и, скорее всего, у вас возникает все больше желания внести изменения в сам сайт, а не только в его содержимое, не так ли?

Возможно, вы хотите изменить некоторые элементы внешнего вида вашей темы или изменить поведение некоторых ее функций.

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

Вот наш план действий:

Финальная настройка нашего сайта:

1. Отключение блока комментариев;
2. Настройка меню.

Подготовка к редактированию темы:

1. Использование текстового редактора для редактирования файлов и шаблонов темы;
2. Дочерние темы – почему мы их используем;
3. Дочерние темы – как их создать и активировать на вашем сайте.

Вам понадобится:

1. Понимание основ HTML и CSS;
2. Установленный WordPress;
3. FTP-клиент;
4. Текстовый редактор;
5. Веб-браузер.

Финальная настройка нашего сайта

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

Отключение комментариев на статичных страницах

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

Первый способ: перейдите в меню редактирования страницы и нажмите кнопку «Опции показа» (Screen Options) в верхней правой части окна.

Поставьте галочку в опции «Обсуждения» (Discussion). Это сделает панель опций «Обсуждения» (Discussion) видимой в нижней части окна.

Переместитесь вниз и снимите галочку напротив опции «Разрешить комментарии» (Allow Comments) и обновите страницу. Готово!

Второй способ: может сэкономить время, так как позволяет отключить комментарии сразу на нескольких страницах.

Перейдите в меню «Все страницы» на боковой панели и выберите те страницы, на которых вы хотите отключить комментарии.

Теперь в выпадающем списке «Массовые действия» (Bulk Actions) и выберите «Редактировать» (Edit) и нажмите кнопку «Применить» (Apply).

Это действие вызовет панель «Массовое редактирование» (Bulk Edit). В левой части окна будет список страниц, которые вы редактируете. Если вы не хотите редактировать какую-то из них, то просто нажмите «x» напротив нее в этом списке.

В правой части окна будут представлены элементы, доступные для массового редактирования. Как и следовало ожидать, один из них это комментарии, поэтому отключите их выбором пункта «Запретить» (Do Not Allow) и затем нажмите кнопку «Обновить» (Update). И вновь, дело сделано!

Настройка меню

Перейдите в раздел «Внешний вид>Меню» (Appearance>Menus) на боковой панели.

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

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

Вот краткий обзор того, что мы видим, когда смотрим на CSS-файл, открытый в Text Wrangler:

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

Обзор файлов темы

По умолчанию после установки WordPress используется тема Twenty Thirteen. Тема это набор PHP-шаблонов, CSS, Javascript и файлов изображений, которые работают вместе, чтобы придать вашему сайту определенный вид. Давай взглянем, где найти эти файлы, потому что смена внешнего вида вашего сайта невозможна без их редактирования.

Запустите ваш FTP-клиент (помните Filezilla? Мы настраивали его в третьей части данного цикла статей), подключитесь к вашему сайту и откройте директорию wp-content на удаленном сервере.

Перемещаясь вниз по дереву папок вы увидите примерно следующую структуру:

1. wp-contenta:
   a. plugins
   b. themes
   i. twentytwelve
   ii. twentythirteen
2. upgrade;
3. uploads.

Очевидно, что директория, которая нас интересует, называется twentythirteen. Откройте её и увидите нечто подобное (на данном ниже изображении я отсортировал файлы по типу, поэтому в вашем случае порядок может быть другой):

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

Что это такое, и почему мы используем дочернюю тему?

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

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

Если вы используете стандартную тему, внося в неё свои изменения, то при обновлении она может быть перезаписана обновлением оригинальной темы. Но что делать, если обновление связано с устранением уязвимостей в безопасности и установить его необходимо, а по понятным причинам вы делать этого не хотите?

Итак, мы хотим, чтобы система позволила нам обновить тему без перезаписи внесенных нами в нее изменений.

Вот тут-то на сцену и выходят дочерние темы.

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

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

Теперь понятно, что и почему, но как мне это сделать?

Для начала, вот ссылка, ведущая на страницу, которая рассказывает о дочерних темах: http://codex.wordpress.org/Child_Themes.

Теперь мы начнем менять некоторые файлы с помощью текстового редактора.

Итак, откройте ваш редактор и скопируйте в него следующий кусок кода:

/*
Theme Name: дочерняя тема Twenty Thirteen
Theme URI: http://example.com/
Description: дочерняя тема на основе темы Twenty Thirteen
Author: здесь ваше имя
Author URI: http://example.com/about/
Template:  twentythirteen
Version: 0.1.0
*/

До того, как вы сохраните файл, можно отредактировать некоторые поля, такие как имя и описание темы, ссылку на неё и имя автора. Только не изменяйте поле Template, потому что оно сообщает WordPress, на какой родительской теме основана данная тема. В нашем случае, это twentythirteen.

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

Итак, скопируйте данную строку в ваш файл:

@import url("../twentythirteen/style.css");

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

Перемещение файла с локального компьютера на удаленный сервер

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

Нажмите на ней правой кнопкой мыши и выберите пункт «Создать папку» (Create Directory) из выпадающего меню.

Введите название папки (лучше сделать его одинаковым с названием темы во избежание путаницы) и нажмите ОК.

Теперь, двойным кликом на папке новой темы, войдите в нее, а на локальном компьютере, в левой части, выберите папку с вашим файлом style.css.

Когда вы это сделаете, перетащите style.css с локального компьютера в директорию удаленного сервера.

Теперь вернитесь в браузер и переместитесь наш сайт, а затем перейдите в меню «Внешний вид>Темы» (Appearance>Themes).

Заметьте, что в списке появилась новая тема под тем именем, которое вы ей дали!

Итак, активируйте ее..

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

Для проверки изменений, перейдите на главную страницу вашего сайта и взгляните..

Несмотря на то, что мы сменили тему, сайт выглядит все также. Но помните, что, по сути, мы смотрим на все ту же тему, Twenty Thirteen.

Но даю слово, в следующей статье мы обязательно изменим некоторые детали во внешнем виде нашего сайта, сделав его более уникальным!

Заключение

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