WordPress, безусловно, является одним из самых популярных инструментов для ведения блогов, а темы WordPress, безусловно, популярны. Пользовательская тема — это удобный сервис для продажи клиенту, в то время как создание собственной темы для вашего блога — это фантастический способ продемонстрировать вашу индивидуальность и навыки — гораздо больше, чем загрузка уже готовой темы. используется пятьсот других блогов.
Создание совершенно новой темы с нуля является сложным и отнимает много времени — объяснение того, как написать свою собственную, является слишком большой работой для одного небольшого поста в блоге! К счастью, функция родительских и дочерних тем WordPress — это быстрый и простой способ начать использовать темы. Просто возьмите рамку родительской темы, которая соответствует вашим потребностям, добавьте дочернюю тему с собственным CSS и настройками, и вы будете на пути к доминированию темы.
Как работают темы
Если вы не знакомы с тем, как работают темы WordPress, вот небольшой пример: в общем, темы состоят из набора шаблонов PHP, таблиц стилей, изображений и файлов JavaScript. Все они объединены в один каталог и загружены в каталог тем WordPress, который находится в wp-content / themes. Администратор выбирает тему на панели инструментов сайта.
Однако для дочерней темы все, что нужно, это таблица стилей style.css. Мы определим детали нашей темы, как указано выше, и добавим еще одну строку, в которой будет указана родительская тема для использования. Затем WordPress будет использовать нашу таблицу стилей вместе с шаблонами, функциями и скриптами из родительской темы. Мы также можем по желанию добавить наши собственные шаблоны или функции для настройки разметки, создаваемой темой.
Выберите родительскую тему
Нам нужно выбрать базовую тему, которую мы будем использовать в качестве родительской темы для этого упражнения. В качестве основы можно использовать любую тему, хотя есть несколько базовых тем , разработанных специально для этой цели. Конечно, вы должны убедиться, что вы выбрали тему с разрешающим авторским правом, такую как лицензия Creative Commons или GPL. Хотя создание дочерней темы оставляет оригинальную нетронутой, справедливо сказать, что дизайнер темы был бы весьма недоволен, если бы вы выбрали риф премиум-темы.
Для этого упражнения я буду использовать Thematic. Он достаточно развит, доступен для редактирования и полон классов и идентификаторов для использования в CSS. Он также имеет ряд областей виджетов — мест для добавления моего собственного содержимого или кода в шаблон — без необходимости изменять разметку.
Установить родительскую тему
Давайте предположим, что у вас уже есть копия WordPress для игры — если нет, вам нужно взять ее и установить прямо сейчас. Затем, чтобы установить Thematic, загрузите тему, разархивируйте файл, а затем загрузите тематическую папку в каталог wp-content / themes установки WordPress.
В интерфейсе администрирования перейдите на экран «Внешний вид», активируйте эту тему и перейдите на свой сайт WordPress. Довольно редко, верно? Все в порядке, мы добавим к этому в ближайшее время. А пока загляните внутрь разметки. Мы будем использовать эту разметку, чтобы заложить наш CSS. В Thematic абсолютно все классы и идентификаторы есть во всем — множество возможностей для добавления всевозможных наворотов.
Начать проектирование
Это забавная штука: давайте добавим немного CSS в микс. Мне нравится работать с CSS-темами WordPress, сохраняя различные типы страниц — домашнюю страницу, отдельные записи, списки категорий и т. Д. — как ряд простых, старых файлов HTML. Я изменяю их локально, ссылаясь на собственную таблицу стилей, и использую их для проверки внешнего вида при наложении стилей.
Родительская тема, которую вы используете, почти наверняка будет иметь несколько базовых стилей, которые вы можете использовать в качестве справки для своих собственных усилий. В Thematic есть встроенная серия стилей для сброса CSS, изображений, типографики, плагинов и многого другого. Я выбрал сохранение настроек, плагинов и изображений CSS из темы, используя @import Они расположены в папке thematic / library / styles, и я включу их так:
/* Browser reset */
@import url('../thematic/library/styles/reset.css');
/* Image styles for posts, etc. */
@import url('../thematic/library/styles/images.css');
/* Styles for plugins */
@import url('../thematic/library/styles/plugins.css');
Легко, правда?
Установите тему вашего ребенка
Теперь, когда у нас есть немного CSS, пришло время создать и установить дочернюю тему. Создайте новую папку, выбрав простое имя без пробелов.
Внутри него создайте новый CSS-файл style.css. Отредактируйте этот файл и добавьте детали темы:
/*
Theme Name: My Child Theme
Theme URI: http://example.com/child
Description: My first child theme
Author: Tech Times Reader
Author URI: http://example.com
Template: thematic
Version: 1.0
Tags: your, tags, here
.
Add any comments here!
.
*/
Важной строкой здесь является помеченный Template: thematic Вот как я определил Тематические шаблоны как основу для моей темы: значение, которое вы вводите, должно быть именем каталога, в котором живет ваша родительская тема. Настройте их по своему вкусу — Theme URIAuthor URI
Теперь вставьте CSS, над которым вы работали, и скопируйте любые изображения или другие полезности, которые вам могут понадобиться. Загрузите всю эту папку в каталог wp-content / themes вашего блога и найдите свою тему в разделе «Внешний вид» панели администратора. Активируйте свою блестящую новую тему и протестируйте ее в реальном блоге. Если вы довольны тем, что видите, пора откинуться на спинку кресла и полюбоваться своей работой!
Что дальше?
Теперь, когда у вас есть небольшой опыт использования темы WordPress, вы готовы пойти немного дальше. Вот несколько хитростей, которые стоит попробовать:
-
Вы круты с PHP? Чувствуете, как проникнуть в суть шаблона WordPress? Взгляните на документацию шаблона и узнайте, как это работает. Используя дочерние темы, можно добавлять свои собственные пользовательские функции или даже переопределять их своими собственными шаблонами.
-
Чувствуете себя хвастающимся? Выпустите свою тему в дикую природу для использования другими! Взгляните на руководство по выпуску тем.
-
Чувствуете себя хвастающимся еще больше? Следите за тем, как проходят тематические конкурсы, и бросайте свою шляпу на ринг. Во многих блогах о дизайне проводятся конкурсы на темы дизайна с призами за отличные призы (не говоря уже о правах на хвастовство) — и если денежные призы — это больше ваш стиль, то на 99designs.com обычно есть несколько запросов на темы !