Шаг №1. Создать папку с названием темы в директории /wp-content/themes/ вашего сайта.
Я, обычно, создаю эту папку через visual studio code на локальном сервере и потом работаю с этой папкой в vscode. В качестве локального сервера использую openserver.
Видеоуроки по установке локального сервера и по установке wordpress на локальный сервер можно найти на ютубе.
Шаг №2. Создание файлов темы.
Для того, чтобы тема появилась в списке тем, достаточно в папке с темой создать файл index.php.
Для того, чтобы отобразить информацию о теме надо в файле style.css прописать следующий код:
/* Theme Name: My Theme Description: My First Theme Author: Sergey Deleu */
Полный список параметров файла style.css можно посмотреть здесь…
Шаг 3. Превью темы. Чтобы установить превью темы надо картинку с названием Screenshot.png поместить в папку с темой.
Шаг 4. Прописывем мнимальный код в файле index.php. Чтобы быстро создать минимальный код в файле index.php нужно поставить восклицательный знак и нажать кнопку таб. Редактор сразу отобразит следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Шаг 5. Обычно структура сайта разбивается на части, записывается в отдельные файлы, которые подключаются в файле index.php.
Создадим основные файлы темы: header.php, sidebar.php, footer.php, style.css и functions.php.
Шаг 6. Перенесем часть кода из файла index.php в файл header.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Отавшийся код перенесем в файл footer.php:
</body> </html>
Шаг 7. Подключим стили к нашей теме. Для этого пропишем между тегами <head> следующий код:
<link rel="stylesheet" href="<? php bloginfo('stylesheet_url');?>">
Этот код подключает к нашей теме файл style.css.
Теперь код в файле header.php выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="<? php bloginfo('stylesheet_url');?>">
</head>
<body>
Шаг 8. Создадим слой <wrapper> для основного контента после тега <body>:
<div class="wrapper">
<header>
<h1>Header</h1>
</header>
Шаг 9. В файле index.php подключим файлы header.php, sidebar.php, footer.php и виведем посты:
<php get_header(); ?>
<main>
<div class="content">
<h1>Main Content</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('more...)')); ?></p>
<hr><?php endwhile;else: ?>
<p><?php _e('Sorry, no posts'); ?></p> <?php endif; ?>
</div>
<?php get_sidebar(); ?>
</main>
<div class="delimetr"></div>
<?php get_footer(); ?>
Шаг 10. В файле sidebar.php выведем категории и архивы:
<div class="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('
sort_column=name&optioncount=1&hirarchial=0'); ?>
</ul>
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
В файле footer.php создадим слой footer и закроем wrapper:
<footer>
<h1>Footer</h1>
</footer>
</div>
</body>
</html>
Шаг 11. Зададим стили страницы:
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
background: green;
padding: 40px;
}
main{
display: flex;
justify-content: center;
height: 60vh;
}
footer{
background: red;
padding: 40px;
}
В итоге, наш сайт будет выглядеть так:
Здесь предствлена вестка простого макета для общего понимания, как строится тема сайта на WP.
