Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут.
На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.
Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:
1
Заходим в админ. панель WordPress
2
Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson» ➜ Жмем кнопку «Установить» ➜ Активируем плагин.
Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.
3
Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-content ➜ themes и создаем папку с названием нашей новой темы «truestory»
4
Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.
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'];
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, которые потом продают.