Теперь, когда базовые файлы темы созданы, переходим к созданию HTML-структуры, которая будет определять внешний вид вашего сайта. HTML-структура является основой, на которой строится весь контент. Разделим этот шаг на несколько подзадач и предоставим примеры кода для лучшего понимания.
1. Определение основной HTML-структуры:
Откройте файлindex.phpи добавьте следующую базовую HTML-структуру внутрь функцииthe_content():
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php echo get_bloginfo('name'); ?></title> <?php wp_head(); // Подключение стилей и скриптов WordPress ?></head><body <?php body_class(); // Добавление классов к body ?>> <header> <h1><?php echo get_bloginfo('name'); ?></h1> <nav> <?php // Подключение пользовательского меню wp_nav_menu(array( 'theme_location' => 'main-menu', 'container' => 'ul', )); ?> </nav> </header> <main>Этот код устанавливает основные мета-теги, заголовок страницы и подключает необходимые стили и скрипты WordPress. Заголовок и навигацию будем дорабатывать далее.
2. Добавление цикла WordPress для контента:
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); // Добавление классов к посту ?>> <h2><?php the_title(); // Заголовок поста ?></h2> <div class="post-content"> <?php the_content(); // Контент поста ?> </div> </article> <?php endwhile; ?> <?php endif; ?>Этот код использует цикл WordPress для отображения контента постов. Он выводит заголовок и содержимое каждого поста.
3. Закрытие основной HTML-структуры:
</main> <footer> <p>© <?php echo date('Y'); ?> <?php echo get_bloginfo('name'); ?></p> </footer> <?php wp_footer(); // Подключение скриптов WordPress ?></body></html>Этот фрагмент кода закрывает основную HTML-структуру, добавляет футер и подключает необходимые скрипты WordPress.
4. Добавление пользовательских стилей:
В файлеstyle.cssвы можете стилизовать вашу HTML-структуру. Например, чтобы добавить стили для заголовка:
h1 { color: #333; font-size: 28px;}Эти шаги создают основу HTML-структуры вашей темы. По мере развития проекта, вы можете дорабатывать и дополнять эту структуру, чтобы соответствовать вашему дизайну и функциональности. Продолжайте следить за последующими шагами, чтобы улучшать и адаптировать вашу тему в WordPress.
Написать комментарий