Тема для wordpress своими руками

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

Чтобы сразу посмотреть общий принцип создания темы, перейдите к части учебника: Создание самой простой темы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Старт

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

Этот раздел в процессе разработки. И вообще, я его начал писать и забросил, неинтересное занятие получается. Будет время, желание продолжу.

Источник

Создание темы

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

Для того чтобы тема появилась в админке и её можно было активировать, в ней должно быть минимум два файла:

index.php — отвечает за вывод содержимого.
style.css — отвечает за css стили этого вывода.

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

Давайте создадим очень простую тему (всего из двух файлов). Шаги ниже предполагают, что вы уже ознакомились со статьей: Программная среда для создания тем и WordPress уже установлен.

Шаг 1: создание папки темы

Зайдите в папку на вашем компьютере, где установлен ваш сайт на WordPress. Затем из основной папки, перейдите в папку тем: wp-content/themes/ и создайте в ней папку mytheme — это будет папка темы, в которой будут лежать все файлы темы. Должно получиться примерно так:

Шаг 2: создание обязательных файлов: style.css и index.php

В созданной папке темы mytheme создайте файл style.css . Откройте этот файл в текстовом редакторе, например notepad++ и добавьте в него такой CSS код:

Далее, точно также создайте еще один файл index.php . И добавьте в него такой код:

Шаг 3: активация темы

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

Далее, переходим во внешнюю часть и смотрим как выглядит наша первая тема, видим:

Все, первая тема готова!

Разумеется, в таком виде использовать её невозможно — тема требует доработки. Чтобы быстрее понять как и что нужно делать, рекомендую ознакомится с остальными главами этого руководства. А также, в качестве примера ознакомьтесь с очень простой стартовой темой: clean-wp-template.

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

Источник

WordPress создание темы с нуля

Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или «натянуть» HTML шаблон; ну или в конце концов работать в этом направлении получая свои кровные.

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

Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.

В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.

Структура шаблона

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

style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым.
index.php — содержимое главной страницы
header.php — общая шапка сайта
footer.php — общий футер сайта
functions.php — файл с функциями темы
single.php — шаблон записи
page.php — шаблон страницы
category.php — шаблон списка записей категории
archive.php — шаблон списка записей архивов
404.php — содержимое страницы ошибки 404
search.php — шаблон страницы со списком результатов поиска

css/ — папка со стилями
js/ — папка со JS скриптами

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

Создание темы WordPress

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

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

HTML шаблон

Как я уже говорил мы будем использовать стандартный начальный шаблон Bootstrap 4. Скачать его можно на официальном сайте по ссылке Starter template.

Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.

Перед тем, как тема будет «разрезана» на шапку и футер вы можете добавить весь исходный код шаблона в файл index.php и увидеть, что тема работает. Путь до папки с темой указывается функцией get_template_directory_uri() — это чтобы сразу в теме указать ссылки для скриптов. Должно получится примерно следующее:

Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.

Добавляем API WordPress

Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:

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

И ниже подключаем API. Код должен находится внутри тега :

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

Источник

Разработка темы для WordPress с нуля

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

Создание своей идеальной темы для WordPress

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

Как сверстать тему для WordPress

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

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

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

Theme Name: Название темы

Description: Описание темы

Author: Имя разработчика

Author URI: сайт разработчика (если есть)

Все css стили прописываются ниже значка */. Чтобы новая тема красиво отображалась, нужно в ее папку добавить файл с картинкой, желательно в формате screenshot.png.

Еще надо добавить в файл functions.php. В него будут вноситься коды различных функций.

Теперь тема добавлена. Чтобы продолжить разработку, нужно зайти в консоль вордпресс, открыв ее по адресу http:///wp-admin, зайти в раздел управления темами, найти в нем новую тему по ее имени, и нажать на кнопку «активировать». Когда тема будет активирована, появится ссылка на нее. Если пройти по этой ссылке, открывается пустая пока еще страница сайта.

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

На открывшейся странице видно, что она состоит из шапки (верхней части), поля для контента и подвала (нижней части). На всех страницах кроме главной есть сайдбар, расположенный по умолчанию слева. Чтобы при дальнейшей работе задать теме более точное руководство, лучше страницы главного меню и страницы подменю оформлять по-разному. Первые пусть имеют формат «страниц WordPress» (page), а вторые – «постов блога WordPress» (post). Это касается, конечно, больших многостраничных тем с многоуровневым меню.

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

Теперь мы имеем готовый макет. Далее начинается процесс детализации темы. Первым делом стоит разобраться со структурой страниц. Перед тем как приступить к процедуре добавления страниц, нужно указать их стиль в настройках через консоль платформы. Ссылки должны создаваться в таком формате: «http://site_name/page_name».

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

Header.php и Footer.php

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

Здесь все необходимое для включения шапки вставлено внутрь кодировки head. Последней строкой введена команда wp_head() необходимая для добавления заголовков WP. Далее открывается блок «wrapper».

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

wp_enqueue_style( ‘whitesquare-style’, get_stylesheet_uri());

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

Источник