Страницы чрезвычайно полезны при использовании WordPress в качестве CMS, и когда вы создаете веб-сайт, нередко две страницы имеют совершенно разные макеты. Иногда заявление if сделает свое дело; если нет, вам понадобится собственный шаблон страницы.
Зачем использовать пользовательский шаблон страницы?
Пользовательский шаблон страницы — это файл, расположенный в каталоге вашей темы. С его помощью вы можете изменить макет страницы или показать другое содержимое стандартному шаблону страницы (page.php). У вас может быть неограниченное количество шаблонов страниц, и выбрать шаблон, который вы хотите использовать для конкретной страницы, так же просто, как выбрать существующий шаблон из раскрывающегося списка в редакторе страниц WordPress.
Иногда может оказаться ненужным создать собственный шаблон страницы. Например, допустим, что в вашем файле page.php, который используется для отображения всех страниц вашего веб-сайта, есть вызов функции, отображающий значки социальных сетей, например:
|
1
|
<?php social_networking_icons();
|
Скажем, у вас есть страница «Контакты» на этом сайте, и на этой странице «Контакты» вы не хотите показывать значки социальных сетей. Конечно, вы можете создать собственный шаблон страницы под названием «Страница контактов» и не включать в него функцию вызова значков социальных сетей. Однако более простым методом было бы просто обернуть вызов функции в оператор if, который отображал значки, если страница, на которой вы были, не была страницей «Контакт», например:
|
1
2
3
|
<?php if(!is_page(‘Contact’)) {
social_networking_icons();
} ?>
|
Часто стоит задуматься о том, проще ли достичь желаемой функциональности, используя пару операторов if.
Прекрасный пример популярного использования пользовательского шаблона страницы — это страница «полной ширины». Подавляющее большинство шаблонов WordPress имеют два или три столбца: один столбец «основного контента», в котором хранится контент пост / страницы, и одну или две боковые панели, которые отображают виджеты и призывы к действию. Иногда пользователь захочет воспользоваться преимуществом полной ширины контейнера, в котором находятся эти столбцы, и решит опустить столбцы боковой панели в пользу увеличения размера столбца «основного содержимого». Страницы с мультимедиа, такие как галереи изображений или видео, часто получают выгоду от этого типа настраиваемого шаблона страницы.
Создание пользовательского шаблона страницы может быть простой или сложной операцией, в зависимости от функциональности, которую вы намереваетесь достичь. Наличие хорошо закодированной темы помогает; Элементы HTML часто открываются в одном файле и закрываются в другом, и если код не структурирован или организован неправильно, эффективное использование пользовательских шаблонов страниц может стать изнурительной задачей!
Как создать собственный шаблон страницы
Обратите внимание, что эти изменения повлияют на макет вашей страницы, поэтому внесение этих изменений на действующий веб-сайт может привести к тому, что пользователи увидят ошибки и аномалии. Лучше всего применять эти изменения на частном веб-сайте или после перевода вашего веб-сайта в режим обслуживания. Резервное копирование ваших данных «на всякий случай» также всегда рекомендуется.
Все пользовательские шаблоны страниц должны начинаться со следующего кода. Он сообщает WordPress, что файл является пользовательским шаблоном страницы, и задает имя шаблона.
|
1
|
<?php /* Template name: My Custom Page Template */ ?>
|
Конечно, «Шаблон пользовательской страницы» можно изменить на любое имя, которое вам нравится!
Соглашение об именовании файлов
Кроме того, рекомендуется именовать файлы пользовательских шаблонов страниц с префиксом «page_» («page_contact.php», «page_fullwidth.php»). Он группирует все шаблоны страниц вместе в каталоге вашей темы.
Я думаю, что самый быстрый способ застрять в пользовательских шаблонах страниц — просто скопировать код из стандартного файла page.php в новый файл и сделать новый файл пользовательским шаблоном страницы. Таким образом, вы можете изменить и удалить код и увидеть его влияние на странице. Давайте сделаем это сейчас!
- В редакторе кода создайте новый файл в каталоге темы, которую вы в данный момент используете. Назовите это «page_test.php».
- Вверху файла вставьте следующий код:
1<?php /* Template name: Test */ ?>
- Откройте существующий файл page.php в теме, которую вы используете в данный момент.
- Выделите весь код и скопируйте его в буфер обмена.
- Вставьте скопированный код под код, который вы только что вставили
- Сохраните файл. Загрузите его в каталог тем, где это применимо.
- Войдите в WordPress и отредактируйте страницу, которую вы хотели бы использовать, чтобы попробовать новый шаблон страницы (это всегда можно изменить, и мы не будем изменять содержимое самой страницы, поэтому вы не потеряете данные, сохраненные на страница).
- В разделе «Атрибуты страницы» (обычно находящемся в правой части редактора) выберите «Тест» в раскрывающемся меню «Шаблон».
- Обновите / опубликуйте свою страницу.
Теперь, когда вы просматриваете свою страницу, она должна выглядеть точно так же! Это потому, что мы еще ничего не сделали для настройки нашего пользовательского шаблона страницы! Но приятно видеть, что страница все еще работает. Если вы получили ошибку, убедитесь, что вы правильно скопировали код.
Чтобы подтвердить, что ваша страница использует новый файл «page_test.php» вместо «page.php», удалите любой фрагмент кода из «page_test.php» («the_content ();», как правило, хороший бит для удаления), затем сохраните (и загрузите) это. Обновите страницу на своем сайте, и бит, который вы удалили, должен отсутствовать. Если это мы, отмените внесенные изменения и сохраните (и загрузите) снова. Если нет, проверьте, правильно ли вы скопировали код из этого руководства и файл page.php.
Отсюда вы открыты для мира возможностей! Пока этот код «Имя шаблона:» находится в верхней части файла, вы можете делать все, что захотите! Ваш шаблон страницы не должен использовать синтаксис WordPress, это может быть просто статический HTML-шаблон — все что угодно!
Создание пользовательского шаблона страницы «во всю ширину»
В качестве бонуса я расскажу об общих шагах, связанных с созданием пользовательского шаблона страницы полной ширины. Эти шаги могут быть неточными в зависимости от кода в вашей теме, но вы должны быть в состоянии понять суть этого.
Начните с создания нового файла с именем «page_fullwidth.php». Добавьте приведенный ниже код в самый верх, затем скопируйте и вставьте код из файла «page.php» под ним, как и раньше.
|
1
|
<?php /* Template name: Full Width */ ?>
|
Я собираюсь предположить, что где-то внутри кода в этом файле следующее:
|
1
|
get_sidebar();
|
Если так, удалите это — каждый экземпляр этого при необходимости. Если он содержится внутри каких-либо элементов, таких как div, которые могут повлиять на макет страницы — удалите их тоже. В эти вещи часто вовлечено множество проб и ошибок, если вы сами не создали тему.
Я также собираюсь предположить, что HTML-содержимое страницы начинается с div, который имеет объявление CSS, которое устанавливает ширину, и, возможно, перемещает его влево или вправо. В темах, которые я создаю, обычно у меня есть div с идентификатором «pagecontent». «left», «content» или «post» — это популярные альтернативы, но вам придется изучить! К этому div добавьте класс ‘fullwidth’. Сохраните (и загрузите) файл. Не забудьте также настроить одну из ваших страниц в WordPress для использования шаблона.
Откройте файл style.css в своей теме. Желательно в логическом месте, но это на самом деле не имеет значения (если это не мешает другим объявлениям), добавьте следующий код:
|
1
|
.fullwidth {width: 100%;}
|
Сохраните (и загрузите) ‘style.css’, затем загрузите страницу, которой вы назначили шаблон ‘Полная ширина’. При необходимости вы можете вернуться и настроить объявление CSS, но, надеюсь, столбец, содержащий содержание вашей страницы, будет расширен, чтобы заполнить большее пространство. Если нет, все зависит от того, как написана ваша тема. Если вы используете премиум тему, возможно, стоит проверить документацию или связаться с разработчиком. В противном случае, не стесняйтесь размещать вопросы по устранению неполадок в комментариях ниже, и я сделаю все возможное, чтобы дать вам какие-либо советы.