Создание темы для WordPress с нуля

Создание темы для WordPress

Всем привет! Сегодня наш первый обучающий урок по созданию темы для WordPress с нуля, скорее всего урок будет разбит на несколько постов так, как это очень обширная тема и советую разобраться со всем детально, чем мы и займемся. Первым делом разберемся где находятся стандартные темы в WordPress потом мы разберем структуру папки с темой и загрузим ее в WordPress. Следующим шагом будет создание элементарного скелета сайта и подключение каскадной таблицы стилей (css), далее подключим жизненно необходимые функции WordPress. Напомню в предыдущих уроках мы уже рассмотрели как устанавливать локальный веб-сервер XAMPP и как установить WordPress на локальный веб-сервер.

Стандартные темы WordPress

После установки движка WordPress мы сразу же увидим стартовую страницу, на которой будет установлена стандартная тема, также в консоле имеется еще несколько стандартных тем, все они расположены в папке \wp-content\themes\. Да их можно использовать, но не всем они нравятся, хочется чем-то отличиться от остальных, хочется чего-то уникального, красивого, нового,  и более оптимизированного под поисковые системы. Конечно можно использовать сторонние бесплатные темы, но если захочется что-то изменить, то новичку будет сложно разобраться где и что находится, и почему так. Поэтому советую создать свою собственную тему, тогда у Вас будет четкое понимание, вы будите знать свою тему до мелочей и изменить ее не составит труда.

Создание папки под новую тему для WordPress

Для создания собственной темы необходимо на локальном сервер XAMPP в папке C:\xampp\htdocs\имя папки виртуального хоста\wp-content\themes\ создать новую папку с именем темы, имя указываем латиницей, например назовем ее wp_ninja_it.

Создание новой папки для темы
Создаем папку wp_ninja_it под тему

Структура папки с темой

Любая тема должна обязательно содержать два файла, это index.php и style.css в противном случае движок WordPress будет выдавать нам предупреждение о поврежденной теме, поэтому создаем два файла в папке с темой, у меня это папка wp_ninja_it.

Создание файлов index.php и style.css
Создание обязательных файлов index.php и style.css

Файл index.php содержит основную разметку страницы. Для начала вся верстка будет располагаться в этом файле, а в дальнейшем мы перенесем шапку и подвал сайта в отдельный файл, дальше объясню зачем это делается. Файл style.css — отвечает за визуальное оформление страницы т.е. какой шрифт будет использоваться, цвет, выравнивание блоков и т.д, все это будет находиться в style.css.

Создание элементарной разметки, подключение хуков wp_head и wp_footer

На предыдущем шаге мы создали два файла index.php и style.css, но они пустые, следовательно, у нас нет никакой разметки и визуального оформления. Создадим элементарную статическую разметку на html5, для этого открываем файл index.php любым текстовым редактором желательно с подсветкой кода, например Sublime Text 3 и пишем следующее содержимое.

Создание элементарной разметки
Создание разметки и подключение style.css

Прошу обратить внимание, что css подключено не совсем правильно, в следующих постах мы изменим это. Также сразу прописал обязательные хуки — это wp_head(); который прописывается перед закрывающимся тегом </head> и wp_footer(); прописывается перед закрывающимся тегом </body> необходимы они для правильной работы плагинов.

Добавление стилей в style.css

Далее открываем style.css, и в самом начале обязательно добавляем метаданные и описание темы (текст выделенный жирным необходимо заменить на свой)

/*Theme Name:Название темы
Version:Версия 
Description:Описание для темы 
Author:Автор 
Author URI:URI на сайт автора
*/

Теперь сразу ниже пропишем синий цвет фона для нашей страницы, тем самым мы проверим работает ли наш style.css
background: {color:blue;}

Сохраняем и закрываем файл.

Заходим в консоль нашего сайта, открываем Внешний вид -> Темы. Если все сделали правильно, то там должна появиться Ваша тема, если есть какие-то ошибки, то WP сообщит Вам о них.

Добавляем картинку для темы

Как видим наша тема без картинки исправить это очень легко, для этого в папку с темой в нашем случае это NINJA-IT необходимо сохранить картинку с разрешением 1200px на 900px и названием screenshot.jpg. Обновляем страничку и видим, что картинка появилась.

Добавление картинки для темы
Добавляем картинку для темы

Подведем небольшой вывод, сегодня мы создали с Вами папку со своей темой, познакомились с самыми необходимыми файлами для темы, создали самую простую разметку страницы и ее визуальное оформление, а также подключили хуки wp_head и wp_footer. Самое простое сделали, дальше будет только интереснее. В следующих своих уроках я буду предполагать, что у вас есть базовые знания html и css, без этого ни как … Если у вас возникли вопросы, прошу задавать их в комментариях, постараюсь помочь всем.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

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