6. WordPress Theme

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

---

🎯 Что мы создадим

Функционал темы:

• ✅ Кастомная структура темы
• ✅ Header, Footer, Sidebar
• ✅ Custom Post Types (Портфолио)
• ✅ ACF (Advanced Custom Fields) интеграция
• ✅ Навигационное меню
• ✅ Widget areas
• ✅ Responsive дизайн
• ✅ Деплой на хостинг

Технологии:

• PHP (WordPress шаблоны)
• HTML/CSS
• JavaScript (jQuery включён в WP)
• MySQL (база данных)

---

📦 Подготовка

1. Установка локального сервера

Вариант A: XAMPP (для Windows/Mac/Linux):

1. Скачай XAMPP с apachefriends.org
2. Установи XAMPP
3. Запусти XAMPP Control Panel
4. Запусти Apache и MySQL
5. Открой http://localhost в браузере — должна открыться страница XAMPP

Вариант B: Local by Flywheel (рекомендуем!):

1. Скачай Local с localwp.com
2. Установи Local
3. Создай новый сайт:
   • Нажми ”+ Create a new site”
   • Имя: my-theme-site
   • Выбери PHP 8.0+, MySQL 8.0+
   • Создай логин/пароль админа
4. Запусти сайт
5. Открой в браузере (Local покажет ссылку)

✅ Чекпоинт: WordPress установлен, ты можешь зайти в админку (/wp-admin).

---

2. Установка Advanced Custom Fields (ACF)

ACF — плагин для создания кастомных полей.

Через админку:

1. Зайди в админку WordPress
2. Плагины → Добавить новый
3. Найди “Advanced Custom Fields”
4. Установи и активируй плагин

✅ Чекпоинт: В меню админки появился раздел “Custom Fields” (Произвольные поля).

---

🏗️ Структура темы

Создадим папку для нашей темы:

Для XAMPP:

C:\xampp\htdocs\wordpress\wp-content\themes\my-custom-theme\

Для Local:

~/Local Sites/my-theme-site/app/public/wp-content/themes/my-custom-theme/

Структура темы:

my-custom-theme/
├── style.css           # Основной файл темы (обязательный)
├── functions.php       # Функции темы
├── index.php           # Главный шаблон
├── header.php          # Шапка сайта
├── footer.php          # Подвал сайта
├── sidebar.php         # Боковая панель
├── single.php          # Отдельная запись
├── page.php            # Отдельная страница
├── archive.php         # Архив (блог, категории)
├── single-portfolio.php # Шаблон для Custom Post Type
├── template-parts/
│   └── content-portfolio.php
├── inc/
│   ├── custom-post-types.php
│   └── widgets.php
├── assets/
│   ├── css/
│   │   └── main.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       └── logo.png
└── screenshot.png      # Превью темы (880x660px)

Создай эти папки и файлы вручную:

mkdir my-custom-theme
cd my-custom-theme
mkdir inc assets template-parts
mkdir assets/css assets/js assets/images
touch style.css functions.php index.php header.php footer.php sidebar.php single.php page.php archive.php

---

🎨 Шаг 1: Основной файл темы (style.css)

style.css:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: Современная кастомная тема WordPress с Custom Post Types и ACF
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments
*/

/* === БАЗОВЫЕ СТИЛИ === */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* === HEADER === */

.site-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

/* === NAVIGATION === */

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.main-navigation a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s;
}

.main-navigation a:hover {
  opacity: 0.8;
}

/* === CONTENT === */

.site-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  padding: 2rem 0;
}

.content-area {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* === POSTS === */

.post {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e2e8f0;
}

.post:last-child {
  border-bottom: none;
}

.post-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.post-title a {
  color: #2d3748;
  text-decoration: none;
  transition: color 0.3s;
}

.post-title a:hover {
  color: #667eea;
}

.post-meta {
  font-size: 0.9rem;
  color: #718096;
  margin-bottom: 1rem;
}

.post-content {
  line-height: 1.8;
}

.read-more {
  display: inline-block;
  margin-top: 1rem;
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s;
}

.read-more:hover {
  transform: translateX(4px);
}

/* === SIDEBAR === */

.sidebar {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.widget {
  margin-bottom: 2rem;
}

.widget-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #667eea;
}

.widget ul {
  list-style: none;
}

.widget li {
  margin-bottom: 0.5rem;
}

.widget a {
  color: #4a5568;
  text-decoration: none;
  transition: color 0.3s;
}

.widget a:hover {
  color: #667eea;
}

/* === FOOTER === */

.site-footer {
  background: #2d3748;
  color: white;
  padding: 2rem 0;
  margin-top: 3rem;
  text-align: center;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  .site-main {
    grid-template-columns: 1fr;
  }

  .header-inner {
    flex-direction: column;
    gap: 1rem;
  }

  .main-navigation ul {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

✅ Чекпоинт: Файл style.css создан с мета-информацией темы.

---

🔧 Шаг 2: Функции темы (functions.php)

functions.php:

<?php
/**
 * My Custom Theme functions and definitions
 */

// Подключаем стили и скрипты
function mytheme_enqueue_scripts() {
    // Основной CSS
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());

    // Дополнительный CSS
    wp_enqueue_style('mytheme-main', get_template_directory_uri() . '/assets/css/main.css');

    // jQuery (уже включен в WordPress)
    wp_enqueue_script('jquery');

    // Наш JavaScript
    wp_enqueue_script('mytheme-main', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

// Поддержка функций темы
function mytheme_setup() {
    // Поддержка заголовков
    add_theme_support('title-tag');

    // Поддержка миниатюр
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(800, 450, true);

    // Поддержка произвольного логотипа
    add_theme_support('custom-logo');

    // Поддержка HTML5
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ));

    // Регистрация меню
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-custom-theme'),
        'footer' => __('Footer Menu', 'my-custom-theme'),
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

// Регистрация виджет-зон
function mytheme_widgets_init() {
    register_sidebar(array(
        'name'          => __('Sidebar', 'my-custom-theme'),
        'id'            => 'sidebar-1',
        'description'   => __('Боковая панель для страниц и постов', 'my-custom-theme'),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));

    register_sidebar(array(
        'name'          => __('Footer Widgets', 'my-custom-theme'),
        'id'            => 'footer-1',
        'description'   => __('Виджеты в подвале сайта', 'my-custom-theme'),
        'before_widget' => '<div class="footer-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4>',
        'after_title'   => '</h4>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

// Подключаем Custom Post Types
require get_template_directory() . '/inc/custom-post-types.php';

// Лимит слов для excerpt
function mytheme_excerpt_length($length) {
    return 30;
}
add_filter('excerpt_length', 'mytheme_excerpt_length');

// Текст "Читать далее"
function mytheme_excerpt_more($more) {
    return '... <a href="' . get_permalink() . '" class="read-more">Читать далее →</a>';
}
add_filter('excerpt_more', 'mytheme_excerpt_more');
?>

✅ Чекпоинт: functions.php настроен для подключения стилей, меню, виджетов.

---

📄 Шаг 3: Шаблоны темы

header.php

header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header class="site-header">
    <div class="container">
        <div class="header-inner">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="site-logo">
                <?php if (has_custom_logo()) : ?>
                    <?php the_custom_logo(); ?>
                <?php else : ?>
                    <?php bloginfo('name'); ?>
                <?php endif; ?>
            </a>

            <nav class="main-navigation">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'nav-menu',
                    'container'      => false,
                ));
                ?>
            </nav>
        </div>
    </div>
</header>

---

footer.php

footer.php:

<footer class="site-footer">
    <div class="container">
        <?php if (is_active_sidebar('footer-1')) : ?>
            <div class="footer-widgets">
                <?php dynamic_sidebar('footer-1'); ?>
            </div>
        <?php endif; ?>

        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Все права защищены.</p>

        <?php
        wp_nav_menu(array(
            'theme_location' => 'footer',
            'menu_class'     => 'footer-menu',
            'container'      => 'nav',
        ));
        ?>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

---

sidebar.php

sidebar.php:

<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3 class="widget-title">Добро пожаловать</h3>
            <p>Это боковая панель. Добавьте виджеты в админке WordPress.</p>
        </div>
    <?php endif; ?>
</aside>

---

index.php (главный шаблон)

index.php:

<?php get_header(); ?>

<div class="container">
    <div class="site-main">
        <main class="content-area">
            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <header class="entry-header">
                            <h2 class="post-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h2>
                            <div class="post-meta">
                                <span>Автор: <?php the_author(); ?></span> |
                                <span>Дата: <?php echo get_the_date(); ?></span> |
                                <span>Категория: <?php the_category(', '); ?></span>
                            </div>
                        </header>

                        <?php if (has_post_thumbnail()) : ?>
                            <div class="post-thumbnail">
                                <?php the_post_thumbnail('large'); ?>
                            </div>
                        <?php endif; ?>

                        <div class="post-content">
                            <?php the_excerpt(); ?>
                        </div>
                    </article>
                <?php endwhile; ?>

                <!-- Пагинация -->
                <div class="pagination">
                    <?php
                    the_posts_pagination(array(
                        'mid_size'  => 2,
                        'prev_text' => __('← Назад', 'my-custom-theme'),
                        'next_text' => __('Вперед →', 'my-custom-theme'),
                    ));
                    ?>
                </div>
            <?php else : ?>
                <p>Записей не найдено.</p>
            <?php endif; ?>
        </main>

        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

---

single.php (отдельная запись)

single.php:

<?php get_header(); ?>

<div class="container">
    <div class="site-main">
        <main class="content-area">
            <?php while (have_posts()) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="entry-header">
                        <h1 class="post-title"><?php the_title(); ?></h1>
                        <div class="post-meta">
                            <span>Автор: <?php the_author(); ?></span> |
                            <span>Дата: <?php echo get_the_date(); ?></span>
                        </div>
                    </header>

                    <?php if (has_post_thumbnail()) : ?>
                        <div class="post-thumbnail">
                            <?php the_post_thumbnail('full'); ?>
                        </div>
                    <?php endif; ?>

                    <div class="post-content">
                        <?php the_content(); ?>
                    </div>

                    <footer class="entry-footer">
                        <?php the_tags('<div class="post-tags">Теги: ', ', ', '</div>'); ?>
                    </footer>
                </article>

                <!-- Комментарии -->
                <?php
                if (comments_open() || get_comments_number()) :
                    comments_template();
                endif;
                ?>
            <?php endwhile; ?>
        </main>

        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

✅ Чекпоинт: Базовые шаблоны созданы. При открытии сайта видна шапка, содержимое и подвал.

---

🎨 Шаг 4: Custom Post Types (Портфолио)

inc/custom-post-types.php:

<?php
/**
 * Регистрация Custom Post Types
 */

function mytheme_register_portfolio_post_type() {
    $labels = array(
        'name'                  => 'Портфолио',
        'singular_name'         => 'Проект',
        'menu_name'             => 'Портфолио',
        'add_new'               => 'Добавить проект',
        'add_new_item'          => 'Добавить новый проект',
        'edit_item'             => 'Редактировать проект',
        'new_item'              => 'Новый проект',
        'view_item'             => 'Посмотреть проект',
        'search_items'          => 'Искать проекты',
        'not_found'             => 'Проектов не найдено',
        'not_found_in_trash'    => 'В корзине проектов не найдено',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array('slug' => 'portfolio'),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => 5,
        'menu_icon'          => 'dashicons-portfolio',
        'supports'           => array('title', 'editor', 'thumbnail', 'excerpt'),
    );

    register_post_type('portfolio', $args);
}
add_action('init', 'mytheme_register_portfolio_post_type');

// Регистрация таксономии (категорий) для портфолио
function mytheme_register_portfolio_taxonomy() {
    $labels = array(
        'name'              => 'Категории портфолио',
        'singular_name'     => 'Категория',
        'search_items'      => 'Искать категории',
        'all_items'         => 'Все категории',
        'parent_item'       => 'Родительская категория',
        'parent_item_colon' => 'Родительская категория:',
        'edit_item'         => 'Редактировать категорию',
        'update_item'       => 'Обновить категорию',
        'add_new_item'      => 'Добавить новую категорию',
        'new_item_name'     => 'Новое имя категории',
        'menu_name'         => 'Категории',
    );

    $args = array(
        'hierarchical'      => true,
        'labels'            => $labels,
        'show_ui'           => true,
        'show_admin_column' => true,
        'query_var'         => true,
        'rewrite'           => array('slug' => 'portfolio-category'),
    );

    register_taxonomy('portfolio_category', array('portfolio'), $args);
}
add_action('init', 'mytheme_register_portfolio_taxonomy');
?>

✅ Чекпоинт: Зайди в админку → появился пункт меню “Портфолио” с возможностью добавлять проекты.

---

🛠️ Шаг 5: Advanced Custom Fields (ACF)

Создание группы полей для портфолио:

1. Зайди в Custom Fields → Группы полей
2. Нажми Добавить новую
3. Название группы: “Детали проекта”
4. Добавь поля:

Поле 1: Клиент

• Тип поля: Text
• Название поля: client
• Метка: Клиент

Поле 2: Ссылка на проект

• Тип поля: URL
• Название поля: project_url
• Метка: Ссылка на проект

Поле 3: Дата завершения

• Тип поля: Date Picker
• Название поля: completion_date
• Метка: Дата завершения

Поле 4: Использованные технологии

• Тип поля: Checkbox
• Название поля: technologies
• Метка: Технологии
• Варианты (каждый с новой строки):

  html : HTML
  css : CSS
  js : JavaScript
  php : PHP
  react : React
  wordpress : WordPress

5. Расположение: Показать эту группу полей, если → Тип записи → равен → portfolio
6. Нажми Сохранить изменения

✅ Чекпоинт: При редактировании проекта портфолио появились дополнительные поля.

---

📝 Шаг 6: Шаблон для портфолио

single-portfolio.php:

<?php get_header(); ?>

<div class="container">
    <div class="site-main">
        <main class="content-area">
            <?php while (have_posts()) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class('portfolio-item'); ?>>
                    <header class="entry-header">
                        <h1 class="post-title"><?php the_title(); ?></h1>

                        <div class="portfolio-meta">
                            <?php
                            // Получаем ACF поля
                            $client = get_field('client');
                            $project_url = get_field('project_url');
                            $completion_date = get_field('completion_date');
                            $technologies = get_field('technologies');
                            ?>

                            <?php if ($client) : ?>
                                <div class="meta-item">
                                    <strong>Клиент:</strong> <?php echo esc_html($client); ?>
                                </div>
                            <?php endif; ?>

                            <?php if ($completion_date) : ?>
                                <div class="meta-item">
                                    <strong>Дата завершения:</strong> <?php echo esc_html($completion_date); ?>
                                </div>
                            <?php endif; ?>

                            <?php if ($technologies) : ?>
                                <div class="meta-item">
                                    <strong>Технологии:</strong>
                                    <?php echo implode(', ', $technologies); ?>
                                </div>
                            <?php endif; ?>

                            <?php if ($project_url) : ?>
                                <div class="meta-item">
                                    <a href="<?php echo esc_url($project_url); ?>" target="_blank" class="project-link">
                                        Посмотреть проект →
                                    </a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </header>

                    <?php if (has_post_thumbnail()) : ?>
                        <div class="post-thumbnail">
                            <?php the_post_thumbnail('full'); ?>
                        </div>
                    <?php endif; ?>

                    <div class="post-content">
                        <?php the_content(); ?>
                    </div>

                    <footer class="entry-footer">
                        <?php
                        $terms = get_the_terms(get_the_ID(), 'portfolio_category');
                        if ($terms && !is_wp_error($terms)) :
                            echo '<div class="portfolio-categories"><strong>Категории:</strong> ';
                            $term_links = array();
                            foreach ($terms as $term) {
                                $term_links[] = '<a href="' . esc_url(get_term_link($term)) . '">' . esc_html($term->name) . '</a>';
                            }
                            echo implode(', ', $term_links);
                            echo '</div>';
                        endif;
                        ?>
                    </footer>
                </article>
            <?php endwhile; ?>
        </main>

        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

Дополнительные стили для портфолио в assets/css/main.css:

/* === PORTFOLIO === */

.portfolio-meta {
  background: #f7fafc;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.meta-item {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.meta-item:last-child {
  margin-bottom: 0;
}

.project-link {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s;
}

.project-link:hover {
  transform: translateY(-2px);
}

.portfolio-categories {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.portfolio-categories a {
  display: inline-block;
  background: #edf2f7;
  color: #4a5568;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  margin-right: 0.5rem;
  transition: background 0.3s;
}

.portfolio-categories a:hover {
  background: #e2e8f0;
}

✅ Чекпоинт: Создай новый проект портфолио, заполни ACF поля → при просмотре видна вся информация о проекте.

---

🎨 Шаг 7: Архив портфолио

archive-portfolio.php:

<?php get_header(); ?>

<div class="container">
    <div class="site-main">
        <main class="content-area">
            <header class="page-header">
                <h1>Наши проекты</h1>
                <?php if (term_description()) : ?>
                    <div class="archive-description"><?php echo term_description(); ?></div>
                <?php endif; ?>
            </header>

            <div class="portfolio-grid">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <article <?php post_class('portfolio-card'); ?>>
                            <?php if (has_post_thumbnail()) : ?>
                                <a href="<?php the_permalink(); ?>" class="portfolio-thumbnail">
                                    <?php the_post_thumbnail('medium_large'); ?>
                                </a>
                            <?php endif; ?>

                            <div class="portfolio-content">
                                <h2 class="portfolio-title">
                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                </h2>

                                <?php
                                $client = get_field('client');
                                if ($client) :
                                ?>
                                    <p class="portfolio-client">Клиент: <?php echo esc_html($client); ?></p>
                                <?php endif; ?>

                                <div class="portfolio-excerpt">
                                    <?php the_excerpt(); ?>
                                </div>

                                <a href="<?php the_permalink(); ?>" class="portfolio-link">
                                    Подробнее →
                                </a>
                            </div>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <p>Проектов пока нет.</p>
                <?php endif; ?>
            </div>

            <!-- Пагинация -->
            <div class="pagination">
                <?php
                the_posts_pagination(array(
                    'mid_size'  => 2,
                    'prev_text' => __('← Назад', 'my-custom-theme'),
                    'next_text' => __('Вперед →', 'my-custom-theme'),
                ));
                ?>
            </div>
        </main>
    </div>
</div>

<?php get_footer(); ?>

Стили для grid в assets/css/main.css:

/* === PORTFOLIO GRID === */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.portfolio-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.portfolio-thumbnail img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.5s;
}

.portfolio-card:hover .portfolio-thumbnail img {
  transform: scale(1.1);
}

.portfolio-content {
  padding: 1.5rem;
}

.portfolio-title {
  font-size: 1.3rem;
  margin: 0 0 0.75rem 0;
}

.portfolio-title a {
  color: #2d3748;
  text-decoration: none;
}

.portfolio-client {
  color: #718096;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.portfolio-excerpt {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.portfolio-link {
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s;
  display: inline-block;
}

.portfolio-link:hover {
  transform: translateX(4px);
}

✅ Чекпоинт: Открой /portfolio → видна сетка проектов портфолио.

---

🚀 Шаг 8: Деплой на хостинг

1. Подготовка темы

1. Убедись, что тема работает локально
2. Создай screenshot.png (880x660px) — превью темы
3. Упакуй тему в ZIP:
   • Выдели папку my-custom-theme
   • Сожми в архив my-custom-theme.zip

---

2. Выбор хостинга

Рекомендуемые хостинги для WordPress:

• SiteGround — быстрый, с автоустановкой WP
• Bluehost — официальный партнёр WordPress
• DigitalOcean — для продвинутых (VPS)

---

3. Установка WordPress на хостинге

Шаги (для SiteGround/Bluehost):

1. Зарегистрируйся на хостинге
2. Выбери тариф (базовый подойдёт)
3. Выбери домен (или используй временный)
4. В панели управления найди “Установить WordPress”
5. Следуй инструкциям (заполни имя сайта, логин админа)
6. Получи ссылку на админку

---

4. Загрузка темы

1. Зайди в админку WordPress на хостинге
2. Внешний вид → Темы → Добавить новую
3. Загрузить тему → Выбрать файл
4. Выбери my-custom-theme.zip
5. Установить → Активировать

✅ Чекпоинт: Тема активирована на живом сайте!

---

5. Перенос контента

Вариант A: Экспорт/Импорт:

1. Локально: Инструменты → Экспорт → Экспортировать всё → Скачать файл
2. На хостинге: Инструменты → Импорт → WordPress → Установить импортёр
3. Загрузи файл экспорта
4. Отметь “Загрузить и импортировать вложения”

Вариант B: Плагин Duplicator:

1. Установи плагин Duplicator локально
2. Создай пакет (архив сайта)
3. Загрузи на хостинг через FTP
4. Запусти installer.php

---

6. Настройка темы на хостинге

1. Внешний вид → Настроить → настрой меню, виджеты
2. Установи ACF (если ещё нет)
3. Создай группу полей для портфолио (как локально)
4. Создай несколько проектов для демонстрации

✅ Чекпоинт: Сайт полностью работает на хостинге!

---

🐛 Типичные ошибки и решения

Ошибка 1: “Тема сломана”

Причина: Отсутствует обязательный файл style.css или неправильный заголовок.

Решение: Проверь, что в style.css есть комментарий с Theme Name:.

---

Ошибка 2: Custom Post Type не появляется

Причина: WordPress кеширует правила rewrite.

Решение: Зайди в Настройки → Постоянные ссылки → Сохранить изменения (без изменений).

---

Ошибка 3: ACF поля не показываются

Причина: Неправильно настроено расположение полей.

Решение: В настройках группы полей проверь “Расположение” → должно быть portfolio.

---

Ошибка 4: 404 на странице портфолио

Причина: Не обновлены постоянные ссылки после добавления Custom Post Type.

Решение: Настройки → Постоянные ссылки → Сохранить.

---

🎉 Финальный чекпоинт

Проверь, что у тебя работает:

• ✅ Тема активирована локально и на хостинге
• ✅ Header, Footer, Sidebar отображаются
• ✅ Custom Post Type “Портфолио” зарегистрирован
• ✅ ACF поля работают
• ✅ Архив портфолио показывает сетку проектов
• ✅ Детальная страница проекта показывает все данные
• ✅ Меню и виджеты настроены
• ✅ Responsive дизайн (проверь на мобильном)

---

🚀 Что дальше?

Улучшения для темы:

1. WooCommerce интеграция: Добавь поддержку e-commerce:

   add_theme_support('woocommerce');

2. Gutenberg блоки: Создай кастомные блоки для редактора.

3. Локализация: Подготовь тему для перевода:

   wp i18n make-pot . languages/my-custom-theme.pot

4. Page Builder: Интеграция с Elementor или Beaver Builder.

5. SEO оптимизация: Добавь мета-теги, структурированные данные.

6. Скорость: Минификация CSS/JS, ленивая загрузка изображений.

7. Безопасность: Sanitization, escaping всех данных.

---

📚 Ресурсы для изучения

• WordPress Codex — официальная документация
• WordPress Theme Handbook — гайд по созданию тем
• ACF Documentation — документация ACF
• WP Beginner — туториалы для начинающих

---

Поздравляем! Ты создал профессиональную WordPress тему с Custom Post Types и ACF интеграцией! 🎉