Создание темы wordpress | Обучение и развитие детей
Разное 

Создание темы wordpress

avtor
К сожалению или к счастью, так сложилось, что одним из стандартов де факто в мире веб-разработки стал wordpress. Нельзя однозначно утверждать будто этой CMS пользуются все без исключения и wordpress’у нет адекватной замены, но будем честны: количество сайтов, работающих под управлением wordpress не только не снижается, но наоборот с каждым годом увеличивается. Движок может поставить и начать использовать абсолютно любой человек, даже весьма далёкий от разработки. К тому же он достаточно гибок, имеет множество плагинов, покрывающих 99% нужд владельцев сайтов и уже давно перерос своё название «блогового» движка. Пожалуй, настало время познакомиться с ним подробнее. В этой стартовой заметке будут рассмотрены такие аспекты как быстрое приготовление рабочего окружения для запуска CMS и первые шаги по созданию своей собственной темы.

Веб-сервер

Думается, не нужно говорить о том, что wordpress написан на PHP. Это значит, что для начала нам понадобится обзавестить каким-нибудь веб-сервером. Чаще всего в качестве оного выбирают apache либо связку apache+nginx. О настройке первого уже было сказано ранее. Чтобы не повторяться, да и просто ради разнообразия и быстроты, ниже даётся краткое описание установки и настройки уже готового сервера, что может сгодиться для локальной разработки: это xampp. xampp Загрузите соответствующий пакет для своей операционной системы на сайте apachefriends.org, распакуйте архив с xampp и выполните несколько несложных действий. Для linux они таковы: 
$ chmod 755 xampp-linux-*-installer.run
$ sudo ./xampp-linux-*-installer.run
$ sudo /opt/lampp/lampp start
По-умолчанию xampp ставится в директорию /opt/lampp/lampp, откуда его и следует запускать впоследствии. Но чтобы нам было удобнее вносить изменения в темы wordpress создадим символьную ссылку на документы веб-сервера и изменим пользователя и группу, от чьего имени будет работать сервер: 
# vim /opt/lampp/etc/httpd.conf
ServerRoot "/opt/lampp" # домашний каталог
<IfModule unixd_module>
User username # имя вашего пользователя
Group users   # группа вашего пользователя
</IfModule>
Что же, осталось только скачать последнюю версию самого wordpress и распаковать её в директорию /opt/lampp/htdocs, а затем дать файлам и каталогам необходимые права доступа: 
$ sudo chown -R username:users /opt/lampp/htdocs
$ cd /opt/lampp/htdocs/wordpress
$ find . -type d -exec chmod 755 {} \;
$ find . -type f -exec chmod 644 {} \;
$ ln -s /opt/lampp/htdocs/wordpress /home/username
В примере выше мы изменили владельца директории, создали символьную ссылку дабы не ходить далеко за файлами темы, а также выставили права на все файлы и каталоги:
  • каталоги 755
  • файлы 644
Отлично. После изменения файла конфигурации перезапустите xampp и переходите к установке wordpress, о которой даже нечего говорить в силу её простоты. Собственно, если читатель испытывает затруднения на этом шаге, радостно сообщу: руководств по установке предостаточно, в том числе встречаются они и на этом блоге.

Теоретические основы. Коротко

Чтобы тема корректно отображалась в административной панели, нам потребуется завести несколько файлов:
  • index.php
  • single.php
  • page.php
  • header.php
  • footer.php
  • style.css
  • screenshot.png
  • functions.php
На самом деле было бы достаточно одного файла стилей и индексной страницы, но давайте сразу идти по правильному пути и разделять тему на составные части. wp-partials Коротко о каждом: index.php представляет собой главную страницу сайта. В ней всегда содержится цикл вывода последних записей. Конечно, главная страница вашего ресурса может быть какой угодно (тогда создаётся отдельный шаблон), но шаблон index.php также будет использоваться при выводе всех категорий, всех статей автора и подобных вещей. Это лучше держать в уме. Страница отдельной записи single.php призвана отображать одну публикацию. От page отличается тем, что вторая нужна для вывода статических страниц: страницы контактов, например. header и footer обычно включаются в каждый шаблон каждой страницы, поскольку их содержимое не меняется от одной странице к другой (за редкими исключениями). Также обязательно включать в конец первого вывод <?php wp_head(); ?>, а второго — <?php wp_footer(); ?> во избежание проблем различной степени тяжести (например, если не выводить wp_footer, может не отображаться панель администратора на самом блоге). Стили располагаются в style.css, screenshot.png служит миниатюрой темы при её выборе в админке, а functions.php содержит всю магию: там прописываются пути к стилям, шрифтам и скриптам темы, настройки для виджетов, меню и многих других полезных вещей. На этом предлагается закончить теоретическую часть и перейти к части практической.

Пишем тему для wordpress: практика

functions.php

Начнём с подключения css-файла и библиотеки jquery. В данных ниже примерах mythemename — название вашей темы. 
<?php
/* Enqueue scripts and styles. */
function enqueue_styles() {
    wp_enqueue_style( 'mythemename-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'enqueue_styles');

function register_jquery() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-2.1.3.min.js');
    wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'register_jquery');
Регистрируем поддержку различных «плюшек»: 
<?php
if ( ! function_exists( 'example_setup' ) ) :
/* Sets up theme defaults and registers support for various WordPress features. */
function mythemename_theme_setup() {

    // языковая поддержка
    load_theme_textdomain( 'mythemename', get_template_directory() . '/languages' );
    // фиды для rss-подписки
    add_theme_support( 'automatic-feed-links' );
    // добавление миниатюры поста
    add_theme_support( 'post-thumbnails' );
    // html5 форма поиска, форма и список комментариев
    add_theme_support( 'html5', array(
        'search-form', 'comment-form', 'comment-list',
    ) );
    // какие форматы постов будут поддерживаться
    add_theme_support( 'post-formats', array(
        'aside', 'image', 'video', 'quote', 'link', 'status',
    ) );
}
endif;
add_action( 'after_setup_theme', 'mythemename_theme_setup' );
Если вам понадобится создать меню или виджеты, то об этом также лучше заранее сообщить wordpress’у. Для виджетов можно указать какие элементы выводить до и после виджета и во что заключать его заголовок, ежели таковой имеет место быть. 
<?php
/* Menus */
register_nav_menus(array(
  'main_menu' => __('Navigation Menu'),
  'sidebar_menu' => __('Sidebar Menu')
));

/* Register widget area */
function mythemename_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Widget Area', 'mythemename' ),
        'id'            => 'right-sidebar',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'mythemename' ),
        'before_widget' => '<div class="widget">',
        'before_title'  => '<span class="widget-header">',
        'after_title'   => '</span>',
        'after_widget'  => '</div>',
    ) );
}
add_action( 'widgets_init', 'mythemename_widgets_init' );
Кстати, вы вправе не показывать всему миру версию wordpress, а зарегистрированному пользователю меню управления, когда он находится вне админки. 
<?php
/* Remove information about version of wordpress */
remove_action('wp_head', 'wp_generator');

/* Hide admin bar */
add_filter('show_admin_bar', '__return_false');
Заодно сразу укажем максимально возможное количество символов при выводе excerpt: то есть начала статьи. excerpt Полезно при отображении всех постов на главной. 
<?php
/* Excerpt properties */
function custom_excerpt_length( $length ) {
    return 250;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

style.css

Чтобы wordpress понял и применил стили темы, сам файл, содержащий их, должен находиться в корневой директории темы, называться style.css и заключать в себе особый комментарий. 
/*
Theme Name: MyThemeName
Description: Personal site
Version: 1.0
Tags: responsive, right-sidebar, slider
Theme URI: http://theme.url
Author: authorName
Author URI: http://author.url
*/
Название, описание, версия, метки, адрес темы. Имя и сайт автора темы. Дальше идут сами стили. Обязательное поле одно: имя темы. Остальные можно опустить.

header.php

Стандартное начало любого html-файла. Объявление doctype, вывод язвковых атрибутов в зависимости от выбранного пользователем языка. Далее указание браузеру Internet Explorer использовать самую распоследнюю версию, viewport для адаптивной вёрстки и путь к favicon. Не забываем вставить <?php wp_head(); ?> и выводим пункты меню, пока тоже стандартно. Так, какими их представляет себе wordpress. Изменять вывод будем в следующий раз. 
<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="UTF-8">
    <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,width=device-width">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo("template_directory");?>/favicon.ico">
    <?php wp_head(); ?>
  </head>
  <body>
    <header role="banner">
       <?php wp_nav_menu(); ?>
    </header>

footer.php

Ничего особенного. Копирайт и текущий год, подключение какого-нибудь скрипта из каталога js в директории темы, закрытие html-тегов и вывод wp_footer. 
<footer role="contentinfo">
  <p>&copy; <?php echo date('Y'); ?> <a href="/">mysite_domain</a></p>
</footer>
<script src="<?php bloginfo("template_directory");?>/js/scripts.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>

index.php

К каждому шаблону подключаем шапку и подвал страницы. Если необходимо, включаем в страницу ещё какой-нибудь шаблон при помощи get_template_part и указания пути к нему. Если и пока существуют записи, выводить их все (о постраничной навигации, конечно, будет упомянуто, но не всё сразу). В примере используется микроразметка, на которую в данном контексте можно не обращать внимания. 
<?php get_header(); get_template_part( 'partials/mypartial' ); ?>
<main>
<?php if (have_posts()): while (have_posts()): the_post(); ?>
  <article itemscope itemtype="http://schema.org/Article">
    <h2 itemprop="name"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>
    <?php echo get_the_post_thumbnail( $id, 'large', array('class' => 'wp-post-image') ); ?>
    <?php the_excerpt(); ?>
    <a href="<?php the_permalink(); ?>"><?php __('Read more') ?> &raquo;</a>
  </article>
<?php endwhile; endif; ?>
<?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
После вывода заголовка получаем миниатюру записи и начало статьи (об этом говорилось выше). Закрываем цикл и условие, вставляем сайдбар. Готово.

single.php

Отображение страницы одной записи. По порядку: получаем header, дату публикации, заголовок записи, её миниатюру со средним размером medium, контент и, если для single-страницы разрешены комментарии, то их шаблон будет выведен в самом конце article. 
<?php get_header(); ?>
<main>
<article itemscope itemtype="http://schema.org/Article">
  <time itemprop="datePublished" datetime="<?php echo get_the_date('Y-m-d'); ?>">
    <span class="post-date"><?php echo get_the_date('d-m-Y'); ?></span>
  </time>
  <?php the_post(); ?>
  <h2 itemprop="name"><?php the_title(); ?></h2>
   <?php echo get_the_post_thumbnail( $id, 'medium', array('class' => 'wp-post-image') ); ?>
   <?php the_content(); ?>
   <?php comments_template(); ?>
</article>
<?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
А ещё мы воспользовались тем, что в functions.php добавлена возможность выводить сайдбар, куда добавляются виджеты.

page.php

Ничуть не сложнее выглядит и следующий шаблон. 
<?php get_header(); get_template_part( 'partials/mytemplate' ); ?>
<main>
  <?php if (have_posts()): while (have_posts()): the_post(); ?>
    <article>
      <?php the_title( '<h1>', '</h1>' ); ?>
      <?php the_content(); ?>
    </article>
  <?php endwhile; endif; ?>
  <?php get_sidebar(); ?>
  <?php comments_template(); ?>
 </main>
<?php get_footer(); ?>
Кажется, этот код даже не нуждается в каких бы то ни было пояснениях. В целом это всё, что нужно для создания простейшей темы для wordpress. Не надо ходить ни по каким ресурсам, генерирующим «стандартный» шаблон, где будут использоваться зачастую лишние и, возможно, незнакомые вам функции. Всё можно сделать своими руками и в точности так, как того требует случай. Надеюсь, эта заметка послужит кому-то руководством к действию. И, поскольку, автор этих строк на данный момент занимается как раз таки разработкой сайтов (как достойных, так и не очень: такова жизнь) на указанном движке, надо ожидать, что это не последняя запись с тегом wordpress: здесь ещё появятся заметки-шпаргалки как со стандартными функциями, так и с различными трюками, помогающими изменить стандартный вывод.