Руководство по созданию тем для wordpress

Languages:
বাংলা •

English •
Español •

日本語
한국어 •
Português do Brasil •

Русский •

ไทย •

Українська •
中文(简体) •
中文(繁體) •
(Add your language)

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

Вы можете разрабатывать темы для себя лично или для общественного пользования.

Зачем нужны темы WordPress

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

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

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

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

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

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

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

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

• Используйте корректно структурированный, не содержащий ошибок PHP-код и валидный HTML-код (см. Стандарты кодирования WordPress).
• Используйте правильно составленный, валидный CSS-код (см. Стандарты кодирования 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 для идентификации темы и отображения её в Administration Panel подменю Design > Themes в качестве установленной темы, вместе с другими установленными темами.

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

       Template: WordPress Default

а пишите

       Template: default

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

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

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

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

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

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

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

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

Базовые шаблоны

Минимальная тема WordPress состоит из двух файлов:

• style.css
• index.php

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

Если вы не добавите в тему свои собственные файлы шаблонов, WordPress будет использовать встроенные файлы шаблонов по умолчанию. Например, если у вас в теме нет файлов шаблонов: ни comments.php, ни comments-popup.php, то WordPress будет автоматически использовать стандартные wp-comments.php и wp-comments-popup.php файлы шаблонов, согласно иерархии шаблонов Template Hierarchy. Эти шаблоны по умолчанию скорее всего не будут соответствовать стилям вашей темы, так что вам, вероятно, придётся разработать свои ​​собственные файлы шаблонов.
Вот основные файлы, которые обычно используют для разделения вида страниц (и которые должны быть в каталоге темы):

• header.php
• sidebar.php
• footer.php
• comments.php
• comments-popup.php

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

• Для добавления шаблона header.php используйте get_header() template tag.
• Для добавления шаблона sidebar.php используйте get_sidebar() template tag.
• Для добавления шаблона footer.php используйте the get_footer() template tag.

Вот пример включения шаблонов:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

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

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

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

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

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

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

где ‘3’ — и есть ID текущей категории. Более детально этот процесс рассмотрен в Category Templates

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

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

<?php
if (is_category(9)) {
   // для постов 9 категории
   include(TEMPLATEPATH . '/single2.php');
} else {
   // для других постов
   include(TEMPLATEPATH . '/single1.php');
}
?>

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

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

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

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

Эта возможность не работает в WordPress 2.5.

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

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

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

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 — см. шаблон иерархии Template Hierarchy для получения дополнительной информации.

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

Шаблон отдельной страницы, используется для отображения запрошенной страницы Page.

category.php

Шаблон категории category template. Используется при запросе категории.

author.php

Шаблон автора блога author template. Используется при запросе автора блога.

date.php

Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда.

archive.php

Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php, author.php и date.php для соответствующих типов запросов.

search.php

Шаблон результатов поиска. Используется после выполнения поиска.

404.php

Шаблон для сообщения об ошибке 404 Not Found . Используется, когда WordPress не может найти сообщение или страницу, которая соответствует запросу.

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

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

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

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

Следующий код <?php bloginfo(‘template_directory’); ?> вставляет URL шаблона в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы из вашей темы.

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

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

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

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

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

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

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

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

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

wp_head

Происходит при отображении HTML кода элемента <head> в шаблоне header.php. Пример использования в плагине: добавление кода javascript.

Использование: <?php do_action(‘wp_head’); ?>

-или-  <?php wp_head(); ?>

wp_footer

Происходит при отображении заголовка (верхнего колонтитула) «footer» темы в шаблоне footer.php. Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице.

Использование: <?php do_action(‘wp_footer’); ?>

-или-  <?php wp_footer(); ?>

wp_meta

Событие обычно происходит при обработке тега <li>Meta</li> при отрисовке меню или в меню боковой панели в шаблоне sidebar.php. Пример использования: включение круговой рекламы или облака тегов в боковую панель.

Использование: <?php do_action(‘wp_meta’); ?>

-или-  <?php wp_meta(); ?>

comment_form

Происходит при отработке скриптов шаблонов comments.php и comments-popup.php, непосредственно перед закрытием тега формы комментариев (</form>). Пример использования: Показать предпросмотр только что добавленных комментариев.

Использование: <?php do_action(‘comment_form’, $post->ID); ?>

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

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

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

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

Найдите время, чтобы прочитать раздел «Проектирование Темы для общественного пользования» Designing Themes for Public Release. Это статья с хорошими советами по подготовке вашей темы для общественности.

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

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

Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.

Что такое тема?

Тема WordPress — это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать… В других движка тему еще называют «шаблоном», но в WordPress принято говорить именно тема — theme, а не шаблон — template. Хотя и то и другое по сути одно и тоже…

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

Необходимые файлы

Чтобы создать тему необходимы лишь два файла:

1. index.php — главный файл темы, отвечает за вывод содержимого
2. style.css — главный файл стилей, отвечает за css стили

Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:

• header.php — отвечает за вывод шапки
• footer.php — отвечает за вывод подвала
• sidebar.php — отвечает за вывод боковой панели
• page.php — отвечает за вывод отдельной страницы (записи)
• и т.д. смотрите полный список.

Возможности темы

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

Таким образом, тема может:

• Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
• Тема может выводить любое содержимое;
• Может указать, какой контент будет отображаться для разных пользователей;
• Может использовать любые элементы дизайна (картинки, видео).

Как и на любом сайте, тема — это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).

Чем тема отличается от плагина?

С точки зрения кода, можно сказать, ничем — в теме можно создать полноценный плагин. А вот с точки зрения логики — всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы — вывод содержимого, в том числе, этого опроса…

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

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

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

Где скачивать темы?

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

Есть и другие источники, но там темы обычно платные. Например, темы можно скачать на: Creative Market.

Старт

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

1. настроить локальную среду разработки.
2. Затем можно посмотреть примеры WordPress-тем.
3. Ну и начать разработку своей первой темы.

Время на прочтение
24 мин

Количество просмотров 573K

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http://{site-name}/wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

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

Предварительный осмотр

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

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

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

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

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

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

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<div class="wrapper">

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() {
	wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri());
	wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300');
	wp_enqueue_style( 'font-style');
}
add_action('wp_enqueue_scripts', 'enqueue_styles');

function enqueue_scripts () {
	wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js');
	wp_enqueue_script('html5-shim');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

	</div>
	<footer></footer>
	<?php wp_footer(); ?>
</body>
</html>

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:

<?php get_header(); ?>
<div class="main-heading">
	<h1><?php the_title(); ?></h1>
</div>
<section>
	<?php if (have_posts()): while (have_posts()): the_post(); ?>
		<?php the_content(); ?>
	<?php endwhile; endif; ?>
</section>
<?php get_footer(); ?>

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

body {
	color: #8f8f8f;
	font: 12px Tahoma, sans-serif;
	background: #f8f8f8 url(images/bg.png);
	border-top: 5px solid #7e7e7e;
	margin: 0;
}

img {
	border: 0;
}

p {
	margin: 20px 0;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.input {
	background-color: #f3f3f3;
	border: 1px solid #e7e7e7;
	height: 30px;
	color: #b2b2b2;
	padding: 0 10px;
	vertical-align: top;
}

.button {
	color: #fff;
	background-color: #29c5e6;
	border: none;
	height: 32px;
	font-family: 'Oswald', sans-serif;
}

.image {
	border: 1px solid #fff;
	outline: 1px solid #c9c9c9;
}

figure img {
	display: block;
}

.wrapper {
	max-width: 960px;
	margin: auto;
}

header {
	padding: 20px 0;
}

.main-heading {
	background: transparent url(images/h1-bg.png);
	margin: 30px 0;
	padding-left: 20px;
}

.main-heading h1 {
	display: inline-block;
	color: #7e7e7e;
	font: 40px/40px 'Oswald', sans-serif;
	background: url(images/bg.png);
	margin: 0;
	padding: 0 10px;
	text-transform: uppercase;
}

aside {
	float: left;
	width: 250px;
}

aside + section {
	margin-left: 280px;
	padding-bottom: 50px;
}

footer {
	clear: both;
	background: #7e7e7e;
	color: #dbdbdb;
	font-size: 11px;
} 

В результате должна получиться вот такая картина:

Логотип

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

<div class="wrapper">
	<header>
		<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a>
	</header>

Форма поиска

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

<form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form">
	<input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input">
	<button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button>
</form>

А в файл стилей запишите стили для формы:

.search-form {
	float: right;
}

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

<header>
	…
	<?php get_search_form(); ?> 
</header>

Навигация

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

if (function_exists('add_theme_support')) {
	add_theme_support('menus');
}

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

<nav class="main-navigation">
	<? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?>
</nav>

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

.main-navigation {
	background: #f3f3f3;
	border: 1px solid #e7e7e7;
}

.top-menu {
	margin: 0;
	padding: 0;
}

.top-menu li {
	display: inline-block;
	padding: 10px 30px;
	margin: 0;
	text-transform: uppercase;
	list-style-position: inside;
	font: 14px 'Oswald', sans-serif;
}

.top-menu li.current_page_item {
	background: #29c5e6;
}

.top-menu a {
	color: #b2b2b2;
	text-decoration: none;
}

.top-menu li.current_page_item a {
	color: #fff;
}

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

<footer>
	<div class="footer-content">
		<div class="twitter">
			<h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3>
			<time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time>
			<p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p>
		</div>
		<div class="sitemap">
			<h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3>
			<div class="column first">
				<a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a>
				<a href="/about/"><?php echo __('About', 'whitesquare'); ?></a>
				<a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a>
			</div>
			<div class="column">
				<a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a>
				<a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a>
				<a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a>
			</div>
		</div>
		<div class="social">
			<h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3>
			<a href="http://twitter.com/" class="social-icon twitter-icon"></a>
			<a href="http://facebook.com/" class="social-icon facebook-icon"></a>
			<a href="http://plus.google.com/" class="social-icon google-plus-icon"></a>
			<a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a>
			<a href="http://youtube.com/" class="social-icon-small youtube-icon"></a>
			<a href="http://flickr.com/" class="social-icon-small flickr-icon"></a>
			<a href="http://instagram.com/" class="social-icon-small instagram-icon"></a>
			<a href="/rss/" class="social-icon-small rss-icon"></a>
		</div>
		<div class="footer-logo">
			<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a>
			<p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p>
		</div>
	</div>
</footer>

И прописываем стили в style.css:

.footer-content {
	max-width: 960px;
	margin: auto;
	padding: 10px 0;
	height: 90px;
}

.footer-heading {
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	border-bottom: 1px solid #919191;
	margin: 0 0 10px 0;
	text-transform: uppercase;
}

footer a {
	color: #dbdbdb;
}

footer p {
	margin: 5px 0;
}

.twitter-time {
	color: #b4aeae;
}

.twitter {
	float: left;
	width: 300px;
}

.twitter p {
	padding-right: 15px;
}

.sitemap {
	width: 150px;
	float: left;
	margin-left: 20px;
	padding-right: 15px;
}

.sitemap .column {
	display: inline-block;
	margin-left: 40px;
}

.sitemap .column.first {
	margin-left: 0;
}

.sitemap a {
	display: block;
	text-decoration: none;
	font-size: 12px;
	margin-bottom: 5px;
}

.sitemap a:hover {
	text-decoration: underline;
}

.social {
	float: left;
	margin-left: 20px;
	width: 130px;
}

.social-icon {
	width: 30px;
	height: 30px;
	background: url(images/social.png) no-repeat;
	display: inline-block;
	margin-right: 10px;
}

.social-icon-small  {
	width: 16px;
	height: 16px;
	background: url(images/social-small.png) no-repeat;
	display: inline-block;
	margin: 5px 6px 0 0;
}

.twitter-icon {
	background-position: 0 0;
}

.facebook-icon {
	background-position: -30px 0;
}

.google-plus-icon {
	background-position: -60px 0;
}

.vimeo-icon {
	background-position: 0 0;
}

.youtube-icon {
	background-position: -16px 0;
}

.flickr-icon {
	background-position: -32px 0;
}

.instagram-icon {
	background-position: -48px 0;
}

.rss-icon {
	background-position: -64px 0;
}

.footer-logo {
	float: right;
	margin-top: 20px;
	font-size: 10px;
	text-align: right;
}

В итоге главная страница сайта должна выглядеть вот так:

Главная страница

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

WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-{название страницы}.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

<?php get_header(); ?>
<section>
	<?php if (have_posts()): while (have_posts()): the_post(); ?>
		<?php the_content(); ?>
	<?php endwhile; endif; ?>
</section>
<?php get_footer(); ?>

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

<div class="slider">
	<div class="content">
		<div class="title">Fusce vitae nibn quis diam fermentum</div>
		<div class="subtitle">Etiam adipscing ultricies commodo.</div>
	</div>
	<ol class="links">
		<li class="active">Lorem ipsum dolop</li>
		<li>Ultricies pellentesque</li>
		<li>Aliquam ipsum</li>
		<li>Nullam sed mauris ut</li>
	</ol>
</div>
<article class="teaser" style="width: 50%;">
	<div class="heading">
		<i class="bullet"></i>
		<h3 class="heading-text">About whitesquare</h3>
	</div>
	<figure class="image">
		<img src="/wp-content/uploads/2014/05/home-1.png" alt="" width="135" height="135" />
	</figure>
	In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
	<p class="more"><a href="/about-us/">Read more</a></p>
</article>
<article class="teaser" style="width: 50%;">
	<div class="heading">
		<i class="bullet"></i>
		<h3 class="heading-text">A word from our ceo</h3>
	</div>
	<figure class="image">
		<img src="/wp-content/uploads/2014/05/home-2.png" alt="" width="135" height="135" />
	</figure>
	<i>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</i>
	<p class="more">Yane Naumoski, CEO</p>
</article>
<article class="teaser" style="width: 33%;">
	<div class="heading">
		<i class="bullet"></i>
		<h3 class="heading-text">Services</h3>
	</div>
	In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
	<p class="more"><a href="/services/">Read more</a></p>
</article>
<article class="teaser" style="width: 33%;">
	<div class="heading">
		<i class="bullet"></i>
		<h3 class="heading-text">Our teams</h3>
	</div>
	<div class="small-block">
		<figure class="image">
			<img src="/wp-content/uploads/2014/05/home-3.png" alt="" width="35" height="35" />
		</figure>
		<h4 class="teaser-small-heading">Lorem ipsum</h4>
		<p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p>
	</div>
	<div class="small-block">
		<figure class="image">
			<img src="/wp-content/uploads/2014/05/home-4.png" alt="" width="35" height="35" />
		</figure>
		<h4 class="teaser-small-heading">Lorem ipsum</h4>
		<p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p>
	</div>
	<div class="small-block">
		<figure class="image">
			<img src="/wp-content/uploads/2014/05/home-5.png" alt="" width="35" height="35" />
		</figure>
		<h4 class="teaser-small-heading">Lorem ipsum</h4>
		<p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p>
	</div>
</article>
<article class="teaser" style="width: 33%;">
	<div class="heading">
		<i class="bullet"></i>
		<h3 class="heading-text">24/7/365 Support</h3>
	</div>
	<p class="teaser-small-paragraph">
		In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
	</p>
	<p class="teaser-small-paragraph more"><a href="/contact/">Read more</a></p>
</article>
<article class="teaser clients" style="width: 100%;">
	<div class="heading">
		<i class="bullet"></i>
		<h3 class="heading-text">Our clients</h3>
	</div>
	<img src="/wp-content/uploads/2014/05/clients-1.png" alt="" width="61" height="83" />
	<img src="/wp-content/uploads/2014/05/clients-2.png" alt="" width="74" height="83" />
	<img src="/wp-content/uploads/2014/05/clients-3.png" alt="" width="163" height="83" />
	<img src="/wp-content/uploads/2014/05/clients-4.png" alt="" width="72" height="83" />
	<img src="/wp-content/uploads/2014/05/clients-5.png" alt="" width="104" height="83" />
	<img src="/wp-content/uploads/2014/05/clients-6.png" alt="" width="78" height="83" />
	<img src="/wp-content/uploads/2014/05/clients-7.png" alt="" width="87" height="83" />
</article>

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

.slider {
	margin-top: 30px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}

.slider .content {
	height: 220px;
	padding: 30px 40px;
	background: #e2e2e2;
}

.slider .title {
	color: #5a5a5a;
	font-size: 42px;
}

.slider .subtitle {
	color: #acacac;
	font-size: 20px;
}

.slider .links {
	display: block;
	margin: 0;
	padding: 10px;
	background: #f3f3f3;
	border-bottom: 1px solid #e7e7e7;
	counter-reset: list 0;
	color: #8f8f8f;
}

.slider .links li {
	display: inline-block;
	font-size: 18px;
	line-height: 23px;
	margin-right: 55px;
	cursor: pointer;
}

.slider .links li.active {
	color: #29c5e6;
}

.slider .links li:before {
	display: inline-block;
	counter-increment: list;
	content: counter(list) " ";
	background: #8f8f8f;
	color: #fff;
	width: 23px;
	text-align: center;
	margin-right: 10px;
	font-size: 16px;
	cursor: pointer;
}

.slider .links li.active:before {
	background: #29c5e6;
}

.teaser {
	display: inline-block;
	padding: 0 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	vertical-align: top;
}

.teaser .heading {
	background: transparent url(images/h1-bg.png);
	margin: 40px 0 20px;
	height: 16px;
}

.teaser .bullet {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #29c5e6;
	vertical-align: top;
}

.teaser .heading-text {
	display: inline-block;
	text-transform: uppercase;
	font: normal 14px/16px 'Oswald', sans-serif;
	margin: 0;
	padding: 0 10px;
	background: url(images/bg.png);
}

.teaser .image {
	float: left;
	margin-right: 20px;
}

.teaser .small-block {
	margin-bottom: 10px;
}

.teaser .small-block .image {
	margin-right: 10px;
}

.teaser .more,
.teaser .more a {
	color: #525252;
	margin-bottom: 0;
}

.teaser-small-heading {
	display: block;
	color: #525252;
	margin: 0;
	font-weight: normal;
	font-size: 11px;
	text-transform: uppercase;
}

.teaser-small-paragraph {
	margin: 4px 0;
	font-size: 11px;
}

.clients img {
	display: inline-block;
	margin-right: 30px;
}

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

<?php
remove_filter('the_content', 'wpautop');

После этого, главная страница должна отобразиться правильно.

Сайдбар

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

Для этого создайте файл sidebar.php и поместите в него следующий код:

<aside>
	<nav class="aside-navigation">
		<? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?>
	</nav>
	<h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2>
	<div class="map">
		<img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>">
	</div>
</aside>

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

<div class="main-heading">
	…
</div>
<?php get_sidebar(); ?>
<section>
	…

Далее нам нужно добавить стили для вёрстки:

.aside-navigation {
	background: #f3f3f3;
	border: 1px solid #e7e7e7;
}

.aside-menu {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.aside-menu li {
	font-weight: 300;
	list-style: square inside;
	border-top: 1px solid #e7e7e7;
	font: 14px 'Oswald', sans-serif;
	padding: 10px;
	font-weight: 300;
}

.aside-menu li:first-child {
	border: none;
}

.aside-menu li.current-menu-item,
.aside-menu li.current-menu-item a {
	color: #29c5e6;
}

.aside-menu a {
	color: #8f8f8f;
	text-decoration: none;
}

.sidebar-heading {
	background: #29c5e6;
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	padding: 10px;
	margin: 30px 0 0 0;
	text-transform: uppercase;
}

.map {
	background: #f3f3f3;
	border: 1px solid #e7e7e7;
	padding: 10px;
	margin: 0 0 30px 0;
}

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Страница About us

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

<blockquote class="main-blockquote">
	<p>
		“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
	</p>
	<cite>John Doe, Lorem Ipsum</cite>
</blockquote>
<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
	Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.
</p>
<p>
	Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.
</p>
<img class="image" src="/wp-content/uploads/2014/05/about-1.png" alt="about-1" width="320" height="175" />
<img class="image alignright" src="/wp-content/uploads/2014/05/about-2.png" alt="about-2" width="320" height="175" />
<h2 class="content-heading">Our team</h2>
<div class="team-row">
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Doe.jpg" alt="" width="96" height="96" />
		<figcaption>
			John Doe<span class="occupation">ceo</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Pittsley.jpg" alt="" width="96" height="96" />
		<figcaption>
			Saundra Pittsley<span class="occupation">team leader</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Pittsley.jpg" alt="" width="96" height="96" />
		<figcaption>
			Julio Simser<span class="occupation">senior developer</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Simser.jpg" alt="" width="96" height="96" />
		<figcaption>
			Margery Venuti<span class="occupation">senior developer</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Venuti.jpg" alt="" width="96" height="96" />
		<figcaption>
			Fernando Tondrea<span class="occupation">developer</span>
		</figcaption>
	</figure>
</div>
<div class="team-row">
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Tondrea.jpg" alt="" width="96" height="96" />
		<figcaption>
			Ericka Nobriga<span class="occupation">art director</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Nobriga.jpg" alt="" width="96" height="96" />
		<figcaption>
			Cody Rousselle<span class="occupation">senior ui designer</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Rousselle.jpg" alt="" width="96" height="96" />
		<figcaption>
			Erik Wollman<span class="occupation">senior ui designer</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Wollman.jpg" alt="" width="96" height="96" />
		<figcaption>
			Dona Shoff<span class="occupation">ux designer</span>
		</figcaption>
	</figure>
	<figure>
		<img class="image" src="/wp-content/uploads/2014/05/team-Shoff.jpg" alt="" width="96" height="96" />
		<figcaption>
			Darryl Brunton<span class="occupation">ui designer</span>
		</figcaption>
	</figure>
</div>

И стили в style.css:

.main-blockquote {
	margin: 0;
	background: #29c5e6;
	padding: 10px 20px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

.main-blockquote p {
	color: #fff;
	font-style: italic;
	font-size: 33px;
	margin: 0;
}

.main-blockquote cite {
	display: block;
	font-size: 20px;
	font-style: normal;
	color: #1d8ea6;
	margin: 0;
	text-align: right;
}

.content-heading {
	background: #29c5e6;
	font: 30px 'Oswald', sans-serif;
	font-weight: 300;
	color: #fff;
	padding: 0 10px;
	margin: 30px 0 0 0;
	text-transform: uppercase;
}

.team-row figure {
	display: inline-block;
	margin: 20px 0 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

.team-row figure + figure {
	margin-left: 43px;
}

.team-row figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

.team-row .occupation {
	display: block;
	font-size: 14px;
	color: #29c5e6;
}

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

<?php get_header();?>
<div class="main-heading">
	<h1><?php the_title(); ?></h1>
</div>
<?php get_sidebar();?>
<section>
	<?php while (have_posts()): the_post();?>
		<?php the_content();?>
		<?php
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}
		?>
	<?php endwhile; ?>
</section>
<?php get_footer(); ?>

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

Страница поиска

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

<?php get_header(); ?>
<div class="main-heading">
	<h1>Search</h1>
</div>
<?php get_sidebar(); ?>
<section>
	<h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2>
	<?php if (have_posts()): while (have_posts()): the_post(); ?>
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
		<p><?php the_excerpt(); ?></p>
	<?php endwhile;	else:?>
		<p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p>
	<?php endif; ?>
</section>
<?php get_footer(); ?>

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

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

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

<?php get_header(); ?>
<div class="main-heading">
	<h1><?php the_title(); ?></h1>
</div>
<?php get_sidebar(); ?>
<section>
	<p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p>
</section>
<?php get_footer(); ?>

Заключение

На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.

Ссылки на предыдущие статьи:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
Верстка для самых маленьких. Верстаем страницу по БЭМу (xnim)
Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки (lexnekr)

Update:
Статья была существенно обновлена в соответствии с пожеланиями комментаторов.

• Создание меню теперь описано не на основе wp_list_pages, а с помощью wp_nav_menu.
• Все фразы, используемые в шаблоне вставляются через функцию локализации __(»)
• Стили и скрипты подключаются не в файле header.php, а через специальные функции в functions.php
• Код главной страницы в шаблоне перенесен из page-home.php во front-page.php

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

WordPress – это широко используемая во всем мире система управления контентом (CMS) с открытым исходным кодом. В общей сложности 34,7% сайтов используют WordPress. Вы также можете выбрать эту платформу, чтобы создать сильное присутствие в Интернете и без особых усилий создать свой бизнес в Интернете с помощью мощного программного обеспечения для создания веб-сайтов WordPress. WordPress – очевидный выбор и самый простой для начала. И это основная причина, по которой каждый разработчик предлагает выбрать его в качестве основы для своего сайта. Однако, если вы все еще не уверены в том, что такое WordPress или CMS с открытым исходным кодом, то чтение этого руководства определенно прольет свет на ваши знания.

Итак, без лишних слов, давайте начнем с пошагового создания темы WordPress.

Как создать тему WordPress? Учебник для новичков

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

Каковы требования для создания темы WordPress?

1. Установка WordPress локально

Первым делом вам необходимо установить WordPress. Не волнуйтесь, научиться устанавливать WordPress – это не ракетостроение. Вы легко можете сделать это сами.

2. Процедура создания темы WordPress с нуля.

• Руководство – создание темы WordPress с помощью кодирования
• Автоматизировано – создание темы WordPress с помощью WordPress Theme Builder

Для темы WordPress все будет сделано только в каталоге wp_content. Просто создайте новую подпапку темы в папке wp_content → Themes. Предположим, вы назвали его «мифема».

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

По сути, WordPress нужно всего 2 файла, т.е. style.css и index.php. Но для этого макета вам нужно 5 файлов, как показано ниже;

• header.php – содержит код заголовочного раздела темы.
• index.php – содержит код для основной области и указывает, куда будут включены другие файлы. Это основной файл темы.
• sidebar.php – содержит информацию о боковой панели.
• footer.php – обрабатывает нижний колонтитул.
• style.css – отвечает за стилизацию вашей темы.
• bootstrap.css – отдельный CSS-код не требуется; очень отзывчивый.
• bootstrap.js – предоставляет собственные js для панели навигации, вкладок и т. д.

Вам необходимо скачать пакет Bootstrap. Файл Bootstrap.js и Bootstrap.cs необходимо скопировать в папку темы.

Как шаг за шагом создать собственную тему WordPress?

1. Создание темы WordPress с нуля путем кодирования (вручную)

2. Создайте тему WordPress с TemplateToaster (автоматически)

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

Шаги по созданию темы WordPress с нуля путем кодирования

Шаг 1: файл header.php

Вам нужно поместить этот код в файл header.php.

<html>
<head>
<title>Tutorial theme</title>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

<body>

<div id="ttr_header" class="jumbotron">
<h1>HEADER</h1>
</div>
<div class="container">

Этот файл Header.php содержит код для части заголовка, в которой связаны файлы js и style. Он отображает заголовок страницы.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Эта строка, добавленная после заголовка, указывает WordPress загрузить файл style.css, который будет обрабатывать стили веб-сайта.

Вот,

<?php bloginfo('stylesheet_url'); ?>

– это функция WordPress, которая фактически загружает таблицу стилей.

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Здесь мы используем Bootstrap. Это один из хорошо известных фреймворков для адаптивного веб-дизайна. Он предоставляет встроенные файлы CSS для стилизации вашего сайта. Вы можете сохранить файл bootstrap.css в папке theme / css.

Затем добавляется «div» с классом ttr_header, и это будет основной контейнер веб-сайта. Теперь установите для него класс, чтобы вы могли изменить его через файл style.css.

После этого добавьте простую метку HEADER в «div id» с классом «ttr_header», который позже будет указан в классе «jumbotron».

Шаг 2: файл index.php

Основной файл index.php будет содержать следующий код;

<?php get_header(); ?>
<div id="ttr_main" class="row">
<div id="ttr_content" class="col-lg-8 col-sm-8 col-md-8 col-xs-12">

<div class="row">
<?php if (have_posts()): while (have_posts()): the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Самая первая строка кода в этом файле

будет включать файл header.php и код в нем на главной странице.

<?php if (have_posts()): while (have_posts()): the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>

Приведенный выше код отображает основное содержимое сообщения, созданного вами в административной области WordPress.
Затем добавьте файл sidebar.php, как показано ниже.

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

После этой строки вставлен пустой «div», который будет отделять основную область и боковую панель от нижнего колонтитула.

Наконец, добавлена ​​последняя строчка

который будет включать файл footer.php.

Шаг 3. Файл Sidebar.php

В sidebar.php добавьте следующий код

<div id="ttr_sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h2 ><?php _e('Categories'); ?></h2>
<ul > <?php wp_list_cats('sort_column=namonthly'); ?> </ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul > <?php wp_get_archives(); ?> </ul>
</div>

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

).

Шаг 4: файл footer.php

Добавьте следующие строки кода в файл footer.php:

<div id= "ttr_footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

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

Шаг 5: файл style.css

Добавьте следующие строки в файл style.css

body
{
text-align: left;
}
#ttr_sidebar
{
border-left: 1px solid black;
}
#ttr_footer
{
width: 100%;
border-top: 1px #a2a2a2 solid;
text-align: center;
}
.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

Этот файл CSS устанавливает базовый вид вашей темы. Это установит фон страницы и добавит границы в соответствии с вашими потребностями.

Ваша страница будет выглядеть примерно так:

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

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

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

Как создать тему WordPress с TemplateToaster?

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

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

Шаг 1. Выберите платформу

Здесь вы можете выбрать CMS. Поскольку мы создаем тему WordPress, очевидным выбором для меня является WordPress.

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

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

Шаг 2. Создайте заголовок

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

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

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

Заголовок готов.

Шаг 3. Создайте меню

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

Вы также можете установить цвет фона, градиент или изображение в меню из опции «Фон».

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

Теперь выберите «Свойства кнопки меню», а затем выровняйте кнопку, например, «Выравнивание» → «По горизонтали» → «Справа налево», и таким образом кнопки меню будут выровнены по правому краю страницы. 

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

Меню готово.

Шаг 4. Создайте и стилизуйте слайд-шоу

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

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

Шаг 5: отредактируйте контент (основная область)

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

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

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

Вкладка «Редактор» → Изображение → Просмотреть изображение → Открыть → ОК

Точно так же вы можете легко спроектировать остальные столбцы, как показано ниже.

Шаг 6. Дизайн / настройка нижнего колонтитула

• Теперь перейдите на вкладку Нижний колонтитул. Он отобразит множество вариантов дизайна нижнего колонтитула. Во-первых, установите фон для нижнего колонтитула. Вы также можете установить изображение в качестве фона из стоковых изображений или просмотреть собственное изображение.
• Затем с помощью параметра «Ячейка нижнего колонтитула» установите количество строк, столбцов и ширину нижнего колонтитула. Как и здесь, выбраны 4 столбца в первой строке и всего 2 строки. Разместите значки социальных сетей там, где вы сочтете их подходящими.

• Поместите контент и стилизуйте его с помощью параметров типографии. Вы также можете установить разные цвета шрифта в разных состояниях ссылок, таких как Active, Hover, Normal.
• Точно так же вы можете стилизовать Designed by Text & Link во второй строке. Тем не менее, вы также можете в любое время выбрать отображение / скрытие этого флажка.
• Окончательный вид нижнего колонтитула будет примерно таким. Таким образом, чтобы создать красивый дизайн, вам достаточно всего нескольких щелчков мыши.

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

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

Имя страницы → ⋮ → Добавить дочернюю страницу

Здесь вы также можете увидеть другие параметры, например «Удалить», «Изменить» и «Клонировать». Вы можете использовать их для выполнения подходящих действий.

Ура!! Вы завершили процесс создания скретча формы темы WordPress. И вы можете зарабатывать прибыль с помощью разработки тем WordPress и хранить свое маленькое секретное оружие в безопасности.

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

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

Итак, это подводит нас к концу этого подробного руководства. Я уверен, что это поможет вам создать собственную тему WordPress, а также объяснит основные аспекты создания темы WordPress с нуля. Создать тему WordPress довольно просто, и выбор CMS зависит от цели создания вашего сайта. Например, если вы собираетесь начать разработку веб-сайта электронной коммерции или хотите создать дочернюю тему в WordPress, или вы даже можете захотеть узнать, что это за тема WordPress, используется другой веб-сайт, или вы хотите начать разработку темы WordPress с помощью Bootstrap и т.д.. Перед тем, как выбрать тему WordPress, следует помнить об определенных вещах, потому что выбор лучшей темы WordPressэто не детская игра. Ознакомьтесь с лучшими темами WordPress и бесплатными темами WordPress.

Источник записи: https://blog.templatetoaster.com