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

  • 28.02.2020 01:26
  • 0
  • 324

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

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

В наших кругах ходит ошибочное мнение, что для того, чтобы создать полноценную тему, хорошо разбираться в программировании. Это неверное суждение. Знания, конечно, нужны. К примеру, нужно хорошо ориентироваться в разметке документов, в стилях и т.д. В зависимости от функциональности темы могут потребоваться знания JS и PHP. Но далеко не всегда. Большинство аффилейтов не выдумывают супер-функции на сайтах. По своей сути их проект – обычные блоки с простейшими темами и легкими доработками (пагинация, хлебные кроши, рейтинги и т.д.).

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

Итак, что нам потребуется для создания шаблона сайта из HTML-документа?

  1. HTML-файлы, в которых находится вся разметка нашего будущего сайта.
  2. Css-файлы (если их несколько)
  3. Картинки, которые использовались при верстке.

Это минимальный набор для того, чтобы из html получить тему WP.

1.      Название темы и прочая мета-информация о ней

Для начала нам потребуется создать папку, где будут размещаться файлы темы. На сервере переходим из корневого каталога в /wp-content/themes. Создаем там директорию MyTheme (я придумал такое название для своей темы). Открываем эту папку.

Дальше следует скопировать с верстки файл style.css (может называться как угодно. Главное – расширение .css) в папку с будущей темой.

Там же создаем файл index.php

Открываем любым редактором style.css. Я использую Sublime Text 3. В самом верху на нужно прописать информацию о будущей теме.

Я написал вот так:

Как создать тему Вордпресс

Theme Name – имя нашей будущей темы

Version – Текущая версия

Description – Краткое описание

Author – Разработчик

Author URI – ссылка на сайт разработчика. Имя автора в админке станет ссылкой.

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

2.      Файл functions.php

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

В базовой версии выглядит он вот так:

Как создать тему Вордпресс

Создается в папке с темой /wp-content/themes/MyTheme.

3.      Файл header.php

Перейдем к созданию файлов, отвечающих за вывод сайта в браузере. Первым создаем header.php, который будет отвечать за отображение верхней части проекта (шапки).

Первое, что нужно сделать – выделить из html код, который выводит шапку. Идем в файлы верстки и выделяем весь код, от первой строки и до конца div с классом header, или до закрывающего тега </header>, или чего-то другого. Я обычно вставляю в header.php и навигацию тоже.

Копируем нужный отрезок кода и вставляем как есть в файл header.php.

Перед тегом </head> пишем

<?php wp_head() ?>.

Вот так получилось у меня:

Как создать тему Вордпресс

Навигация

Обязательно переносим меню. Для этого нужно в файле functions.php написать такой код:

function add_Main_Nav() {

register_nav_menu(‘header-menu’,__( ‘Header Menu’ ));

 

}

add_action( ‘init’, ‘register_my_menu’ );

function register_my_menu() {

register_nav_menu( ‘mobile-menu’, __( ‘Mobile Menu’ ) );

 

}

// Подхватывает (hook) init хук-событие, запускает функцию нашего навигационного меню

add_action( ‘init’, ‘add_Main_Nav’ );

 

 

function add_menu_atts( $atts, $item, $args ) {

$atts[‘itemprop’] = ‘url’;

return $atts;

}

add_filter( ‘nav_menu_link_attributes’, ‘add_menu_atts’, 10, 3 );

Далее в файл header.php в нужном месте вставляем код:

<?php wp_nav_menu( array( ‘header-menu’ => ‘header-menu’ ) ); ?>

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

Как создать Вордпресс тему

Пока что тут все. Переходим к нижней части сайта

4.      Файл footer.php

Создаем в папке с темой /wp-content/themes/MyTheme файл footer.php

Тут нужно проделать то же самое, что и в header.php. Только с нижней частью сайта.

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

Перед закрывающим тегом </body> пишем

<?php wp_footer() ?>

У меня получилось так:

Как создать тему WordPress

5.      index.php – основной файл шаблона

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

После того, как файл появился, выделяем весь код с html-верстки главной страницы и вставляем его в index.php. Только не забудьте, что те фрагменты, которые уже перенесены в header.php и footer.php, сюда вставлять не нужно.

Вот так это выглядит у меня:

Подключим нашу шапку и подвал к index.php:

Для шапки используем код

<?php get_header(); ?>

Для футера (подвала)

<?php get_footer();?>

Теперь можно перейти к проверке. Вводим адрес сайта в браузере и смотрим, что получилось. Пока что все без стилей, их подключим на следующем этапе. Сейчас главное – проверить, подключились ли header.php и footer.php к файлу главной страницы. Если все заработало, переходим с следующему шагу.

Основной цикл

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

У меня цикл выглядит вот так:

<?php get_header(); ?>

<main class=»wrap»>

<section class=»content-area content-thin»>

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

<article class=»article-full» itemscope itemtype=»http://schema.org/Article»>

<header>

<h1 itemprop=»headline»><?php the_title(); ?></h1>

</header>

<div class=»postcontent» itemprop=»articleBody»>

<?php the_content(); ?>

</div>

</article>

<?php endwhile; else : ?>

<article>

<p>Извините, записи не были найдены!</p>

</article>

<?php endif; ?>

</section><?php get_sidebar(); ?>

</main>

<?php get_footer(); ?>

Обратите внимание, что я выложил весь код файла index.php. Сделано это для того, чтобы было видно, куда именно вставлять код цикла.

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

6.      Подключение стилей

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

Открываем header.php и после открывающего тега <head> пишем

<link rel=»stylesheet» href=»<?php echo get_stylesheet_uri() ?>» />

Проверяем. Стили должны заработать.

7.      Перенос картинок

Стили мы подключили. Но теперь остались еще изображения, которые в большинстве случаев присутствуют в любом дизайне. Копируем папку с изображениями из верстки и вставляем в нашу тему.

Далее, нам нужно подключить картинки шаблону. Все изображения, которые реализованы через стили, уже подключились и должны работать. Можно проверить, нажав Ctrl +F5 в браузере.

Если при верстке использовались теги <img> для определенных задач, эти изображения требуется подключить к теме ВП. Делается это следующим образом:

К примеру, у нас есть картинка

<img src=”img/logo.png” alt=”Логотип”>

Для того, чтобы подключить ее к Вордпресс, нужно написать такой код:

<img src=”<?php echo bloginfo(‘template_url’); ?> img/logo.png ” alt=”Логотип”>

Вставка <?php echo bloginfo(‘template_url’); ?> — специальная функция WP, определяющая полный адрес темы.

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

8.      Файл sidebar.php и подключение сайдбара к теме

Sidebar.php будет отвечать у нас за вывод боковой колонки сайта. Для подключения достаточно в соответствующем месте файла index.php написать код

<?php get_sidebar(); ?>

Теперь нужно создать сам файл sidebar.php, добавить в него нужный код из html-шаблона. Мой сайдбар выглядит так:

<?php if ( is_active_sidebar( ‘sidebar’ ) ) : ?>

<aside id=»primary-sidebar» class=»primary-sidebar widget-area» role=»complementary» itemscope itemtype=»http://schema.org/WPSideBar»>

<?php dynamic_sidebar( ‘sidebar’ ); ?>

</aside>

<?php endif; ?>

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

function add_widget_Support() {

register_sidebar( array(

‘name’ => ‘Sidebar’,

‘id’ => ‘sidebar’,

‘before_widget’ => ‘<div>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<span class=”wiget-title”>’,

‘after_title’ => ‘</span>’,

) );

}

Данный код регистрирует в системе новый сайдбар с именем Sidebar и теперь его можно редактировать в админке. Советую всю разметку перенести из файла html в виджеты в админке сайта.

Как создать тему WP

9.      Файлы page.php и single.php

Нам потребуются еще 2 файла:

Page.php – выводит страницу (любую, на самом деле. Зависит от настроек сайта)

Single.php – выводит запись (полную ее версию). То, что Вы сейчас читаете, выводится именно этим файлом.

Я использую одинаковый код для обеих файлов, т.к. не вижу смысла заморачиваться с разным:

<?php get_header(); ?>

<main class=»wrap»>

<section class=»content-area content-full-width»>

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

<article class=»article-full»>

<header>

<h1><?php the_title(); ?></h1>

</header>

<?php the_content(); ?>

</article>

<?php comments_template(); ?>

<?php endwhile;?>

</section>

</main>

<?php get_footer(); ?>

Вот и весь код. Вы, наверное, заметили, что в шаблоне присутствует

<?php comments_template(); ?>

Это функция, которая выводит комментарии под постом. Если в Вашем шаблоне комментарии не предусмотрены, или предусмотрены только в single.php, уберите эту функцию в ненужных местах.

10. Файл archive.php

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

<?php

get_header(); ?>

 

<section id=»primary» class=»content-area»>

<main id=»main» class=»site-main» role=»main»>

 

<?php if ( have_posts() ) : ?>

 

<header class=»page-header»>

<?php

the_archive_title( ‘<h1 class=»page-title»>’, ‘</h1>’ );

the_archive_description( ‘<div class=»taxonomy-description»>’, ‘</div>’ );

?>

</header><!— .page-header —>

 

<?php

// Start the Loop.

while ( have_posts() ) : the_post();

 

/*

* Include the Post-Format-specific template for the content.

* If you want to override this in a child theme, then include a file

* called content-___.php (where ___ is the Post Format name) and that will be used instead.

*/

get_template_part( ‘content’, get_post_format() );

 

// End the loop.

endwhile;

 

// Previous/next page navigation.

the_posts_pagination( array(

‘prev_text’          => __( ‘Previous page’, ‘twentyfifteen’ ),

‘next_text’          => __( ‘Next page’, ‘twentyfifteen’ ),

‘before_page_number’ => ‘<span class=»meta-nav screen-reader-text»>’ . __( ‘Page’, ‘twentyfifteen’ ) . ‘ </span>’,

) );

 

// If no content, include the «No posts found» template.

else :

get_template_part( ‘content’, ‘none’ );

 

endif;

?>

 

</main><!— .site-main —>

</section><!— .content-area —>

 

<?php get_footer(); ?>

11. Файл 404.php

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

Примерно такой код у меня получился:

<?php get_header(); ?>

<main class=»wrap»>

<section class=»content-area content-thin»>

<article class=»article-full»>

<header>

<h2>Страница не найдена</h2>

</header>

<p>К сожалению, запрашиваемая страница не найдена</p>

<p>Предлагаем Вам ознакомиться с другими материалами на нашем сайте:</p>

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

<article class=»article-loop»>

<header>

<p><a href=»<?php the_permalink(); ?>» title=»<?php the_title_attribute(); ?>»><?php the_title(); ?></a></p>

</header>

<?php the_excerpt(); ?>

</article>

<?php endwhile; else : ?>

<article>

<p>Извините, записи не были найдены!</p>

</article>

<?php endif; ?>

<p>Вы также можете перейти на <a href=»<?php echo get_home_url(); ?>»>главную страницу</a></p>

</article>

</section>

<?php get_sidebar(); ?>

</main>

<?php get_footer(); ?>

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

12. comments.php

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

<?php if (comments_open()) { ?>

<h3 class=»comments-caption»><?php comments_number(‘Комментарии’, ‘1 комментарий’, ‘% комментариев’); ?> читателей</h3>

<?php if (get_comments_number() == 0) { ?>

<ul class=»list»>

<li>Оставьте первый комментарий — автор старался</li>

</ul>

<?php } else { ?>

<ol class=»commentlist»>

<?php

function verstaka_comment($comment, $args, $depth){

$GLOBALS[‘comment’] = $comment; ?>

<li <?php comment_class(); ?> id=»li-comment-<?php comment_ID() ?>»>

<div id=»comment-<?php comment_ID(); ?>»>

<div class=»comment-author vcard»>

<div class=»comment-meta commentmetadata» style=»float: right;»>

<span itemprop=»datePublished»><?php printf(__(‘%1$s %2$s’), get_comment_date(‘Y-m-d’),  get_comment_time(‘h:i:s’)) ?></span>

</div>

<?php echo get_avatar($comment,$size=’74’,$default='<path_to_url>’ ); ?>

<?php printf(__(‘<cite class=»fn» itemprop=»creator»>%s</cite> <span class=»says»>пишет:</span>’), get_comment_author_link()) ?>

</div>

<?php if ($comment->comment_approved == ‘0’) : ?>

<em><?php _e(‘Your comment is awaiting moderation.’) ?></em>

<br>

<?php endif; ?>

<span itemprop=»text»>

<?php comment_text() ?>

</span>

<div class=»reply»>

<?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>

</div>

</div>

<?php }

$args = array(

‘reply_text’ => ‘Ответить’,

‘callback’ => ‘verstaka_comment’

);

wp_list_comments($args);

?>

</ol>

<?php } ?>

 

<?php

$fields = array(

‘author’ => ‘<p class=»comment-form-author»><label for=»author»>’ . __( ‘Name’ ) . ($req ? ‘<span class=»required»>*</span>’ : ») . ‘</label><br><input type=»text» id=»author» name=»author» class=»author» value=»‘ . esc_attr($commenter[‘comment_author’]) . ‘» placeholder=»» pattern=»[A-Za-zА-Яа-я]{3,}» maxlength=»30″ autocomplete=»on» tabindex=»1″ required’ . $aria_req . ‘></p>’,

’email’ => ‘<p class=»comment-form-email»><label for=»email»>’ . __( ‘Email’) . ($req ? ‘<span class=»required»>*</span>’ : ») . ‘</label><br><input type=»email» id=»email» name=»email» class=»email» value=»‘ . esc_attr($commenter[‘comment_author_email’]) . ‘» placeholder=»example@example.com» maxlength=»30″ autocomplete=»on» tabindex=»2″ required’ . $aria_req . ‘></p>’,

);

 

$args = array(

‘comment_notes_after’ => »,

‘comment_field’ => ‘<p class=»comment-form-comment»><label for=»comment»>’ . _x( ‘Комментарий:’, ‘noun’ ) . ‘</label><br><textarea id=»comment» name=»comment» class=»comment-form» cols=»45″ rows=»8″ aria-required=»true» placeholder=»Текст сообщения…»></textarea></p>’,

‘label_submit’ => ‘Отправить’,

‘fields’ => apply_filters(‘comment_form_default_fields’, $fields)

);

comment_form($args);

?>

<?php } else { ?>

<h3>Обсуждения закрыты для данной страницы</h3>

<?php }

?>

Полезные советы

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

Минимизируйте CSS

Не секрет, что верстальщики не экономят на коде. Простая страница может быть описана тысячей строк кода. Это нехорошо, особенно когда стилей действительно много.

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

Также можно применять технологию обфускации. К примеру, имеем такие стили:

p {text-align:center;}

div.desc {text-align:center;}

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

p, div.desc {text-align:center;}

Очевидно, что второй вариант – более компактный. А значит, более быстрый.

Минимизируйте плагины

Я ставлю только плагин для SEO и все. Весь остальной функционал у меня написан вручную. Это

  • Хлебные крошки
  • Пагинация
  • Слайдеры, галереи.
  • Рейтинги постов и прочего контента
  • Плюсы и минусы чего-либо. Например, аффилейты часто используют подобный функционал в обзорах казино.

Сразу же внедряйте микроразметку

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

Делайте тему для Вордпресса адаптивной

В 2020 году около 70% мирового трафика приходится на мобильные устройства. Глупо терять такое количество посетителей, если можно адаптировать свой проект для всех устройств и пожинать плоды труда в виде растущей посещаемости.

После создания темы проверьте валидность и кроссбраузерность

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

Надеюсь, рассказал все понятно и вопросов не возникнет. Но, если Вам что-то показалось непонятным, или нашли неточность – пишите в комментарии, все расскажу и объясню.

Комментарии (0)
Чтобы оставить комментарий, необходимо войти на сайт
Войти
Последние комментарии
Big Affiliate
Привет. Шаблон довольно старый, возможно он уже не совместим с текущими версиями вордпресса.
Выбрал для себя на Mostbet Partners гибридную схему. Мало кто сегодня предлагает такое преимущество. Считаю, что CPA+RS дает максимальный выхлоп. Выгода очевидна, если действовать с умом. ПП предлагает хорошее гео и минималку на вывод от 50 баксов.
Привет. Установила шаблон BCL но он не заработал, на сайте ни чего не отображается. Я в этом деле новичок, вы могли бы помочь разобраться
Пользователи