Введение
Тема сайта представляет собой набор различных файлов кода, стилей, разметки и медиа файлов.
Изначально после установки WordPress пользователям доступно несколько предустановленных тем: twentyfifteen, twentyfourteen и twentythirteen. Данные темы предназначены лишь для ознакомления и дают пользователю пример кода, который можно использовать для создания своей собственной темы.
Тема в WordPress позволяет изменять не только вид сайта, но и расширять функциональность панели администратора, благодаря чему управлять сайтом становится гораздо удобнее.
Создание первых файлов темы
Каждая новая тема должна располагаться в отдельной директории yoursite.ru/www/wp-content/themes/theme_name.
В каталоге темы обязательно должны быть как минимум два файла: index.php и style.css
Файл index.php нужен для первоначального функционирования сайта и содержать его разметку и код.
Содержание файла index.php часто не столь важно, т.к. для создания серьезной темы требуется куда более сложная организация файлов.
Файл style.css хранит в себе метаданные темы (название, имя автора и т.п.) и основные стили сайта.
Далее создадим тему с именем travelblog.
Сначала в корне сайта создаем директорию с именем темы.
md /var/www/example.ru/www/wp-content/themes/travelblogДалее в директории темы создаем файлы index.php и style.css.
touch index.php style.cssВ файле index.php укажем простейшую разметку и отображение имеющихся у нас постов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Блог о путешествиях</title> </head> <body> <h1>Заметки путешественника</h1> <?php // Если в нашем блоге имеются посты, то выводим их поочередно. if(have_posts()){ while (have_posts()) { the_post(); ?> <div> <h2> <!-- Выводим адрес и заголовок поста --> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> </div> <?php } // конец while(have_posts()) } else { echo "Данный раздел находится в разработке."; } // конец if(have_posts()) ?> </body> </html> |
В файле style.css в самом начале укажем некоторые метаданные о нашей теме. Метаданные необходимо поместить в многострочный комментарий.
|
1 2 3 4 5 6 7 8 9 |
/* Theme name: Блог о путешествиях Author: Олег Пальшин Author URI: https://meliorem.ru Description: Тема для блога о путешествия. Version: 1.0 Tags: Блог, Путешествия, Custom theme, Flexible layout Text Domain: travelblog */ |
Теперь нам нужно добавить превью-изображение для нашей темы. Создайте любое изображение отражающее суть вашей темы и задайте ему имя screenshot. Разместите файл с изображением в корне темы.
Для большей эстетики, рекомендуется делать превью-изображения в соотношении сторон 4:3.
Теперь когда мы зайдем в админ панели Внешний вид > Темы, то мы увидим превью-изображение и все метаданные нашей темы, здесь же мы можем ее активировать.
При нажатии на кнопку Информация о теме, можно увидеть все введенные метаданные из файла style.css.
После активации темы, на сайте мы сможем увидеть главную страницу index.php.
