Как сделать шаблон для wordpress с нуля самому

Добавил пользователь Alex
Обновлено: 19.09.2024

Обзор - Структура темы

Структура темы WordPress довольно проста, я бы хотел начать с файла CSS. В нем подробно описывается тема для WordPress. Далее у вас есть index.php - это просто файл шаблона, который вы используете с включенными тегами шаблона PHP. К ним относятся файлы header.php и footer.php , которые используются во всем сайте. В настоящее время большинство тем не используют только четыре файла, и это потому, что WordPress позволяет вам использовать файлы шаблонов для компоновки различного контента. Существуют определенные файлы макета, такие как archives.php и single.php . Однако, вы также можете создать свой собственный, скажем, если вы хотите сделать страницу с совершенно другим макетом по умолчанию.

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

Шаг 1 - style.css

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

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

Я переименовал файл таблицы стилей из шаблона, он называется 1.css . Я также создал новую папку под названием typography-paramount , которая будет загружаться в папку темы WordPress. Поместите таблицу стилей в эту папку, но не в другой каталог, иначе она не будет видна WordPress.

Шаг 2 - Хедер и Футер

На этом этапе мы создадим два файла: header.php и footer.php . Несмотря на то, что они являются необязательными, оба они используются в большинстве тем, и их тоже не сложно использовать.

header.php

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

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

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

footer.php

Создайте файл footer.php и скопируйте все в шаблоне из

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

Я изменил футер, чтобы отобразить значок авторского права, а затем текущий год ( ) и название сайта ( ) затем в новой строке поставить ссылку на RSS ленту ( ).

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

Шаг 3 - Основной файл

Теперь мы создадим index.php

index.php

Это один из двух необходимых файлов для темы WordPress (другой - style.css ), так что давайте начнем. Создайте файл и поместите его вместе с остальными, затем добавьте к нему следующее.

Это просто говорит WordPress, куда включать файлы header.php и footer.php . Поскольку это курс из двух частей, мы собираемся рассмотреть создание боковой панели в следующей статье. Вы можете либо оставить его div в качестве статического html, либо просто оставить его, что я и сделаю. Добавьте между двумя предыдущими тегами следующее.

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

Обзор - Работает ли тема?

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

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

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

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

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

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

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

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

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

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

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

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

4. Переименовываем файл шаблона WordPress и открываем его в каком-либо редакторе кода типа Sublime Text, Notepad++ или любом другом.
5. Первое, что нам нужно сделать, это внести правки в описание, которое находится в самом верху.

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

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

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

Структура шаблона wordpress

Структура нашей темы должна выглядеть таким образом:

Этого набора файлов достаточно для, полноценной работы сайта на cms wordpress.

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

Отображение шаблона в панели администрирования (Шаг 1)

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

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

Кроме созданных style.css и screenshot.jpg , нужно создать еще пустой index.php , и после этого можно будет активировать разрабатываемый шаблон, чтобы в дальнейшем наблюдать все наши изменения непосредственно на самом сайте.

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

Главная страница сайта (Шаг 2)

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

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

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

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

Cделаем элементы шаблона для wordpress (Шаг3)

После того как работа над версткой окончена, и файл index.php полностью укомплектован div’ами и другими тегами, нам потребуется разделить полученный html код на три части, и вынести их в отдельные файлы:

header.php — все содержимое от первой строки до начала вывода контента;
sidebar.php — все содержимое от начала до конца блока sidebar;
footer.php — все содержимое от начала футера до конца файла;

В конечном итоге, у вас останется в index.php , только часть, в которой должен выводиться контент сайта (содержание страниц).

В моем примере index.php принял такой вид:

div class = "wraper-content" >
div class = "wrap" >
div class = "wraper-content" >
div class = "content-wrap" >

div id = "content" >
Контент
/ div >

/ div >
/ div >
/ div >
/ div >

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

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

Выглядят они следующим образом:

get_header();
get_sidebar();
get_footer();

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

В данном коде реализован цикл loop присущий любой странице сайта отвечающей за вывод записей в шаблоне сделанном для wordpress.

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

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

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

Добавляем шаблон для страниц сайта (шаг 4)

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

С существующим рабочим index.php , реализовать задуманное будет проще простого. Все, что от нас требуется это создать определенные wordpress’ом файлы для отображения его элементов.

Сделаем следующие копии файла index.php:

page.php – для вывода страниц wordpress’а;
single.php – для вывода страницы с постом;
archive.php – для вывода архива статей (посты по рубрикам, времени, автору и т.д);

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

page.php – будет обрабатывать вывод статичных страниц, заведенных в WP. Если нам понадобится на всех страницах сайта (Не записях!) вывести например банер, или что-то другое, то редактировать нужно именно этот файл.

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

Чтобы вывести на каждой странице с постом, дату его публикации, теги и рубрику к которой он принадлежит, нужно модифицировать цикл Loop, примерно таким образом:

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

Чтобы заставить его это делать нужно, до цикла, loop включить в него код:

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

home.php – определяет шаблон для главной страницы сайта, если он присутствует в теме, то главная страница выводиться по нему.

Завершающий штрих для шаблона (шаг 5)

Этой частью я планирую завершить повесть о том, как сделать шаблон для wordpress, но помните что, нет предела совершенству. То, что мы получим по итогам этой статьи, лишь минимум, требуемый для работы сайта.
В завершении нам остается создать файл functions.php

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

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

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

Комментарии не сейчас (шаг 6)

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

comments.php – содержит в себе всю необходимую информацию для вывода комментариев и работы с ними. Для любого блога данный файл жизненно необходим, хотя есть множество альтернатив в виде систем для комментирования статей. Одной из таких альтернатив является популярная система DISQUS.

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

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

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Здравствуйте! У меня вот какой вопрос — почему в этом базовом шаблоне, на основе которого будем строить и паги и странички со статьями мы не предусматриваем распорки перед footer, ведь если статья будет маленькая футер поднимется и не будет внизу браузера? Надеюсь на ответ.

Распорки это дело верстки, если вам нужно то или иное решение (футер всегда прижат к низу или контент выше хидера), то никто не мешает вам это сделать в шаблоне.

Да, да! Вы просто читаете мои мысли! Очень нужен контент выше хидера! А я-то думала, что вордпресс не позволяет этого… Похоже надолго застряну на вашем блоге. Спасибо вам, Марк! Щас подпишусь еще — правда что-то творится непонятное с feedburner — как тогда получать инфу

Обалдеть! Я хочу тоже свой шаблон сайта сделать, только я дуб в кодах)) Придется учиться..

У меня не работает файл home.php. У меня главная страница — статическая, используется шаблон page.php. На home.php вообще никакой реакции. можно больше информации по home.php ?

Больше информации по home.php читайте в документации движка.

А где в шаблоне можно подсоеденить еще свой файл css и javascript?

Мм, нужно. Спасибо!

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

2. Все (или, честнее сказать, большинство) технические инструменты уже готовы.

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

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

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

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

7. Отличные комиссионные! Первоначально вы будете зарабатывать 20% от всех продаж, совершенных по вашей партнерской ссылке.

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

8. 25% реферальной комиссии! Вы будете получать 25% от дохода ваших рефералов, которые зарегистрируются в нашей программе благодаря Вам. Выстраивайте многоуровневую систему рефералов и езжайте на Мальдивы – теперь есть кому позаботиться о вашей безбедной старости.
Давайте реально посчитаем

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

Арифметика проста: берем среднюю конвертацию по отрасли 1 к 250 + тематический ресурс с посещаемостью около 1к визитов в день + 20% от среднего чека в $90 + 30 дней в месяце = чуть больше 2000 долларов реально пассивного дохода для вебмастера или владельца сайта.

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

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

1 Создаем новую папку для темы

2 Планируем структуру темы

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

5 Тестируем тему в WordPress

Читайте также: