WordPress создание темы

12.jpg

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

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

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

1.jpg

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


2.jpg

3.jpg

Не будем вдаваться в детали создания дизайна, скажу лишь, что здесь использовалось 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, очень важно создавать шаблон, как если бы это был старый добрый статичный сайт. Наметаем наш дизайн в виде первоначального шаблона:

4.png

Создание 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’), которая в свою очередь заменяется в админ-панели.

5.png

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.

«>6.png

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();


7.png

Только три вещи в нашем 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’е

8.png

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

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


9.png

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

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

10.png

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

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

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

11.png

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

naikom.ru


Основа любой темы — файлы style.css и index.php 

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123. Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забили на style.css, то в админке во Внешний вид > Темы ожидайте такой ошибки:

Если вы забили на index.php:

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

.
про лицензию GPL
License URI
А в этом параметре указывается ссылка на страницу с лицензией
Text Domain
Что-то, связанное с переводом темы на другие языки, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию.
Tags
Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно скипнуть этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Нет, сюда не нужно закидывать всё, что в голову придёт, со списком поддерживаемых тегов можно ознакомиться на официальном сайте.

На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

Установка изображения темы 

Согласитесь, на фоне других тем наша выглядит довольно уныло из-за отсутствия изображения! Ещё и квадратики мерцают при скролле 😭

Для того, чтобы это исправить, мы просто создаём файл screenshot.png
и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png.

Вот, другое дело:

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

Хоть и не обязательный, но по факту главный файл темы — functions.php 

Трудно представить тему для WordPress, в которой отсутствует файл functions.php, он используется для включения каких-либо функций темы, например регистрации сайдбаров, также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Ах да, я не упомянул? В этом уроке я предполагаю, что у вас есть базовые знания PHP, если нет, то идём читать это.

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

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда! 👿

И никогда! 👿

Это самый распространённый косяк.

Теперь напишем что-нибудь в файле index.php

Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи get_stylesheet_uri() и написал в теле документа «Привет мир!»

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

И ещё кое-что, для того, чтобы помочь WordPress взаимодействовать с вашей темой, вы должны добавить перед закрывающимся тегом </head> функцию wp_head(), а перед закрывающимся тегом </body> функцию wp_footer(), выглядеть это будет примерно так:

Когда я создаю какую-то тему, самая приятная часть для меня — это разделить вёрстку условно на шапку сайта, подвал и всё остальное, после этого код шапки отправляется в файл header.php и в дальнейшем подключается функцией get_header(), код подвала сайта отправляется в файл footer.php и в дальнейшем подключается функцией get_footer(). Приступим.

header.php

В хедер стараемся включить то, что повторяется на всех страницах сайта, ну или почти на всех.

Чаще всего в header.php также попадает основная навигация сайта, меню.

footer.php

C футером ситуация полностью аналогичная, отправляем то, что повторяется на страницах сайта и заканчиваем закрывающим </html> тегом.

В итоге наш index.php стал выглядеть вот так:

Cоздание темы WordPress из HTML шаблона 

Так я хочу представить вам свой видео курс на YouTube о том, как установить HTML шаблон на WordPress, он полностью бесплатный.

Что дальше?

Теперь основы создания тем вы знаете. Дальше — больше, я подобрал список материалов, с которых можно продолжить изучать процесс создания темы в WordPress, он чуть ниже.

misha.blog

Создание уникальной темы вручную с нуля

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

После того как определитесь с выбором, можно начать скачивание архива. По окончанию процесса вам нужно будет его распаковать и загрузить файлы в определенные папки сайта (в архиве обычно содержится небольшая инструкция). Загрузку можно осуществить с помощью программы FileZilla или же прямо с хостинга, если он поддерживает такую опцию. Теперь вам останется лишь перейти в раздел «Темы», выбрать ту, которую загрузили, и кликнуть по кнопке «Активировать».

Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише «Установить», а затем «Активировать». Перед установкой предлагается осуществить предварительный просмотр.

Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.

Название сайта должно быть небольшим и легким для запоминания. В Adobe Photoshop можно подобрать множество различных стилей для него. При создании логотипа вам могут потребоваться различные фигуры. Их можно скачать на официальном сайте Adobe Photoshop.

После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел «Редактор» и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.

Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота — height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.

При желании в шапку можно добавить активные ссылки на страницы сайта wordpress. Это можно сделать с помощью различных сервисов. Их в интернете достаточно много. Большинство из них работает по одному и тому же принципу. Вы обводите желаемую область шапки, которая будет отводится под ссылку, а сервис выдаст вам нужный код. Затем этот код вам нужно будет добавить в файл header.php. Будьте внимательны при его добавлении. Каждая точка имеет значение. Если добавите код не в то место, в шапке не появятся активные ссылки.

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

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

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

<div>
<a>
<ul>
<li>

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

<div id="navigacia">
<ul>
<li> <a href="ссылка на страницу">название страницы</a>
</li>
</ul>
</div>

Как вы уже поняли, условным названием блока с навигацией является navigacia. Блок состоит из одной ячейки «название страницы». Обратите внимание на то, что каждый тег закрывается с помощью символа «/». Если теги не закрывать, то могут возникнуть сбои в работе сайта.

Виджеты же сайта wordpress не должны быть большими. Наиболее популярными являются календарь, облако меток, мета, архивы, поиск, rss, видео и последние новости. Чтобы их добавить, вам понадобится перейти во вкладку «Внешний вид» и кликнуть по полю «Виджеты». Затем вы увидите перечень доступных вариантов. Также виджеты можно устанавливать с помощью плагинов. Их можно скачивать как с официального сайта, так и прямо через панель администратора вордпресс. Для добавления видео, которое есть в YouTube, вам достаточно будет лишь вставить ссылку на него в желаемое место на сайте. В ином случае видео нужно будет загружать на сайт. Если вы увлекаетесь программированием, то можете добавить на сайт свой собственный виджет. Для этого вам потребуется кликнуть по опции «Текст» и ввести туда необходимый код.

В настройках каждого виджета вам будет предоставлена возможность изменить стандартные заголовки. Также вы можете выбрать место отображение виджета (правая или левая боковая панель) и так далее. С удалением виджета проблем не должно возникнуть. Для этого вам достаточно будет кликнуть в настройках по кнопке «Удалить».

В футере чаще всего отображается ссылка на автора темы и текущий год. Также в футер можно добавить счетчик посещений. Его можно получить абсолютно бесплатно в Liveinternet и других подобных сервисах.

Создание уникальной темы при помощью специальных программ и сервисов с нуля

1. Наиболее популярной является программа Artisteer. Для работы с ней вам не понадобятся особые знания в области программирования. Процесс создания происходит в визуальном режиме. То, что вы нарисуете, будет представлено с помощью кода, который соответствует международному стандарту «XHTML 1.0 Transitional». Благодаря этому тема вашего будущего сайта будет поддерживаться всеми браузерами.

Для работы вам будет предложен широкий выбор различных эффектов, стилей и многое другое. Данная программа поддерживает русский, английский, немецкий и другие языки. Стоит отметить, что данная программа имеет некоторые недостатки. Наиболее значительным является то, что программа стоит около 50 долларов. Есть также бесплатная версия, но она содержит совсем немного опций. Для увеличения уникальности шаблона вам придется дополнительно покопаться в кодировке.

Перейдем непосредственно к инструкции по работе с данной программой Artisteer. Как только вы откроете программу, первой появится опция под названием «Идеи». Она предложит вам различные комбинации стандартных элементов. Если вы хотите, чтобы ваш дизайн был уникальным, то
вам эта опция не понадобится. Для того чтобы освоить программу, вам достаточно покликать по опциях и просмотреть параметры. Эта программа легкая, поэтому проблем с этим не должно возникнуть.

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

Для настройки ширины сайта, вам нужно будет использовать опцию «Лист». Ширина задается в пикселях. Данная программа изначально предложит вам ширину в 900 пикселей. Также с помощью данной опции можно настроить различные эффекты (тень, закругленные края и так далее).

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

Если вы хотите настроить расположение элементов сайта, то вам стоит использовать опцию «Макет».

Не менее важной опцией является «Статьи». В ней происходит верстка дизайна статей сайт. Сюда входит расположение картинки, текста, комментариев, различных блоков и так далее.

Чтобы выбрать цвет, размер или шрифт текста, вам понадобится опция «Цвета и шрифты».

После проделанных действий вы можете сохранить ваше творение. Для этого нужно кликнуть по палитре, которая находится в верхнем левом углу. Перед вами появится окно. В нем нужно кликнуть «Сохранить как». После этого вам останется лишь выбрать имя файла и место его расположения. Обратите внимание, что файл должен иметь расширение «.artx». При дальнейшей работе с программой для сохранения вам понадобится лишь 1 раз кликнуть «Сохранить».

Когда ваша тема будет полностью доработана, можно перейти к ее экспорту. Чтобы это сделать, вам потребуется кликнуть по вкладке «Экспорт» и выбрать «Тема WordPress».

2. Если вы в совершенстве владеете Adobe Photoshop, то вам стоит установить к нему дополнение Divine Elemente. Благодаря нему вы сможете с легкостью конвертировать файл формата «.psd» в тот формат, который будет поддерживаться всеми браузерами.

3. Если у вас нет денег на Artisteer, то можно использовать бесплатный сервис Lubith. Он доступен в онлайн режиме на официальном сайте lubith.com. Сервис содержит много полезных опций и отличается особой быстротой работы. Всего за пару минут вы полностью овладеет всеми его опциями.

4. Аналогом предыдущего сервиса является WordPress Theme Generator. Он также является легким в работе и содержит широкий выбор различных опций. Данный сервис является абсолютно бесплатным. Единственным недостатком является то, что данный сервис поддерживает только английский язык.

5. XTemplate Generator является русифицированным генератором тем для сайта. Его опции находятся в левом окне, а в правом вы можете увидеть визуальный результат ваших работ. Этот генератор также является бесплатным.

6. WPTheme Generator намного мощнее, чем предыдущие, потому как содержит в несколько раз больше опций. Единственным нюансом будет то, что данный сервис платный. Цена составляет 30 долларов. Стоит также отметить, что верстка в нем осуществляется полностью на английском языке.

7. CSSEZ является не менее популярным, чем предыдущий. Перед началом работы, вам потребуется пройти небольшую регистрацию. В данном сервисе вы можете сверстать до 4 столбцов для материалов сайта. Фон можно загрузить собственный.

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

9. Weebly отличается от остальных наличием опции добавления видео прямо с YouTube или Google в любое место сайта. Сайт, на котором есть видео, пользуется успехом, потому как визуально информация быстрей и проще воспринимается.

10. В сервисе Eris’ Template Generator вы сможете добавить до 3 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.

Похожие статьи

wordpresslib.ru

Здравствуйте, давайте попробуем создать простую wordpress тему с нуля.

Скачать исходники для статьи можно ниже

Первое, что нам нужно знать – это из чего состоят wordpress темы?

Если вы откроете любую скачанную wordpress тему (для примера возьму свою простенькую тему – glossyblue):

Wordpress создание темы

, то, наверняка, увидите в ней папку с названием images – здесь хранятся картинки темы, из которых состоит ее дизайн.
Также вы найдете файл стилей – style.css, который служит для описания внешнего вида страницы, написанный с помощью языков разметки HTML и XHTML, то есть в нем прописывается где должен располагаться тот или иной блок сайта, его размеры, границы, шрифт текста и многое другое.

Здесь же вы увидите скриншот темы – screenshot.png.

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

А типичный комплект php файлов таков:

index.php
single.php
page.php
header.php
sidebar.php
footer.php
comments.php
archives.php
404.php
functions.php

Каждый из вышеуказанных php-файлов называется шаблоном.

Страницы WordPress сайта собираются подобно пазлу из файлов-шаблонов:

Wordpress создание темы

За шапку отвечает шаблон – header.php.

За подвал отвечает – footer.php.

За боковые колонки – sidebar.php.

За контент (центральная, основная часть сайта) – index.php, page.php, single.php и др. – в зависимости от того, что вы просматриваете.

Какие же шаблоны используются при выводе разных типов контента в WordPress, упрощенно (более подробно читайте на “codex.wordpress.org” статью “иерархия шаблонов”):

Отображение главной страницы – home.php или index.php

Отображение одиночной записи (поста) – single.php

Отображение статической страницы – page.php

Отображение рубрики – category.php

Отображение меток – tag.php

Отображение результатов поиска – search.php

Отображение ошибки 404 (Не найдено) – 404.php

Отображение комментариев – comments.php

Отображение архива записей – archives.php

и др.

Некоторые шаблоны (например header.php и footer.php) задействованы практически на всех страницах, другие используются только при определенных условиях (например шаблон ошибки – отсутствие нужной страницы – 404.php).

Остался еще один типичный файл-шаблон для большинства тем wordpress – это functions.php.

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

Но для создаваемой нами простенькой темы wordpress данный файл-шаблон не понадобиться (functions.php).

Какие же шаблоны-файлы мы будем создавать для нашей простенькой темы:

index.php
header.php
sidebar.php
footer.php
comments.php

Создание файла header.php.

Header, хедер или шапка страницы сайта.

Что входит в этот файл.

Обычные и необходимые каждой странице сайта части html-кода.

Это доктип (DOCTYPE), теги <html>,<head> и тег <body>, мета-тег описывающий кодировку, мета-тег привязки стилей css, привязки rss фида, само собой разумеется, мета-теги title, description, keywords и другие. Здесь же по традиции находится так называемые «сквозные» элементы сайта, то есть те, которые применяются на каждой его странице. Это название сайта, и как Вы и сами могли заметить на многих сайтах – горизонтальное меню сайта.

Открываем бесплатный редактор кода – Notepad++ и вставляем следующий код:

  <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»  «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <meta name="description" content="О том как создать сайт самому" />  <meta name="keywords" content="создание сайтов, сайтостроение" />  <title><?php wp_title (' '); ?> | <?php if (wp_title (' ', false)) { echo ' | '; } ?><?php bloginfo ('name'); ?></title>  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/ваш фид" />  <link rel="pingback" href="<?php bloginfo ('pingback_url'); ?>" />  <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen"/>  <?php wp_head (); ?>  </head>  <body>  <div id="cont">  <div id="header">  <div id="blogtitle"><?php bloginfo ('name'); ?></div>  <div id="subtitle"><h1><?php bloginfo ('description');?></h1></div>  <ul id="menu">  <li><a href="http://ваш сайт.com/">Главная</a></li>  <li><a href="http://ваш сайт.com/o sajte">О сайте</a></li>  <li><a href="http://ваш сайт.com/kontakty">Контакты</a></li>  </ul>  </div>  

Собственно это и есть готовый код файла header. А теперь разберемся какая часть кода за что отвечает.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> – это так называемый доктайп <!DOCTYPE>, он предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях (HTML 4.01, HTML 5), также имеется XHTML (XHTML 1.0, XHTML 1.1).

<head> — Открывающий тег <head>. Между открывающим тегом <head> и закрывающим тегом </head> находится очень важная информация. Судите сами:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> — с помощью этого мета-тега прописана кодировка документа. Так как мы создаем сайт на движке WordPress, то и кодировка должна быть UTF-8. Это единственная кодировка, с которой работает движок wordpress.

<meta name=”description” content=”О том как создать сайт самому” /> — мета-тег description, то есть описание вашего сайта.

<meta name=”keywords” content=”создание сайтов, сайтостроение” /> — мета-тег keywords, то есть ключевые слова сайта.

<title><?php wp_title (‘ ‘); ?> | <?php if (wp_title (‘ ‘, false)) { echo ‘ | ‘; } ?><?php bloginfo (‘name’); ?></title> — мета-тег title. Очень важный мета-тег. С помощью этого кода мета-тег title будет создан в виде: название рубрика – название статьи – название сайта.

<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”http://feeds.feedburner.com/ваш фид” /> — ссылка на RSS фид Вашего сайта.

<link rel=”pingback” href=”<?php bloginfo (‘pingback_url’); ?>” /> — ссылка отсылки пингбеков на другие сайты или блоги. Что такое пингбеки – разберемся как-нибудь в другой раз.

<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” media=”screen”/> — ссылка на css файл стилей Вашего сайта

<?php wp_head (); ?> — код, обеспечивающий работу многих плагинов, которые добавляют в страницу сайта свой код.

</head> — закрывающий тег <head>.

Дальше идет тег <body>. Все, что находится в пределах этого тега, собственно и есть Ваш сайт, то есть все то, что видят на экране монитора посетители Вашего сайта.

Первым идет открывающий тег контейнера cont — <div id=”cont”>. Что это за контейнер. В этом простом сайте, все контейнеры – header, sidebar, content и futer размещаются в общем контейнере cont.

<div id=”header”> — открывающий тег контейнера header

<div id=”blogtitle”><?php bloginfo (‘name’); ?></div> — контейнер blogtitle, с кодом вызова названия сайта. Название сайта Вы задаете в админпанели движка.

<div id=”subtitle”><h1><?php bloginfo (‘description’);?></h1></div>  — контейнер subtitle, с кодом вызова описания сайта. Описание сайта Вы задаете в админпанели движка wordpress.

<ul id=”menu”> – меню в хедере, созданное с помощью списков.

<ul id=”menu”>
<li><a href=”http://ваш сайт.com/”>Главная</a></li>
<li><a href=”http://ваш сайт.com/o sajte”>О сайте</a></li>
<li><a href=”http://ваш сайт.com/kontakty”>Контакты</a></li>
</ul>

Правда, проще всего вставить меню с помощью функции wp_nav_menu – как это сделать читайте в моей предыдущей статье – Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu.

</div> — закрывающий тег контейнера header

Далее сохраняем созданный файл header в заранее созданной папке темы, естественно под именем header и как php файл.

Создаем файл стилей для нашей простой темы wordpress – style.css.

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

Если Вы откроете любой файл стилей css – style.css –  готовой темы, то сможете сами убедиться в том, что все они начинаются со служебной информации, закрытой знаками комментария.

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

  /*  Theme Name: vasha tema  Theme URL: http://ваш сайт.com/  Description: moya tema o saitostroenii  Author: Ivan Pupkin  Author URI: http://ваш сайт.com/  Version: 1.0  */  

Если Вы загрузите Вашу тему в соответствующую папку движка WordPress то первое, что он сделает, залезет в этот файл, прочитает эту надпись и покажет вашу тему в списке установленных тем. Ну а теперь непосредственно к коду css WordPress темы. Сделаем часть css кода для уже созданного файла header и вставим ее сразу же за блоком служебной информации:

  * {  border: 0;  margin: 0;  padding: 0;  }    body {  font-size: 12px;  font-family: Arial, Helvetica, sans-serif  }    h1 {font-size:12px;}  h2 {font-size:16px;}  h3 {font-size:12px;}  h4 {font-size:14px;}    #cont {  width: 900px;  margin: 0 auto;  }    #header {  width: 890px;  height: 150px;  margin: 0 auto;  }    #blogtitle{  width:100px;  font-size:200%;  float:left;  color: #008800;  position: absolute;  left: 450px;    }  #subtitle {  width:250px;  text-align:justify;  left: 400px;  float: left;  position: absolute;  top: 60px;  }    #menu {  position:absolute;  width: 50px;  float: left;  left: 800px;  }  

Что здесь и к чему. Самый первый код со звездочкой это так называемые глобальные правила. Звездочка означает, что эти правила действуют для всего сайта. Зачем нужна такая «глобализация». Как видите, с помощью этих правил, заданы нулевые значения рамок, полей и отступов. То есть если в файле стилей css WordPress темы не указаны для какого-то элемента числовые значения этих параметров, то они будут равны нулю для всех браузеров. Что очень не помешает в кроссбраузерности создаваемого сайта.

Дальше выписаны правила для тега body. Здесь просто задан размер шрифта для всей страницы и его тип.

Задан размер шрифта для заголовков. Очень удобно.

Правила для контейнера cont. Во-первых, просто задана ширина контейнера, а во-вторых, заданы отступы сверху и снизу ноль, а справа и слева Авто. То есть контейнер, а следовательно и страница сайта, всегда будет расположена по центру экрана монитора.

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

Правила для контейнера blogtitle. В этом контейнере будет название сайта. Здесь заданы: ширина контейнера, далее размер шрифта и его цвет, положение контейнера – слева, размещение – слева 450.

Правила для контейнера subtitle. В этом контейнере будет описание сайта. Здесь заданы: предполагаемая ширина контейнера, выравнивание текста по ширине, положение контейнера – слева, размещение – слева 400, а так же размещение сверху – 60. Чтобы он не лег на blogtitle.

Правила для контейнера menu. Заданы позиционирование, ширина, положение и оступ слева – 800.

Вот пока и все по созданию файла стилей css WordPress темы. Это конечно далеко не все, естественно, что мы еще вернемся к файлу стилей.

Создание файла index.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

  <?php get_header (); ?>  <div id="content">  <?php if (have_posts ()) : while (have_posts ()) : the_post (); ?>  <div class=«title»><h2><?php the_title (); ?></h2></div>  <div class="date"><?php the_time ('F dS, Y') ?></div>  <?php the_content (__ ('Читать полностью'));?>  <?php endwhile; else: ?>  <p><?php _e ('Такая страница не существует'); ?></p>  <?php endif; ?>  <?php if (function_exists ('wp_pagenavi')) { wp_pagenavi (); } ?>  </div>  <?php get_sidebar (); ?>  <?php get_footer (); ?>  

Ну и по строкам:

<?php get_header (); ?> — код, отвечающий за вставку шапки сайта, то есть хедера или точнее шаблона header

<div id=”content”> — открывающий тег контейнера content, в котором мы собственно и видим содержание страницы сайта

<?php if (have_posts ()) : while (have_posts ()) : the_post (); ?> — код цикла, отвечающий за вывод контента на страницу сайта

<div class=”title”><h2><?php the_title (); ?></h2></div> — контейнер title, в котором находится заголовок страницы

<div class=”date”><?php the_time (‘F dS, Y’) ?></div> — контейнер date, в котором находится код отвечающий за вывод даты создания записи

<?php the_content (__ (‘Читать полностью’));?> — обязательная часть кода цикла. Если Вы создаете не полную запись, а срезанную с помощью тега more, то этот код создаст ссылку на полный вариант записи

<?php endwhile; else: ?>
<p><?php _e (‘Такая страница не существует’); ?></p> — код с условием, если не найдена страница сайта и строка, появляющаяся в результатах поиска

<?php endif; ?> — закрывающий тег кода цикла

<?php if (function_exists (‘wp_pagenavi’)) { wp_pagenavi (); } ?> — код вывода страниц с помощью очень хорошего плагина wp-pagenavi, который очень часто вставляют в шаблоны сайтов WordPress. В чем его «хорошесть». В админ-панели движка WordPress можно выставить значение количества записей на одной странице. Если количество записей станет больше указанного, то следующие записи WordPress покажет на другой странице, а внизу появится строка со ссылками на эти другие страницы. Причем внешний вид ссылок легко можно настроить

</div> — закрывающий тег контейнера content

<?php get_sidebar (); ?> — код, отвечающий за вставку сайдбара или шаблона sidebar

<?php get_footer (); ?> — код, отвечающий за вставку футера или шаблона footer

Вот и весь код файла index.php. Как видите, потихоньку шаблоны сайтов WordPress открывают свои секреты… Да, чуть не забыл! В файл стилей добавим вот такой код:

  #content{  width:720px;  float: left;  padding-bottom: 20px;  padding-right: 20px;  text-align: justify;  }  .title {  color: #FF0000;  font-size: 18px;  text-decoration:none;  font-weight: bold;  font-family: Arial, Helvetica, sans-serif;  }  .date {  font-size: 10px;  padding: 0px 0px 10px 0px;  background-color: #f2f2f2;  }  

Что это такое:

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

Правила для контейнера title. Заданы параметры шрифта заглавия страниц сайта: цвет, размер, полужирное начертание и тип шрифта

Правила для контейнера date. Заданы параметры шрифта даты создания записи: размер шрифта, отступы, фон

Во пока, на сегодня, и все о том, как создавать шаблоны сайтов WordPress и в частности как создавать файл index.php. Остались файлы sidebar и footer.

Создаем файл sidebar.php.

Чтобы создаваемая нами простая тема wordpress заработала, нам осталось сделать еще три файла, даже два – sidebar.php и futer.php. Файл 404.php на работоспособность темы не влияет. Просто если из файла index.php убрать код вывода этого файла, то он совсем пустой будет. Да и файл этот совсем простой. Итак – к делу!

Открываем редактор кода – Notepad++ и вставляем следующий код:

  <div id="sidebar">  <h4>Категории</h4>  <br>  <ul><?php wp_list_cats ('sort_column=name'); ?></ul>  <br>  <h4>Новое на сайте</h4> <br>  <ul><?php get_archives ('postbypost', 10); ?></ul>  <br>  <h4>Архивы</h4> <br>  <ul><?php wp_get_archives ('type=monthly'); ?></ul>  </div>  

, где:

<div id=”sidebar”> – открывающий тег контейнера sidebar.

<h4>Категории</h4> — заглавие списка категорий.

<br> — тег перевода строки, чтобы не сбилось все в кучу.

<ul><?php wp_list_cats (‘sort_column=name’); ?></ul> — код вывода списка категорий.

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

Внесем изменения в файл стилей (style.css). Вставим вот такой код:

  #sidebar{  float:left;  width:150px;  margin-top: 20px;  }  

Правила для контейнера sidebar. Здесь просто задано положение контейнера sidebar, его ширина и отступ сверху, для красоты.

Создаем файл footer.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

  <div id="footer">  <p>Copyright &copy; 2013 <a href="<?php bloginfo ('url'); ?>"><?php bloginfo ('name'); ?></a></p>  </div>  </div>  </body>  </html>  

, где:

<div id=”footer”> — открывающий тег контейнера footer.

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

</div> — закрывающий тег контейнера footer.

</div> — закрывающий тег контейнера cont.

Ну и закрывающие теги </body> и </html>.

В файл стилей (style.css) добавим:

  #footer {  height:50px;  width: 890px;  float: left;  }    #footer p {  font-weight: bold;  color: #FF0000;  }  

Правила для контейнера footer. Заданы высота, ширина и положение контейнера.

Правила для надписи в футере: начертание и цвет шрифта.

Создаем файл 404.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

  <?php get_header (); ?>  <div id="content">  <h4>К сожалению, такой страницы нет</h4><br>  <p>Страница, которую Вы ищете, видимо, удалена или не существовала ранее.</p>  <p>Однако вы можете попробовать поискать необходимую информацию в следующих статьях:</p><br>  <ul>  <?php get_archives ('postbypost', 50); ?>  </ul>  </div>  <?php include (TEMPLATEPATH."/sidebar.php");?>  <?php get_footer (); ?>  

Чем-то похож на файл index.php. Зачем он нужен. Если кто-то неправильно наберет адрес страницы Вашего сайта, то вместо простого сообщения, что такая страница не найдена, файл не только сообщит об этом, а и выдаст список страниц сайта, в количестве 50 штук. Может посетитель Вашего сайта найдет среди них что-то нужное для себя.

Вот и готовы все файлы!

mnogoblog.ru

Наполняем index.php темы WordPress

Хочу заметить что наполнять все файлы мы будем постепенно и если вы не увидите каких-то атрибутов или элементов, значит они будут добавлены в дальнейшем с подробным объяснением.

Итак, отрываем индексный файл и вписываем в него следующий код:

Как мы можем видеть мы поделили страницу на 4 основных части — header, main, sidebar и footer. Уже сейчас нашу тему можно активировать и посмотреть на белый экран с единственной надписью «Site Title».
Пока остановимся на этом и пойдем к style.css, шапку которого нужно оформить по некоторым правилам.

Файл style.css в WordPress, добавление базовой информации о теме

По правилам файл style.css в WordPress должен иметь следующий комментарий в начале:

Введенные тут данные будут отображаться в описании темы, в админке. Я думаю вы догадались какие элементы нужно поменять на свои.
После того как вы ввели свои данные, пропишем несколько правил, которые в любом случае будут необходимы:

Правила в файл стилей будем добавлять по мере рассмотрения каждого участка кода, по этому оставляем style.css и вернемся к нашему  index.php.

Разбиваем index.php на несколько файлов

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

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

Открываем файл header.php. Вырезаем с index.php следующий участок кода и вставляем его в header.php:

Аналогичную операцию проводим с sidebar.php участок кода следующий:

Последний момент с footer.php:

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

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

Можем сохранить настройки и посмотреть что у нас получилось. Зрелище не из приятных. Белый холст с ссылками при переходе по которым ничего не написано. Не переживайте это только основы, всему свое время, все приведем в порядок. Обсудим функции, которые мы применили.

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

Собственно обсуждать нам нужно только одну строчку, остальное сделайте так как написано:

Функция the_permalink() выводит URL поста, который в данный момент обрабатывается внутри цикла.

Следующая функция the_title() выведет заголовок поста, с этим думаю понятно.

Давайте подведем итог данного урока по созданию темы WordPress. Что же мы сделали сегодня:

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

На сегодня все, основная задача данного урока выполнена, в следующий раз займемся шапкой сайта, мета тегами и навигационным меню, а так же продолжим наполнять файл style.css. Не пропустите следующий урок, подписывайтесь на рассылку и продолжайте вместе с нами делать шаблон для CMS WordPress.

yrokiwp.ru

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Wordpress создание темы

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http://{site-name}/wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

Wordpress создание темы

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

Предварительный осмотр

Wordpress создание темы

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

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

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Wordpress создание темы

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

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

<!doctype html> <html> <head> 	<meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>"> 	<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 	<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> 	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 	<?php wp_head(); ?> </head> <body <?php body_class(); ?>> 	<div class="wrapper"> 

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() { 	wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); 	wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); 	wp_enqueue_style( 'font-style'); } add_action('wp_enqueue_scripts', 'enqueue_styles');  function enqueue_scripts () { 	wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); 	wp_enqueue_script('html5-shim'); } add_action('wp_enqueue_scripts', 'enqueue_scripts'); 

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

	</div> 	<footer></footer> 	<?php wp_footer(); ?> </body> </html> 

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

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

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?> 

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

В результате должна получиться вот такая картина:

Wordpress создание темы

Логотип

Wordpress создание темы

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

<div class="wrapper"> 	<header> 		<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a> 	</header> 

Форма поиска

Wordpress создание темы

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

<form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form"> 	<input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input"> 	<button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button> </form> 

А в файл стилей запишите стили для формы:

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

<header> 	… 	<?php get_search_form(); ?>  </header> 

Навигация

Wordpress создание темы

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

if (function_exists('add_theme_support')) { 	add_theme_support('menus'); } 

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

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

<nav class="main-navigation"> 	<? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?> </nav> 

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Футер

Wordpress создание темы

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

<footer> 	<div class="footer-content"> 		<div class="twitter"> 			<h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3> 			<time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time> 			<p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p> 		</div> 		<div class="sitemap"> 			<h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3> 			<div class="column first"> 				<a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a> 				<a href="/about/"><?php echo __('About', 'whitesquare'); ?></a> 				<a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a> 			</div> 			<div class="column"> 				<a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a> 				<a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a> 				<a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a> 			</div> 		</div> 		<div class="social"> 			<h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3> 			<a href="http://twitter.com/" class="social-icon twitter-icon"></a> 			<a href="http://facebook.com/" class="social-icon facebook-icon"></a> 			<a href="http://plus.google.com/" class="social-icon google-plus-icon"></a> 			<a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a> 			<a href="http://youtube.com/" class="social-icon-small youtube-icon"></a> 			<a href="http://flickr.com/" class="social-icon-small flickr-icon"></a> 			<a href="http://instagram.com/" class="social-icon-small instagram-icon"></a> 			<a href="/rss/" class="social-icon-small rss-icon"></a> 		</div> 		<div class="footer-logo"> 			<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a> 			<p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p> 		</div> 	</div> </footer> 

И прописываем стили в style.css:

В итоге главная страница сайта должна выглядеть вот так:

Wordpress создание темы

Главная страница

Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.

WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-{название страницы}.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

<?php get_header(); ?> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?> 

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

<?php remove_filter('the_content', 'wpautop'); 

После этого, главная страница должна отобразиться правильно.

Сайдбар

Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.

Wordpress создание темы

Для этого создайте файл sidebar.php и поместите в него следующий код:

<aside> 	<nav class="aside-navigation"> 		<? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?> 	</nav> 	<h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2> 	<div class="map"> 		<img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>"> 	</div> </aside> 

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

<div class="main-heading"> 	… </div> <?php get_sidebar(); ?> <section> 	… 

Далее нам нужно добавить стили для вёрстки:

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Wordpress создание темы

Страница About us

Wordpress создание темы

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

И стили в style.css:

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

<?php get_header();?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar();?> <section> 	<?php while (have_posts()): the_post();?> 		<?php the_content();?> 		<?php 			if ( comments_open() || get_comments_number() ) { 				comments_template(); 			} 		?> 	<?php endwhile; ?> </section> <?php get_footer(); ?> 

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

Страница поиска

Wordpress создание темы

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

<?php get_header(); ?> <div class="main-heading"> 	<h1>Search</h1> </div> <?php get_sidebar(); ?> <section> 	<h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 		<p><?php the_excerpt(); ?></p> 	<?php endwhile;	else:?> 		<p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p> 	<?php endif; ?> </section> <?php get_footer(); ?> 

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

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

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

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar(); ?> <section> 	<p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p> </section> <?php get_footer(); ?> 

habr.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector