Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Themes
Code

Динамические Шаблоны Страниц в WordPress,  Часть 1 

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Russian (Pусский) translation by Lubov (you can also view the original English article)

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

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

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

Наконец, я покажу три реальных примера полностью рабочих динамических шаблонов  страницы. Я объясню некоторые продвинутые темы, например, как привязать шаблон страницы к произвольному типу записи. 

 Хотите  Пойти Вместе? 

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

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

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

The default Twenty Seventeen Theme

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

Шаблоны Страниц WordPress 

Перед тем как делать шаблоны страниц более гибкими, давайте обратим внимание на некоторые базовые детали. 

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

Давайте приведу  наиболее типичные примеры с использованием шаблонов страниц WordPress 

  • .Форма Контактов 
  • Портфолио 
  • Вопросы, которые Часто Задаются 
  • Собственная страница 404 
  • Собственная страница Авторизации 
  • Карта  Сайта 
  • Страница с Шириной Окна 
  • Страница с записями Блога 
  • Страница с Виджетами
  • И многое другое... 

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

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

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

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

Добавляем Шаблоны Страницы, Используя Дочернюю Тему 

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

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

Главная идея дочерней темы в том, что она позволяет настроить вид вашей текущей темы (её называют отцовской) так, что обновление последней не повлияет на вид первой. 

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

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

Давайте Начнем! 

Хорошо, хватит теории, давайте создадим начальный шаблон страницы.Он будет размещен в собственной дочерней теме Twenty Seventeen, которая будет выступать как контейнер для шаблонов, поэтому давайте создадим сначала дочернюю тему.

Откройте папку темы и создайте новую папку для дочерней. Согласно с лучшими практиками WordPress, нам нужно назвать папку для дочерней темы  также как и отцовскую тему с добавлением '-child' в конце. Поскольку папка отцовской темы называется  twentyseventeen, нужно назвать папку для дочерней темы  twentyyteenteen-child. В середине новой папки создайте один файл с названием style.css и добавьте следующий блок комментариев в верхней части страницы.

Теперь нам нужно указать все стили с отцовской темы Twenty Seventeen.Если вы раньше работали с дочерними темами, то вы наверное уже делали это, добавляя директиву CSS @import непосредственно под блоком комментариев. Это больше не является лучшей практикой WordPress из-за проблем со скоростью. Вместо этого мы подключаем стили отцовской темы,что является намного эффективней.  

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

Примечание: закрывать РНР утверждение не обязательно,но вы можете сделать это,если хотите.

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

Сохраните  изменения и активируйте дочернюю тему. Теперь у вас есть полностью функциональная, хотя и очень простая, дочерняя тема  Twenty Seventeen. Чтобы проверить, работает ли она правильно, добавьте строку собственной CSS в style.css.

Если все хорошо, то вы увидите, что весь текст вашего сайта теперь раскрашен в ярко - красный!

Updated styles as per the child theme

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

Добавляем Наш Первый Шаблон Страницы

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

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

Давайте добавим новый шаблон страницы в нашу дочернюю тему. Стандартный путь - сделать копию файла  page.php отцовской темы  и добавить её в нашу дочернюю тему. Вы можете назвать файл как вам угодно, но я бы рекомендовал добавить что-то узнаваемое, чтобы было понятно,что имеем дело с шаблоном страницы. Я начну с  test-page-template.php.

После добавления  page.php до вашей папки page-templates, структура вашей дочерней темы должна выглядеть так:

Adding the first page template

Откройте test-page-template.php и замените блок комментариев следующим:

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

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

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

The Page Attributes

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

Сохраните и пересмотрите фронтенд страницы.

Viewing the page template on the front-end

Примечание: Если вы не видите специального сообщения, убедитесь, что вы выбрали шаблон для страницы в редакторе страницы и сберегли его для обновления настроек.

Давайте  сделаем наш шаблон страницы более полезным. Замените сообщение, которое мы добавили, следующим кодом, чтобы вывести мапу сайта всех опубликованных страниц.

Это приведет к следующему результату.

Viewing the sitemap

Легко увидеть, насколько полезны шаблоны страниц. Но мы можем сделать их еще более лучшими!

Вывод

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

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.