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

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

Если вы понимаете HTML и CSS, что несложно будет перейти к созданию собственной темы для WordPress. В этом посте я расскажу, как создать полностью готовую Worpress-тему от скетча до полной боевой готовности. Мы увидим, как статичный дизайн превращается в полноценный сайт, который мы наполним функциональностью.

Работать мы сегодня будем с дизайном для марки Sticky. Главная фишка сайта — легкий сайдбар, который будет всегда находиться на своём месте , независимо от прокрутки. Также разные украшательства сделаны с помощью CSS3.

Не будем вдаваться в детали создания дизайна, скажу лишь, что здесь использовалось 12 колонок по 24px; мягкие цвета для основного цвета и коричневый и тёмно-красный — для акцентов; в тексте используем шрифт serif; в целом дизайн производит впечатления осязаемого и реалистичного.

Анатомия темы WordPress

Перед тем, как начинать создавать тему, важно знать, как же она устроена. Если посмотреть структуру большинства тем, то можно увидеть, что она состоит из примерно 12 корневых файлов.
Что это за файлы?

• header.php — содержит всё то, что находиться в верхушке сайта.
• index.php — самое ядро темы, к нему крепяться все остальные части.
• sidebar.php — содержит боковую панель (меню)
• footer.php — всё то, что находится в подвале темы.
• archive.php — шаблонный файл, который отображает когда были сделаны записи, авторы и тп.
• single.php — шаблонный файл, который отвечает за загрузку одного поста (когда вы переходите на него по ссылке).
• comments.php — прикрепляется к концу single.php, чтобы дать людям возможность оставлять комментарии
• page.php — подобная single.php, но используется для WordPress страниц.
• search.php — шаблонный файл, используется для отображения результатов поиска..
• 404.php — шаблонный файл , сообщает об ошибке 404
• style.css — все CSS-стили вашей темы
• functions.php — файл используется для изменения функционала WordPress без изменения ядра движка.

Базовый код

Так как наша тема использует в основном HTML и CSS, и немного PHP, очень важно создавать шаблон, как если бы это был старый добрый статичный сайт. Наметаем наш дизайн в виде первоначального шаблона:

Создание WP — темы

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

Создание файла стилей

Каждая тема Worpress снабжена таким файлом, это обычный CSS. Так что в самом верху пропишем кое-что о себе:

/*
Theme Name: Sticky
Theme URI: http://www.blog.spoongraphics.co.uk
Description: Sticky WordPress theme
Version: 1
Author: Chris Spooner
Author URI: http://www.spoongraphics.co.uk
*/

Важно, чтобы все пути  были прописаны правильно.

Загружаем Header

Открываем наш header.php и вставляем в него соответствующую часть кода из HTML. Теперь мы должные поменять код на корректный для WordPress. wp_title(); отображает title страницы,которое следует из bloginfo(‘name’), которая в свою очередь заменяется в админ-панели.

bloginfo(‘stylesheet_url’); подключает страницу стилей. Им заменяют обычный путь к стилю.
Другие файлы, такие как Javascript, подключает тег bloginfo(‘template_url’); он указывает путь до папки с темой.

Если вы хотите наполнить свою тему комментариями, что добавьте соответствующий javascript из ядра WordPress. Перед тем, как закроется тег /head>, вставляем wp_head();, это то место, куда будут добавляться дополнительные плагины.

Строим Index

Здесь начинается самое сочное) Сначала мы вставляем теги get_header(); и get_sidebar(), которые отвечают header.php и sidebar.php.
Wordpress «закручивается» и начинает проверять контент, которые ему доступен. Внутри этого цикла мы видим различные теги, которые содержат информацию о посте, такие как the_title();, и the_permalink();. Они заключаются в теги HTML соответственно их цели. Так, тег the_permalink отвечает за путь к ядру темы и указывается 2 раза — в пути к картинке и в ссылке на сам пост в теге title.

«>

the_post_thumbnail(); — дополнительная опция, этот код может добавить к посту иконку в WordPress 2.9. Ниже расположен контент, который вставляется через тег the_content(»);

В мета — секции можно увидеть такую специфическую информацию, как время написания, количество комментариев и тп.. Это всё подключается шаблонными тегами, такими как the_time(‘F jS, Y’); .Параметры их можно менять, например, отображение даты можно изменять в соответствующем разделе админки WordPress. (полезно будет почитать WordPress Codex).

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

После завершения цикла мы добавляем get_footer(); который подстоединяет footer.php

Заполняем Sidebar

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

Только три вещи в нашем sidebar’e — лого, список страниц и категорий. Лого поместим в тег h1, к которому подключены функции get_option(‘home’); и bloginfo(‘name’); для обозначения URL Блога и присвоения соответствующего имени в нужных местах. Список страниц обеспечивает wp_list_pages(‘title_li=’ );, который вылавливает названия всех страниц, которые были созданы. Список категорий вызвать столь же легко, wp_list_categories();.
Эта функция используется со многими параметрами, такими как show_count=0 ( предотвращает показ количества постов в каждой категории), hide_empty=0 (показывает категорию, даже если в той нет постов), и exclude=1 (исключает категорию с id=1, как правило это категория «Без рубрики «).

Закругляемся на footer’е

Это самая простая часть, вставаляем wp_footer(); перед /body>. В него помещается такая информация, как последние записи, последние комментарии и что-нибудь в этом духе. Всё это можно сделать, используя шаблонные теги WordPress.

Создаём страницу архива

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

Конструируем страницу просмотра одного поста

Для создания страницы поста используется шаблонный файл single.php, которая очень похожа на page.php. Тут всё просто. Комментаррии подсоединяем comments_template();

Конфигурация комментариев

Чем придумывать код — надо взять комментарии с Default theme, и внести свои изменения.

Если создать шаблон для комментариев, то он пригодится очень надолго. Сложно писать CSS для комментариев, вернее, сложно разобраться в исходнике. На помощ придёт Firebug — Плагин для Мозиллы, который помогает разбираться с кодом. Хотя некоторые параметры можно поменять и в самом коде WordPress, например, размер аватара. (параметр avatar_size).

Завершаем страницей 404 и страницей поиска

Страница поиска — копия archive.php, но вручную нужно добавить :
Результаты поиска ,

а в странице 404 может разгуляться ваша фантазия. Только не забудьте добавить get_header();, и get_footer(); где нужно

Вот и всё

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

Я надеюсь, вам помогла эта статья! Если что-то непонятно, не бойтесь спрашивать.

via

Читателям также нравится: