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

Видеокурс «Разработка сайта на CMS WordPress»: смотреть видео онлайн

К видеокурсам

Данный курс подойдет всем, кто уже знаком с версткой и веб-разработкой, но хотел бы научится созданию полноценного сайта с бэкендом на CMS WordPress. Также тем, кто возможно знаком с работой различных CMS, в том числе и WordPress, но хотел бы углубить свой уровень знаний конкретно этой популярной системы управления контентом (WordPress, далее WP). Необходимые знания и навыки: — Знания верстки (HTML, CSS, базовые знания JS будет плюсом) — Понимание клиент-серверного взаимодействия — Базовые знания программирования (любого языка, но желательно PHP, можно без знаний ООП) — Работа с хостингом и протоколом FTP В рамках курса мы научимся создавать сайт под управлением CMS WordPress. Мы научимся для начала работать с ней (системой) используя административную панель (далее админку), но основной упор будет на работе с WP на уровне программного кода используя язык программирования PHP и API WP. Мы разберем механизм разработки: — темы WP — шаблонов страниц — меню — виджетов и сайдбаров — форм — произвольных (кастомных) типов записей — кастомных таксономий — кастомных полей для записей — мета-данных — плагинов — шорткодов Для практического закрепления материала предусмотрен учебный проект — сайт, который мы создадим в процессе обучения.

В конце курса у нас будет готовый рабочий сайт под управлением WordPress. Бонусом к этим знаниям будут уроки по регистрации и авторизации, реализация локализации (перевода) сайта и работа с REST API. В рамках данного курса мы НЕ будем изучать верстку и язык программирования PHP. Мы посмотрим реализацию своих полей для записей, однако в процессе создания сайта будем использовать некоторые плагины, которые реализуют данный функционал гораздо более удобным способом. Обучение на видеокурсе проходит без поддержки преподавателя и наставников.

• 1. Вступление

  1 урок, 08:22

• 2. Теория по WordPress

  5 уроков, 01:45:55

• 3. Создание темы

  5 уроков, 01:40:28

• 4. Работа с меню и настройка темы

  2 урока, 33:07

• 5. Работа с виджетами, сайдбарами и шорткодами

  7 уроков, 02:10:10

  • 14. Виджеты и сайдбары (17:25)

  • 15. Разработка собственного виджета (26:59)

  • 16. Разработка виджета контактов (13:36)

  • 17. Разработка виджета социальных ссылок (24:07)

  • 18. Разработка виджета карты (09:35)

  • 19. Разработка информационных виджетов (16:36)

  • 20. Разработка шорткода (21:52)

• 6. Работа со страницами

  4 урока, 01:02:48

• 7. Работа с записями и таксономиями

  3 урока, 35:21

• 8. Работа с полями записей

  9 уроков, 01:38:50

  • 28. Создание кастомного поля для записей (16:12)

  • 29. Реализация редактирования, сохранения и вывод данных кастомного поля (11:50)

  • 30. Создание полей с помощью ACF (11:24)

  • 31. Создание полей через ACF. Поля для услуг и тренеров (11:54)

  • 32. Создание полей через ACF. Поля для занятий (12:35)

  • 33. Создание полей через ACF. Поля для клубных карт и таксономий (13:48)

  • 34. Вывод данных ACF в шаблонах. Разработка шаблона для услуг (11:53)

  • 35. Вывод данных ACF в шаблонах. Разработка шаблона для тренеров (03:32)

  • 36. Вывод данных ACF в шаблонах. Вывод полей для таксономий (05:42)

• 9. Самостоятельное получение записей из базы данных

  4 урока, 55:20

• 10. Разработка главной страницы

  4 урока, 01:12:45

• 11. Формы в WP

  6 уроков, 01:15:08

  • 45. Работа с формами. Обработка GET/POST запросов. Разработка формы в модальном окне (14:27)

  • 46. Работа с формами — AJAX. Лайки в записях, планирование реализации (04:39)

  • 47. Работа с формами — AJAX. Лайки в записях, подготовка скриптов (22:41)

  • 48. Работа с формами — AJAX. Лайки в записях, отправка данных на сервер (17:08)

  • 49. Работа с формами — AJAX. Лайки в записях, обработка данных на сервере (08:10)

  • 50. Выводим столбец, в админке, со значением лайков (08:03)

• 12. Сохранение записей программно

  5 уроков, 57:53

• 13. Работа с формами через плагин Contact Form 7

  3 урока, 25:50

• 14. Разработка плагина

  5 уроков, 56:40

• 15. Завершение разработки учебного проекта

  5 уроков, 01:03:21

• 16.  Оптимизация сайта и рекомендации по SEO и безопасности

  3 урока, 47:38

• 17. Загрузка на хостинг

  2 урока, 31:24

• 18. Регистрация и авторизация пользователей

  1 урок, 23:03

• 19. Локализация сайта

  2 урока, 25:03

• 20. Настройка Google Analytics

  1 урок, 09:05

• 21. Интернет-магазин на WP — WooCommerce

  1 урок, 10:38

• 22. REST API

  4 урока, 59:08

Полос Дмитрий, 28 лет, увлекся программирование еще в школе, 2007 год. Первый язык — Python. Писал приложения под популярную на то время мобильную Symbian OS. Участник олимпиад по программированию. В период после школы занимался бизнесом, напрямую не связанным с написанием кода, но с 2014 года снова перешел в IT, занимался программированием и настройкой оборудования для мобильного интернета (роутеры, модемы).

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

Разработка сайта на CMS WordPress

Стоимость:   

3300

1990

Разработка сайта и шаблона в СПб (на CMS платформе WordPress) от ООО «Айти-аутсорсинг», LLC It-outsourcing в Санкт-Петербурге по договору обслуживания юридических лиц

ООО «Айти-аутсорсинг» помогает малому, среднему и крупному бизнесу реализовывать свои идеи в сети интернет, быстро развиваться, а также успешно рекламировать услуги и продавать товары. Создание сайтов, с дальнейшей поддержкой и продвижением в поисковых системах, является основным видом деятельности нашей организации.

Мы готовы помочь воплотить ваши планы в реальные проекты.

Создание сайтов на платформе WordPress

Что такое CMS WP?

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

Давайте разберёмся, что же это за магические буквы также известные как ЦМС ВП:

CMS (см. википедия) от англ. Content Management System (система управления контентом) — это информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом.

WordPress (см. википедия) — это система управления содержимым сайта с открытым исходным кодом, написанная на PHP с сервером базы данных MySQL.

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

Встроенная система ТЕМ и ПЛАГИНОВ вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности. Причём, каждый день множество программистов со всего света разрабатывают новые плагины и совершенствует уже созданные.
Благодаря совокупной работе всего сообщества ВордПресс можно создавать любые сайты, которые ни чем не уступают, а местами даже превосходят свои аналоги, такие как 1C:Битрикс, Drupal, MODx, Amiro CMS, DLE, Tilda, PHPShop, S. Builder и многие другие.

Почему WP? Чем хуже мой конструктор сайта, движок Joomla или интернет магазин на OpenCart?

Ответ прост до банальности: «ВСЕМ ! ! !»

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

Как автоматически перенести мой сайт на WordPress с простого конструктора или устаревшей CMS?

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

Что такое редизайн сайта?

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

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

Создать сайт с нуля просто?

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

JavaScript, css, sql, php и html (см. википедия):

• html — стандартизированный язык разметки документов во Всемирной паутине
• php — скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений
• JavaScript — мультипарадигменный язык программирования
• css — формальный язык описания внешнего вида документа, написанного с использованием языка разметки
• sql — декларативный язык программирования, применяемый для создания, модификации и управления данными в реляционной базе данных, управляемой соответствующей системой управления базами данных

В разработке шаблона также есть свои тонкости:

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

Задачи, которые мы ставим и решаем в процессе разработки сайта:

• помощь в выборе, регистрация и приобретение домена
• делегирование прав на домен
• разработка шаблона и создание сайта
• или обновление CMS платформы и дизайна сайта
• создание логотипа и иконки сайта
• перенос файлов сайта на другой хостинг (рекомендуем нашего партнёра ООО «Бегет» beget.com)
• перенос старого дизайна сайта на поддомен с соответствующей ссылкой на сайте, типа old. ваш_домен.зона (old.adminvspb.ru)
• создание и настройка корпоративной почты на вашем домене, типа название_ящика@ваш_домен.зона ([email protected])
• подключение безопасного защищённого соединения httpS://
• создание системы двойной авторизации для доступа в административную часть сайта с целью обеспечения безопасности и защиты от взлома, путём перебора паролей со стороны злоумышленников
• защита контента от правого клика (лёгкого копирования уникальной информации)
• вёрстка под браузеры стационарных компьютеров и мобильных устройств
• реализация мультиязычности без создания поддоменов (более 100 языков)
• создание форм обратной связи через электронную почту Заказчика
• установка кнопок ПОЗВОНИТЬ с мобильного устройства или приложения (мессенджер WhatsApp, Telegram, Viber и прочих)
• перейти и поделиться страницей сайта в социальных сетях (Одноклассники, ВКонтакте, Twitter и другие)
• дополнительные задачи

В конце месяца вы получаете:
• качественно сделанную работу
• отчёт о проделанной работе
• акт выполненных работ
• консультацию для развития сайта

Шаблон договора «Создание сайта»

Узнать стоимость услуги создание сайта

Каждый новый сайт по-своему уникален, требует работ разного объёма и уровня сложности.
Цена формируется для каждого проекта индивидуально, зависит от количества страниц, сроков сдачи и иных задач Заказчика.
Более подробная информация доступна в разделе ЦЕНЫ.

ЗАКАЗАТЬ УСЛУГУ

Услуги разработки сайтов

Территориально офис нашей организации находится в городе Санкт-Петербург, но мы осуществляем сотрудничество по договору с юридическими лицами в пределах всей Российской Федерации. СПб, Москва или Великий Новгород — это не имеет значения, потому что сайты нужны всем, а технологии интернета позволяют работать независимо от географической локации.

Руководство по теме

| Ресурсы для разработчиков

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

Код

• Сначала используйте функции и функции WordPress, если они доступны (включая функции Jetpack для WordPress. com).
• Нет фреймворков или опций фреймворков.
• Нет внешних, не автоматических (Jetpack, Gravatar и т. д.) API.
Темы
• WordPress.com всегда должны использовать последние функции WordPress.
• Не включайте код, который не будет работать на WP.com. Сюда входит любой код совместимости и использование IS_WPCOM .
• Используйте фильтры для изменения вывода тегов шаблона, если они доступны.
• Использовать обнаружение функций на стороне клиента, а не обнаружение браузера на стороне сервера.
• Темы не должны напрямую обращаться к суперглобальным переменным PHP.
• Нет буферизации вывода.
• Нет настраиваемых полей или мета-боксов сообщений.
• Запрещено удалять или изменять хуки Core.
• Кредиты нижнего колонтитула должны быть расположены в footer.php и соответствовать формату, указанному в Underscores

JavaScript

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

HTML/CSS

• Все темы должны использовать тип документа HTML5 и содержать семантическую разметку.
• Темы должны быть адаптивными и совместимыми с сетчаткой.
• Используйте !important и встроенные стили только в крайнем случае.
• Вы не можете включать код или сценарии для расширения поддержки ниже IE9.

Основные функции и функции

• Весь код и виджеты не должны повторять существующие функции WordPress.com.
• Темы должны поддерживать виджеты.
• Темы должны поддерживать хотя бы одно пользовательское меню.
• Без настройки /wp-admin .

Документация

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

Язык

•  При необходимости укажите контекст.
• Избегайте распространенных антишаблонов.
• Темы должны поддерживать стили с письмом справа налево.
• Переводчики должны иметь возможность деактивировать веб-шрифты, которые не поддерживают набор символов их языка.
• Строки перевода должны быть экранированы для повышения безопасности. Примеры см. в разделе _s (подчеркивание).

Параметры и настройки

• Реализуйте параметры темы только через настройщик.
• Параметры темы должны находиться в одном разделе под названием «Параметры темы».
• Никакие параметры темы не должны позволять пользователям добавлять сценарии или стили.
• Не включайте какие-либо дополнительные параметры для настройки цветов или шрифтов: они обрабатываются на WordPress.com нашими функциями «Пользовательские шрифты» и «Пользовательские цвета».
• Темы должны поддерживать Jetpack Infinite Scroll.

Таблицы стилей и скрипты

• Не подключайте HTML или Javascript к wp_head .
• Без минификации; это невозможно проверить, и WordPress.com имеет свой собственный процесс минификации.
• Основной CSS темы должен быть в стиле style.css .
• Теги темы в style.css должны быть в нижнем регистре без пробелов. Разделяйте теги из нескольких слов тире. Просмотрите список всех допустимых тегов.
• Высота строки должна быть задана относительной, чтобы пользовательские шрифты работали правильно.
• Ставить в очередь шрифты Google, используя этот формат.

Шаблоны

• Темы должны соответствовать иерархии шаблонов.
• front-page.php должен учитывать значение Настройки пользователя → Чтение → Отображает главную страницу .
• $content_width должна быть установлена ​​на ширину содержимого темы по умолчанию.
• Использовать полные циклы во всех шаблонах. Просто звоню the_post() в таком шаблоне, как single. php или page.php недостаточно. Это отличная пояснительная статья.

Запросы

• Темы должны использовать WP_Query .
• Не используйте неограниченные запросы. Параметр posts_per_page WP_Query не может быть установлен на -1 . Кроме того, параметр numberposts функции get_posts() (и подобных функций) должен иметь положительное значение.
• Темы не должны изменять основной запрос.

Виджеты

• Префикс названий виджетов с названием темы, т.е. Название темы: Название виджета .
• Области виджетов не должны содержать жестко запрограммированные виджеты.
• Видимые ссылки на каналы не должны появляться в темах. Мы предлагаем владельцам сайтов использовать виджет Follow Blog Widget на WordPress.com, чтобы позволить своим посетителям подписаться.

Требования к пользовательскому интерфейсу темы

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

Контент

• На сайтах с несколькими авторами должно отображаться имя автора. Примечание. Вы также можете выбрать отображение автора на сайтах с одним автором. Причина : Если у сайта несколько авторов, читателям полезно видеть, кто написал каждое сообщение.
• Темы должны поддерживать как категории, так и теги в той или иной степени. Причина: Пользователи видят их в админке, поэтому они ожидают увидеть их в интерфейсе своего сайта.
• Максимально возможное добавление поддержки параметров содержимого Jetpack. Причина: Пользователи хотят иметь возможность изменять и настраивать то, что отображается для каждой записи/страницы.

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

Макет

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

Меню

• Метки меню должны указывать местоположение и, если тема поддерживает более одного, его положение, например, верхний колонтитул, нижний колонтитул, нижний колонтитул и т. д.  Причина : Без этого пользователи не могут узнать, какое меню относится к какой области.
• Расположение меню должно иметь формат меню-1 , меню-2 и т. д.  Причина : Согласованность между темами означает, что пользователь может переключать темы, и ему не нужно переназначать свое меню для расположения меню темы. Это также упрощает чтение кода.
• Социальное меню должно называться Социальное меню . Причина : Постоянство при переключении тем, что опять же означает, что сайт отображает социальное меню пользователя даже после смены тем.
• Раскрывающиеся меню должны иметь стрелку, указывающую направление открытия меню. Причина : Без стрелки трудно понять, есть ли у элемента подменю.
• Мобильные меню должны иметь значок гамбургера и метку Menu . Причина : пользователи могут постоянно видеть один и тот же индикатор мобильного меню, и им не нужно изучать новый значок или слово каждый раз, когда они переключают тему.

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

Форматы сообщений

• Тема не обязана поддерживать какие-либо форматы сообщений, если это не тема в стиле «Tumblog», и в этом случае тема должна поддерживать все доступные форматы сообщений. Причина : Пользователи ожидают форматов сообщений только от тем типа Tumblog.

Сообщения

• Выдержки должны сопровождаться ссылкой «Продолжить чтение». Причина : Обеспечивает согласованный опыт для пользователей.
• Не используйте фильтр the_content_more_link для настройки текста ссылки Подробнее. Причина : это не позволяет пользователям настраивать тег «Дополнительно».

Прилепленные сообщения

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

Шаблоны

• Все шаблоны должны находиться в папке с названием templates . Причина : Рецензенты могут сразу увидеть, какие шаблоны доступны, что сокращает время проверки и улучшает разборчивость кода.
• Шаблон портфолио должен называться Portugal-page.php .
• Полноразмерный шаблон должен называться полноразмерная страница.php .
• Шаблон сетки должен называться grid-page.php .
• Шаблон Testimonials должен называться testimonials-page. php .
• Шаблон меню еды должен называться food-menus-page.php .
• Шаблон гостевой книги должен называться guestbook-page.php .
• Шаблон Contributors должен называться contributors-page.php .
• Шаблон главной страницы должен называться front-page.php .

Причина : Согласованное наименование шаблонов помогает сократить время настройки после переключения темы, а также сокращает время проверки.

Виджеты

• Сохраняйте имена виджетов, описывающие их местоположение, т.е. Боковая панель, нижний колонтитул и т. д.  Причина : пользователям будет легче найти их и узнать, к какой области они относятся.
• Идентификаторы виджетов должны иметь формат sidebar-1 , sidebar-2 и т. д.  Причина : Согласованность между темами означает, что пользователь может переключать темы, и ему не нужно переназначать свои виджеты в расположение виджетов темы. Это также упрощает чтение кода.

Цветовые аннотации

• Добавьте 6 рекомендуемых цветовых палитр.
• Убедитесь, что у вас есть по крайней мере одна палитра светлого на темном и одна палитра темного на светлом. Причина:  Должны быть доступны как минимум две цветовые палитры.
• По возможности используйте стандартные названия цветов для цветовых палитр, выбирая самый сильный акцент/акценты, и добавляйте комментарии для переводчиков. Причина: Расплывчатые/умные имена палитр часто вызывают путаницу у переводчиков.

Наряду с этим мы также рекомендуем следующие предметы.

• Все рекомендуемые элементы WordPress.org.
• Мы рекомендуем использовать _s (подчеркивание), так как это сокращает время проверки.
• Мы рекомендуем использовать навигационные меню для управления значками социальных сетей.

Разработка WordPress для начинающих: создание тем

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

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

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

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

Примечание. Для этой серии важно, чтобы вы уже хорошо разбирались в HTML и CSS, поскольку оба эти языка являются важными строительными блоками при работе с WordPress.

Начнем.

Пропустили урок из нашей серии «Разработка WordPress для начинающих»? Вы можете ознакомиться со всеми пятью сообщениями здесь:

• Разработка WordPress для начинающих: начало работы
• Разработка WordPress для начинающих: изучение PHP
• Разработка WordPress для начинающих: создание тем
• Разработка WordPress для начинающих: виджеты и меню
• Разработка WordPress для начинающих: создание плагинов

Приступая к работе

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

Если вы готовы двигаться дальше, первое, что вам нужно знать, это где WordPress хранит темы. Темы обычно находятся в каталоге wp-content/themes вашей установки. Если вы перейдете к этой папке в своей локальной среде, у вас уже должно быть несколько тем, темы WordPress по умолчанию. Можно изменить расположение ваших тем с помощью команд в файл wp-config.php , но это делается редко.

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

Создайте новую папку в каталоге «темы» вашей установки и назовите ее уникальным именем, например, my-awesome-theme .

В этой новой папке создайте два файла: style.css и index.php

Откройте таблицу стилей и вставьте следующий код:

Loading gist 55ea8e6f8917ad1ca0468b1e3ba3 70b0

Эти сведения будут автоматически отображаться в разделе сведений о теме на экране Внешний вид > Темы в бэкенде WordPress. Название темы — это единственная строка, которую вы должны указать в комментариях, но рекомендуется заполнять все. Обратите внимание, что текстовый домен должен точно совпадать с именем папки (в данном случае my-awesome-theme) . Это используется для переводов, которые мы не будем рассматривать в этом уроке, но лучше всего следовать соглашению.

Если вы посетите раздел Внешний вид > Темы , вы сможете увидеть свою тему в списке и даже активировать ее. В теме пока нет кода, поэтому вы увидите только белый экран в интерфейсе, но мы очень скоро это изменим!

Наша новая пустая тема

Как работают шаблоны

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

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

Вот некоторый псевдокод, показывающий, как это работает:

Loading gist 08fd98c1a32c0a54d22e2243775812e5

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

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

Loading gist 6fc42313557e4b82499cd79693a919fc

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

Как работают темы

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

• Страницы архива (архивы категорий, архивы дат, архивы тегов, архивы авторов и т. д.)
• Отдельные страницы (отдельные сообщения, отдельные страницы, отдельные настраиваемые типы сообщений)
• Первая страница и индексная страница
• Страница ошибки
• Страница результатов поиска

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

Давайте рассмотрим пример.

Скажем, мы просматриваем страницу архива автора, например, мои сообщения в блоге WPMU DEV. WordPress сначала проверяет, есть ли файл с именем author-danielpataki.php в папке темы. Если есть, то используется этот файл. В противном случае он переходит к файлу, который содержит мой идентификатор автора. Я понятия не имею, какой у меня идентификатор автора, но предположим, что это 882, и в этом случае используемый файл будет author-882.php . Если этот файл не существует, он использует author.php , затем archive.php и, наконец, если ничего не помогает, он использует index.php , который является обязательным файлом, поэтому он будет существовать.

Обратите внимание, что WordPress начинает с более конкретных файлов и переходит к общим файлам. Это полезно, потому что, как и в предыдущем разделе, вы можете создать один файл для обработки всех авторов — author.php. Однако вы можете захотеть сделать профиль одного конкретного автора другим, и в этом случае вы можете использовать author-danielpataki. php , чтобы это произошло.

Создадим тему!

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

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

У вас уже должна быть установлена ​​и активирована тема с пустым файлом index.php и таблицей стилей, так что давайте опираться на это.

Создание фрейма

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

Пока мы говорим об изображениях, если вы создаете тему для каталога тем WordPress, вы должны использовать изображения CC0. Это лицензия на авторское право «делай, что хочешь», и она встречается реже, чем вы думаете. Все изображения на Unsplash удивительно красивые и CC0, что делает сайт фантастическим ресурсом.

Найдя понравившееся изображение, уменьшите его до 880 пикселей в ширину и 660 пикселей в высоту, назовите его screenshot.png и поместите в папку «тема». Если вам нужно быстрое решение, я создал изображение ниже, чтобы вы могли использовать его в качестве примера. Вы можете загрузить изображение здесь.

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

Если вам интересно, цветовое наложение основано на цвете Pantone 2016 года (на самом деле в этом году это два цвета) — они мне очень нравятся! Фоновое изображение создано Тимом Суаном из Unsplash.

Следующий шаг — создание HTML-фрейма нашей темы. Сюда входит код, который загружается на 90 387 всех 90 388 страниц, например элемент заголовка HTML, тип документа и другие.

Начнем с создания файла header. php . В этот файл мы вставим начало нашего HTML-кода, например:

Загрузка gist ae319aa0b88e03c3f6e121789b19b5bd

Мы завершим это созданием файла footer.php , который будет содержать закрывающие теги для наших открытых элементов:

Загрузка gist bfce63c0 7fa1e55461ee1a671fffb1e5

Здесь я должен отметить две важные функции : wp_head() и wp_footer() . Мы обсудим эти функции в учебнике на следующей неделе из этой серии о виджетах и ​​меню, когда будем изучать крючки, но пока вы должны помнить, что всякий раз, когда вы создаете тему, вы должен поместить wp_header() прямо перед закрывающим тегом элемента head и wp_footer() прямо перед закрывающим тегом body. Они действуют как маркеры, которые помогают WordPress и плагинам добавлять функциональность в вашу тему.

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

Давайте изменим это. Добавьте в индексный файл следующее:

Loading gist 4162b047a64a5af9dcd841b5b30600c0

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

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

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

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

На данный момент у нас есть все начальные маленькие кусочки на месте. Например, если вы сейчас наберете что-то вроде body {background:red} в своей таблице стилей, вы получите красивый красный фон на своем сайте.

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

Просто и некрасиво, но пока сойдет!

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

Вот три полных файла кода, составляющих указанный выше веб-сайт:30d05161aa5cc250d82f

Loading gist d3f6dad6e5b2a5da2930eba9364

Кроме того, я добавил фиктивный контент в индексный файл — ничего особенного, просто заголовок и несколько абзацев текста-заполнителя lorem ipsum, завернутого в 9001 6

тегов.

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

Понимание цикла WordPress

Цикл — это сердце почти всех страниц в WordPress. Цикл содержит контент, отображаемый на странице. WordPress знает, что должна содержать каждая страница, извлекая все это из URL-адреса. Например, страница с одним сообщением должна содержать одно сообщение, ваша домашняя страница должна содержать десять самых последних сообщений, страница архива категории должна содержать 10 самых последних сообщений в любой заданной категории и т.  д.

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

Loading gist dd885175f4d031ef73224fa111c3de10

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

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

Все начинается с оператора if , который проверяет значение функции have_posts() . Эта функция вернет true , если есть сообщения для отображения, и false , если сообщений для показа нет. Как видно из части оператора else , если сообщений нет, мы показываем быстрое сообщение.

Если посты есть, создаем цикл while , который будет выполняться до have_posts() возвращает истину. Первая функция, которую мы используем, это the_post() , которая устанавливает для нас некоторые данные поста (пока не беспокойтесь об этом) и продвигает внутренний счетчик. Если мы находимся на последнем сообщении, это означает, что оно будет отображаться, но в следующий раз have_posts() вернет false , и именно так мы в конечном итоге выйдем из цикла.

При отображении поста я просто добавил заголовок и полное содержание. Я использовал the_permalink() для получения URL-адреса сообщения, the_title() для захвата заголовка и the_content() для отображения всего содержимого. Эти типы функций называются тегами шаблона в WordPress, и их можно использовать в цикле, и они будут обнаруживать правильную публикацию, как и ожидалось.

Вот как мой сайт выглядит на данный момент во внешнем интерфейсе:

Листинг сообщений

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

Шаблоны и

if Заявления

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

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

С помощью is_singular() tag мы можем сделать следующее:

Loading gist 102a09638580ed7604f27d48d6ccd4dd

Другой подход заключается в использовании двух отдельных файлов: index.php будет содержать вариант, который показывает отрывок и single. php будет использовать Контент. Идем дальше и создаем single.php и используем the_content() в цикле.

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

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

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

Посмотрим на модифицированный индексный файл:

Загрузка gist 1ba30507f55c884ead14118a22e60ee7

А, так лучше! Прежде всего, я избавился от всех открывающих и закрывающих тегов PHP, которые добавляли много беспорядка. Но что еще более важно, я поместил весь контент поста в разные файлы. Функция get_template_part() просто извлекает содержимое из файла и в основном добавляет второй параметр к первому — добавляя тире — для построения пути.

В случае второго вызова в операторе else функция попытается вызвать template-parts/content-none.php . В первом случае я оставил второй параметр пустым, и это вызовет template-parts/content.php .

В single.php я бы добавил тот же код, но добавил single в качестве второго параметра функции get_template_part() .

Наконец, я бы создал папку template-parts и три файла: content.php , none.php и content-single.php и вставил туда соответствующие фрагменты кода. Например, content.php будет выглядеть так:

Загрузка сути d5716318cd81daf45990ebcea4d7b5b8

Дальнейшее чтение и изучение

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