Создать wordpress шаблон: 3 способа создать шаблон страницы в WordPress — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как создать свой шаблон в WordPress?

Приветствую вас на сайте Impuls-Web!

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

Навигация по статье:

Для чего вам может это понадобится?

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

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

В зависимости от темы WordPress, список этих шаблонов будет у нас меняться.

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

Шаг 1. Скачиваем файл шаблона к себе на компьютер

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

1.Подключаемся к нашему сайту и заходим в папку с активной темой:
wp-content/themes/название_темы
2.Находим файл page.php и скачиваем к себе на компьютер.
Так же в большинстве современных тем помимо шаблона page.php, еще содержаться уже встроенные шаблоны конкретно для этой темы. Они могут находиться как в корне самой темы, так и вынесены в отдельную папку. Обычно эта пака называется

templates, page-templates и так далее.
2.Если вы хотите создавать свой шаблон на базе базового шаблона страницы, то вы скачиваете файл page.php. Если же, к примеру, вам больше подходит один из уже существующих шаблонов темы WordPress, к примеру, full-width-page.php, и вы хотите в нем что-то изменить, то можете брать сразу же тот шаблон, который вам наиболее подходит.

Шаг 2. Вносим необходимые правки

После того, как файлы скачаны, переходим к следующему этапу, это переименование этих файлов и внесение в них определенных правок.

4.Переименовываем файл шаблона WordPress и открываем его в каком-либо редакторе кода типа Sublime Text, Notepad++ или любом другом.
5.Первое, что нам нужно сделать, это внести правки в описание, которое находится в самом верху.
Заменяем описание которое там есть на код:
Template Name: Название шаблона
Здесь название шаблона можно написать как на английском, так и на русском языке.
6.Итак, этими строчками мы добились того, что у нас теперь WordPress в админке, при редактировании страницы, в списке шаблонов будет предлагать еще один шаблон, который мы назвали «Шаблон без сайдбара».
7.Теперь нам необходимо внести нужные нам изменения, к примеру убрать сайдбар. Для этого находим код:
И удаляем его или комментируем.
Если вы не знаете как выполняется комментирование кода в HTML, PHP и CSS, то вот ссылка на статью, (//impuls-web.ru/kak-delat-kommentarii-v-kode/) где описано как это делается.
8.Далее, необходимо расширить область контента. Для этого допишем свой CSS-класс, и в css исправим значение ширины.

9.При помощи инспектирования кода вычисляем класс блока, внутри которого выводится контент всей страницы.
10. Находим блок с этим классом в файле шаблона, который мы создаём, и дописываем ему ещё один уникальный класс, который будет работать только для нашего шаблона.
11.Далее в файле style.css, который так же находится в корне с темой, в самом конце мы можем дописать CSS свойства для нужных нам блоков. Например, изменить значение ширины для блока с контентом:

.no-sidebar #primary { width:100%; }
.no-sidebar #primary {
width:100%;
}
Обратите внимание, что я перед классом или идентификатором блока, для которого мы дописываем свои CSS свойства нужно обязательно указать класс, который мы дописали для блока с контентом. Это нужно для того чтобы дописанные CSS свойства срабатывали не на всех страницах сайта, а только для страниц с созданным нами шаблоном.
12.Сохраняем изменения.

Шаг 3. Выгружаем файл шаблона обратно в папку с темой.

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

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

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

Что делать если часть шаблона находится в других файлах?

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

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

В таких случаях для внесения своих изменений нужно сделать следующее:

1.Находим этот файл у себя на хостинге, в папке с темой и скачиваем себе на компьютер.
2.Далее, нам необходимо его переименовать. К примеру, в content-page2.php.
3.Теперь в этом переименованном файле мы можем внести все необходимые изменения, к примеру, нам нужно удалить или закомментировать фрагмент кода, отвечающий за вывод заголовка.
В темах WordPress вывод заголовка осуществляется при помощи функции
4.Сохраняем изменения и выгружаем изменённый файл, в ту же в папку с темой WordPress.
5.После чего, в файле шаблона, который мы создаем, нам нужно исправить название подгружаемого файла. То есть, заменить название файла с content-page на content-page2, в котором мы только что внесли изменения.
В коде это будет выглядеть так:
6.Сохраняем изменения и выгружаем шаблон к себе на хостинг в папку темой.

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

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

Видеоинструкция

Как видите, процедура создания собственного шаблона WordPress не представляет собой ничего сложного! Самое сложное здесь, по сути, заключается в том, что бы внести нужные правки в коде и не удалить ничего лишнего 🙂

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

До скорых встреч в следующих статьях!

С уважением Юлия Гусарь

Создание темы WordPress с нуля

Также вы можете не читать этот длиннющий урок, а сразу же перейти к моему видеоуроку по созданию темы WordPress 🚀

Конечно, перед тем, как создать тему для WordPress, вы можете попробовать разобраться в уже готовых (именно так делал я). Но дело в том, что в них иногда столько всего понапихано, что это не всегда бывает легко.

Основа любой темы — файлы style.css и index.php

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123. Каждая тема должна содержать по крайней мере 2 файла — это

index.php и style.css — создаём их внутри этой папки.

Если вы забили на style.css, то в админке во Внешний вид > Темы ожидайте такой ошибки:

Если вы забили на index.php:

Отсутствует index.php главный шаблон темы вордпресс

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

/*
Theme Name: Тема для Миши
Version: 105.1
Description: Вполне себе годная темка, получше некоторых
Author: Миша Рудрастых
Author URI: https://misha.blog
*/
body{color:#555;} /* это типо я показываю, что дальше идут уже ваши CSS стили */

Theme Name: Название темы, я прав?
Version: Текущая версия вашей темы
Description: Не знаю, что значит этот параметр
Author: Тут можете указать себя и тех людей, которые вам помогали
Author URI: URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress
License: Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL
License URI: А в этом параметре указывается ссылка на страницу с лицензией
Text Domain: Что-то, связанное с переводом темы на другие языки, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию.
Tags: Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно скипнуть этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Нет, сюда не нужно закидывать всё, что в голову придёт, со списком поддерживаемых тегов можно ознакомиться на официальном сайте.

На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

Установка изображения темы

Согласитесь, на фоне других тем наша выглядит довольно уныло из-за отсутствия изображения! Ещё и квадратики мерцают при скролле 😭

Для того, чтобы это исправить, мы просто создаём файл screenshot.png и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png.

Вот, другое дело:

screenshot.jpg в качестве изображения темы

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

Хоть и не обязательный, но по факту главный файл темы — functions.php

Трудно представить тему для WordPress, в которой отсутствует файл functions.php, он используется для включения каких-либо функций темы, например регистрации сайдбаров, также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Ах да, я не упомянул? В этом уроке я предполагаю, что у вас есть базовые знания PHP, если нет, то идём читать это.

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

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда! 👿

И никогда! 👿

Это самый распространённый косяк.

Теперь напишем что-нибудь в файле index.php

<!DOCTYPE html>
<html><head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
</head>
<body>
	Привет мир!
</body></html>

Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи get_stylesheet_uri() и написал в теле документа «Привет мир!»

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

И ещё кое-что, для того, чтобы помочь WordPress взаимодействовать с вашей темой, вы должны добавить перед закрывающимся тегом </head> функцию wp_head(), а перед закрывающимся тегом </body> функцию wp_footer(), выглядеть это будет примерно так:

<!DOCTYPE html>
<html><head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
	<?php wp_head() ?>
</head>
<body>
	Привет мир!
<?php wp_footer() ?></body>
</html>

Когда я создаю какую-то тему, самая приятная часть для меня — это разделить вёрстку условно на шапку сайта, подвал и всё остальное, после этого код шапки отправляется в файл header.php и в дальнейшем подключается функцией get_header(), код подвала сайта отправляется в файл footer.php и в дальнейшем подключается функцией get_footer(). Приступим.

header.php

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

<!DOCTYPE html>
<html><head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
	<?php wp_head() ?>
</head>
<body>

Чаще всего в header.php также попадает основная навигация сайта, меню.

footer.php

C футером ситуация полностью аналогичная, отправляем то, что повторяется на страницах сайта и заканчиваем закрывающим </html> тегом.

<?php wp_footer() ?></body>
</html>

В итоге наш index.php стал выглядеть вот так:

<?php get_header(); // вставка header.php ?>
Привет мир!
<?php get_footer(); // footer.php ?>

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Создание темы (шаблона) WordPress

Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.

Что такое тема?

Тема WordPress — это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать… В других движка тему еще называют «шаблоном», но в WordPress принято говорить именно тема — theme, а не шаблон — template. Хотя и то и другое по сути одно и тоже…

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

Необходимые файлы

Чтобы создать тему необходимы лишь два файла:

index.php — главный файл темы, отвечает за вывод содержимого
style.css — главный файл стилей, отвечает за css стили

Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:

header.php — отвечает за вывод шапки
footer.php — отвечает за вывод подвала
sidebar.php — отвечает за вывод боковой панели
page.php — отвечает за вывод отдельной страницы (записи)
и т.д. смотрите полный список.

Возможности темы

Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины…

Таким образом, тема может:

Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
Тема может выводить любое содержимое;
Может указать, какой контент будет отображаться для разных пользователей;
Может использовать любые элементы дизайна (картинки, видео).

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

Чем тема отличается от плагина?

С точки зрения кода, можно сказать, ничем — в теме можно создать полноценный плагин. А вот с точки зрения логики — всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы — вывод содержимого, в том числе, этого опроса…

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

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

Поэтому любой функционал связанный с редактированием/добавлением содержимого сайта должен быть оформлен как плагин.

Где скачивать темы?

Каталог тем на сайте WordPress.org. — одно из самых безопасных мест, где можно скачать темы. Там все темы проверяются на соответствие требованиям и рекомендациям.

Есть и другие источники, но там темы обычно платные. Например, темы можно скачать на: Creative Market.

Старт

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

настроить локальную среду разработки.
Затем можно посмотреть примеры WordPress-тем.
Ну и начать разработку своей первой темы.

Этот раздел в процессе разработки… И вообще, я его начал писать и забросил, неинтересное занятие получается. Будет время, желание продолжу…

Создание темы wordpress — программа для создания шаблонов с нуля

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

Почти каждая тема на wordpress устанавливается в директорию wp-content/themes и состоит из 3 категорий файлов:

файлы таблицы стилей;
файлы дополнительного функционала;
файлы шаблона.

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

Следующей категорией являются файлы дополнительного функционала. К таким относится functions.php, принцип работы которого делает его похожим на плагин. Благодаря этому файлу вы можете осуществить визуальную настройку темы прямо в панели администратора. Обычно перечень настроек не очень широкий (название сайта, цвет навигации и боковых панелей сайта и так далее). Если же тема является многофункциональной, то перечень настроек будет значительно шире.

Теперь перейдем к файлам шаблона. Их основной функцией является генерация страниц, которые запрашиваются посетителями сайта. Файлы шаблона имеют расширение “.php”. Наиболее простые темы могут содержать только один файл шаблона под названием index.php. В таком случае все страницы сайта будут идентичны. Такой дизайн чаще всего используется для создания интернет-ресурсов с базами данных, когда дизайн не играет ключевую роль.

Если вы никогда не занимались созданием дизайна, то для начала вам стоит попробовать создать простую тему. Для ее нормальной работы понадобится хотя бы 2 следующих файла: style.css и index.php.

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

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

Для добавления комментариев, как вы уже догадались, используется шаблон comments.php.
Если же вы хотите сделать всплывающее окно с комментариями, то для таких целей вам понадобится comments-popup.php.
Чтобы генерировать главную страницу, используется home.php.
Файл single.php отвечает за отображение статей сайта. Если у вас отсутствует такой файл, то его функцию будет выполнять index.php.
Файл page.php же осуществляет генерацию отдельных страниц сайта.
Для вывода информации об авторе вам понадобится author.php.
За категории отвечает category.php.
Отображение архивов, даты и поиска осуществляется файлами archive.php, date.php и search.php соответственно.
Чтобы ваш сайт выводил уникальную страницы ошибки номер 404, вам понадобится добавить свой 404.php.
Верхняя и нижняя часть сайта генерируется файлами header.php и footer.php соответственно.

Создание уникальной темы вручную с нуля

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

После того как определитесь с выбором, можно начать скачивание архива. По окончанию процесса вам нужно будет его распаковать и загрузить файлы в определенные папки сайта (в архиве обычно содержится небольшая инструкция). Загрузку можно осуществить с помощью программы FileZilla или же прямо с хостинга, если он поддерживает такую опцию. Теперь вам останется лишь перейти в раздел “Темы”, выбрать ту, которую загрузили, и кликнуть по кнопке “Активировать”.

Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише “Установить”, а затем “Активировать”. Перед установкой предлагается осуществить предварительный просмотр.

Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.

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

После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел “Редактор” и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.

Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота — height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.

При желании в шапку можно добавить активные ссылки на страницы сайта wordpress. Это можно сделать с помощью различных сервисов. Их в интернете достаточно много. Большинство из них работает по одному и тому же принципу. Вы обводите желаемую область шапки, которая будет отводится под ссылку, а сервис выдаст вам нужный код. Затем этот код вам нужно будет добавить в файл header.php. Будьте внимательны при его добавлении. Каждая точка имеет значение. Если добавите код не в то место, в шапке не появятся активные ссылки.

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

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

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

<div> <a> <ul> <li>

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

<div> <ul> <li> <a href="ссылка на страницу">название страницы</a> </li> </ul> </div>

Как вы уже поняли, условным названием блока с навигацией является navigacia. Блок состоит из одной ячейки “название страницы”. Обратите внимание на то, что каждый тег закрывается с помощью символа “/”. Если теги не закрывать, то могут возникнуть сбои в работе сайта.

Виджеты же сайта wordpress не должны быть большими. Наиболее популярными являются календарь, облако меток, мета, архивы, поиск, rss, видео и последние новости. Чтобы их добавить, вам понадобится перейти во вкладку “Внешний вид” и кликнуть по полю “Виджеты”. Затем вы увидите перечень доступных вариантов. Также виджеты можно устанавливать с помощью плагинов. Их можно скачивать как с официального сайта, так и прямо через панель администратора вордпресс. Для добавления видео, которое есть в YouTube, вам достаточно будет лишь вставить ссылку на него в желаемое место на сайте. В ином случае видео нужно будет загружать на сайт. Если вы увлекаетесь программированием, то можете добавить на сайт свой собственный виджет. Для этого вам потребуется кликнуть по опции “Текст” и ввести туда необходимый код.

В настройках каждого виджета вам будет предоставлена возможность изменить стандартные заголовки. Также вы можете выбрать место отображение виджета (правая или левая боковая панель) и так далее. С удалением виджета проблем не должно возникнуть. Для этого вам достаточно будет кликнуть в настройках по кнопке “Удалить”.

В футере чаще всего отображается ссылка на автора темы и текущий год. Также в футер можно добавить счетчик посещений. Его можно получить абсолютно бесплатно в Liveinternet и других подобных сервисах.

Создание уникальной темы при помощью специальных программ и сервисов с нуля

1. Наиболее популярной является программа Artisteer. Для работы с ней вам не понадобятся особые знания в области программирования. Процесс создания происходит в визуальном режиме. То, что вы нарисуете, будет представлено с помощью кода, который соответствует международному стандарту “XHTML 1.0 Transitional”. Благодаря этому тема вашего будущего сайта будет поддерживаться всеми браузерами.

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

Перейдем непосредственно к инструкции по работе с данной программой Artisteer. Как только вы откроете программу, первой появится опция под названием “Идеи”. Она предложит вам различные комбинации стандартных элементов. Если вы хотите, чтобы ваш дизайн был уникальным, то
вам эта опция не понадобится. Для того чтобы освоить программу, вам достаточно покликать по опциях и просмотреть параметры. Эта программа легкая, поэтому проблем с этим не должно возникнуть.

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

Для настройки ширины сайта, вам нужно будет использовать опцию “Лист”. Ширина задается в пикселях. Данная программа изначально предложит вам ширину в 900 пикселей. Также с помощью данной опции можно настроить различные эффекты (тень, закругленные края и так далее).

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

Если вы хотите настроить расположение элементов сайта, то вам стоит использовать опцию “Макет”.

Не менее важной опцией является “Статьи”. В ней происходит верстка дизайна статей сайт. Сюда входит расположение картинки, текста, комментариев, различных блоков и так далее.

Чтобы выбрать цвет, размер или шрифт текста, вам понадобится опция “Цвета и шрифты”.

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

Когда ваша тема будет полностью доработана, можно перейти к ее экспорту. Чтобы это сделать, вам потребуется кликнуть по вкладке “Экспорт” и выбрать “Тема WordPress”.

2. Если вы в совершенстве владеете Adobe Photoshop, то вам стоит установить к нему дополнение Divine Elemente. Благодаря нему вы сможете с легкостью конвертировать файл формата “.psd” в тот формат, который будет поддерживаться всеми браузерами.

3. Если у вас нет денег на Artisteer, то можно использовать бесплатный сервис Lubith. Он доступен в онлайн режиме на официальном сайте lubith.com. Сервис содержит много полезных опций и отличается особой быстротой работы. Всего за пару минут вы полностью овладеет всеми его опциями.

4. Аналогом предыдущего сервиса является WordPress Theme Generator. Он также является легким в работе и содержит широкий выбор различных опций. Данный сервис является абсолютно бесплатным. Единственным недостатком является то, что данный сервис поддерживает только английский язык.

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

6. WPTheme Generator намного мощнее, чем предыдущие, потому как содержит в несколько раз больше опций. Единственным нюансом будет то, что данный сервис платный. Цена составляет 30 долларов. Стоит также отметить, что верстка в нем осуществляется полностью на английском языке.

7. CSSEZ является не менее популярным, чем предыдущий. Перед началом работы, вам потребуется пройти небольшую регистрацию. В данном сервисе вы можете сверстать до 4 столбцов для материалов сайта. Фон можно загрузить собственный.

8. Dotemplate предоставить вам около 11 различных шаблонов wordpress, которые можно будет изменить. Единственным недостатком является отсутствие возможности загружать свой графический файл. Поэтому шапку придется загружать самостоятельно через файловый менеджер сайта.

9. Weebly отличается от остальных наличием опции добавления видео прямо с YouTube или Google в любое место сайта. Сайт, на котором есть видео, пользуется успехом, потому как визуально информация быстрей и проще воспринимается.

10. В сервисе Eris’ Template Generator вы сможете добавить до 3 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.

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

На днях я перевёл полезную статью и хочу поделиться ею со всеми. Итак, статью написал товарищ Nick La и далее повествование будет от его лица.

Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.

1. Frontend блога

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

Стандартный Frontpage (index.php)

Стандартный Single (single.php)

{«0»:{«lid»:»1573230077755″,»ls»:»10″,»loff»:»»,»li_type»:»em»,»li_name»:»email»,»li_ph»:»Email»,»li_req»:»y»,»li_nm»:»email»}}

Истории бизнеса и полезные фишки

2. Photoshop-макеты

Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip, чтобы увидеть готовый файл Photoshop.

3. HTML и CSS

Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip. Распаковав архив, вы увидите index.html, single.html и page.html. Далее я буду использовать их для превращения в шаблон.

Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.

4. Как работает тема WordPress

Если вы перейдёте к папке стандартной темы (wp-content/themes/default), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).

Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .

5. Дублирование файлов шаблонов

Скопируйте папку HTML из GlossyBlue в папку wp-content/themes. После этого перейдите в директорию темы default, скопируйте comments.php и searchform.php в папку glossyblue.

6. Style.css

Перейдите в папку темы default, откройте файл style.css. Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue. Если хотите, можете изменить название и данные об авторе.

7. Разделение файлов

Теперь нам нужно понять где разделить HTML-файлы на части: header.php, sidebar.php, и footer.php. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.

8. Header.php

Откройте index.html. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php. Перейдите в папку темы default, откройте новый header.php. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h2 и div class=description.

Меню навигации (wp_list_pages) Замените тэги li в ul id=nav на ;

Ссылка: wp_list_pages

9. Sidebar.php

Вернитесь к index.html, вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar, поместите его в новый php-файл и сохраните как sidebar.php.

Замените form id=searchform со всем содержимым на .
Замените теги li категорий на
Замените теги li архивов на

Ссылка: wp_list_categories и wp_get_archives

10. Footer.php

Вернитесь к index.html. Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php.

Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)

11. Index.php

Теперь в вашем index.html должен остаться только div id=content. Сохраните файл как index.php. Впишите строки: get_header, get_sidebar, и get_footer в том порядке, как они встречаются в шаблоне.

12. Разбор цикла

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

13. Копирование цикла

Перейдите к директории темы default, откройте index.php. Скопируйте цикл из стандартного index.php в свой — между div id=content../div. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.

14. Предпросмотр темы

Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.

15. Single.php

Пришло время создать шаблон single.php. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php, сохранив его как single.php. Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template. На следующем скриншоте отображены внесенные мною изменения:

16. Page.php

Теперь новый single.php сохраните с названием page.php. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов.

17. Удаление файлов HTML

Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.

18. Шаблон страницы WordPress

А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:

Тут я использовал query_post (showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.

Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.

Дополнительная литература:

Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.

Как создать Тему, Шаблон для WordPress (вордпресс)

Здравствуйте, дорогие друзья и читатели – Sozdaiblog.ru!

Сегодня я покажу, как с ноля создать шаблон для WordPress.

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

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

Итак.

Подготовка к созданию шаблона для WordPress.

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

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

С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++. Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.

Создание необходимых папок и файлов.

Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0». Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):

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

Шаг-1 style.css

Файл style.css, будет содержать в себе все элементы стиля шаблона для WordPress. Именно его мы будем использовать первым, чтобы объявить имя шаблона, имя автора, ссылку на сайт с описанием и номером версии:

Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано (как закомментировать строку с HTML, PHP, CSS кодом).

Теперь, в этом файле, нужно создать несколько основных определений стилей, которые в дальнейшем будут реализовываться в некоторых PHP файлах темы WordPress:

В этом коде используется тег — body, только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.

#wrapper — будет отвечать за полный размер веб-страницы. С #header, всё очевидно, это заголовок, а #blog, это последние сообщения на главной странице.

Остальные стили колонтитулов # (заголовков) footer и sidebar, будут применяться к соответствующим их названию файлам, которые мы рассмотрим чуть позже.

Шаг-2 header.php.

Теперь, мы создадим файл — header.php, который будет содержать логотип и обычную навигацию:

На самом деле, подробно этот код объяснять нет смысла. Просто нужно запомнить, что он должен присутствовать в header.php, во всех темах WordPress. Но, если Вам интересно, то расскажу.

В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт style.css и PHP код, позволяющий работать с древовидными комментариями.

Шаг-3 Добавление пользовательской навигации.

Теперь, когда мы закодировали в header.php нашу основную информацию, можно добавить пользовательское меню навигации. Но, прежде, нужно открыть файл functions.php и прописать специальную функцию:

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

Чтобы создать меню, нужно, ниже ранее прописанного кода в файле header.php добавить строчку:

Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu. Переменные sort_column , container_class , и theme_location, применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать style.css Вашего меню. Ну, а theme_location, просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.

Шаг-4 Стиль навигации шаблона для WordPress.

Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле style.css.

Как видите в .nav, мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.

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

В .nav ul ul, мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100%, чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999, который заставляет раскрываться выпадающие ссылки, над другими объектами.

В следующей ссылке, мы опять изменили цвет окна, и сделали 30% отступа от основного меню.

На этом, добавление стилей для пользовательского меню шаблона вордпресс закончено.

Шаг-5 index.php.

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

Следующие строки кода, используются для вывода всей информации в header.php, sidebar.php и footer.php там, где Вы их разместите в WordPress шаблоне:

В принципе, разобраться в этом коде, не так сложно. После вызова header.php, мы используем наш #blog, который был создан изначально в style.css. Затем, добавляем цикл вывода последних сообщений блога и код для заголовка, который оборачиваем в <h4> </ h4>.

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

Шаг-6 Включение миниатюр в постах.

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

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

Шаг-7 sidebar.php.

Думаю, Вы догадались, что файл sidebar.php, будет отображать всю информацию, которую мы хотим видеть на боковой панели. Так как мы уже задействовали его в index.php, то осталось, только поместить код в файл и наша боковая панель, будет выведена на главной странице сайта:

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

С помощью div, мы вызываем стили из файла style.css, а код ниже, даёт нам возможность размещать виджеты из админки WordPress, в желаемой последовательности.

Но, как и многие функции, чтобы заставить работать, нужно в файле functions.php, прописать следующий код:

Этот код, просто говорит WordPress, что нужно зарегистрировать боковую панель, о которой мы заявили в sidebar.php. Для общего ознакомления могу сказать, что WordPress может легко работать в одной теме с несколькими боковыми панелями.

Шаг-8 single.php.

single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php. Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php:

Шаг-9 comments.php

С выходом вордпресс 3.0 разработчики решили облегчить жизнь авторам тем и шаблонов для WordPress. Они перешли на единый стандарт форм комментариев.

Код ниже, нужно положить в Ваш файл comments.php:

Это добавит вашим сообщениям стандартную форму комментариев.

Шаг-10 page.php

В файл page.php, мы поместим код, который будет отвечать за статические страницы нашего сайта. Он будет практически идентичен тому, который был размещён в single.php. Единственное изменение, это отсутствие шаблона комментариев и добавление кода, который обрабатывает страницы, а не должности. Всё остальное будет одинаковым:

Шаг-11 category.php

Файл category.php, служит для вывода сообщений из определённой рубрики или архива, к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php, которые мы закодировали выше, за исключением куска в самом начале:

Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:

Здесь мы используем кучу заявлений if/elseif в PHP, которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «Шаблон для WordPress», то она будет показана в h3 Архив из категории: «Шаблон для WordPress» перед всеми записями, разбивая их по датам или авторам.

Шаг-12 Настройка заднего фона сайта.

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

Итак, пользовательские фоны включены. Бонусом, мы добавим ниже код, который делает доступными ссылки архивов, комментариев и тегов из RSS ленты:

Шаг-13 footer.php

В завершении создания вордпресс шаблона, мы добавим кусок кода в footer.php, использующий #footer, который был объявлен в style.css. Наш подвал будет содержать, только основную информацию об авторском праве, а так же RSS ленту новостей и комментариев:

На этом, создание самого простого шаблона (темы) для WordPress окончено.

Чтобы проверить его работоспособность, Вы можете скачать архив с созданной темой и активировать на своём ресурсе:

А у Вас, получилось создать свой первый шаблон для WordPress?

Друзья, пока я буду писать новый пост, Вы можете почитать следующее:

На сегодня это всё.

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

До новых статей…

С уважением, Денис Черников!

Шаблоны страниц и типов записей в WordPress

Страницы — это один из типов постов WP. По умолчанию все страницы выглядят одинаково, возможно вам и нужно, чтобы они выглядели одинаково (только с разным контентом разумеется), если же нет — читайте этот пост.

Средствами WordPress вы можете сделать страницы вашего сайта уникальными. Например создать страницу с картой, создать HTML-карту сайта, страницу с формой, лендинги и т.д. Всё это можно реализовать при помощи шаблонов страниц.

Установка шаблона для страницы

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

Для того, чтобы это проверить:

Переходим в Страницы > Добавить новую.
В метабоксе «Атрибуты страницы» выбираем один из шаблонов.

Выбираем шаблон страницы из выпадающего списка

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

Опции быстрого (Свойства, Quick Edit) и массового (Bulk Edit) редактирования также имеют возможность задавать шаблоны для страниц.

Задаем шаблон страницы в параметрах быстрого редактирования

Также важно отметить, что один шаблон может использоваться для нескольких страниц одновременно.

Создание собственного шаблона страницы

Для того, чтобы создать любой шаблон страниц, всегда нужно сделать два шага:

В папке с темой создать какой-нибудь файл, так, чтобы его название не перекликалось с условными названиями файлов темы WordPress. Если не уверены, то придумайте такое название, которое кроме вас больше никому не прийдет в голову 🙂 например misha123.php.
Файл шаблона также может располагаться в папке с родительской темой, папке с дочерней темой и, начиная с версии WP 3.4, в директории темы вы можете создать любую подпапку для шаблонов страниц.
В начале вашего файла нужно обязательно указать название шаблона — после этого WordPress его «увидит»:
```
<?php
/*
Template Name: Мой Супер-шаблон
*/
```
Далее в шаблоне вы можете использовать абсолютно любой код, не хотите подключать get_header() и get_footer() сайта? — да пожалуйста, можете вообще просто один <iframe> туда засунуть и будет норм.

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

Иерархия и порядок подключения файлов страниц

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

Этот список показывает приоритет задействования файлов темы для отображения типа записей «Страницы».

custom-template.php (если файл шаблона существует и выставлен для данной страницы в её настройках)
page-{ярлык страницы}.php (если существует)
page-{ID страницы}.php (если существует)
page.php (наиболее распространённое решение практически во всех темах)
index.php (используется, если все вышеперечисленные файлы отсутствуют в папке с темой)

Я уже писал про иерархию в одном из моих предыдущих постов.

Шаблоны страниц для записей произвольного типа

Эта потрясающая функция появилась в версии WordPress 4.7, мне нравится, как плавно и постепенно WordPress расширяет возможности, внедряя только то, что действительно необходимо 😊 🎉

Шаблон для типов постов (записи тоже сюда относятся) создаётся точно так же, как и для страниц, только помимо параметра Template name:, нам ещё на следующей строке нужно указать параметр Template post type:, в котором можно указать название типа поста, или несколько названий через запятую, например я захочу использовать свой шаблон и для записей и для страниц, в этом случае он будет начинаться так:

<?php
/*
 * Template name: Мой Супер-шаблон
 * Template post type: post, page
 */

Если у вас уже был какой-то шаблон для страниц и он уже использовался на сайте, то, после того, как вы добавите туда параметр Template post type: и укажите какой-то другой тип записей там, то уже существующие страницы, использующий этот шаблон не перестанут работать, однако при редактировании там уже будет указан Базовый шаблон.

А для соответствующего типа записи сразу появится такой блок, у меня для записей он появился под рубриками и называется Свойства записи:

Метабокс для выбора шаблона записи в админке

В меню быстрого редактирования он тоже появится.

Видеоурок по шаблонам страниц

Миша

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

WP Шаблоны страниц — плагин WordPress

Легко создавать собственные шаблоны страниц для любой темы.
Хотите использовать тему WordPress, которая не имеет шаблона страницы полной ширины? Добавьте любой шаблон в свою тему с помощью WP Page Templates
Вы можете добавить левую и / или правую боковую панель. Вы даже можете добавить выше или ниже основного контента.

Особенности

Добавить левую боковую панель на страницы
Добавить правую боковую панель на страницы
Добавить левую и правую боковую панель на страницы
Добавить боковую панель под содержанием
Добавить боковую панель над содержимым
И еще…

Go Premium

Если вам нужно больше функций, наша премиум-версия позволяет:

Скрыть верхний и нижний колонтитулы для целевых страниц
Скрыть верхний и нижний колонтитулы для продуктов WooCommerce
Скрыть верхний и нижний колонтитулы для событий или любого типа сообщения
Создание сообщений полной ширины
Создание продуктов WooCommerce на всю ширину

Попробуйте премиум плагин бесплатно на 7 дней

metabox

Автоматическая установка

Автоматическая установка — самый простой вариант, так как WordPress обрабатывает передачу файлов сам, и вам не нужно выходить из веб-браузера.Чтобы выполнить автоматическую установку, войдите в панель управления WordPress, перейдите в меню «Плагины» и нажмите «Добавить новый».

В поле поиска введите WP Page Templates и нажмите Search Plugins. Как только вы нашли наш плагин от VegaCorp, вы можете установить его, просто нажав «Установить сейчас».

Ручная установка

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

Какие типы записей я могу использовать этот плагин?

Бесплатный плагин работает только со страницами. Премиум-версия работает со всеми пользовательскими типами постов, включая woocommerce.

Плагин не работает, как ожидалось?

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

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

будет прятаться по постам, да. Но прятаться на страницах тоже? (что у тебя в основных меню) Нет, это слишком много, чтобы спрашивать. «Платите нам 15 долларов в год». Как насчет того, чтобы я тебе не заплатил и не удалил плагин. Даже уплата, например, единовременного взноса в 8 долларов, который я бы посчитал сэкономить время, — это слишком много, чтобы просить здесь. Убирайся.

Только обещанная версия знает, что обещает.Вводит в заблуждение пользователей.

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

Читать все 3 отзывы

«WP Page Templates» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

участников ,

Как создать шаблон страницы WordPress: учебник для начинающих

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

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

Что такое шаблон страницы WordPress?

Термин «шаблон страницы WordPress» используется неоднократно. Но что такое шаблон страницы WordPress? Это шаблон, который рассказывает о макете страницы. Он определяет все элементы дизайна страницы для отображения динамического содержимого сайта и изменяет внешний вид страницы.Также его можно применить к одной странице, группе страниц или разделу страницы. Существуют различные конструкторы страниц WordPress, но выбрать лучший из предложенных вариантов действительно важно и сложно.

Как создать шаблон страницы WordPress?

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

2 способа создания шаблона страницы WordPress

1. Создайте шаблон страницы WordPress с помощью TemplateToaster

2. Создайте шаблон страницы WordPress, используя метод кодирования

Создание собственного шаблона страницы в WordPress с использованием TemplateToaster

Если вы плохо разбираетесь в кодировании, вы можете использовать TemplateToaster для создания собственного веб-сайта и WordPress Theme Builder, чтобы легко начать работу.Только несколько простых щелчков мыши, чтобы выбрать необходимые элементы дизайна. Вы можете легко создавать отличные шаблоны страниц WordPress с TemplateToaster в кратчайшие сроки. Давайте рассмотрим пошаговую процедуру создания шаблонов страниц WordPress следующим образом:

Выполните следующие шаги для создания шаблона страницы WordPress

Шаг 1: выберите платформу

После загрузки и установки программного обеспечения первый экран, который вы увидите после установки, должен выглядеть так, как показано ниже.Здесь вы выбираете CMS, так как TemplateToaster поддерживает все основные CMS. И WordPress должен быть очевидным выбором, когда мы создаем шаблон страницы WordPress.

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

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

Теперь выберите макет для контейнера из заданных опций, то есть Fluid и Fixed, как показано ниже. Тем не менее, вы можете установить высоту и ширину контейнера в соответствии с вашими требованиями. Контейнер → Жидкость

Шаг 2. Создание заголовка

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

Шаг 3: Дизайн меню

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

Вы можете выбрать изображение из галереи в качестве логотипа своего веб-сайта или использовать собственное изображение. Меню → Логотип → Обзор

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

Шаг 4. Включите слайд-шоу

Если вы хотите, чтобы слайд-шоу отображалось в шаблоне страницы, перейдите на вкладку «Слайд-шоу» и установите флажок «Слайд-шоу». Вы можете выбрать, сколько слайдов вы хотите включить или исключить, нажимая значки плюс (+) или минус (-) соответственно, как показано ниже.

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

Шаг 5. Редактирование контента

Теперь вы создадите область содержимого вашего сайта. Перейдите на вкладку «Содержимое» и выберите, сколько столбцов вы хотите иметь, как вы можете иметь один столбец, два столбца, три столбца и даже четыре столбца для вашего сайта. Содержание → Колонка → 2

Поместите необходимый контент в выбранный столбец контента.Если вы хотите добавить любую кнопку, контактную форму, изображение и т. Д., Дважды щелкните область содержимого. Откроется вкладка «Редактор».

Шаг 6. Настройка макета для шаблона страницы

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

Тем не менее, наличие боковой панели полностью ваше желание. И если вы хотите, чтобы он был на вашем шаблоне страницы WordPress, то все, что вам нужно сделать, это перейти на вкладку Общие и нажать на боковую панель.Здесь вы увидите такие опции, как Без боковой панели, Одной боковой панели и Двойной боковой панели. И вы можете выбрать, сколько боковых панелей вы хотите и где вы хотите, чтобы они были, то есть слева или справа, как показано ниже. Общее → Боковая панель → Левая боковая панель

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

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

Шаг 7: Тема экспорта

Теперь экспортируйте свою тему из меню файлов, как показано ниже. Перейти к файлу → Экспорт

Post Custom Templates Lite — плагин для WordPress

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

Экономьте время и деньги, сделайте это самостоятельно за 1 минуту!

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

Проверьте публикацию пользовательских шаблонов Lite: демонстрационный сайт | Страница документации

Как работает публикация пользовательских шаблонов — рабочий процесс

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

Короткая версия:

Создайте новый собственный шаблон одного сообщения с помощью нашего Template Builder
Изменить шаблон вашей темы

Ниже мы вдаваемся в немного больше деталей…

Создание пользовательских шаблонов отдельных сообщений

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

Все это сделано в хорошем и простом шаблонизаторе. Вот как это работает:

Создайте макет через интерфейс Grid Manager. Все макеты являются адаптивными по умолчанию.
Вставьте атрибуты / элементы поста в макет — заголовок, мета, медиа, описание, комментарии, следующая / предыдущая навигация, значки социальных сетей, связанные посты, информация об авторе, комментарии в Facebook, крошки, реклама, боковые панели и т. Д.
Перестройте атрибуты записи, если вам нужно — перетащите.
Вы можете изменить настройки по умолчанию для некоторых сообщений, если хотите.
Хит Сохранить

Создайте столько шаблонов, сколько захотите. Редактируйте шаблоны и настройки шаблона в любое время.

Изменить шаблон вашей темы

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

Опубликовать атрибуты / элементы, которые вы можете вставить в свои шаблоны

Вот какие элементы вы можете вставить в свои шаблоны:

Заголовок сообщения
Post Media
мета предметов
Пост Описание / Пост редактора контента
Панировочные сухари
Post Social Icons
Сообщение Предыдущая / Следующая Nav
Похожие сообщения
WordPress Комментарии
Facebook Comments
Информация об авторе
Делитель
Шорткод объявления
Боковые панели

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

Meta items — перестановка перетаскивания

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

Избранные изображения

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

Социальные кнопки лайк и доля

Увеличить трафик! Включить лайк лайк и поделиться опциями.Вы можете выбрать из множества кнопок лайка и поделиться или поставить свой заказ один раз.

комментариев Facebook

Увеличить трафик! Включить комментарии Facebook в ваших сообщениях. Настройка проста и не занимает много времени.

Похожие сообщения

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

Перевод / Локализация

Этот плагин поставляется с локализацией / интернационализацией.Это соответствует стандартам WordPress I18n.

Pro версия плагина

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

Некоторые функции Pro версии:

18 готовых шаблонов.
OTW Grid Manager — функция перетаскивания включена также в строки и столбцы; более простой и быстрый способ вставки строк с колонками; настройки строки — полноцветный фоновый цвет, анимация, изображение, рисунок, видео, эффекты параллакса, фоновые фильтры и градиенты; Полная ширина содержимого и полная высота строки тоже.
Изменить шаблон для всех сообщений из категории.
Изменить шаблон для отдельных сообщений.
Отдельные посты дополнений — вкладки, обзоры, подобранные вручную посты, поля OTW.
5 типов медиа — изображения, слайдер, Youtube, Vimeo, Soundcloud.
лайтбоксы для постов медиа.
Дополнительные параметры шаблона — горизонтальная или вертикальная мета, мета-значки или метки, пользовательские значки и метки, разделители вкл / выкл, мета-стилизация и позиционирование.
Авто добавить alt и заголовок тега на изображениях
Дополнительные параметры обрезки мультимедиа
Количество связанных постов за слайд.
Дублирующая опция для шаблона.
Перевод / локализация .po / .mo файлы готовы к использованию.
Поддержка и бесплатные обновления.

Как создать шаблон пользовательской страницы WordPress

Последнее изменение 20 августа 2019 года.

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

Шаблон настраиваемой страницы WordPress

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

Как создать собственный шаблон страницы

Пользовательский шаблон страницы — это обычный файл PHP с одним отличием. У этого есть определенная структура, и это — заголовок и тело контента. Заголовок шаблона определяется только комментарием, а все, что следует за ним, является телом шаблона.На следующем снимке экрана показан файл page.php по умолчанию из темы Twenty_Seventeen, доступной как часть WordPress.

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

Приведенный выше комментарий должен стать началом вашего пользовательского шаблона. Эта строка сообщает WordPress, что это пользовательский шаблон страницы. Создайте простую страницу PHP, вставьте указанную выше строку и сохраните ее.Далее следует строка комментария, а пока давайте «Hello World!» текст в теге абзаца HTML. Затем сохраните его с именем файла «contact-template.php» и загрузите в папку вашей темы.

Как использовать пользовательский шаблон для WordPress Page

Теперь мы создали шаблон пользовательской страницы WordPress и посмотрим, как его использовать. Перейдите в «Добавить новую страницу» и увидите виджет боковой панели « Атрибуты страницы ». Появится раскрывающийся список « Шаблон ». В этом выпадающем списке наш новый шаблон будет отображаться как «Шаблон контакта», и это имя шаблона, которое мы объявили в верхней части файла шаблона страницы.

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

Это всего лишь пример, в режиме реального времени у нас может быть два-три шаблона, и каждый шаблон будет иметь разные макеты. Например,

один шаблон с двухколоночной разметкой и
другой шаблон с тремя колонками макета.

Иерархия шаблонов страниц WordPress

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

Пользовательский шаблон страницы — это самый высокий уровень в иерархии, и это то, что мы видели в этой статье.
page- {slug} .php — Если страница WordPress создается без назначенного пользовательского шаблона, WordPress ищет фрагмент страницы в имени файла шаблона.
page- {id} .php — В иерархии WordPress ищет, есть ли шаблон с идентификатором страницы в имени файла.
page.php — Затем перейдем к нашему обычному page.php, который обычно можно найти во всех темах WordPress.
singular.php — Затем использует шаблон, используемый для публикации одного сообщения.
index.php — Наконец, если вышеупомянутое не найдено в указанном порядке, WordPress выбирает index.php темы для отображения страницы в качестве шаблона.

↑ Вернуться к началу