Из HTML в WordPress за 10 минут

Из HTML в WordPress за 10 минут
WordPress 0    51748 0

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

Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:

1

Заходим в админ. панель WordPress

2

Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson» ➜ Жмем кнопку «Установить» ➜ Активируем плагин. Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.

Плагин Unyson для WordPress
3

Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-contentthemes и создаем папку с названием нашей новой темы «truestory»

4

Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.

header
5

Открываем файл header.php в стандартной теме WordPress ➜ «twentyfifteen» и смотрим, как там всё устроено. Правим по аналогии файл header.php из нашей темы, копируем в неё стандартные php вставки, вплоть до вставок wp_head и body_class. Пути к стилям тоже не забываем подправить. Что касается картинки логотипа, то её путь мы сейчас не можем вывести динамично, так как у нас ещё нет таких настроек в админке WP. Давайте исправим эту ситуацию прямо сейчас.

6

В корне нашей темы создаем папку framework-customizations в ней подпапку theme, а в ней ещё одну подпапку options. Уже в папке options создаем файлик settings.php. Вписываем в этот файл вот такой php код:

if( !defined('FM') ) die('Silence is golden');

$options = array(
        'logo_image' => array(
        'type' => 'upload',
        'label' => __('Logo','truestory'),
        'images_only' => true
    )
);
7

Дальше нам надо активировать саму тему, но сейчас она попросту не обнаруживается WP в разделе «Внешний вид». Чтобы это исправить создаем файлик style.css в корне нашей темы и вписываем туда простой css комментарий вот такого вида:

/*
Theme Name: True Story
*/
8

Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать». После этого в разделе «Внешний вид» появится пункт «Настройки темы». Теперь туда можно загружать логотип.

9

В файле header.php можно вывести логотип вот таким образом:

echo fw_get_db_settings_option('logo-image')['url'];
вывести логотип wordpress
10

Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.

register_nav_menus(array(
	'primary' => __('Primary Menu', 'truestory')
));

add_theme_support('post-thumbnails');
set_post_thumbnail_size(360, 500, true);
11

Открываем файл sidebar.php из темы «twentyfifteen» и копируем вывод меню для нашей шапки. На этом с ней будет покончено.

wp_nav_menu( array(
	'theme_location' => 'social',
	'depth'			 => 1,
	'link_before'	 => '',
	'link_after' 	 => '',
) );
вывод меню на вордпресс
12

Смотрим, как реализован index.php у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.

13

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

Вывод списка категорий на WordPress:

echo '
    '; wp_list_categories( $args ); echo '
';

Вывод даты публикации на WordPress:

the_date();
14

Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных. При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню. Осталось совсем немного, а именно подрубить footer и сделать страницу просмотра всей статьи.

15

В файл footer.php переносим закрывающий тег body из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:

get_footer();
16

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

На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.


Для наглядности посмотрите видео версию урока от «Хауди Хо»

Заказать натяжку сайта на WordPress


Поделиться с друзьями


Комментарии ()

  1. Александр Матейко 28 октября 2019, 22:48 # 0
    Добрый день!
    Спасибо за материал. Есть только одно небольшое «но». При всем желании это далеко не 10 минут)
    1. Алексей Власов 28 октября 2019, 22:56 # 0
      Добрый =)
      Спасибо за комментарий! Если написать не 10 минут, а 10 часов, то у всех желание отпадет что-то делать)
      1. Денис Разговорников 11 февраля 2020, 16:15 # 0
        Но это явная ложь (про 10 минут), обман пользователей, введение в заблуждение. Так тоже нельзя. Даже мне, true php-разработчику необходимо не менее полдня, чтобы разобраться с функциональностью WP и натянуть простейший html-шаблон.
    2. Сергей Желещенко 13 сентября 2020, 14:58 # 0
      Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать». После этого в разделе «Внешний вид» появится пункт «Настройки темы». Теперь туда можно загружать логотип.Как бы не так. У меня появилась пустая страница с текстом Silence is golden.

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

      Вы можете авторизоваться на сайте через:
      YandexVkontakte
      Требуется программист