Что такое базовый шаблон WordPress

Подготовительная статья

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

В окончании статьи смотрите ссылки на предыдущие материалы. И на использованные в статье материалы. В основном это документация codex.wordpress.org. И ссылочки будут на разделы кодекса.

Ну давайте все-таки начнем по порядку.

Где размещается тема WordPress и базовая структура шаблона WordPress

Темы WordPress находятся в поддиректориях wp-content/themes/. Тут все предельно просто, тема под названием "test" будет расположена в директории wp-content/themes/test/.

А в свою очередь директория темы WordPress обязательно должна содержать всего два файла:
style.css — шаблон стилей темы;
index.php — довольно гибкий файл, и в него можно поместить все — шапку сайта, боковую колонку — сайдбар, подвал темы, зону контента, категории, архивы, страницу поиска и все другие модули сайта. Оба эти файла помещаются в папку с темой.

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

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

Наш базовый шаблон WordPress для начала будет состоять сразу из

style.css — стили нашей темы;
index.php — главный шаблон;
functions.php — функционал темы;
header.php — шаблон заголовка темы;
sidebar.php — шаблон боковой колонки;
footer.php — шаблон части страницы — подвала.

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

Итак, давайте начнем создавать наш базовый шаблон WordPress

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

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

Далее в этой папке создайте несколько пустых файлов:

style.css — стили нашей темы;

index.php — главный шаблон;

functions.php — функционал темы;

header.php — шаблон заголовка темы;

sidebar.php — шаблон боковой колонки;

footer.php — шаблон подвала.

Обратите внимание на расширения файлов, прописывайте их правильно.

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

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

Вот исходники к данной публикации

Скачать материалы

В статье использована документация codex.wordpress.org — создание тем WordPress.

— Я специально создал FeedBerner, чтобы вы не пропустили не одной публикации. Вот ссылка на FeedBurner, просто кликните по картинке :

Feed новостей моего сайта почтой

Как скажется беременность на моей фигуре?

17 thoughts on “Что такое базовый шаблон WordPress”

Андрей Зимин 06.09.2015 at 8:01 пп
Я думаю, ваша статья для новичков будет полезной.
1. Егор Автор записи14.09.2015 at 8:21 пп
  Цикл статей по созданию сайта на WordPress c нуля.
Вениамин 28.09.2015 at 2:12 дп
Егор, может вы подскажете, а то на нескольких форумах задавал вопрос — так ничего вразумительного и не дождался.
На сайте никак не получается сделать так, чтобы фото было такого размера, как на скриншоте выделено красным прямоугольником
Инспектирую элемент, пытаюсь найти код CSS, отвечающий за увеличение лайтбокса, (чтобы потом вставить в поле темы вордпресс «кастом СSS»), но безуспешно.
Подскажите пожалуйста, какой код надо вставить в «кастом СSS», чтобы лайтбокс портфолио был на весь экран? Или может быть есть какое-то другое решение, чтобы не рушить сделанное?

P.S. По совету на форуме, поставил плагин лайтбокса, но он не в приоритете, а штатный лайтбокс вшит в тему, так что отключить не получается.
Егор Автор записи28.09.2015 at 8:04 пп
Так сразу и не скажешь. Нужно в коде копаться и смотреть. Стили могут быть прописаны и в скрипте. Штатный плагин лайтбокса, который вшит в тему, отключается — так-же как и вшивался. Но еще раз скажу, все темы выполнены по-разному, поэтому никакой конкретики. А стандартный лайтбокс да, смотрится не очень.

По мне так исходный вариант нормально. Не зра же его так верстали и оформляли стилями. Там много ньюансов, измените стили — может быть некорректное отображение на мобильных, или еще где-то криво вылезет.
1. Вениамин 28.09.2015 at 8:06 пп
  Если на то пошло, то как его (вшитый лайтбокс) отключить?
  1. Егор Автор записи28.09.2015 at 8:08 пп
    Я же написал, что подключают разрабы по разному. Где подключен в коде там и отключать 🙂
Василь 03.10.2015 at 6:55 дп
Вениамин, неужели не уразумели? В личку автору — и за денежку. )) Даже вон и пункт есть — «Мои услуги».
Я не в обиду автору. Кто как может сейчас зарабатывает. Ну, а бесплатный сыр известно где…))
1. Егор Автор записи03.10.2015 at 8:59 дп
  Да нет, не так все.
  Если на то пошло, то как его (вшитый лайтбокс) отключить?
  Это корректный вопрос? Как вы думаете?
  На такой вопрос могу ответить так же корректно: Закомментируйте в коде участок, отвечающий за вывод лайтбокса…
  Пойдет?
  А теперь вам вопрос — а где отключить лайтбокс? Попробуйте ответить….
Василь 03.10.2015 at 9:12 дп
» Элементарно, Ватсон…» Отключить нужно там, где его и подключили.. /*… ))))))))
А если серьезно, то вы правы, Егор.
И громадное спасибо за ваш труд.
И еще. Мне бы каркас вашего шаблона..ммммм, ну или тоже простого, без наворотов. Вот не поверите, неделю ищу уже… либо в кодах шифры типа VBCGHJFJDGJUKFH… либо навороты…. нет чистых шаблонов. Может поможете? )))
1. Егор Автор записи03.10.2015 at 9:44 дп
  У меня стоит шаблон Twenty Thirtee. Я его использовал в качестве Framework (основа, функционал), разметка вся моя и стили, плюс скрипты добавил для расширения функционала.
  А шрифты можно любые подключить элементарно. Смотрите на Google Fonts, или WebFont.
Василь 03.10.2015 at 9:20 дп
Егор, так и не убрал replytocom… плодятся они у вас…

Скопируйте этот код и вставьте вместо того где у вас выводится кнопка «Ответить».

========================================

<?php printf('Ответить’,$comment->comment_ID,$comment->comment_ID,$comment->comment_post_ID); ?>

========================================

Этот код нужно вставить в function.php если вы решили дать дублям 404 ошибку.
Решить что лучше редирект или 404 ошибка — вам выбирать… Изначально рекомендую поставить редирект.

========================================

add_filter(‘template_redirect’,’Redirect404′);
function Redirect404()
{
$p=strpos($_SERVER[‘REQUEST_URI’],’/’.’attachment’.’/’);
if($p!==FALSE) {

@header(«HTTP/1.0 404 Not Found»);
die();
}

if ( isset( $_GET[‘replytocom’] ) ) {

@header(«HTTP/1.0 404 Not Found»);
die();
}

if ( isset( $_GET[‘attachment_id’] ) ) {

@header(«HTTP/1.0 404 Not Found»);
die();
}
}

========================================

Закрыть только replytocom:

========================================

add_filter(‘template_redirect’,’Redirect404′);
function Redirect404()
{
if ( isset( $_GET[‘replytocom’] ) ) {

@header(«HTTP/1.0 404 Not Found»);
die();
}
}

========================================

Чтобы дополнительно дать 404 ошибку какой-то странице, то добавьте в function.php код:

if ( isset( $_GET[‘здесь текст url’] ) ) {

@header(«HTTP/1.0 404 Not Found»);
die();
}
Егор Автор записи03.10.2015 at 9:37 дп
Я не буду ничего ставить. У меня нет ни одного дубля. Надо хоть проверить было
site:filwebs.ru replytocom
Это все делается по другому.
Василь 03.10.2015 at 9:45 дп
Почему-то при наведении на «ответить» в нижнем левом углу браузера появляется надпись…. А впрочем, вам виднее.
Извините за бесцеремонность.
С уважением.
Егор Автор записи03.10.2015 at 10:26 дп
Там стоит обычный редирект в файле .htaccess на эту же страницу. Все, ничего выдумывать не нужно.
Насчет шаблона, я его делал под себя, поэтому там все настройки в коде. Вы не сможете, вероятно, настроить его. Прямо советую вам брать и устанавливать шаблон Twenty Twelve — офигенный шаблон, и настраивать его под свои нужды. Потихоньку, пошагово. Он действительно чистый. А все с наворотами шаблоны сделаны на framework, с массой тормозных функций.

Что? Написать статью пр подключение шрифтов на WordPress? 🙂 Могу пока время есть прямо сейчас. Думаю и другим посетителям может быть полезна статья, да и мне пригодится.
Василь 05.10.2015 at 11:38 пп
Егор, поставил шаблон Twenty Twelve. У меня такое впечатление , что он вообще чистый и + отзывчивый уже..)) …Так это ж сколько работы предстоит! Надеюсь на Ваши статьи и помощь.
Подскажите, мой куцый мозг никак, — подключена ли библиотека jquery?
Егор Автор записи06.10.2015 at 3:46 дп
Здравствуй, давай уже на ты ! Библиотека jQuery уже подключена, она в самом движке присутствует.
Хоть немного есть понимания HTML, CSS ?
Егор Автор записи06.10.2015 at 3:54 дп
Первым делом определись, что тебе нужно. Какой дизайн и какой функционал. 1. Обязательно установи сразу плагин Rus-To-Lat и в настройках выбери отбражение ссылок по названию записи — Название записи, ну это так, лирическое отступление.
А шаблон Twenty Twelve действительно классный. Просто внешний вид немного подводит, но это не беда.
2. Погугли сервисы шрифтов для сайта (именно для сайта Web шрифты смотри) и смотри которые поддерживают русский язык. Выбери несколько вариантов и выбери декоративный шрифт для заголовка (можно и не декоративный) Потом поставим шрифты и посмотришь какой лучше смотрится уже на сайте.