Шаблон 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 за 40 минут самому

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

Как создать уникальный шаблон для wordpress-начинаем

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

Сменить картинки.
Изменить название шаблона.
Сделать мелкие правки в стилях.

Начнём разбор каждого пункта по порядку.

Меняем картинки

Самый простой момент, разберу на примере шаблона twenty eleven. Заменяем стоковые изображения на свои переделанные. Надо менять в шапке, подвале, фон и остальные мелкие.

Но особого решения я вывести не могу, в моём шаблоне минимум картинок (а те что есть громадные). В общем, надо большинство изображений заменить на свои. Давайте разберу два элемента, которые заменяются:

Первый через саму админку.
Второй через код.

Если принцип поймёте, то вам большой респект.

Через саму административную панель

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

Если тема сделана для людей, то глобальные настройки дизайна будут здесь, а с мелочами разберёмся ниже. В разделе покау на примере Twenty eleven.

Общие цвета темы. Настройки основных элементов (заголовков, надписей и тому подобного).
Изображение заголовка, то есть в шапке.
Фоновое изображение. Присутствует не на всех темах, можно настроить как картинкой, так и просто цветом.

На этом этапе вот что у меня получилось. Едем дальше.

Меняем картинки вручную

Предположим картинка какого-то элемента в шаблоне вас не устраивает, и вам хочется её поменять. Что же делать? Будем разбираться. Для примера я возьму вывод картинки количества комментаторов.

Система действует для всех тем.

Нажимаем правой кнопкой мыши на элементе и ищем его вывод в коде, с помощью инструмента “просмотреть код”.

Сам элемент, нажимаем на нём правой кнопкой мыши.
Выбираем пункт “просмотреть код”.
Это сам код вывод HTML, на него внимания не обращаем.
Вот тот заветный адрес, куда надо идти с заменой. Искомый файл bubble.png, находящийся в папке images в самой теме.

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

Сделано, я открыл файлзиллу, и зашёл в активную тему twenty eleven в папку images (которую узнали выше). и простым перетаскиванием нового изображения вставляем в папку, с заменой. Все подробности на скриншоте.

Если все сделано хорошо, то новая картинка отобразиться на сайте, вот снимок.

Как понимаете, то таким методом можно сменить любую картинку, если нет настроек в административной панели.

Изменяем название шаблона

Менять можно только на бесплатных темах, это важно.

Есть два пункта и их надо сделать:

Переделываем название в файле style.css
Меняем название папки с темой.

Переделываем названия в style.css

Для этого заходим в редактор (напоминаю внешний вид-редактор), и находим style.css.

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

Theme Name: moi-shablon
Description: Standard version 1.0
Author: lifanow Walentin
Author URI: https://wpsovet.ru
Tags: light.
License: GPL

Должно получиться так, после замены.

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

Разобрались, переходим к следующему пункту.

Меняем название папки с темой

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

Theme Name: moi-shablon

Надо оригинальное имя twentyeleven изменить на новое, в моём случае, moi-shablon. Идём в FileZilla папку themes, и находим исходное название twentyeleven.

И меняем его на новое.

Если всё было сделано правильно, то заработает. Тема для поисковиков будет уже не стандартная, а уникальная.

Мелкие правки в стилях

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

Правда, не очень? Я хочу сделать покрупнее шрифт заголовков, потому что мелкие и сливаются с фоном. Все шаги смотрим ниже на снимке.

Для исполнения рекомендаций нужны знания в CSS.

Выбираем тот элемент, который хотим править. Нажимаем правой кнопкой мыши.
Нажимаем на “посмотреть код”.
Весь стиль этого заголовка.
Искомое название стиля.

Открываем файл style.css. Ищем название стиля с помощью комбинации клавиш CNTRL+F.

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

color: #1a1a1a;
font-size: 15px;
font-weight: 600;
border-bottom: 2px solid #271eb1;

Разберём строчки кода.

Изменение цвета.
Изменение размера.
Изменение ширины текста.
Добавление линии подчёркивания.

Соответственно меняем либо добавляем параметры в стиль. Должно получиться так.

Все изменения сразу покажутся на сайте.

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

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

Эта статья ответила на вопрос как создать уникальный шаблон для wordpress. И стандартную тему можно будет назвать вашей авторской.

Если будут вопросы, то прошу в комментарии. Успехов.

Читать еще

Как создать тему для WordPress. Часть 1: файлы темы WordPress

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

Запись обновлена 3 сентября 2015 года.

Нам понадобится:

HTML шаблон, из которого мы будем делать тему.
Текстовый редактор, например, Sublime Text 2, Notepad++ или любой другой по вашему желанию (только не стандартный блокнот windows!)
браузер
сайт для тестирования темы
немного знаний HTML, CSS, PHP
терпение 😀

В качестве примера для этого урока, я сделала небольшой шаблон на бутстрапе ~~готовый HTML-шаблон Striped от HTML5Up (демо)~~.

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

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

Шаг 1. Структура темы для WordPress

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

index.php – основной шаблон страницы;
style.css – файл стилей.

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

header.php, для вывода шапки всех страниц;
sidebar.php, для вывода боковой колонки;
footer.php, который выводит подвал сайта;
page.php, шаблон для статических страниц
single.php, шаблон для страниц записей;
archive.php, шаблон архивов и рубрик;
comments.php, шаблон комментариев;
functions.php, функции темы;
и другие…

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

Шаг 2. Структура страницы WordPress темы

Давайте посмотрим, из чего состоит папка с HTML-шаблоном, которую мы скачали. Там есть:

файл index.html, это главный файл верстки, если вы откроете его в браузере, то увидите, как будет выглядеть наша тема;
папка css, там лежат файлы стилей;
также могут быть папка images, с картинками;
и папка js, в которой содержатся скрипты.

Сейчас откройте index.html. Если удалить оттуда все “лишнее”, для простоты понимания, структуры, то получится примерно следующее:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Site Title</h2>

<nav>

</nav>

</header>

<main>

</article>

</main>

<aside>

<div>

</div>

<div>

</div>

<div>

</div>

</aside>

</footer>

</body>

</html>

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

Шаг 3. Создаем файлы темы

Настало время создать файлы для темы. Создадим новую папку, и следующие пустые файлы в ней:

style.css
index.php
header.php
sidebar.php
footer.php

В style.css добавим строки, которые помогут системе узнать, что это за тема:

Theme Name: My Studing Theme

Theme URI: https://oriolo.ru

Author: Irina Sokolovskaja

Author URI: https://oriolo.ru

Description: Описание вашей темы

Version: 1.0

License: CCA 3.0 license

License URI: http://creativecommons.org/licenses/by/3.0/

Tags: white, blue, left-sidebar, right-sidebar

Вместо Author и Author URI можете написать свое имя и сайт, а вместо Theme Name – название темы.

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

После этого нужно разнести содержимое index.html по разным файлам.

Вставьте все до тега <main class=”col-md-9″> не включительно в header.php. Это та часть, которая будет повторяться на каждой странице вверху, до записи или страницы:

<!DOCTYPE html>

<html>

<head>

<title>Simple Blog Home</title>

<!— <link rel=’stylesheet’ href=’//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css’> —>

</head>

<body>

<div>

<div>

<h2>Site Title</h2>

</div>

<nav>

<ul>

</ul>

</nav>

</header>

<div>

Затем основное содержимое вставим в файл index.php:

<!— main and sidebar —>

<main>

<h3>Heading</h3>

<span>Posted on <time datetime=»2015-06-17 10:25″>June 14, 2015 at 10.25</time> by Irina</span>

</header>

</figure>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nesciunt eos odit nostrum nemo eveniet, qui perspiciatis, temporibus esse soluta perferendis consectetur ipsum. Maxime rem officiis, velit doloremque perferendis voluptates. Commodi

eos esse similique veniam quasi, distinctio doloremque reprehenderit in quas culpa. Facilis blanditiis tempore veritatis hic ex ratione, repellendus voluptatum obcaecati?</p>

</article>

<h3>Heading</h3>

<span>Posted on <time datetime=»2015-06-17 11:25″>June 14, 2015 at 11.25</time> by Irina</span>

</header>

</figure>

eos esse similique veniam quasi, distinctio doloremque reprehenderit in quas culpa. Facilis blanditiis tempore veritatis hic ex ratione, repellendus voluptatum obcaecati?</p>

</article>

<nav>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

</main>

Далее сделаем сайдбар sidebar.php:

<aside>

<div>

<span>

</span>

</div>

<!— /input-group —>

</div>

<div>

<h4>Widget</h4>

<ul>

<li><a href=»#»>Category 1</a></li>

<li><a href=»#»>Category 2</a></li>

<li><a href=»#»>Category 3</a></li>

</ul>

</div>

<div>

<h4>Calendar Widget</h4>

<div>

<!— calendar widget —>

<table>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<!— /calendar widget —>

</div>

<div>

<h4>Text Widget</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eaque mollitia, dolore quos cum, tenetur dignissimos omnis officiis saepe veniam, fugiat odit. Nihil et eius cumque nulla excepturi molestias error.</p>

</div>

</aside>

</div>

<!— /main and sidebar —>

И подвал footer.php

<p>© Irina Sokolovskaya</p>

</footer>

</div>

</body>

</html>

Шаг 4. Добавляем базовые функции

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

И в самый конец – функции для вывода сайдбара и подвала:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Если вы взяли другой шаблон, то важно посмотреть, в каком порядке идут в index.html сайдбар и основное содержимое страницы. Возможно, get_sidebar() нужно будет вставить в начале файла, после get_header().

Также нужно внести некоторые изменения в header.php. Давайте пропишем через echo get_template_directory_uri() путь ко всем используемым скриптам и стилям:

<!— <link rel=’stylesheet’ href=’//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css’> —>

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

Итоги части 1

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

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

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

Чтобы не пропустить продолжение, подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке!

Шаблоны страниц и типов записей в 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.

Как установить шаблон на WordPress – три способа

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

Что такое шаблон WordPress

Шаблон WordPress или тема – это дизайн сайта. Он представляет собой набор файлов PHP и CSS, которые определяют внешний вид всех страниц и элементов.

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

Как выбрать шаблон для сайта

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

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

Как установить шаблон на WordPress – три способа

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

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

Как установить шаблон на WordPress через поиск в консоли

Перед тем, как установить шаблон на WordPress таким способом, необходимо авторизоваться в консоли. Затем выбираем пункт «Внешний вид», а потом подпункт «Темы». Жмём кнопку «Добавить новую».

Здесь мы видим форму поиска. Чтобы найти нужный шаблон, необходимо написать там название и нажать клавишу «Enter». После этого вы увидите список найденных тем. Чтобы установить, наводим мышку и нажимаем кнопку «Установить».

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

Установка шаблона через поиск консоли

На странице поиска шаблонов есть ссылка «Фильтр характеристик». Кликнув на неё, мы можем отыскать нужный шаблон по заданным критериям: цвета, разметка, функции, тематика. Также есть возможность увидеть новые шаблоны по ссылке «Свежие» и самые устанавливаемые по ссылке «Популярные».

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

Как установить шаблон на WordPress через FTP

Перед тем, как установить шаблон на WordPress таким методом, необходимо сохранить сам файл темы себе на компьютер. После этого подключиться к FTP (для этого можно использовать программу Total Commander) и сохранить файл темы в папку сайта wp-content/themes/. В этом каталоге хранятся все файлы тем.

Установка шаблона через FTP

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

Как правило, темы поставляются в архиве *.zip. Однако перед тем как установить шаблон на WordPress, его необходимо распаковать в его папку. Все темы сайта хранятся в каталоге wp-content/themes/, каждый в своей отдельной папке.

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

Как установить шаблон на WordPress через загрузчик консоли

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

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

Установка консоли через загрузчки консоли.

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

Перед тем, как установить шаблон на WordPress таким способы, убедитесь, что он запакован в архив *.zip. Обычно темы поставляются именно в таком формате.

Статьи по теме:

Учебный шаблон

— Сделайте документацию WordPress

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

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

создание классных руководств
форматирование и верстка учебника
как написать учебник
как использовать этот шаблон для создания учебника

Наверх ↑

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

локальная установка WordPress или тестовый сайт
плагин Плагин — это часть программного обеспечения, содержащая группу функций, которые могут быть добавлены на веб-сайт WordPress.Они могут расширять функциональность или добавлять новые функции на ваши веб-сайты WordPress. Плагины WordPress написаны на языке программирования PHP и легко интегрируются с WordPress. Они могут быть бесплатными в каталоге плагинов WordPress.org https://wordpress.org/plugins/ или могут быть платными плагинами от сторонних производителей, таких как Theme Check
, чтобы прочитать страницу о постоянных ссылках в Кодексе

Замените эти элементы элементами, относящимися к вашему руководству.

Наверх ↑

Плагин для справочника на WordPress.org Сайт сообщества, где создается код WordPress и передается пользователям. Здесь вы можете загрузить исходный код ядра, плагинов и тем WordPress, а также это центральное место для обсуждения и организации сообщества. https://wordpress.org/ создаст внутристраничный ToC вверху страницы. Это создаст полезный обзор учебника, к которому пользователь может вернуться.

Шаг 1 — Первый шаг # Шаг 1 — Первый шаг

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

Наверх ↑

Шаг 2 — Следующий шаг # Шаг 2 — Следующий шаг

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

Вверх ↑

Шаг 3 — Добавление цвета # Шаг 3 — Добавление цвета

Обильно используйте выноски и изображения.

На WordPress.org мы используем плагин Syntax Highlighter Evolved. Оберните свой код в правильный шорткод [язык] Шорткод — это заполнитель, используемый в сообщении, странице или виджете WordPress для вставки формы или функции, созданной плагином, в определенное место на вашем сайте .. Обычно используемый шорткод языки включают php, html HTML — это аббревиатура от языка гипертекстовой разметки. Это язык разметки, который используется при разработке веб-страниц и веб-сайтов., Css, js, sql, shell и bash (см. Этот справочник для всех доступных языков).

Совет: следуйте используемому здесь языку и стилю. Используйте как можно меньше слов и всегда пишите от второго лица.

Наверх ↑

Шаг 4 — Добавление дополнительных шагов # Шаг 4 — Добавление дополнительных шагов

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

Наверх ↑

Подробнее # Узнать больше

Теперь, когда читатель изучил ваше руководство, он захочет узнать больше. Добавьте список ресурсов для дальнейшего чтения:

Отличный ресурс 1
Еще один замечательный ресурс
Довольно хороший ресурс
Полезный ресурс

Последнее обновление: 14 октября 2018 г.

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

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

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

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

Проверьте Post Custom Templates Lite: Демо-сайт | Документация, страница

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

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

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

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

Пыльник заходим чуть поподробнее…

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

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

Все это делается в красивом и удобном конструкторе шаблонов. Вот как это работает:

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

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

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

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

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

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

Заголовок сообщения
Почтовые СМИ
Мета-предметы
Описание сообщения / Содержание редактора сообщения
Панировочные сухари
Сообщения социальных сетей
Сообщение Пред. / След. Nav
Похожие сообщения
WordPress Комментарии
Facebook Комментарии
Сообщение Информация об авторе
Разделитель
Шорткод объявления
Боковые панели

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

Мета-элементы — перетаскивание мышью

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

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

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

Кнопки «Нравится» и «Поделиться»

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

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

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

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

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

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

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

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

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

Некоторые особенности версии Pro:

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

страниц | WordPress.org

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

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

В дополнение к обычным страницам «О нас» и «Контакты» другие примеры включают «Авторские права», «Раскрытие информации», «Правовая информация», «Разрешения на перепечатку», «Информация о компании» или «Заявление о доступности».

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

Какие страницы

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

Какие страницы не являются

Страницы не являются сообщениями, поэтому они не отображаются в структурированных по времени представлениях в разделе блога на веб-сайте.
Страницы по умолчанию не допускают ассоциации таксономий (категорий, тегов и любых настраиваемых таксономий). Вы можете улучшить его с помощью плагинов.
Организационная структура Pages основана на иерархической взаимосвязи, а не на системе категоризации. (например, теги или категории.)
Страницы не являются файлами.Они хранятся в вашей базе данных, как и сообщения.
Хотя вы можете поместить теги шаблона и PHP-код в файл шаблона страницы, вы не можете поместить их в содержимое страницы или публикации без использования плагина WordPress. Но будьте осторожны: интеграция кода PHP непосредственно в содержимое страницы или публикации может вызвать проблемы с безопасностью или неожиданную ошибку на вашем веб-сайте.
Страницы не включены в «фиды» вашего сайта. (например, RSS или Atom.)
Страницы и сообщения могут по-разному интерпретироваться посетителями сайта и поисковыми системами.Обычно поисковые системы придают большее значение зависящему от времени контенту сайта — сообщениям — потому что новое сообщение по теме может быть более актуальным, чем статическая страница.
Определенная страница (или конкретный пост) может быть установлена как статическая первая страница. Веб-сайты, настроенные таким образом, обычно имеют дополнительную страницу, на которой отображаются последние сообщения в блогах.

Чтобы создать новую страницу, войдите в свою установку WordPress с правами администратора, достаточными для создания новых страниц.Выберите «Страницы»> «Добавить новую», чтобы начать писать новую страницу.

Организация страниц # Организация страниц

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

Например, сайт WordPress для туристического агента может иметь отдельную страницу для каждого континента и страны, в которые агентство может организовать поездки. Под страницей с названием «Африка» будут подстраницы Камеруна, Лесото, Свазиленда и Того.Другая родительская страница «Южная Америка» будет включать подстраницы Аргентины, Бразилии и Чили.

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

Африка
- Камерун
- Лесото
- Свазиленд
- Того
Южная Америка

Для создания дополнительной страницы # Для создания дополнительной страницы

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

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

В приведенном выше примере постоянная ссылка для страницы Камеруна будет:

 http: // example.com / africa / cameroon /

Наверх ↑

Изменение URL-адреса ваших страниц # Изменение URL-адреса ваших страниц

Чтобы изменить часть URL-адреса (также называемую «слагом»), содержащую имя вашей страницы, используйте кнопку «Изменить» под заголовком страницы на экране редактирования конкретной страницы, доступном на вкладке Страницы экрана администрирования WordPress.

Вверх ↑

Создание списка страниц # Создание списка страниц

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

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

Наверх ↑

Отдельные страницы

могут быть настроены на использование определенного пользовательского шаблона страницы (файл шаблона PHP темы WordPress, например my-custom-page.php), который вы создаете в своей теме. См. В разделе Пользовательские шаблоны страниц инструкции по созданию файла пользовательского шаблона для страницы.Этот новый шаблон страницы затем заменит шаблон страницы page.php по умолчанию, включенный в вашу тему.

Наверх ↑

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

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

Примером статической страницы может быть документ HTML (без кода PHP). Проблема с чисто статическими страницами в том, что их сложно поддерживать. Изменения, внесенные вами в настройки, темы и шаблоны WordPress, не будут распространяться на страницы, написанные только в HTML. Функция страницы WordPress была разработана для решения этой проблемы. Используя Pages, вам больше не нужно обновлять статические страницы каждый раз, когда вы меняете стиль своего сайта. Если написано правильно, ваши динамические страницы будут обновляться вместе с остальной частью вашего блога.

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

Show Current Template — плагин для WordPress

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

На основе (и большое спасибо):

https://gist.github.com/gatespace/4482529
https://wordpress.org/plugins/reveal-template/

Показывает текущий файл шаблона.

Хороший путь

В админке WordPress перейдите на страницу добавления новых плагинов
Поиск: Показать текущий шаблон
Показать текущий шаблон должен быть первым результатом.Щелкните ссылку «Установить».

Старый путь

Загрузите плагин в каталог / wp-content / plugins /
Активируйте плагин через меню «Плагины» в WordPress

«Показать текущий шаблон» — это программа с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

0,3,4

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

0,3,3

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

0,3,2

Никаких изменений, кроме номера версии в php-файле плагина.

0,3,1

0,3,0

ОБНОВЛЕНО: Сделать список файлов прокручиваемым.
ОБНОВЛЕНО: Измените css на sass.

0,2,2

0.2.1

ОБНОВЛЕНО: Уменьшить высоту имен включаемых файлов

0.1,8

0,1,6

0,1,5

ИСПРАВЛЕНО: Исправлена ошибка, из-за которой имя родительской темы не отображалось при использовании дочерней темы.

0,1,4

ОБНОВЛЕНО: Не показывать текущий файл в списке включенных файлов.

0,1,3

ИСПРАВЛЕНО: исправлены некоторые уведомления.

0,1,2

ИСПРАВЛЕНО: исправлен потенциальный конфликтный текстовый домен (https://github.com/tekapo/show-current-template/pull/1).
Спасибо @wokamoto san.

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

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

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

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

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

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

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

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

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

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

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

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

header.php

footer.php

Миша

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

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

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

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

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

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

Старт

Как создать уникальный шаблон для wordpress за 40 минут самому

Как создать уникальный шаблон для wordpress-начинаем

Меняем картинки

Через саму административную панель

Меняем картинки вручную

Изменяем название шаблона

Переделываем названия в style.css

Меняем название папки с темой

Мелкие правки в стилях

Как создать тему для WordPress. Часть 1: файлы темы WordPress

Шаг 1. Структура темы для WordPress

Шаг 2. Структура страницы WordPress темы

Шаг 3. Создаем файлы темы

Шаг 4. Добавляем базовые функции

Итоги части 1

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

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

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

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

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

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

Миша

Как установить шаблон на WordPress – три способа

Что такое шаблон WordPress

Как установить шаблон на WordPress через поиск в консоли

Как установить шаблон на WordPress через FTP

Как установить шаблон на WordPress через загрузчик консоли

Статьи по теме:

— Сделайте документацию WordPress

Шаг 1 — Первый шаг # Шаг 1 — Первый шаг

Шаг 2 — Следующий шаг # Шаг 2 — Следующий шаг

Шаг 3 — Добавление цвета # Шаг 3 — Добавление цвета

Шаг 4 — Добавление дополнительных шагов # Шаг 4 — Добавление дополнительных шагов

Подробнее # Узнать больше

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

страниц | WordPress.org

Организация страниц # Организация страниц

Для создания дополнительной страницы # Для создания дополнительной страницы

Изменение URL-адреса ваших страниц # Изменение URL-адреса ваших страниц

Создание списка страниц # Создание списка страниц

Show Current Template — плагин для WordPress

Хороший путь

Старый путь

0,3,4

0,3,3

0,3,2

0,3,1

0,3,0

0,2,2

0.2.1

0.1,8

0,1,6

0,1,5

0,1,4

0,1,3

0,1,2

0,1.1

0,1,0