Наш финальный шаблон будет выглядеть так:

Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:

Теперь контент на сайте отображается по всей странице

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

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

Согласно WordPress Template Hierarchy , WordPress отображает шаблоны для страницы в следующем порядке:

• Пользовательский шаблон (Custom Template)
• page-{slug}.php
• page-{id}.php
• page.php
• index.php

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

Этот порядок означает, что на WordPress всегда будет отображаться шаблон для страницы, если он был прикреплен к ней. Если к странице не был добавлен ни один из шаблонов, то WordPress будет искать page-{slug}.php.

Если шаблон page-{slug}.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.

Если шаблон не привязан к странице и нет совпадений с ID страницы, то WordPress ищет по стандартному шаблону страницы page.php. И если страницы шаблона page.php не существует, то для поиска используется index.php.

Многие разработчики называют свои шаблоны тем, используя формат page-name.php. К примеру, шаблон страницы контактов называют page-contact.php. По большому счету вы можете давать шаблонам названия на свое усмотрение и использовать любые конфигурации, будь то page-name.php, name-page.php или name.php. В любом случае, в будущем вы сможете эти названия изменить.

Привет, друзья! Вы решили создать свой сайт, но не знаете с чего начать? А обращаться к профессиональным разработчикам слишком дорого? Не унывайте! Я помогу вам, подробно рассказав, как создать сайт на WordPress бесплатно. У вас есть 2 варианта: сделать все самим по инструкции ниже либо пойти на бесплатный тренинг и сделать все с тренером и командой поддержки.

Если вы выбрали первый вариант, то читаем инструкцию и делаем все по шагам. Если выбрали второй, то приходите на мой бесплатный 4-х дневный курс по созданию сайтов и я открою для вас множество секретов! Чтобы записаться на обучение — переходите по ссылке: и регистрируйтесь. Моя инструкция – пошаговая. Поэтому у вас не возникнет проблем с тем, чтобы воплотить в жизнь свою мечту. Единственное, о чем хотел бы вас предупредить – будьте готовы к тому, что вам придется много работать. Успех просто так никому не дается!

Как создать сайт на WordPress бесплатно и почему именно WordPress?

Я буду рассказывать вам, как создать сайт на WordPress бесплатно. Но, вероятно, у наиболее любопытных обязательно возникнет вопрос – а почему, собственно, WordPress? Ведь есть и другие системы, позволяющие создавать веб-ресурсы. Например, Drupal или Joomla.

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

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

Кстати! Если вы умеете работать в текстовых редакторах, у вас не возникнет проблем с публикацией и оформлением текстов. А вот на таких движках, как Drupal или Joomla есть некоторые сложности даже с этой простой опцией.

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

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

1. Регистрация в хостинге

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

• стоимость хостинга;
• наличие дополнительных опций;
• качество технической поддержки;
• размер пространства, предоставляемого под размещение сайта.

Пошаговая инструкция как зарегистрироваться в хостинге (видео):

Для регистрации в хостинге TimeWeb перейдите по ссылке

2. Подбираем доменное имя

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

Обратите внимание! Если вы ведете личный блог, то можно использовать просто фамилию. Например, доменное имя будет иметь следующий вид petrenko.com. Но это не значит, что если сайт посвященным мобильным телефонам, в качестве имени нужно использовать название телефона – такой вариант заведомо проигрышный.

Для названия сайта можно писать русские слова латиницей. Например – futbol.ru. Хотя, конечно, в идеале рекомендуется использовать правильные английские слова, написанные без ошибок. Это придаст солидности сайту. Регистрация доменного имени проводится на специальных сайтах. Ничего сложного в этом нет – следуйте инструкция сайта и все у вас получится.

Совет! Для регистрации доменного имени рекомендую воспользоваться сервисом timeweb . Он отлично зарекомендовал себя, пользуюсь уже много лет – устраивает и стоимость, и поддержка. Переходите по ссылке и выбирайте вкладку Домены

Пошаговая инструкция как подобрать и зарегистрировать доменное имя (видео):

Но! Важный момент: если вы хотите сторонний домен с какой-то необычной доменной зоной (к примеру.com.ua), то смотрим видео как купить отдельный домен и привязать его к хостингу:

3. Установка сайта на сервер и предварительные настройки

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

Шаг 1

Шаг 2

4. Устанавливаем тему оформления

Найти тему для WordPress не проблема – их полно в Интернете в свободном доступе. Среди них можно найти массу интересного и необычного.

Совет! Но я настоятельно не рекомендую скачивать тему с непонятного сайта. Темы подбирайте на официальном сайте WordPress. Там они все безопасные и корректно работающие.

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

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

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

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

5. Контент и структура сайта

Рассказывая о том, как создать сайт на WordPress бесплатно, нельзя пройти мимо наполнения сайта контентом.

Под контентом подразумевается любая информация, представленная в разных формах:

• статьи;
• фотографии;
• диаграммы;
• видео и т.д.

Работать в административной панели просто. Не нужно ничего бояться – вы не испортите и не сломаете сайт!

Теперь переходим к структуре сайта. Она подразумевает следующие базовые элементы:

• страницы и записи;
• рубрики;
• виджеты.

К страницам относятся те разделы, что являются статическими элементами общей структуры – это:

• Главная;
• О сайте (О нас, О авторе);
• Контакты.

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

О главной

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

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

• Футбол;
• Волейбол;
• Баскетбол;
• и т.п.

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

О виджетах

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

• Прогноз погоды;
• Календарь;
• Свежие записи;
• Форму авторизации;
• и многое др.

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

Что нужно продумать перед тем, как создавать сайт

Рассказывая о том, как создать сайт на WordPress, хочу отметить следующее – перед тем, как делать свой веб-ресурс, определитесь со следующим:

• необходимость наличия комментариев;
• какие функции вы хотите добавить и какие плагины для этих целей необходимы;
• сколько ресурсов (времени, сил, денег) вы готовы вкладывать в сайт;
• как вы планируете (и планируете ли вообще) монетизировать сайт.

Постарайтесь максимально полно описать все пункты. Это поможет вам сделать действительно функциональный и полезный сайт.

6. Плагины для WordPress: какие выбрать

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

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

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

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

WordPress SEO от Yoast

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

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

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

RusToLat

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

Пожалуй, его нужно устанавливать вторым после Akismet.

Anti-XSS attack

Плагин, необходим для повышения уровня безопасности сайта. Он защитит от XSS-атак.

MaxSite Russian Date

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

Russify Comments Number

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

Subscribe to Comments

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

Dagon Design Sitemap Generator

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

Google XML Sitemaps

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

WP-NoRef

Все ссылки, которые будут публиковаться на вашем сайте, автоматически закрываются от индексации поисковыми системами. Они помещаются в специальный тег теги noindex с добавлением атрибута rel со значением nofollow. Благодаря этому вы не будете передавать «вес» своего ресурса сайтам, на которые стоят ссылки. Что благоприятно скажется на продвижении.

Disable WordPress Updates

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

Hyper Cache

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

WordPress Related Posts

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

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

Video Embedder

Если вы собираетесь добавлять на свой сайт видео-ролики, обязательно используйте данное расширение. Оно дает возможность добавлять ролики с наиболее просматриваемых видео-ресурсов.

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

WordPress Audio Player

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

Advertising Manager

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

Использование плагина позволит вам помещать рекламные блоки фактически в любых частях сайта:

• в шаблоне;
• в статьях;
• и т.д.

Он помогает в размещении любых блоков. Даже от сервиса Google Adsense – все будет выполняться быстро и просто.

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

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

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

После установки понравившегося вам плагина вы сможете:

• выбрать кнопки определенных сетей;
• выбрать их размер;
• выбрать их месторасположение на сайте.

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

7. Оптимизация ускорения загрузки страниц

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

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

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

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

8. Финансирование и прибыль

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

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

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

А для этого потребуются определенные знания, умения. Опыт – не обязателен, его вы получите в процессе работы, а вот знания обязательны.

Что нужно знать для создания успешного сайта на WordPress

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

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

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

• текстовыми редакторами;
• графическими редакторами.

Обратите внимание! Для более глубокой проработки сайта потребуются знания кодировки – html, css и php. Хотя на начальном этапе можно обойтись и без них, но в будущем желательно все же изучить код.

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

Кстати! SEO весьма интересное направление. Потратив время и деньги на его изучение, вы узнаете много нового и полезного для вас. А впоследствии сможете даже зарабатывать деньги, продвигая чужие сайты.

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

• Яндекс Вебмастер;
• Google AdWords‎.

Поможет в этом и специальная программа KEYCollector.

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

Как создать сайт на WordPress: подводя итог

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

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

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

Если у вас еще остались вопросы, то пишите их внизу в комментариях.

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

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

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

Создание страниц в WordPress

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

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

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

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

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

• Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

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

Как это работает:

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

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:

Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

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

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

• {любое_название}.php (когда используется шаблон страницы)
• page-{ярлык_записи}.php
• page-{ID_записи}.php
• page.php
• singular.php
• index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

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

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

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

• Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).

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

Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:

• Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
• Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
• Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
• Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
• Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
• Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.

Краткая инструкция

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

Шаг первый: подготовительные работы

Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:

Шаг второй: создают папку новой темы

Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».

Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.

В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.

Шаг третий: наполнение index.php

Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.

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

Шаг четвертый: заполняем и style.css

Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.

/*Theme Name: ***

Theme URI: http:// ***

Author URI: http:// ***

Description: ***

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

(информация в /**/ — это комментарии, а не части кода)

На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:

Шаг пятый: разбиваем файлы

Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.

Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:

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

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

• Header – стиль шапки вашего сайта.
• Comments – шаблон для создания комментариев.
• Home – тема для главной страницы.
• Page — определяет тему, если создадите отдельные странички на сайте
• Category – шаблон для разбивки на категории
• Date – определяет стиль вывода даты-времени.
• Archive – шаблон для архивного раздела со старыми материалами.
• Search – файл, в котором указываются параметры для поиска на сайте.
• 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
• Footer – определяет стиль подвала вашего сайта.

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

Шапка в header.php:

Добавление контента:

Стилизация комментариев:

Подвал на сайте:

Как можно вносить изменения без опасений

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

Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).

Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:

Theme Name: НАЗВАНИЕ ТЕМЫ

Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ

Theme URI: ЗАПОЛНИТЬ

Description: ЗАПОЛНИТЬ

Author URI: ЗАПОЛНИТЬ

/* импортируем стили родительской темы */

@import url(«../НАЗВАНИЕ/style.css»);

/* Свои дополнительные стили */

Foo{ color:red; }

Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:

Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.

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

Итак, приступим.

Распределяем код по файлам

1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .

2. Переименуйте файл styles.css в style.css .

3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */

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

4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .

4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.

4.2. В index.php вставьте код основного блока (со строки по строку ).

4.3. В sidebar.php скопируйте код бокового меню (с по ).

4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).

5. Удалите index.html .

6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.

Адаптируем header

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

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

1. Откройте файл header.php и замените содержащийся в нём код до блока

на следующий:

> "> "> " type="text/css" media="screen" />

Мы сделали динамическим блок

Код вызывает функцию, возвращающую языковые атрибуты в контейнер.

">

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

Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.

2. Перейдите к редактированию файла index.php. В самом его начале пропишите

,

Строчки вызывают файлы шапки, боковой панели и низа сайта.

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

Делаем динамическим верхнее меню

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

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

так, чтобы получилось следующее: