Создание простой Wordpress темы. Создание страницы настроек для WordPress-темы

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

Что такое пользовательские настройки?

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

Когда создается уникальный сайт (под уникальностью я имею ввиду сайт, который использует разработанный специально для клиента шаблон с уникальным дизайном и функционалом), то зачастую требуется создать возможность для администраторов менять те или иные параметры. Почти всегда необходимо дать возможность изменять файл логотипа, какие-то элементы на главной странице, иконки социальных сетей, цвет фона в «подвале» сайта и т.д. Именно такую возможность для разработчиков предоставляет плагин OptionTree, который можно бесплатно скачать с официального сайта Wordpress.

После установки...

Установив и активировав плагин, мы, условно, получаем две части: одна для разработчиков сайта, другая - для пользователей. Первая часть доступна из пункта меню «OptionTree»-«Settings», который появляется после активации плагина слева в административной части Wordpress. Смело жмем туда и получаем уникальный интерфейс для формирования набора пользовательских полей, который будет доступен для пользователей во второй части плагина - «Внешний вид» - «Theme Options».

Theme Options UI Builder

Итак, как же создавать настройки? Под отдельной настройкой я буду иметь ввиду некоторое поле, которое будет доступно пользователю, администратору сайта для редактирования. UI Builder позволяет создавать секции или разделы, давайте назовем это лучше так, внутри которых будут располагаться те или иные настройки. На рисунке выше я привел пример настроек, состоящий из двух разделов: «Основное» и «Услуги». Т.е. подразумевается, что в разделе «Основное» будут размещены какие-то общие настройки сайта, а в разделе «Услуги» - специфичные для страницы услуг. Давайте посмотрим, как разделы выглядят для пользователя. Переходим во «Внешний вид» - «Theme Options» и - ура! Вот она страница настроек!

Слева мы видим разделы, которые можно переключать, справа - набор настроек внутри раздела. Разделы создаются с помощью Theme Options UI Builder по кнопке «Add section», и для раздела необходимо ввести его заголовок и уникальный идентификатор. Давайте создадим раздел «Дополнительно» и добавим туда несколько настроек.

Все изменения, конечно, фиксируются по нажатию на кнопку «Save Сhanges». Теперь добавим настройку для пользователя, ну, например, цвет заголовков. Нажимаем «Add setting» и, посмотрите, какой набор полей доступен для выбора. Можно сказать, огромный! Выберем «Colorpicker» и введем заголовок и уникальный идентификатор. Будьте внимательны с идентификаторами, именно по уникальному идентификатору затем в коде шаблона мы сможем получить доступ к значению этого поля.

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

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

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

Т.е. за вывод значения поля отвечает функция ot_get_option($option_id, $default), параметрами которой являются идентификатор поля, который мы с вами, как разработчики, задаем сами, в нашем случае мы выводим значение поля h_color. Второй параметр функции - формат вывода, давайте на этом я остановлюсь чуть подробнее. Например, нам надо сделать опцию, которая позволит пользователю создавать свой набор иконок для социальных сетей. Для этого мы будем использовать поле List Item (на иллюстрации ниже).

Это поле позволяет создавать уже набор повторяющихся полей, когда пользователь сможет добавлять одинаковые параметры внутри одной настройки. Немного непонятно, постараюсь объяснить и затем в коде показать, как это работает. В нашем случае присвоим полю List Item идентификатор social_icons и внутри этого поля (обратите внимание, есть еще одна кнопка «Add setting») добавим два поля: файл иконки и ссылка. Тип первого поля будет Upload, тип второго - Text. Идентификатор первого поля будет icon_image, идентификатор второго - icon_link.

Что получит пользователь? Теперь он сможет добавлять несколько иконок социальных сетей, нажимая на кнопку «Add new» на странице настроек. Причем, обратите внимание, количество таких настроек теперь неограниченно и зависит только от пользователя.

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

"; // выводим в шаблон поля } } } ?>

В заключении

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

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

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

Тема WordPress также предоставляет некоторые преимущества.

• Она разделяет стили представления и от системных файлов, позволяя производить обновления без сильных изменений внешнего вида сайта.
• Она позволяет настраивать специфические для данной темы параметры вывода.
• С помощью неё можно быстро сменить внешний вид сайта на основе WordPress.
• Благодаря ей, отпадает необходимость пользователю изучать CSS, HTML и PHP для того, чтобы сделать свой сайт привлекательным.

Но зачем вам создавать свою собственную тему? Вот в чём главный вопрос.

• Это возможность узнать больше о CSS, HTML/XHTML и PHP.
• Это возможность показать свои умения в CSS, HTML/XHTML и PHP.
• Это возможность творить.
• Это весело (по большей части).
• Если вы предоставили свою тему в общественный доступ , то вы получите удовлетворение от того, что поделились и дали что-то взамен Сообществу WordPress (можете похвастаться!)

Стандарты создания тем

При написании кода тем WordPress, придерживайтесь следующих стандартов:

• Используйте корректно структурированный, не содержащий ошибок PHP-код и валидный HTML-код (см. ).
• Используйте правильно составленный, валидный CSS-код (см. ).
• Придерживайтесь рекомендаций по .

Анатомия Темы

Темы WordPress находятся в поддиректориях wp-content/themes/ . Директория темы содержит таблицы стилей, файл дополнительного функционала (functions.php) и картинки. К примеру, тема под названием "test" вероятно будет расположена в директории wp-content/themes/test/ .

По умолчанию WordPress содержит три темы, созданные командой разработчиков Wordpress: "Twenty Fifteen", "Twenty Sixteen" и "Twenty Seventeen". Эти темы отличаются между собой и используют различные функции и теги для создания внешнего вида и страниц сайта. Внимательно изучите составляющие их файлы, чтобы лучше понять, как создать свою собственную тему.

Тема WordPress состоит из трёх основных типов файлов, в дополнение к изображениям. Первый - это таблица стилей под именем style.css , которая контролирует внешний вид страниц сайта. Второй предоставляет собой файл дополнительного функционала (functions.php). Остальные файлы - это файлы шаблонов , которые определяют, каким образом выводится информация из базы данных на веб-страницу. Давайте рассмотрим каждый тип по отдельности.

Таблица стилей темы

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

Ниже приведен шаблон заголовка таблицы стилей (style sheet header) вашей темы Rose . Он должен находится в начале файла стилей style.css , в первых строках:

/* Theme Name: Rose Theme URI: домашняя-страница-темы Description: краткое-описание-темы Author: ваше-имя Author URI: ваш-URI Template: напишите-здесь-наименование-родительской-темы--необязательное-поле Version: номер-версии--необязательное-поле. Развёрнутое описание темы/Лицензия-если-нужно. . */

Простейшая тема включает в себя только файл style.css плюс изображения, если они необходимы. Для создания такой темы необходимо в строке заголовка Template: указать имя родительской темы. Например, если ваша тема "Rose" происходит (наследует) от темы "test", напишите в заголовке style.css следующую строку:

Template: test

После добавления такой строки в заголовок style.css все шаблоны темы "test" будут наследоваться вашей темой "Rose", в которой ничего нет, кроме файла с таблицей стилей style.css , и возможно, рисунков. Эти файлы необходимо поместить в каталог wp-content/themes/Rose .

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

Комментарии в заголовке style.css нужны WordPress для идентификации темы и отображения её в подменю > в качестве установленной темы, вместе с другими установленными темами.

Примечание : Когда вы определяете родительскую тему, в строке комментариев Template: , вы должны использовать имя каталога темы. Например, для использования темы "Default Wordpress Theme", не пишите

Template: WordPress Default

а пишите

Template: default

поскольку "default" - это имя каталога родительской темы.

Файл дополнительного функционала

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

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

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

Файлы шаблонов темы

Выбор шаблонов, основанный на запросах

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

В первом случае, при использовании иерархии шаблонов , необходимо создать специальные файлы шаблонов, которые будут автоматически использоваться в необходимый момент для создания страницы вместо базового шаблона index.php . Например, если ваша тема содержит шаблон под названием category.php и пришёл запрос на страницу с категорией, шаблон category.php будет загружен вместо шаблона index.php . Если файл category.php в теме отсутствует, будет загружен шаблон index.php , как обычно.

Вы можете определить шаблон для конкретной категории, например, добавив в тему файл шаблона category-6.php . Файл будет использован вместо index.php в том случае, когда ID категории будет равен 6. Чтобы узнать ID категории, зайдите в > , если у вас есть доступ администратора в WordPress version 2.3 или ниже.

Начиная с WordPress 2.5 столбец ID был удалён из панели администратора. Вы можете определить ID категории, кликнув "Edit Category" и посмотрев в URL-е значение cat_ID. Например, конец URL:

"...categories.php?action=edit&cat_ID=3"

где "3" - и есть ID текущей категории. Более детально этот процесс рассмотрен в

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

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

Или, используя объект запроса, тот же алгоритм можно реализовать по-другому:

post; if ($post->in_category("9")) { include(TEMPLATEPATH . "/single2.php"); } else { include(TEMPLATEPATH . "/single1.php"); } ?>

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

Иконки типов файлов

Wordpress использует иконки типов файлов () в вашем блоге и в интерфейсе Админ-панели, если эти иконки существуют в указанном месте.

Wordpress ищет эти файлы в каталоге images текущей темы. (А в Wordpress 2.2, тема по умолчанию имеет только одну иконку, audio.jpg .)

Например, для отрисовки иконки типа MIME type audio/mpeg , Wordpress будет искать файл иконки в указанном каталоге images текущей темы, он выбирает первый подходящий файл (см. описание функции ):

1. my_theme /images/audio.jpg
2. my_theme /images/audio.gif
3. my_theme /images/audio.png
4. my_theme /images/mpeg.jpg
5. my_theme /images/mpeg.gif
6. my_theme /images/mpeg.png
7. my_theme /images/audio_mpeg.jpg
8. my_theme /images/audio_mpeg.gif
9. my_theme /images/audio_mpeg.png

Перечень стандартных файлов шаблонов темы

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

Style.css Главный файл таблицы стилей. Файл должен быть в теме обязательно и обязательно должен содержать описанные выше комментарии в заголовке файла. index.php Главный файл шаблонов. Если вы в своей теме используете свои шаблоны, этот файл index.php обязателен. comments.php Шаблон комментариев. Если его нет, используется файл comments.php из темы по умолчанию. comments-popup.php Добавляет всплывающее меню для комментариев на JS. При отсутствии вызывается comments-popup.php из темы по умолчанию. home.php Шаблон главной страницы блога. single.php Шаблон страницы одиночного поста. Используется, когда запрошен конкретный пост. Для этого и других шаблонов по запросу используется index.php , если в вашей теме нет соответствующего файла шаблона. page.php Шаблон отдельной страницы, используется для отображения запрошенной страницы . category.php Шаблон категории . Используется при запросе категории. author.php Шаблон автора блога . Используется при запросе автора блога. date.php Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда. archive.php Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php , author.php и date.php для соответствующих типов запросов. search.php Шаблон результатов поиска. Используется после выполнения поиска. 404.php Шаблон для сообщения об ошибке . Используется, когда WordPress не может найти сообщение или страницу, которая соответствует запросу.

Эти файлы имеют специальное значение в WordPress, поскольку они используются для замены index.php , когда они есть в каталоге темы, в соответствии с иерархией шаблонов , и когда поступил соответствующий запрос; или же в соответствии с истинностью условных тегов , когда функция типа is_*(); возвращает "true".

Например, если требуется отобразить единственный пост, функция возвращает "true", и в каталоге активной темы есть файл шаблона single.php , этот шаблон используется для создания страницы.

Ссылки на файлы из шаблона

Тема WordPress по умолчанию представляет собой хороший пример техники (впервые описанной Майклом Хелманном (Michael Heilemann) в Kubrick в макете для WordPress 1.2), как запросы отображаются в шаблонах.

Следующий код вставляет URL шаблона в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы из вашей темы.

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

Константа TEMPLATEPATH содержит абсолютный путь к каталогу шаблонов текушей темы (без символа "/" в конце).

Обратите внимание, что URI, которые используются в таблице стилей, привязаны к каталогу, где находится файл таблицы стилей, а не к каталогу, где находится шаблон, использующий эти стили. Это устраняет необходимость добавления кода PHP в файл таблицы стилей для задания текущего каталога. Например, если вы в таблице стилей используете изображения из каталога images/ своей темы, вы должны указать в CSS только относительный путь, например:

H1 { background-image: URL(images/my_background.jpg); }

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

Определение пользовательских типов шаблонов

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

Необходимые вызовы событий для совместимости

При разработке темы желательно иметь в виду, что ваша тема должна быть настроена таким образом, что она может хорошо работать с любым плагином для WordPress, который вы или другой пользователь вашей темы захочет установить. Плагины расширяют функциональные возможности WordPress с помощью перехвата событий ("Action Hooks", см. для получения дополнительной информации). Большинство событий происходит в ядре WordPress, так что вашей теме нет необходимости вызова перехваченных специальных событий для своей работы. Но некоторые перехваченные события всё же придётся вызывать, для того, чтобы устанавливаемые плагины корректно отображали информацию, непосредственно в заголовке (верхнем колонтитуле) и подвале (нижнем колонтитуле), в боковой панели, или в основном теле страницы. Вот список специальных тегов событий, которые необходимо вызывать в вашей теме для корректной работы любых плагинов:

Wp_head Происходит при отображении кода элемента в шаблоне header.php . Пример использования в плагине: добавление кода javascript. Использование: -или- wp_footer Происходит при отображении заголовка (верхнего колонтитула) "footer" темы в шаблоне footer.php . Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице. Использование: -или- wp_meta Событие обычно происходит при обработке тега

Meta

при отрисовке меню или в меню боковой панели в шаблоне sidebar.php . Пример использования: включение круговой рекламы или облака тегов в боковую панель. Использование: -или- comment_form Происходит при отработке скриптов шаблонов comments.php и comments-popup.php , непосредственно перед закрытием тега формы комментариев (). Пример использования: Показать предпросмотр только что добавленных комментариев. Использование: ID); ?>

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

Общие замечания для разработчиков тем

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

1. Укажите, для чего именно предназначена ваша тема и файлы шаблонов.
2. Придерживайтесь соглашения о наименованиях в стандартной иерархии темы.
3. Укажите недостатки вашей темы, если таковые имеются.
4. Пишите простые и понятные комментарии , особенно в сложных местах, в шаблонах и файлах стилей. Добавьте комментарии в местах, где вы изменили стандартное поведение шаблонов и стилей.
5. Если у вас есть какие-либо специальные требования, которые могут включать пользовательские правила перезаписи или изменений или использование некоторых дополнительных, специальных шаблонов, изображений или других файлов, пожалуйста, чётко укажите шаги действий пользователя, которые он должен предпринять, чтобы получить вашу тему полноценно работающей.
6. Попробуйте и протестируйте вашу тему в разных браузерах , чтобы поймать хотя бы некоторые из проблем, с которыми пользователи могут столкнуться .
7. Укажите контактную информацию (веб-страницу или электронную почту), если возможно, для информационной поддержки и вопросов пользователей.

Ссылки и ресурсы

Полный список ресурсов, касающихся тем и шаблонов доступен в статье .

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

Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:

• Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
• Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
• Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
• Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
• Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
• Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.

Краткая инструкция

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

Шаг первый: подготовительные работы

Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:

Шаг второй: создают папку новой темы

Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».

Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.

В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.

Шаг третий: наполнение index.php

Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.

В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:

Шаг четвертый: заполняем и style.css

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

/*Theme Name: ***

Theme URI: http:// ***

Author URI: http:// ***

Description: ***

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

(информация в /**/ — это комментарии, а не части кода)

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

Шаг пятый: разбиваем файлы

Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.

Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:

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

Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:

• Header – стиль шапки вашего сайта.
• Comments – шаблон для создания комментариев.
• Home – тема для главной страницы.
• Page — определяет тему, если создадите отдельные странички на сайте
• Category – шаблон для разбивки на категории
• Date – определяет стиль вывода даты-времени.
• Archive – шаблон для архивного раздела со старыми материалами.
• Search – файл, в котором указываются параметры для поиска на сайте.
• 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
• Footer – определяет стиль подвала вашего сайта.

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

Шапка в header.php:

Добавление контента:

Стилизация комментариев:

Подвал на сайте:

Как можно вносить изменения без опасений

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

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

Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:

Theme Name: НАЗВАНИЕ ТЕМЫ

Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ

Theme URI: ЗАПОЛНИТЬ

Description: ЗАПОЛНИТЬ

Author URI: ЗАПОЛНИТЬ

/* импортируем стили родительской темы */

@import url(«../НАЗВАНИЕ/style.css»);

/* Свои дополнительные стили */

Foo{ color:red; }

Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Функционирование дочерних тем («дочерей») основывается на их взаимоотношениях с родительскими («родителями»). Важно учитывать, что бесплатные и платные themes изначально являются родителями, следовательно, дочь копирует их параметры и свойства, а также получает стандартный комплект своих функций. В будущем, с учетом потребностей конкретного интернет-ресурса, набор этих опций может быть расширен.

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

Чем отличается «дочь»

Дочерняя тема ВордПресс открывает возможность вносить необходимые изменения и коррективы. Далее мы рассмотрим, как ее создать, но перед этим разберем ее ключевые отличия:

1. Изменения, внесенные в родительскую модификацию, не касаются дочерней. Из этого следует, что после разработки они независимы друг от друга.
2. Производная функционирует исключительно при условии установки родителя, при этом ее активация происходит позднее.
3. Дочерние привязаны только к своей основе и не взаимосвязаны ни с одной, нри с другой.

Удобно ли работать

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

1. Они автоматически сохраняют внесенные корректировки. Благодаря этому можно вносить коррективы напрямую в код, без рисков, что настройки собьются или будут утрачены при обновлении.
2. Работа с ними - прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.
3. Улучшается рабочий процесс. Имея в распоряжении всего одну тематическую основу, вы можете создавать сайты, различные по сложности и функционалу.

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

1. Директория (папка/место расположения файловых составляющих).
2. «style.css», где прописаны основные и дополнительные свойства.
3. «functions.php», где прописано определение функций.

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

Функционирование

«Дочери» локализуются в самостоятельной папке и могут похвастаться отдельными «functions.php» и «style.css». Всегда можно написать вспомогательные файлы, но эта пара отвечает за правильное функционирование - без сбоев и проблем.

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

Устройство theme аналогично редакторским слоям фоторедакторов. Если пользователь посещает ваш интернет-ресурс, перед ним открывается «дочь», а потом уже отсутствующие опции и стили загружаются из родительской. В конечном итоге большая часть кода передается от родителя, но перед использованием его нужно модифицировать с учетом настроек «дочери».

Как создать

Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим.

Шаг No1. Создание дочерней темы WordPress

Это достаточно простой процесс. Если будет детально следовать инструкции, его освоит любой пользователь.

Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla.

Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом:

Делаем следующее:

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

Шаг No2. Настройка

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

1. Сначала нужно настроить внешний вид.

Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS:

На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым:

Таким образом можно отредактировать любые имеющиеся элементы на сайте.

2.Работа с функциями.

Применение и работа с «дочерьми» дает и такое преимущество, как возможность ведения двух независимых «functions.php». Напомним, что данные файлы применяются для удаления старых и добавления новых функций. Если они имеются, можно не беспокоиться о сохранности или проблемах в работе документа. Даже если основа обновится, он сохранится в неизменном состоянии.

Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress.

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

Облегчить процесс создания можно путем использования ряда специальных плагинов. Библиотека WordPress представляет широкий выбор плагинов, большинство из них можно использовать бесплатно. Использование плагинов в разы облегчает процесс разработки. Рассмотрим наиболее популярные плагины.

1. Child Themify.

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

2. Child Theme Configurato.

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

3. _child Theme Boilerplate.

Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто - «_child» - и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты - здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».

Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми.

Большинство разработчиков связывают эти таблицы между собой в CSS, но это приносит больше вреда, чем пользы. Браузер начинает долго загружать сайт, потому что нужно осуществлять загрузку стилей сначала из «родителя», а потом уже из производной. Если же поставить таблицы стилей отдельно, задача браузера облегчится, а скорость загрузки увеличится.

Вот код, с помощью которого можно добавить данную опцию:

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

Подытожим

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

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

Здравствуйте, друзья!

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

Теперь вы начинаете с волнением установку выбранной вами темы на своем сайте WordPress.

Но … что ты делаешь? Как установить тему WordPress? И что вы делаете после этого, чтобы на самом деле настроить все?

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

В конце этого руководства вы узнаете, как:

• Установите как бесплатные, так и WordPress
• Сделать свой сайт похожим на великолепный демонстрационный сайт, который вы видели
• Создать статическую домашнюю страницу
• Настроить свою тему с помощью WordPress Customizer или панели настроек темы
• Добавить меню навигации на ваш сайт
• Добавить в боковые панели и подвал сайта
• Сделать расширенные изменения CSS-стилей и кода
• Обновить свою тему
• Помочь с вашей темой, когда все пойдет не так

Это длинный путеводитель, и я знаю, что вы очень рады, что сайт WordPress , поэтому давайте перейдем к тому, как установить тему WordPress!

Как установить тему WordPress

В зависимости от источника темы, вам может потребоваться один из двух разных способов установки темы.

Существует два основных источника:

• Каталог тем WordPress.org — этот массивный каталог, который содержит исключительно бесплатные темы WordPress. На нем вы можете просматривать тысячи бесплатных тем, где код каждой проверяли члены сообщества WordPress.org.
• Сторонние источники — вы можете получать темы от независимых сторонних разработчиков, таких как ElegantThemes или массовые тематические рынки WordPress, такие как Theme Forest .

Если вы нашли свою тему на WordPress.org, используйте метод 1, чтобы установить бесплатную тему. Вам не нужно ничего, кроме выбранного имени.

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

Метод 1: Как установить WordPress тему из WordPress.org

Если вы нашли свою тему на WordPress.org, вы можете установить ее прямо из вашей панели управления WordPress без необходимости загружать файлы.

Чтобы начать работу, войдите в свою WordPress (то есть перейдите на страницу yourdomain.ru/wp-admin). Затем перейдите «Внешний вид» — «Темы» на боковой панели и нажмите кнопку «Добавить»:

Затем найдите имя темы, которую вы хотите установить и нажмите кнопку «Установить»:

WordPress автоматически установит тему на вашем сайте. По завершении процесса установки вы можете активировать тему, нажав кнопку «Активировать»:

Метод 2: Как установить тему WordPress из ZIP-файла

Если вы приобрели Премиум тему WordPress или загрузили бесплатную тему из источника, отличного от WordPress.org, вам необходимо установить ее, вручную загрузив.zip-файл в программу установки темы.

Если у вас еще нет файла ZIP для вашей темы, вы должны попросить разработчика помочь найти этот файл.

После этого перейдите во «Внешний вид» — «Темы» и нажмите «Добавить новую»:

Затем нажмите кнопку «Загрузить тему»:

Используйте кнопку «Выбрать файл», чтобы выбрать.zip-файл вашей темы, затем нажмите «Установить сейчас»:

WordPress автоматически установит тему для вас. Затем вам просто нужно нажать «Активировать», чтобы активировать тему:

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

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

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

Если вам нужно установить необходимые плагины для использования темы, после активации темы вы увидите окно сообщения, как показано ниже:

Все, что вам нужно сделать, это нажать «Начать установку плагинов».

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

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

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

Как заставить WordPress Theme выглядеть как демо (необязательно)

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

Совсем не похоже на демо! .

Вам это знакомо? Это одна из самых распространенных проблем, с которыми сталкиваются пользователи WordPress. Так что же делать?

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

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

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

Разработчики пытаются сделать этот процесс максимально безболезненным. Это обычно так же просто, как нажимать несколько кнопок — вам просто нужно проконсультироваться с документацией, чтобы узнать, какие кнопки нажимать!

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

Как настроить основные параметры вашей темы

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

Как выбрать в вашей теме статическую домашнюю страницу

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

Но если вы предпочитаете показывать статическую страницу на своей домашней странице, вы всегда можете изменить эту функциональность, выбрав «Настройки» — «Чтение» на WordPress.

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

Если у вас нет страниц на выбор, вы можете перейти вовкладку «Страницы» — «Добавить новую», чтобы создавать новые страницы. Назовите их что-то вроде:

• Домашняя страница

Как использовать WordPress Customizer для настройки темы

WordPress Customizer — полезная функция WordPress, которая позволяет вам легко настраивать тему при просмотре всех ваших изменений в режиме реального времени. То есть, вы увидите параметры темы на одной половине экрана и живой предварительный просмотр вашего сайта на другой половине.

Хотя не все темы используют WordPress Customizer, многие новые темы используют его для внесения изменений. И даже если тема не полностью поддерживает WordPress Customizer, вы все равно можете использовать его, чтобы внести некоторые основные изменения в свою тему.

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

Чтобы получить доступ к Настройщику WordPress, вы можете либо перейти «Внешний вид» — «Настроить» на панели управления WordPress:

Или, если вы просматриваете общедоступную часть вашего сайта WordPress, вы можете нажать кнопку «Настроить» на панели инструментов администратора:

Использование WordPress Customizer

Внутри WordPress Customizer вы можете перемещаться между различными настройками, выбирая из параметров на боковой панели:

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

Например, если вы хотите изменить «Цвет» вашей темы, вы просто нажмите на параметр «Цвет». Оттуда вы можете выбрать совершенно новую цветовую схему для своей темы и просмотреть изменения в реальном времени, не обновляя страницу:

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

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

Использование панели параметров пользовательской темы для настройки

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

Обычно вы можете найти эти параметры, перейдя в раздел «Внешний вид» вашей панели управления и найдите что-то вроде «Параметры темы»:

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

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

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

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

Как добавить и настроить меню вашей темы

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

Хотя вы можете использовать WordPress Customizer раньше, чтобы настроить свои меню, более удобным для пользователя способом является переход во вкладку «Внешний вид» — «Меню» на панели управления WordPress.

Здесь вы можете добавлять новые элементы меню из левой боковой панели и изменять существующие элементы меню с помощью простого перетаскивания:

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

Как добавить виджеты своей теме в боковую панель и подвал сайта

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

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

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

Чтобы добавить виджеты в новую тему, перейдите во «Внешний вид» — «Виджеты».

Оттуда вы можете перетащить виджеты из столбца «Доступные виджеты» к различным виджетным областям на вашем сайте. В приведенном ниже примере вы можете видеть, что эта конкретная область виджетов для боковой панели:

После перетаскивания виджета вы можете настроить его функциональность, щелкнув маленькую стрелку Expand:

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

Если вы хотите удалить виджет, вы можете перетащить его обратно в доступную область виджетов или нажать кнопку «Удалить» в нижней части настроек виджета.

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

Создание расширенных CSS-стилей и изменение кода вашей темы

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

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

В принципе, CSS и другой код помогают вам переделать расширенный стиль и/или функциональные изменения в теме WordPress, выходящую за пределы возможностей, разрешенных в панели инструментов WordPress Customizer и/или темы.

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

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

Как добавить пользовательский CSS-код в тему

Благодаря недавнему изменению теперь вы можете добавить пользовательский CSS-код в любую тему WordPress с помощью встроенного WordPress Customizer, о котором вы узнали выше.

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

Чтобы получить доступ к этой области CSS, откройте «Внешний вид» — «Настроить» и выберите вкладку «Дополнительные CSS» в «Настройщике WordPress»:

Оттуда вы можете добавить свой собственный CSS непосредственно в поле. Например, вы можете добавите короткий CSS-класс, который нацелен на кнопку темы следующим образом:

Blog-post-read-more a { background: #6ab999; }

Затем вы увидите цвет кнопки в режиме реального времени:

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

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

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

Как создать дочернюю тему для изменения кода

Если вы планируете делать изменения кода на своем сайте, выходящие за рамки простых изменений CSS и редактирования основных файлов тем, вам необходимо создать что-то, называемое дочерней темой, прежде чем вы начнете изменять свой код.

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

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

Если вы найдете там дочернюю тему, вы можете установить ее как любую другую тему, загрузив ее.zip-файл на свой сайт.

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

Как только вы установите и активируете плагин Childify Me , перейдите в WordPress Customizer, зайдите «Внешний вид» — «Настройка». Затем нажмите кнопку «Childify Me» внизу, чтобы автоматически создать дочернюю тему:

Дайте своей дочерней теме имя (имя может быть любым — на самом деле это не имеет значения), а затем нажмите «Создать». После этого нажмите «Предварительный просмотр» и «Активировать», чтобы активировать новую дочернюю тему бренда «spankin».

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

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

Как обновить тему WordPress

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

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

Всякий раз, когда ваша тема имеет доступное обновление, WordPress предупредит вас, показывая красное число рядом с параметром «Обновления» на боковой панели :

WordPress будет обрабатывать остальную часть процесса обновления за вас!

Как получить помощь по теме WordPress

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

Вот несколько способов получить помощь по теме.

Использование Форума поддержки WordPress.org

Если вы используете бесплатную тему с сайта WordPress.org, попробуйте обратиться за помощью к разработчику с помощью встроенных форумов поддержки WordPress.org. Чтобы получить доступ к форумам, перейдите на страницу листинга темы на WordPress.org и нажмите кнопку поддержки форума «Просмотр»:

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

Немедленно обратитесь к разработчику за помощью

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

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

Возьмите Freelance WordPress Developer или Maintenance Service

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

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