Создать тему шаблона для WordPress — часть 1

Опубликовано: 19 Июль 2010Автор ratemir

Логотип WordPressWordPress стала наиболее широко используемой блог-платформой в мире. По оценкам на сегодня, данную CMS (Content Managment System) использует около четверть миллиарда сайтов. WordPress предназначен для блогов, но вполне может использоваться для создания обычных сайтов. Простая система управления контентом, готовые к использованию дружественные для поисковых систем URL-адреса и в полной мере используется HTML и CSS.

Существует так много сайтов созданных с помощью WordPress, но тем(шаблонов) создано, на данный момент, всего лишь около 1200. Поэтому множество сайтов выглядит примерно одинаково. Вы и ваши клиенты хотят выделиться, или в конечном итоге прослыть как «Еще один блог WordPress».

В этой статье я покажу вам, как существующий HTML и CSS шаблон сайта превратить в тему для WordPress. Конечно, поставленная задача большая по объему, и я разделил её на 2 части. Первая часть даст Вам навыки создания собственной темы WordPress, а во второй части я приведу пример некоторых функций WordPress.

Предполагается, что вы уже знаете, HTML и CSS, и у Вас есть сайт, дизайн, которого Вы хотите, адаптировать к WordPress. Знание PHP не обязательно, работа каждой функции будет объяснено по ходу её использования.

Основы шаблона WordPress

Темы WordPress находятся внутри папки /wp-content/themes/ в директории куда Вы устанавливали WordPress. Папка темы включает в себя несколько основных компонентов:

Основной CSS файл(style.css). Это обычный CSS файл, за исключением нескольких деталей в верхней части, которые будут рассмотрены далее. Можно, конечно, создать еще CSS файлы, если нужно(стили печати, например).

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

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

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

footer.php : обычно называют подвалом сайта, и обычно располагают в нижней части веб-страницы. Файл, обычно, включает в себя копирайты и дату создания сайта.

comments.php : отвечает за форму и ввывод комментариев на странице сайта. Если Вы удалите этот файл из Вашей темы, то будет использоваться comments.php файл из темы по умолчанию(тема в папке /wp-content/themes/ так и называется default).

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

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

С чего начать создание шаблона для WordPress

В идеале, прежде чем начать, вы должны установить и запустить сам WordPress. Скачать бесплатно данный движок можно на официальном сайте WordPress.org . Когда вы создаете тему, проще всего работать с файлами локально, хотя можно работать и на веб-сервере через FTP. Чтобы работать локально Вам необходимо установить на своем компьютере локальный сервер Denwer.

Во-первых, Вам нужно создать папку для темы. Создайте её внутри директории /wp-content/themes/ и назовите как-нибудь, например test-site. Внутри созданной папки, начинаем с файла таблиц стилей CSS, которая также включает в себя некоторые сведения о теме. Эти сведения будут использоваться в панели администрирования.

Итак, создайте CSS файл style.css , и добавте следующий текст в начало файла:

/*
Theme Name: уникальное название темы(например: test-site)
Theme URI: адресс темы сайта(например: test-site.ru)
Description: описание сайта(например: Тестовый сайт)
Author: Ваше имя(например: Ivan Ivanov)
Author URI: Адресс Вашего сайта(например: Ivanov.ru)
[Любые другие комментарии]
*/

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

Вы также можете добавить номер версии шаблона
Version: номер версии.
Далее, если у Вас есть HTML/CSS сайт, Вам должно быть достаточно просто скопировать и вставить всю Вашу информацию о стиле CSS в созданный файл style.css.

index.php

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

Начнем с того, что заменим некоторую жестко закодированную информацию на динамическую, которая будет сгенерирована «на лету» в WordPress.

WordPress имеет встроенную функцию «bloginfo» для получения всей информации о шаблоне. Мы будем использовать эту функцию для извлечения URL стилей и расположения RSS канала. bloginfo чрезвычайно прост в использовании:

<?php bloginfo ('stylesheet_url'); ?>

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

<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />

Посмотрев в браузере исходный код страницы Вашего сайта Вы заметите, что содержимое между <?php и ?> показывают адресс файла стилей style.css, созданного Вами. Теперь исходный код Вашего сайта будет содержать строку, ну или что-то типа того:

<link rel="stylesheet" href="http://example/blog/wp-content/themes/style.css" type="text/css" />

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

Папки images и js

Скорее всего, ваш CSS файл будет содержать ссылки на большое количество изображений, которые в свою очередь будут находиться в директории Вашей темы. Стоит добавить новые папки под названием images (для хранения изображений) и js (для файлов JavaScript).

Для преобразования ссылок изображений статичного HTML шаблона в ссылки для темы WordPress необходимо заменить старый путь (например, directory/images/file.jpg) на новый:

<?php bloginfo ('template_directory') ?>/images/file.jpg

Данную операцию можно проделать практически в любом текстовом редакторе

Еще обратите внимание адресса изображений в файле CSS. Если нужно, смените пути.

Теперь вы должны иметь работающую на WordPress тему, сделанную собственными руками. Чтобы проверить это, зайдите в админ панель WordPress. Далее, внешний вид>>темы, выберите Вашу тему и нажмите «активировать». Посмотрим, что произойдет. Ошибок быть не должно. Создать тему шаблона для WordPress — часть 2



Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

14 комментариев к “Создать тему шаблона для WordPress — часть 1”

  • redfive
    22 Август, 2010, 15:57

    Спасибо! Мне понравилась Ваша статья. Кое что взял на заметку.

  • диета ангела
    14 Октябрь, 2010, 10:45

    Интересно и позновательно, а будет еще что-то по этой теме?

  • dyncimmarma
    22 Ноябрь, 2010, 5:30

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

  • Купитон
    9 Декабрь, 2010, 7:55

    А вроде вы установили такую прикольную тему на блог? Она создана на заказ что-ли?

  • skachat
    16 Декабрь, 2010, 12:55

    Автор, грамотно пишет, подписался на рассылку обновлений.

  • kirp
    30 Декабрь, 2010, 6:52

    Курьезный у вас блог, подписался на обновления.

  • zdez
    30 Декабрь, 2010, 17:57

    Всех с наступающим Новым Годом!!!

  • сэнд
    30 Декабрь, 2010, 20:47

    Да я так и сделал, только весь равно не удобно вручную прописывать всегда.

  • monitor
    31 Декабрь, 2010, 17:03

    С новым годом автора блога и всех читателей! :)

  • seomaestro
    3 Май, 2011, 12:11

    Добротный пост. Одобряю

  • mylove
    19 Июнь, 2011, 2:14

    Пост неплохой, закину сайт в закладки.

  • Toolehemn
    9 Декабрь, 2011, 17:03

    Я конечно, мало, что смыслю в посте, но постараюсь осилить.

  • Liska
    18 Январь, 2012, 3:07

    Все классно написано

  • Obuv
    15 Март, 2012, 22:51

    Автору нужно памятник постаить за такое!:)

Оставить комментарий

Наверх