Создание темы Вордпресс

Для начинающих! Как создать тему (шаблон) Вордпресс! Не пропустите!

На самом деле, в создании темы для CMS WordPress сверхустрашающесложного (во слово завернул).

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

И далее /wp-content/themes/

В каталоге themes вы увидите как минимум три предустановленные темы, которые идут «из коробки».

Создадим директорию (папку) с названием my-first-theme, и в ней пустой файл style.css.

Почти все. Осталось традиционно поплясать с бубном.

Откроем наш свежесозданный style.css в текстовом редакторе Sublime, и в нем начертаем:

/*
Theme Name: Моя первая тема
Author: Подающий надежды разработчик
Description: Кое какое описание для моей темы
*/

Именно так, со знаками комментирования.

Зайдем в админ панель, раздел Appearance ( Внешний вид ) и увидим там…

Эх, бяда — огорченье

(Домовенок Кузя)

Да… Создаем мы полную, а не дочернюю тему. А стало быть без index.php не обойтись. Что ж, устраним сие недоразумение, созданием требуемого файла. И обновим страницу.

Вот теперь порядок. Я вас поздравляю! Тема создана!

Можно навести на нее курсор и посмотреть о ней более детальную информацию

В ней не хватает только красивой картинки. Но с этим можно справиться следующим образом — закинуть в корень нашей темы файл screenshot.png. Название обязательное! Символ в символ. Расширение тоже. Содержимое любое, какое вам нравиться.

Порадуемся результату наведем на картинку и нажмем кнопку «Активировать».

Перейдем на фронт энд. Да-да, на главную страницу сайта и увидим белое ничего. Это наша тема так работает.

Вдохнем в нее жизнь: создадим файлы header.php и footer.php.

Содержимое файла header.php:


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

 

Содержимое файла footer.php:


</head>
<body>

 

И в файле index.php:


<?php get_header(); ?>
<h1>Страница блога</h1>
<?php get_footer(); ?>

И снова пойдем посмотрим на нашу страницу:

Вот теперь это похоже на тему. Но радоваться рано. Почему?

Взгляните на исходный код страницы CTRL + U. Там голая разметка, и больше ничего.

в файл header.php добавьте: 


wp_head();

а, в файл footer.php: 


wp_footer();

Эти хуки должны быть, иначе будет нарушена работа многих плагинов, которые используют их, чтобы добавить свои коды в <head> и <footer>. Это и стили (styles), скрипты (scripts) и метатеги  Вордпресс. А теперь обновите страницу и снова взгляните на исходный код.

С этим уже можно работать.

Тема готова, можно накидывать верстку.

P.S. А вы думаете я вам вот так все и рассказал? Нет! Тема создана, но она еще ущербна. Но об этом в следующей статье: Создание темы Вордпресс. Подключение шаблонов и стилей.

 

На этом все! Спасибо за внимание!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *