Как создать новую тему в wordpress. Как создать тему для WordPress самому: уроки с видео. Вот и всё

В интернете есть, конечно, информация на данную тему, но она так скудна.. и совсем не для новичков, которые стремятся к познаниям и в тоже время первый раз видят 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 , чтобы все пути были прописаны правильно.

Загружаем 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 для комментариев, вернее, сложно разобраться в исходнике. На помощ придёт — Плагин для Мозиллы, который помогает разбираться с кодом. Хотя некоторые параметры можно поменять и в самом коде WordPress, например, размер аватара. (параметр avatar_size ).

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

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

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

Вот и всё

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

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

» »

Здравствуйте, друзья! Сегодня я расскажу о принципах и технических моментах создания темы для WordPress с нуля. Эта статья написана для тех, кто имеет какой-то опыт работы с движком WordPress и, хотя бы на базовом уровне, разбирается в HTML и CSS.

Темы разрабатываются под разные задачи: интернет-магазин, фото или видео сайт и т.д., мы же рассмотрим обычную тему блога и алгоритм действий по ее созданию.

Если вы решили создать собственную уникальную тему оформления, то перед созданием темы нужно продумать дизайн и сверстать HTML шаблон сайта или заказать у фрилансеров, решать вам. В общем, у вас должен получиться сверстанный шаблон, например, вот с таким содержимым: файлы index.html и style.css , папка картинок images и папка js со скриптами. Из этого шаблона мы и будем делать тему оформления.

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

Для создания темы оформления необходимо знать функции или как их еще называют — теги WordPress. Мы разберем основные функции темы, со всеми тегами вы можете ознакомиться на официальном сайте codex.wordpress.org .

Структура темы WordPress

В папке themes создаем папку и называем ее, например, mytheme . Затем в нее переносим наш style.css и создаем необходимые файлы.

Создаем шаблоны блоков, которые отображаются на всех страницах:

  • header.php - шапка вашего сайта;
  • sidebar.php - боковая колонка с различными виджитами;
  • footer.php - подвал сайта.

Шаблоны контента:

  • Index.php - шаблон главной страницы, выводятся короткие анонсы статей;
  • single.php - шаблон постов (статей);
  • page.php - шаблон статических страниц;
  • category.php - шаблон категорий;
  • search.php - шаблон выдачи результатов поиска;
  • 404.php - шаблон сообщения о несуществующей странице;
  • comments.php - шаблон коментариев.

Дополнительные файлы:

  • functions.php - файл дополнительного функционала и изменения стандартного функционала движка WordPress;
  • searchform.php - код формы поиска;
  • screenshot.png - Изображение 880 х 660, превью отображается в админке во вкладке «темы».

Не обязательные шаблоны (по моему мнению):

  • author.php - шаблон страницы автора;
  • archive.php - шаблон архивов;
  • date.php - шаблон вывода дат;
  • tag.php - шаблон меток;
  • attachment.php - шаблон страниц вложения.

Лично я редко использую пять последних шаблонов, в основном делаю перенаправление на «главную» или на «404 ошибку» при запросе данных шаблонов. Информацию об авторе можно оформить на основе page.php , а остальные четыре только плодят дублированный контент на вашем сайте, организацию архивов можно реализовать намного продуктивнее.

Начинаем с файла style.css , делаем отступ и в самом верху вставляем закомментированный текст с названием и описанием темы.

/* Theme Name: Название темы Theme URI: УРЛ адрес, если есть отдельный сайт о теме Description: Описание темы оформления Version: Версия, например (1.0) Author: Ваше имя Author URI: УРЛ адрес автора темы */

Файл стилей придется редактировать при подключении функционала WordPress, который добавляет дополнительные участки кода.

Формируем header.php

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

Код был таким.

Мой блог

После переноса и редактирования стал таким.

" /> <?php echo wp_get_document_title(); ?> " rel="stylesheet" type="text/css" />