Краткое руководство по разработки темы Wordpress
- Создание базы данных и конфигурация
- Структура темы WordPress
- Создание темы
- Некоторые полезные функции WordPress
- Добавление постраничной навигации
- Разбиение шаблона на логические части
- Вывод полного текста статьи
- Виджетируемый сайдбар и футер
- Миниатюра записи
- Метки записи
- Статические страницы
- Комментарии
- Поиск по сайту
Одним из шагов при установке WordPress является внесение в файл wp-config.php параметров, необходимых для доступа к базе данных MySQL. wp-config.php - файл конфигурации, в котором в виде констант прописывается всевозможные настройки будущего сайта (настройки соединения с базой данных, настройка кодировок и пр.)
Для того чтобы не создавать этот файл вручную в установочном пакете уже есть файл wp-config-sample.
Все файлы которые будут создаваться для WordPress должны быть в кодировке Юникод (utf-8 (без BOM)), т.к. данная CMS корректно работает только с этой кодировкой.
- Создаем БД с помощью утилиты phpmyadmin;
- Вносим изменения в файл
wp-config.php. Потребуется следующая информация:
// Имя базы данных для WordPress
define('DB_NAME', 'my-database');
// Имя пользователя MySQL
define('DB_USER', 'root');
// Пароль к базе данных
define('DB_PASSWORD', 'пустой');
// Имя сервера базы данных
define('DB_HOST', 'localhost');Особенности создания темы WordPress
Темы WordPress находятся по пути:
.../wp-content/ – корневая папка тем WordPress
.../wp-content/languages/ – файлы локализации. Если сайт мультиязычный, то в этой папке будут храниться файлы и на др. языке
.../wp-content/plugins/ – плагины расширяемые WordPress
.../wp-content/themes/ – здесь хранятся все темы WordPress
Тема WordPress – это набор шаблонов, которые представляют из себя в большей степени обычный html-код. С небольшими (иногда большими) вкраплениями PHP-кода (набор функций или теги WordPress), которые уже описаны в ядре CMS. Тема состоит из набора файлов (минимальный набор):
Тема начинается с создания двух файлов:
index.php(главный файл)style.css(файл стилей)
Логические части сайта
header.phpsidebar.phpfooter.php
Полный текст статьи
single.php
Шаблон постоянной страницы
page.php
Поисковая форма, вывод результатов поиска
searchform.phpsearch.php
Виджеты
function.php
- Создаем каталог с нашей темой в папке
.../wp-content/themes/.
В ней создаем два файла: index.php и style.css. В style.css в комментариях добавляем мета-описание, которое будет отображаться при выборе тем в админ панели WordPress.
/*
Theme Name: Название темы
Theme URI: https://адрес.темы
Description: Описание темы вашего сайта
Version: 1.0
Author: Имя Фамилия
Author URI: https://сайт-автора.темы
*/- В
index.phpпрописываем следующие мета-теги, подключаем стили.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>">
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>">
<link href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" rel="stylesheet" media="screen">
<link href="<?php bloginfo('rss2_url'); ?>" type="application/rss+xml" rel="alternate" title="RSS 2.0">
<link href="<?php bloginfo('rss_url'); ?>" type="text/xml" rel="alternate">
<link href="<?php bloginfo('atom_url'); ?>" type="application/atom+xml" rel="alternate" title="Atom 0.3">
<link href="<?php bloginfo('pingback_url'); ?>" rel="pingback">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body>
</body>
</html>- Скопировать все стили в созданный нами файл
style.css; - Скопировать содержимое секции
bodyиндексного файла сверстанного шаблона в секциюbodyфайлаindex.php; - Исправить все относительные ссылки (в
index.html,style.css) - Вывод постов в цикле:
<?php if (have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>- Начало вывода анонсов статей.
Ниже в коде анонсы статей выводятся в блоке с классом .content, а каждый анонс в блоке с классом .post-main.
<div class="content">
<!--Условие: если есть посты, тогда...-->
<?php if (have_posts) : ?>
<!--Цикл "пока": пока есть посты выводить их-->
<?php while (have_posts()) : the_post(); ?>
<div class="post-main">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span><?php the_date_xml(); ?></span></h1>
<div class="post">
<img src="<?php bloginfo('template_url'); ?>/images/thumb.jpg" class="imgstyle" alt="alt text of the image">
<p>Мир ИТ сильно поменялся за последние годы, появились новые приоритеты и технологии – вместе с ним сильно изменился процесс разработки. Сегодняшние средства разработки это совсем не те продукты, которые были лет десять назад, они построены на новейших технологиях, интегрируются со средствами групповой разработки, планирования и управления проектами, средствами оценки рисков, управления жизненным циклом приложений и позволяют создавать настоящую среду для индустриального программирования.</p>
<p>Так называемые учебные задачи чаще всего страдают излишней абстрактностью и неприменимостью в жизни. Освоение языка (или среды программирования) само по себе не может считаться задачей, точнее - это очень непродуктивный подход. Эффективное освоение языка возможно только на реальных примерах.</p>
<p><a href="<?php the_permalink(); ?>">Читать далее</a></p>
<p>Метки: <a href="#">метка-1</a>, <a href="#">метка-2</a>, <a href="#">метка-3</a></p>
</div>
</div><!--.post-main-->
<?php endwhile; ?>
<?php endif; ?>
</div><!--.content-->bloginfo('name')– название сайта;bloginfo('description')– описание сайта;bloginfo('url')– URL сайта;bloginfo('stylesheet_url')– абсолютный URL таблиц стилей;bloginfo('template_url')– абсолютный URL темы WP (например:https://example.site/wp-content/themes/название_темы);the_title()– вывод названия статьи;the_permalink()– постоянная ссылка на полный текст статьи;the_excerpt()– вывод анонса статей;the_content()– вывод полного текста статьи;the_post()– вывод поста;posts_nav_link('разделитель', 'предыдущая-страница', 'следующая-страница')– постраничная навигация;wp_footer()– панель администратора (отображается вверху страницы);wp_title()– название страницы которая в данный момент просматривается.
Постраничная навигация будет располагаться после вывода всех статей, перед футером. Поэтому постраничную навигацию мы добавим после окончания цикла while (<?php endwhile; ?>) и перед окончанием условия (<?php endif; ?>).
Создадим блок <div> с классом .nav куда и поместим нашу постраничную навигацию:
<?php posts_nav_link(); ?>- Создадим файлы:
header.php,sidebar.php,footer.php; - Вырезаем код из индексного файла с начала и до блока с классом
.contentи вставляем его в файлheader.php. Тут же подключаем этот файл, для этого вindex.phpв самом начале прописываем функцию подключения файлаheader.php:
<?php get_header(); ?>- Вырезаем код нашего sidebar'a, за место него прописываем функцию подключения сайдбара:
<?php get_sidebar(); ?>, а код вставляем в файл sidebar.php;
- Ту же операцию проделываем и с футером.
- Создадим файл
single.phpи скопируем содержимоеindex.phpс некоторыми поправками. Во-первых, теперь нам нужен не вывод анонса статьиthe_excerpt(), а вывод полного текста статьиthe_content(); - Также из шаблона можно удалить миниатюру и метки;
- И вместо функции постраничной навигации выведем ссылки на предыдущую статью
<?php previous_post_link('%link '); ?>и следующую
<?php next_post_link(%link); ?>Создадим файл functions.php. В этом файле хранятся функции (виджеты), расширяющие нашу тему. Добавим в созданный файл следующий код:
<?php
//Если определена функция "register_sidebar", то...
if (function_exists('register_sidebar')) {
//Регистрация виджета "Навигация"
register_sidebar(Array('name' => "Навигация"));
//Регистрация виджета "Последние события"
register_sidebar(Array('name' => "Последние события"));
}
?>Чтобы вывести виджет в нужном месте, нужно в файле sidebar.php дописать такие строки:
<?php dynamic_sidebar('Название_виджета'); ?>Или можно добавить условие на случай если виджеты не определены, то вывести какое-нибудь сообщение:
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Название_виджета')) : ?>
<p>Такой-то виджет не был назначен</p>
<?php endif ?>
?>Теперь, в админ панели во вкладке «Внешний вид» => «Виджеты» нам доступны созданные виджеты.
Добавляем виджеты в футер
Так же само, добавляем наши виджеты в блок с классом .menu.
Чтобы добавить для каждого поста миниатюры, надо в файле functions.php прописать функцию поддержки миниатюры:
// Поддержка миниатюр
add_theme_support('post-thumbnails');Чтобы определить размеры миниатюры для каждого из постов:
set_post_thumbnail_size(ширина, высота, как-обрезать-картинку);, где третий параметр принимает логическое значение:
– true – обрезает картинку по центру со строго заданными размерами;
– false – обрезает картинку пропорционально.
Для того чтобы вывелись метки записи в том месте, где мы хотим их выводить напишем:
<?php the_tags(); ?><?php wp_list_pages('title_li='); ?>Если передать эту функцию без параметров, то вместе со списком меню WordPress выдаст нам название «Страницы». Параметр title_li= и после знака = мы можем написать заголовок меню.
Но при переходе по ссылке нам выводится только превью, для того, чтобы прочитать статью полностью, необходимо создать новый шаблон под именем page.php.
Содержимое этого файла будет таким же как и содержимое single.php, но с некоторыми оговорками.
Например, нам там уже не нужен вывод даты создания страницы <?php the_date_xml(); ?>, т.к. она постоянная, то абсолютно не логично выводить ссылки на следующую/предыдущую страницу.
Комментарии будут выводиться в шаблоне single.php после текста статьи и перед ссылками на следующую/предыдущую статьи. Для этого напишем функцию:
<?php comments_template(); ?>За поиск отвечают два шаблона search.php и searchform.php.
Создадим сначала файл searchform.php и вставим содержимое тега <form> из index.php.
<form class="search-main" action="./" method="get">
<input class="search-txt" type="text" name="s" id="s" value="<?php the_search_query(); ?>">
<input class="search-btn" type="image" src="<?php bloginfo('template_url'); ?>/images/search.jpg">
</form>Поскольку запрос будет выполняться на этой же странице откуда мы её и вызываем, то значение атрибута action может быть пустым или можно вставить ./, что означает переход в корневую папку сайта. Запрос будет передаваться через адресную строку поэтому значение атрибута method="get".
Для поля поиска, то бишь тег <input> с атрибутом type="text" изменим значение атрибута name="s", добавим id="s" и в качестве значение присвоим value="<?php the_search_query(); ?>".
Второй <input> оставим без изменения.
Теперь, в том месте где должна быть поисковая форма подключим её с помощью конструкции include передав следующие параметры:
<?php include(TEMPLATEPATH . '/searchform.php'); ?>Следующее, что нужно сделать это создать шаблон на котором выводились бы результаты поискового запроса. По правилам иерархии страниц, когда нет определенного шаблона WordPress выдает необходимую информацию в имеющемся шаблоне. В данном случае для результатов поиска необходим шаблон search.php.
Создадим шаблон, дадим ему такое имя. К нему подойдет код из файла single.php, опять же с некоторыми поправками. Результаты поиска, как и статьи выводятся в цикле описанный выше.