Как сделать тему для вордпресс
Как сверстать тему для WordPress
Введение
Добавление темы
Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.
Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.
После того, как тема активируется, вы увидите сообщение со ссылкой на сайт. Уже сейчас можно зайти на него и увидеть пустую страницу.
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.
Структура страниц
Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.
После добавления, список страниц должен выглядеть вот так:
Header.php и Footer.php
Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.
Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».
Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:
В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.
Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.
Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.
Шаблон страницы
Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:
Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.
Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:
В результате должна получиться вот такая картина:
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:
Форма поиска
WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:
А в файл стилей запишите стили для формы:
Всё, что осталось сделать – это подключить searchform.php внутри header.php.
Навигация
Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:
После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.
Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:
Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».
После этого меню уже появится на страницах но без стилей. Стилизуем его:
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок
Далее делаем вёрстку в файле footer.php:
И прописываем стили в style.css:
В итоге главная страница сайта должна выглядеть вот так:
Главная страница
Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.
WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-<название страницы>.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.
Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:
Он отличается от кода page.php только тем, что в нем нет заголовка страницы.
То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.
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
Не забудьте поправить пути до картинок. Они зависят от даты добавления.
Теперь осталось стилизовать данный код.
Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:
После этого, главная страница должна отобразиться правильно.
Сайдбар
Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.
Для этого создайте файл sidebar.php и поместите в него следующий код:
После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:
Далее нам нужно добавить стили для вёрстки:
Страница 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
Далее перейдите в редактирование страницы в панели администратора и добавьте код:
И стили в style.css:
Шаблон поста
После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:
Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.
Страница поиска
В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:
От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.
Страница архива
В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.
Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:
Заключение
На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.
Создание своей идеальной темы для WordPress
В один прекрасный момент я перестал использовать чужие темы для своих сайтов на WordPress и сделал свою собственную. Расскажу для чего может потребоваться своя тема.
В этой статье я рассматриваю как верстать тему лишь отчасти. Она больше о философии вёрстки сайтов на WordPress и вообще вёрстки в целом.
Разнообразие и ужас сторонних WordPress тем
Для WordPress создано очень много тем. На любой вкус и цвет. И большинство из них имеет ряд недостатков.
Много ненужных классов и стилей
В погоне за универсальностью, в каждый шаблон вносят сотни функций и стилей. Многие названия стилей в темах даже не описываются в файлах стилей. А внедрены в тему, на всякий случай, если кто-то захочет изменить дизайн сайта. Предполагается, что это проще, не надо будет лезть в файлы шаблона и добавлять свои стили.
Другая значительная часть CSS правил, которые всё же прописаны в файле style.css, не используется. Потому что часть из них описывает вывод каких-нибудь сторонних плагинов, которую поддерживает тема, дополнительных менюшек, виджетов и Бог знает чего ещё. Предусмотрено всё что только задумал создатель такой WordPress темы.
Сбросы настроек CSS
Кроме того стили в файле style.css напичканы сбросами настроек, которые должны помочь сайту иметь правильный вид. Ведь куча различных элементов на одном сайте может привести к непредсказуемому результату, если заранее не сделать сброс всех параметров.
Что делает большая их часть мне, например, не всегда понятно. Изучать каждую непонятную строчку порой некогда, а верить, что так и должно быть не мой случай.
Верстки с помощью фреймворков
Стоит ли говорить, что большинство тем верстаются с помощью фреймворков (framework), которые значительно ускоряют процесс вёрстки, но добавляют одновременно столько «хлама», что потом копаться внутри темы без того же самого фреймворка просто невозможно.
Чрезмерно усложнённая структура темы
В результате CSS файл чужой WordPress темы разрастается до неимоверных размеров. А в самих файлах чего только нет.
Когда хочется что-то изменить, приходится рыскать среди большого количества непонятных функций и стилей. Отступ поправить и то сделать трудно. Правишь в одном месте, ничего не происходит, потому что это же свойство зачем-то дублируется и в других местах. Если спустя какое-то время всё-таки удаётся найти и поменять нужное свойство, то это может привести к неожиданным результатам. Где-то и что-то в дизайне «поплывет».
А если хочется отцентрировать что-то, там смешиваются ещё десяток других стилей и обычные правила просто-напросто отказываются работать. Приходится искать на просторах Интернета другие способы центровки и ко всему этому внедрять !important;, который не желателен и в большинстве случае, если правильно верстать совсем не обязателен.
Минусы чужих тем на WordPress
Все эти сторонние темы создаются преимущественно для «домохозяек», которым некогда и неинтересно разбираться в тонкостях html или css. В результате туда добавляют множество функций, которые я никогда не использовал.
Взять самое простое — добавление логотипа в виде изображения. Это можно сделать через панель администрирования сайта, если заранее была добавлена функция в шаблон темы сайта. А сейчас она добавлена практически везде.
Когда нужно поставить логотип в непредусмотренное для него место, от этой функции никакой пользы. А ведь для неё написаны десятки PHP строк только для того, чтобы пользователь мог добавить одно единственное изображение. Когда вместо этого, в нужном месте файла, достаточно прописать всего одну строчку:
И так по всем функциям. Много бесполезного для отдельно взятого человека. Напичкано всё подряд, ведь одному может понадобится одно, а другому другое.
Я также уже очень давно не использую виджеты через панель администрирования. Слишком мало свойств, по которым можно вывести желаемое меню. Либо надо использовать плагины, а это дополнительные ресурсы для сайта. Потому что, чтобы вывести блок ссылок в меню на сайте посредством плагина, в самом плагине требуется описать кучу функций.
Гораздо проще зайти в sidebar.php и вывести нужные рубрики обычным способом:
Страны
В таком небольшом участке кода имеется и список нужных рубрик и требуемая сортировка и даже исключены неугодные категории. И всё это работает без какого-либо плагина.
Минусы дочерних тем для WordPress
Самым первым этапом моего использования WordPress была переделка понравившихся тем.
Затем я внедрял элементы в стороннюю тему, не меняя её, через подключения дополнительных файлов. Саму тему старался не модифицировать, на случай если захотелось бы её обновить, когда разработчики темы добавят в неё улучшения.
Однако со временем всё усложнялось так, что обновиться без головной боли и бессонных ночей уже не было возможности. Так что я ничего не трогал и со временем какие-то функции просто устаревали и генерировали ошибки.
И только спустя много лет я узнал о дочерних темах и понял, что раньше использовал костыли. Ведь можно не трогать файлы чужой темы, а модифицировать их копии в отдельной папке.
Но и у дочерних тем есть недостатки. Они имеют все те же минусы, что и обычные. И не только не уменьшают количество ненужных функций, а наоборот добавляются еще и файлы дочерней темы. В результате грузится еще больше всего.
Преимущество своей WordPress темы
Например, CSS текущей темы сайта, который свёрстан мною имеет всего лишь 30 кб. Там нет ни одного лишнего пункта, который бы не использовался. В теме также отсутствуют все PHP примочки, генерирующие множество ненужных свойств к каждому div элементу. Я уже не говорю о безумном количестве вложенных друг в друга div-ов, которые обычно присутствуют в чужих темах.
Возможность применить минимализм в теме
Они генерируют в стилях несколько атрибутов:
При каких обстоятельствах может понадобиться в каждой статье такой набор стилей к одному элементу?
Разве что, если сайт свёрстан жутко криво. Ведь помимо этих стилей, над этим блочным элементом присутствует ещё несколько div-ов, зачастую имеющих не меньшее разнообразие стилей.
К чему всё так усложнять? В дальнейшем, чтобы что-то быстро изменить никакие инструменты разработчика в браузере (Inspect Element) не помогут. С таким-то намешенным количеством классов и стилей.
Зато когда сайт свёрстан тобою, ты можешь контролировать качество и минимализм свой темы. И тогда внутренность сайта будет предельно ясна.
Возможность создать свою более понятную структуру сайта
Мне не нравится некоторые устоявшиеся названия для файлов принятых по-умолчанию в WordPress. Лучше слишком сильно не отходить от устоявшихся норм разработки, дабы всё наоборот не усложнить. Но если изменения существенно улучшают твоё понимание структуры и упрощают взаимодействие с файлами, то смело можно менять.
Для примера возьмём название файлов content.php, content-post.php, content-page.php, content-search.php и т.д.
Если тема очень простая и содержит минимум, то всё можно оставить как есть. Но когда тема разрастается и добавляются в неё разные функции, то эти content-post.php только путают.
Предположим, что шаблон страницы записи (статьи, post) разделен на несколько составляющих. Потому что если файл большой, удобнее распределить функции по разным файлам. И все эти файлы будут являться частью контента. И потом сиди и вспоминай, что у тебя в самом файле content.php, а что в других.
Я переименовал content.php в article.php и положил его в папку single. Сразу становится понятно, всё что находится в этом файле, лежит внутри секции стандартного тега article HTML:
А сам файл article.php может быть разделен на другие составляющие, которые будут находится в подпапке article папки single. Или если это файлы для разделов, то в подпапке article папки archive.
То же самое, вместо стиля .entry-content, который определяет статью, меняем на название .archive-article или .single-article, в зависимости раздел ли это или запись. В итоге имеем структуру ясную как день и ночь. И даже если вы потом забудете что и где, достаточно посмотреть на одинаковые названия и понять что всё относится к одному и тому же.
Для примера покажу структуру одного из навороченных моих сайтов. Запихивать всё в один файл не вариант, потом невозможно что-то будет добавить или убрать. Я когда переделывал старую тему на новую, удалил множество устаревших и неиспользованных функций, которые раньше не мог увидеть из-за обилия информации в одном месте. Теперь же структура имеет подобающий и понятный вид:
Даже если передать сайт другому человеку, он сможет быстро разобраться что и где находится.
По структуре папок можно понять, что всё что требуется, например, для разделов находится в папке archive. И если взглянуть на CSS, то там также будет очевидно, что стили описываются именно для разделов.
При этом стили можно тоже описывать так, чтобы всегда было понятно, какой стиль относится к чему. Если например стиль заголовка находится выше стиля содержимого контейнера, то в файле style.css стиль заголовка должен идти выше. Вообще вся структура CSS должна идти от верхнего стиля к нижнему. Тогда всегда легко найти нужный элемент на сайте.
У вас могут быть свои предпочтения по иерархии или названиям файлов, главное чтобы в этом была четко прослеживаемая мысль и удобство, которого не было ранее.
Про отступы в HTML и CSS
Почему бы не придерживаться единого правила отступов? Например, каждый раз отступать либо от верхнего либо от нижнего элемента. Тогда и вносить новые элементы на сайт проще и править легче. Не стоит это применять абсолютно ко всему, иначе можно намучиться, но для большинства случаев это пойдет только на пользу.
А чтобы не вспоминать какие отступы и где, надо один раз для себя решить какой наследственности отступов придерживаться и какого размера. Вверху файла CSS можно отметить этот момент.
Также следует избегать использование отступов не кратных 5, если это не выравнивание иконок относительно текста. Нет никой надобности использовать padding или margin 14px вместо 15px или 23px вместо 25px.
В таком случае будет порядок. Везде одинаковые отступы, красивые и аккуратные. А в случае надобности, используя инструменты массовой замены, легко везде поменять отступы на другой размер.
Отступы от заголовков H2, H3, параграфа или изображения
В отступах вообще какая-то беда. Очень мало тем, где соблюдены единые стандарты отступов. Так чтобы это смотрелось красиво. Сейчас тенденция ставить margin побольше. Не сильно всматриваясь в пропорции отступов. Иногда, отступ заголовка от предыдущего абзаца меньше, чем от следующего. А так быть не должно.
Посмотрите на мой сайт ploshadka.net и можете увидеть, что отступы тщательно вымерены и пропорционально соблюдены. Между изображениями и параграфами одинаковое расстояние. Нигде ничего не пляшет. Всё отцентрировано и аккуратно подведено. И для этого не нужны никакие фреймворки. Достаточно знать базовые вещи HTML и CSS. И применить их там, где не будут наслаиваться другие ненужные свойства, о которых я уже говорил.
Как упростить создание свой WordPress темы
Если верстать сайты на заказ, то вряд ли конечному пользователю захочется копаться во внутренних файлах сайта. Тогда использование всех WordPress фишек в ущерб минимализму, вполне оправданы. Для своих же любимых сайтов можно заморочиться, чтобы сделать всё с «нуля». Тем более что с нуля то и не придётся делать.
Заходим на сайт underscores.me, вводим в форму желаемое название своей темы и скачиваем готовый шаблон.
Там будут самые необходимые файлы для WordPress темы. Внутри этих файлов будет основная структура и функции: вывод заголовков, навигации, меню и т.д.
Для перфекционистов вроде меня можно потереть всё непонятное и ненужное. Например, из файла functions.php можно удалить такую конструкцию:
Зачем она нужна можете прочитать в интернете, но обычно вносит только сложности.
Ещё удалить всё что непонятно (а значит не нужно). Удалить некоторую структуру из стилей, разбить файлы как удобнее лично тебе. Удалить ненужные файлы вроде rtl.css. Если только кто-то не собирается верстать сайт для тех кто читает справа на лево. И т.д. На конечном этапе получим файлы лишенные всего «хлама».
Затем, если нет своего предпочтения в дизайне, смотрим другие сайты или уже готовые шаблоны в Интернете и верстаем на приготовленную базу что-то понравившееся себе.
Скорость своей темы на WordPress
Я переверстал дизайн темы, которая работала как дочерняя, в полностью отдельную тему. И сравнил скорость до и после обновления. Измерял сервисом tools.pingdom.com. Проверку осуществлял через Stockholm Sweden.
Скорость загрузки сайта, который работал вместе с дочерней темой:
Load Time — 60 секунд. Это какая-то катастрофа. Конечно сайт работал не так как определял сервис, а загружался в 1-4 секунды. Тем не менее, что-то pingdom.com никак не нравилось.
Затем загрузил свою разработанную тему с нуля. Как видно дизайн не сильно изменил, но при написании всей внутренней структуры не было заимствований из старой. В результате это совсем другой сайт, хотя дизайн оставил похожим. А скорость значительно изменилась:
Load Time в почти 4 секунды это тоже не мало. Но надо учитывать, что запрос проверяется из Швеции, а не из России, откуда приходят большинство пользователей. Плюс сайт достаточно многофункционален, также загрузка тормозится ещё и из-за сторонней рекламы.
Если рассмотреть текущий сайт ploshadka.net имеющий те же самые основы, то можно увидеть, что он грузится значительно быстрее.
А применив последние технологии кэширования, меньше секунды. И это при проверки из Швеции! А сайт находится в России.
Однако сейчас кэширование использую частичное, иначе если компоновать js скрипты вместе, ужимать css, то могут возникать непредвиденные ляпы и нерабочие плагины на сайте.
Полторы секунды из Швеции тоже вполне хорошо. Потому что если верить pingdom.com, то это быстрее 75% сайтов. А это значит, грубо говоря, что из 10 сайтов мой работает быстрее 7-и из них.
Аналогично, можно достичь отличных показателей и для инструмента PageSpeed от Google
Инструменты имеют погрешности в измерении. В разные проверки значения меняются, но примерно остаются на том же значении.
Подводя итоги
После всего сказанного выгоды от наличия своей разработанной темы должны быть очевидны. Но если её верстать теми же способами, какие используют большинство, то нет никакого смысла генерировать для себя ещё одного монстра. Можно просто скачать уже готовые и бесплатные темы. А вот если хочешь скорость, понятность и минимализм. Тогда создание своей темы — это идеальный выбор.
Читайте также
Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:
Комментарии к статье “ Создание своей идеальной темы для WordPress ” (4)
Есть ли где-то инструкции, как создавать свою тему?
В статье есть ссылка на unerscores, это базовый каркас, а дальше верстка по своему усмотрению.
Перешёл с Joomla на WordPress, т. к. на WordPress больший спрос. Был неприятно удивлён тем, что WordPress переформатирует вступительный текст, удаляя все теги и оставляет лишь абзац. Как обойти это, чтобы выводит задуманную разметку во вступительном тексте?
В файл functions.php добавьте:
Это должно убрать форматирование.
Возможно что-то пригодится из этого: разные варианты форматирования вступления (оно же цитата).