Создание первой темы Wordpress

Статьи 14.07.2022 (обновлено)

Перевод официальной документации по созданию своей первой темы на системе управления контентом WordPress.

Требуемые файлы

Как уже упоминалось ранее в разделе «Что такое тема», единственные файлы, необходимые для работы темы WordPress из коробки, — это файл index.php для отображения списка постов и файл style.css для оформления содержимого.

Когда вы перейдете на более продвинутый уровень разработки и ваши темы станут более объемными и сложными, вам будет проще разбить вашу тему на множество отдельных файлов (называемых файлами шаблонов). Например, большинство тем WordPress также включают в себя:

  • header.php
  • index.php
  • sidebar.php
  • footer.php

Мы рассмотрим создание отдельных файлов позже в этом руководстве, а пока давайте запустим вашу первую тему!

Примечание. Следующие шаги предполагают, что вы уже настроили среду разработки.

Шаг 1. Создание папки с темой

Сначала создайте новую папку на своем компьютере и назовите ее, например, my-first-theme. В неё будут помещены все файлы вашей темы.

Создание первой темы Wordpress

Шаг 2. Создание файла style.css

Вы можете использовать любой базовый текстовый редактор на вашем компьютере для создания нового файла style.css.

Если вы работаете на компьютере под управлением Windows, используйте Notepad (Блокнот), а если на Mac — TextEdit.

Скопируйте и вставьте следующий код в только что созданный файл style.css:

/*
Theme Name: My First WordPress Theme
*/
 
body {
background: #21759b;
}

Шаг 3. Создание файла index.php

Теперь создайте файл с именем index.php и поместите его в папку вашей темы, добавив в него следующий код:

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<h3><?php the_title(); ?></h3>
 
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
 
<?php endwhile; ?>
 
<?php
if ( get_next_posts_link() ) {
next_posts_link();
}
?>
<?php
if ( get_previous_posts_link() ) {
previous_posts_link();
}
?>
 
<?php else: ?>
 
<p>No posts found. :(</p>
 
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>

Шаг 4. Устанавливаем тему

Скопируйте вашу новую тему в папку wp-content/themes в вашей среде разработки и активируйте ее для просмотра и тестирования.

Шаг 5. Активация темы

Теперь, когда вы установили тему, перейдите в Admin -> Appearance -> Themes, чтобы активировать ее.

Создание первой темы Wordpress

Разрешенные теги для темы WordPress

При создании темы WordPress в файле стилей style.css мы можем добавить определенные теги описания темы, но добавлять можно не любые теги, а только определенные.

Ниже приведу список тегов, а затем немного поясню, что и зачем.

{"Layout":["grid-layout","one-column","two-columns","three-columns","four-columns","left-sidebar","right-sidebar","wide-blocks"],"Features":["accessibility-ready","block-patterns","block-styles","buddypress","custom-background","custom-colors","custom-header","custom-logo","custom-menu","editor-style","featured-image-header","featured-images","flexible-header","footer-widgets","front-page-post-form","full-site-editing","full-width-template","microformats","post-formats","rtl-language-support","sticky-post","template-editing","theme-options","threaded-comments","translation-ready"],"Subject":["blog","e-commerce","education","entertainment","food-and-drink","holiday","news","photography","portfolio"]}

Впервые я столкнулся с этим при создании первой темы. WordPress выдал мне предупреждение: «Found wrong tag, remove from your style.css header».

Оказалось, что я не могу использовать теги типа Javascript или Bootstrap. Мне пришлось удалить данные теги и в файле стилей темы я оставил только:

Tags: blog, news

Мне было достаточно этих тегов, но вам может понадобиться больше тегов и тогда придется воспользоваться списком разрешенных тегов выше.

Список тегов можно найти на сайте WordPress — https://api.wordpress.org/themes/info/1.1/?action=feature_list.

Использование вашей первой темы

Поздравляем — вы только что создали свою первую тему WordPress!

Если вы активируете вашу новую тему и просмотрите ее в браузере, вы должны увидеть что-то вроде этого:

Создание первой темы Wordpress
Так выглядит ваша первая тема во фронтенде

Ладно, это не самая красивая тема, но это отличное начало!

Чему мы научились?

Хотя вашей первой теме может не хватать функциональности и элементов дизайна, которые есть в других темах, основные строительные блоки темы WordPress, которые мы только что создали выше, все те же.

Помните, что главное здесь — не зацикливаться на том, как все эти другие штуки делаются сейчас, а понять основные принципы создания тем WordPress, которые выдержат испытание временем, независимо от того, как меняется код или структура файлов шаблона со временем.

Все веб-сайты, независимо от того, как они создаются, нуждаются в общих элементах: заголовках, основных областях содержания, меню, боковых панелях, нижних колонтитулах и тому подобном. Вы поймете, что создание тем WordPress — это еще один способ создания сайта.

Начиная с этой базовой темы, вы начнете изучать строительные блоки, из которых можно создать более сложную тему.

Далее

В следующих уроках мы углубимся в темы и обсудим шаблоны и другие файлы, из которых состоит большинство тем, а также PHP, используемый для создания динамических тем, в том числе:

  • теги шаблонов,
  • циклы,
  • функции темы,
  • условные теги,
  • и многое другое

Сергей Ермилов
Опубликовано 14.06.2022
Категория: Статьи
Теги:
Источник

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

Ваш адрес email не будет опубликован.