Подробное руководство по WordPress пользовательских шаблонов страниц

Мне нравится думать о WordPress как шлюза наркотиков веб-разработки.

Многие люди, которые получают начали использовать платформу первоначально лишь ищет удобный (и бесплатно) способ создания простой веб-сайт.Некоторые поиск в Google и консультация WordPress Codex 1 позже, it’ ы сделано и что должно быть.Вроде как “ I’ м только собирается попробовать его один раз .”

Тем не менее, хороший кусок пользователей don’ т останавливаться на достигнутом.Вместо этого, они подсесть.Придумайте новые идеи.Эксперимент.Попробуйте новые плагины.Узнайте Firebug 2 .Бум.Вскоре нет пути назад.Значит ли это звук, как ваш рассказ?В WordPress пользователя это только естественно хотеть больше и больше контроля над вашим веб-сайт.Для жаждут индивидуальный дизайн, пользовательские функции, пользовательские все .

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

Среди наиболее важных инструментов в борьбе за полный контроль веб-сайта шаблоны страниц.Они позволяют пользователям резко изменить свою website’ ы | design__2 и функциональность.Хотите настроить заголовок для вашего главной странице?Готово.Дополнительная боковая панель только для вашей страницы блога?нет проблем.Уникальный ошибка 404?Be.Мои.Гость .

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

Шаблон файлов в WordPress

Что мы говорим, когда мы говорим о шаблонах в контексте WordPress?Короткая версия, что шаблоны файлов, которые рассказывают, как WordPress для отображения различных типов контента .

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

Для последнего, WordPress будет пытаться использовать наиболее подходящий файл шаблона найти в вашей теме.Какой будет принято решение на основе установленного порядка, WordPress шаблон hierarchy 3 .Вы можете увидеть, как это выглядит на скриншоте ниже, или в этом интерактивная version 4 .

The WordPress template hierarchy. 5
Шаблон иерархия WordPress.(Кредит изображения: WordPress Codex 6 ) ( Просмотр большой version __15 | 7 )

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

Вы можете думать о нем, как дерево решений.Когда WordPress пытается решить, как отображать данную страницу, это работает свой путь вниз по шаблону hierarchy до тех пор, пока не найдет первый файл шаблона, который соответствует запрашиваемой страницы.Например, если кто-то пытался получить доступ к адресной HTTP: //yoursite.com/category/news, WordPress будет искать правильный файл шаблона в таком порядке:

  1. Категория- {} пробка .php: в этом случае категория-news.php
  2. Категория- {} ID .php >: если идентификатор категории были 5, WordPress будет пытаться найти файл с именем категория-5.php
  3. Category.php
  4. Archive.php
  5. Index.php

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

Шаблоны и правила их Use

Для страниц, стандартный шаблон, как правило, метко назвал page.php.Если нет более конкретных файл шаблона доступны (например, archive.php для страницы архива), WordPress будет использовать | page.php__27 оказывать содержание всех страниц на вашем сайте .

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

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

Во-первых, однако, слово предостережения: с работы с шаблонами связано редактирования и изменения файлов в активномтема, it’ Всегда хорошая идея, чтобы пойти с ребенком theme делая эти виды настроек.Таким образом, вы don’ т рискуем имея ваши изменения перезаписаны, когда ваш родитель тема обновляется .

Как настроить любой страницы WordPress

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

Использование условных Теги по умолчанию в Templates

Простой способ сделать изменения страницы конкретных является добавление WordPress’ ■ Многие условно tags 8 шаблону уже используется.Как следует из названия, эти теги используются для создания функций, которые выполняются, только если уверены, условие.В контексте шаблонов страниц, это будет что-то вдоль линии __16 “ | выполнять только действия X на Y странице .”

Как правило, вы бы добавить условные теги на theme’ с | __16 page.php файл (если, конечно, вы не хотите, чтобы настроить другую часть вашего сайта).Они позволяют вносить изменения ограниченные на главную страницу, первой странице, странице блога или любой другой страницы вашего сайта .

Вот некоторые часто используемые условные теги:

  1. is_page(): целевой конкретную страницу.Может быть использован с page’ сек ID, название, или URL-адрес / имя .
  2. is_home(): относится к домашней странице .
  3. is_front_page(): цели на первой странице вашего сайта, установить в настройках → Reading
  4. is _category(): состояние на странице категории.Можно использовать идентификатор, название или URL / имя как is_page() тега .
  5. is_single(): для одиночных сообщений или attachments
  6. is_archive(): условия архива pages
  7. is_404(): применяется только к 404 ошибке pages

Например, при добавлении к вашей page.php вместо стандарта get_header(); тег, следующий код загрузит файл пользовательского заголовка имени заголовков shop.php при отображении страницы HTTP: //yoursite.com/products .

if ( is_page('products') ) {
  get_header( 'shop' );
} else {
  get_header();
}

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

Однако условные теги не ограничиваются одной странице.Вы можете сделать несколько заявлений в ряду следующим образом:

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

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

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

Создание страница-Specific файлы в WordPress Hierarchy

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

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

  • Пользовательские страницы template
  • Страница- {} пробка .php
  • Страница- {} ID .php
  • Page.php
  • Index.php

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

После этого, WordPress будет искать шаблон страницы, который включает сердечник страницы в вопросе.Например, если включить файл с именем страница-about.php в ваших файлов темы, WordPress будет использовать этот файл для отображения ‘ | About__73 страницу или в зависимости от того страница может быть найден в HTTP: // WWW.yoursite.com/about .

Кроме того, вы можете добиться того же от таргетинг page’ ы ID.Так что, если эту же страницу имеет идентификатор 5, WordPress будет использовать файл шаблона Страница-5.php | прежде, чем __33 page.php, если он существует;То есть, только если есть isn’ та вышестоящему шаблон страницы доступным .

(Кстати, вы можете узнать идентификатор для каждой страницы при наведении на ее названии под ‘ Все Pages’. В WordPress фоновых ID будет отображаться в ссылке отображается в вашем браузере.)

Назначение специальная страница Templates

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

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

1. Назначение пользовательских шаблонов страниц из WordPress Editor

В редакторе WordPress, вы найдете поле вариант под названием ‘ Страница Attributes’ с выпадающего меню под ‘ Template’ .

Page Attributes in the WordPress editor. 11
Page Attributes в редакторе WordPress.( Просмотр большой version 12 )

Щелкнув по нему даст вам список доступных шаблонов страниц на вашем сайте WordPress.Выберите тот, который вы желаете, сохранить или обновить страницу, и вы сделали .

Available templates under Page Attributes. 13
Доступные шаблоны под атрибуты страницы.( Просмотр большой version __35 | | 14__8 )
2. Установка пользовательского шаблона, через быстрый Edit

То же самое может быть достигнуто без ввода редактора WordPress.Перейти к ‘ Все Pages’ и наведите курсор на любой элемент в списке есть.Меню будет видно, что включает в себя ‘ Быстрый Edit’ пункт .

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

Не так трудно в конце концов, не так ли?Но что, если вы don’ т есть пользовательский шаблон страницы еще?Как создать его так, что ваш сайт выглядит в точности так, как вы хотите его?Don’ волнуйтесь, that’ S, что следующая часть это все о .

Шаг за шагом руководство по созданию пользовательского страницу Templates

Составление индивидуальные файлы шаблонов для страниц это не так сложно, но вот некоторые детали, которые вы должны обратить внимание.Таким образом, let’ пройдемся по процессубит-в-бит .

1. Найти по умолчанию Template

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

(Если вы don’ знаю, как узнать, какой шаблон файл используется на странице, которую нужно изменить, плагин Что File 15 . Пригодится)

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

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>

  <div id="primary" class="site-content">
    <div id="content" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'page' ); ?>
        <?php comments_template( '', true ); ?>
      <?php endwhile; // end of the loop. ?>

    </div><!-- #content -->
  </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

The default page template in the Twenty Twelve theme. 16
Шаблон страницы по умолчанию в теме Двадцать двенадцать.( Просмотр большой version __30 | | 17__9 )

2. Скопируйте и переименуйте Template File

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

Вы можете дать файлу любое имя до тех пор, как он doesn’ т начать с любой из защищены тема filenames 18 .Так don’ Т назвав его страница-something.php или что-нибудь еще, что бы сделать WordPress думаю, что это специальный файл шаблона .

Имеет смысл использовать имя, которое идентифицирует легко, что это файл шаблона используется для, например, мой обычай-template.php.В моем случае я пойду с заказ-полной width.php .

3. Настроить файла шаблона Header

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

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

// Additional code goes here...

Имя, под ‘ Шаблон Name’ то, что будет отображаться в ‘ Page Attributes’ в редакторе WordPress.Убедитесь, чтобы настроить его на свой шаблонназвать .

4. Настройка The Code

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

Это относительно легко, так как все, что нужно сделать, это удалить <?php get_sidebar(); ?> от моего шаблона страницы с that’ S, что звонит врезку.Как следствие, моя пользовательского шаблона заканчивается глядя, как это:

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

get_header(); ?>

<div id="primary" class="site-content">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php get_template_part( 'content', 'page' ); ?>
      <?php comments_template( '', true ); ?>
    <?php endwhile; // end of the loop. ?>

  </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

5. Загрузить страницу Template

После сохранения настроенное мой файл, настало время, чтобы загрузить его на свой веб-сайт.Собственные шаблоны страниц могут быть сохранены в нескольких местах, чтобы быть признан WordPress:

  • Ваше активное (ребенок) theme’ с folder
  • Папка главной головной theme
  • Подпапка в любой из these

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

6. Активируйте Template

В качестве последнего шага, необходимо активировать шаблон страницы.Как упоминалось ранее, это делается под Page Attributes → Шаблоны в редакторе WordPress.Сохранить, просматривать страницы и вуаля!Вот мой настраиваемая страница без боковой панели:

Customized page template without the sidebar. 19
Индивидуальные шаблон страницы без боковой панели.( Просмотр большой version __38 | | 20__30 )

Не так трудно, не так ли?Don’ волнуйтесь, вы быстро получите повесить его.Чтобы дать вам лучшее впечатление, что использовать эти шаблоны страниц для, я покажу дополнительные случаи использования (в том числе код) в течение оставшейся части статьи .

Пять различных способов использования Page Templates

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

1. Полная ширина страницу Template

Первый случай мы будем смотреть на это усовершенствованная версия демо шаблона мы создали выше.Там, мы уже сняли боковую панель, удалив <?php get_sidebar(); ?> из кода.Однако, как вы видели на скриншоте это на самом деле не приводит к полной ширины макета, так как содержаниераздел остается на левой .

Для решения этой проблемы, мы должны иметь дело с CSS, в частности, эта часть:

.site-content {
  float: left;
  width: 65.1042%;
}

width атрибут ограничивает элемент, который держит наш контент на 65,1042% от доступного пространства.Мы хотим увеличить эту .

Если мы просто изменить его на 100%, однако, это будет влиять на все другие страницы на нашем сайте, что далеко от того, что мы хотим.Поэтому, первый заказ здесь, чтобы изменить основной div | __51 S Class в нашем шаблоне в чем-то еще, как class="site-content-fullwidth".Результат:

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

get_header(); ?>

<div id="primary" class="site-content-fullwidth">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php get_template_part( 'content', 'page' ); ?>
      <?php comments_template( '', true ); ?>
    <?php endwhile; // end of the loop. ?>

  </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Теперь мы можем настроить CSS для нашего нового пользовательского класса:

.site-content-fullwidth {
  float: left;
  width: 100%;
}

В результате содержание в настоящее время тянется весь путь по экрану .

The custom page template at full width. 21
Настраиваемый шаблон страницы в полную …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.