Создание темы на WP. (Пошаговая инструкция)

Шаг №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.






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

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