Створення власної теми для WordPress

В матеріалі мова піде про створення теми для WordPress. Це саме той мінімум, який дасть розуміння структури WordPress та дозволить рухатись далі.

Одна з переваг вордпресу полягає в тому, що для створення теми потрібно лиш кілька операцій:

  • створити директорію з темою
  • створити файл зі стилями: style.css;
  • створити базовий файл з кодом: index.php;
  • підключити тему.

Тепер спробуємо це на практиці. Для початку запускаємо наш віртуальний сервер, та відкриваємо сайт, який ми встановили раніше. Паралельно відкриваємо файли вордпресу.

Сьогодні ми працюємо з темами, отже переходимо в wp-content — themes. Загалом в мене виходить ось така адреса:

Z:\home\test1.ru\www\wp-content\themes

theme_create01

Створюємо директорію майбутньої теми. У мене це: itmoms. В ній з допомогою звичайного редактора-блокноту створюємо style.css. Зверніть увагу, що всі літери маленькі, а також зауважте, що ми виставили кодування UTF-8 — це важливо.

theme_create02

Аналогічно ми створюємо і документ index.php. Зверніть увагу на вкладку “тип файла“. Ця вкладка виставлена неправильно — мусите замінити на “всі файли” як це виставлено на попередньому скріншоті, інакше редактор збереже як звичайний текстовий документ…

theme_create03

style.css

Переходимо до наповнення. Для того, щоб система бачила наші файли як рідні, документ стилю повинен мати такі заголовки:

/*

Theme Name: ItMoms

Author: My nicname

Description: The 2016 simplest theme for WordPress.

Version: 1.0 License: GNU General Public License v2 or later License

URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: test

Text Domain: test1.ru

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

*/

theme_create04

index.php

Тепер переходимо до тіла шаблону. Починаємо зі стандартного коду, де вказуємо шаблон та версію:

<?php
  /**
  * Файл Index.php
  *
  *
  * виводить контент матеріалів на на WordPress
  *
  * @package WordPress
  * @subpackage ITmoms
  * @since ITmoms Site 1.0
  */
  ?>

Після цього вказуємо характерну для веб-сторінки титульну інформацію. В основному це параметри для браузера.

 

<!DOCTYPE html>

<!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<meta name="viewport" content="width=device-width">

<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<link rel='stylesheet' id='main-style' href='<?php echo get_stylesheet_uri(); ?>' type='text/css' media='all' />

<?php wp_head(); ?>

</head>

Тут варто звернути увагу на хук wp_head. Це константа, яка відповідає за вивід титульної інформації більшості плагінів — на забудьте про неї. Як ви могли здогадатись блок: <title><?php wp_title( ‘|’, true, ‘right’ ); ?></title> відповідатиме за вивід титулу нашого сайту.

На цьому етапі ми вже можемо бачити плоди нашої праці. Як ви помітили, ми вказали назву теми: ItMoms. Відтак, якщо зайти в адмінку — вигляд — теми (аьо ввести адресу: /wp-admin/themes.php), то можна побачити наше творіння серед списку шаблонів.

theme_create05

Якщо зараз активувати тему, то на лицевій частині ми матимемо білу сторінку. Давайте продовжимо наповнення шаблону.

theme_create06

Переходимо до інформації, яку ми зможемо візуалізувати. Для початку вставляємо тег тіла шаблону з прив’язкою до класу:

<body <?php body_class(); ?>>

Наступний блок виведе шапку сайту. Зверніть увагу, що с-поміж верстки сайту вставлені системні константи:

<div id="page" class="hfeed site">

<!-- Шапка -->

<header id="masthead" class="site-header" role="banner">

<!-- Назва проекту --> <h1 class="site-title">

<a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

<!-- Меню --> <nav id="primary-navigation" class="site-navigation" role="navigation">
 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 </nav>

</header><!-- #masthead -->

 

Контент сайту виводиться за допомогою циклу. Вставляючи константи всередину цього циклу ми зможемо виводити потрібні для нас записи.

<?php while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

Вставляємо всередину циклу блок тіла матеріалу. Як Ви вже здогадались константа the_ID() видає нам номер матеріалу:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

</article><!-- #post -->

Має вийти щось подібне як на скріншоті:

theme_create07

В цей блок матеріалу вставляємо вивід назви статті. Умовний вираз розрахований на список в категорії, тоді назва є лінком, а також на індивідуальний матеріал — чистий заголовок.

<?php if ( is_single() || is_sticky() ) : ?> 

<h1 class="entry-title"><?php the_title(); ?></h1> 

<?php else : ?> 

<h1 class="entry-title"> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a> </h1> 

<?php endif; ?>

І остання складова нашого простого шаблону — контент матеріалу. Тут також є умовний вираз, який розрахований на вивід часткового та повного контенту.

<?php

 if ( is_search() ) :?> 

<div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> 

<?php else : ?> 

<div class="entry-content"> <?php the_content( __( 'читати далі.. <span class="meta-nav">→</span>') ); ?> 

</div><!-- .entry-content -->

<?php endif; ?>

Відтак, ми з вами сформували простий шаблон з:

  • виводом назви сайту;
  • навігацією;
  • виводом матеріалів у списку;
  • виводом детальної частини матеріалу.

Цього набору достатньо для створення найпростішого сайту. Залишається лише прикрутити стилі та наповнити ресурс інформацією. В наступних матеріалах поговоримо про більш розширені функції та установку плагінів.

theme_create09

В цілях навчання рекомендую пройти самостійно увесь урок. Проте, якщо у Вас щось не клеїться — ось робочий варіант найпростішої теми вордпресу.

5 коментарів для “Створення власної теми для WordPress”

  1. “до речі – а чи є велике значення, чи лапки подвійні/ординарні?”
    Відповідаю: принципового значення немає. Проте, лапка має бути закритою лапкою такого ж типу: тобто подвійна подвійною, а одинарна одинарною.

  2. Приві, хочу спитати ще до завдання, яке робили в бібліотеці.
    Я роблю його вдома, бо не мала ноута.
    Отож вставила http://test1.ru/ – вийшло таке меню,
    вертикальне.
    А коли добавила відповідний блок CSS –
    то залишилася лише головна сторінка, а решту пунктів меню не видно й вони не стали горизонтально, як на УП сайті.
    Не можу тут вставити прінтскрін, щоб показати, як виглядає.

      1. Завантажив Ваш шаблон та розпакував в себе не локалці. Мушу сказати, що ніяких проблем не помітив — ось що в мене вийшло.

        Можливо у вас проблеми з браузерним кешем. Щоб переконатись чи це так відкрийте ваш демо сайт та натисніть CTRL+F5 (можна кілька разів). Це очистить кеш браузера та допоможе відображати останні зміни в .css документі.

Залишити відповідь