Copyright © 2020 — 2025
Автор темы оформления и сайта: Ведерников С.Н.
Создание темы WordPress в сетке (grid) требует определенных знаний в разработке. Ниже приведен пример базовой структуры темы с использованием HTML, CSS и PHP. Эта тема будет включать главную страницу, страницы, записи, пагинацию и кнопки навигации. Мы будем использовать три колонки для отображения записей.
Шаг 1: Создание структуры файлов темы
Создайте папку для вашей темы в директории wp-content/themes/. Назовем ее, например, my-grid-theme. Внутри этой папки создайте следующие файлы:
— style.css
— index.php
— functions.php
— header.php
— footer.php
— page.php
— single.php
Шаг 2: Заполнение файлов
1. style.css
/*
Theme Name: My Grid Theme
Description: A simple grid layout theme for WordPress
Version: 1.0
Author: Your Name
*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header, .footer {
background: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.container {
width: 80%;
margin: auto;
}
.grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.grid-item {
background: #f4f4f4;
border: 1px solid #ddd;
padding: 20px;
flex: 1 1 calc(33.333% - 20px);
box-sizing: border-box;
}
.pagination {
text-align: center;
margin: 20px 0;
}
.pagination a {
padding: 10px 20px;
margin: 0 5px;
background: #333;
color: white;
text-decoration: none;
}
2. index.php
<?php get_header(); ?>
<div class="container">
<div class="grid">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid-item">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; endif; ?>
</div>
<div class="pagination">
<?php
echo paginate_links();
?>
</div>
</div>
<?php get_footer(); ?>
3. header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="header">
<h1><?php bloginfo('name'); ?></h1>
<nav>
<a href="<?php echo home_url(); ?>">Главная</a>
</nav>
</div>
4. footer.php
<div class="footer">
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</div>
<?php wp_footer(); ?>
</body>
</html>
5. functions.php
<?php
function my_theme_setup() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_theme_setup');
?>
6. page.php и single.php
Для page.php и single.php можно использовать аналогичную структуру, чтобы отображать содержимое страниц и записей.
<?php get_header(); ?>
<div class="container">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php get_footer(); ?>
Шаг 3: Активация темы
Заключение
Теперь у вас есть базовая тема WordPress с сеткой для блога. Вы можете расширять ее, добавляя дополнительные стили, функции или настройки в зависимости от ваших потребностей.
Метки: grid, вордпресс, руками, своими, своя, сетка, темаCopyright © 2020 — 2025
Автор темы оформления и сайта: Ведерников С.Н.
Добавить комментарий