Пост

Шпаргалка по интеграции на Wordpress

Опубликовано Обновлено
Шпаргалка по интеграции на Wordpress
Шпаргалка по интеграции на Wordpress
Автор Oleg Dobrynin
7 мин. чтения
Шпаргалка по интеграции на Wordpress

Эта шпаргалка содержит основные коды и функции для интеграции HTML-шаблона на WordPress. Здесь собраны наиболее часто используемые решения при разработке тем WordPress. Каждый раздел содержит подробное объяснение и примеры использования.

Начальная настройка

Стартовый пустой шаблон WordPress

При начале разработки темы WordPress вам понадобится базовый шаблон. Есть два основных варианта:

  1. Скачать базовый шаблон - минимальный набор файлов для быстрого старта
  2. underscores.me - более полный вариант с подробной документацией

После скачивания:

  • Удалите все стили из файла style.css шаблона
  • Перенесите все файлы и папки вашей верстки в папку шаблона
  • Убедитесь, что структура папок соответствует стандартам WordPress

Настройка functions.php

Этот файл - главный центр управления вашей темой. Здесь подключаются все необходимые функции и настройки:

1
2

// Подключение поддержки миниатюр
add_theme_support('post-thumbnails');

Этот код нужен для:

  • Добавления возможности загружать миниатюры к постам
  • Используется в админке WordPress в разделе “Запись” -> “Установить миниатюру”
  • Часто нужен для блогов, каталогов товаров, портфолио
1
2

// Подключение поддержки title-tag
add_theme_support('title-tag');

Этот код:

  • Автоматически добавляет тег <title> в <head>
  • Важен для SEO
  • Используется на всех страницах сайта
1
2
3
4
5
6
7
8

// Подключение поддержки HTML5
add_theme_support('html5', array(
    'search-form',
    'comment-form',
    'comment-list',
    'gallery',
    'caption',
));

Этот код:

  • Включает поддержку HTML5 для форм и галерей
  • Нужен для современных форм поиска и комментариев
  • Используется в стандартных шаблонах WordPress

Подключение стилей и скриптов

Этот раздел отвечает за правильное подключение всех CSS и JavaScript файлов. Важно использовать функции WordPress для подключения ресурсов, а не прямые теги в HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function load_style_script() {
    // Подключение стилей
    wp_enqueue_style('qam-css', get_template_directory_uri() . '/css/main.min.css');
    
    // Подключение скриптов
    wp_deregister_script('jquery-core');
    wp_deregister_script('jquery');
    wp_register_script('jquery-core', get_template_directory_uri() . '/js/jquery.js', false, null, true);
    wp_register_script('jquery', false, array('jquery-core'), null, true);
    wp_enqueue_script('jquery');
    
    wp_enqueue_script('qam-js', get_template_directory_uri() . '/js/app.min.js', array('jquery'), true);
}
add_action('wp_enqueue_scripts', 'load_style_script');

Этот код:

  • Правильно подключает CSS и JS файлы
  • Корректно работает с jQuery (важно для многих плагинов)
  • Используется на всех страницах сайта
  • Важен для производительности (скрипты загружаются в конце страницы)

Работа с шаблонами

Создание шаблона страницы

Шаблоны страниц позволяют создавать уникальные макеты для разных типов страниц:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
/*
Template Name: Моя страница шаблона
*/
get_header();
?>

<div class="content">
    <?php while (have_posts()) : the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; ?>
</div>

<?php
get_footer();

Этот код:

  • Создает новый шаблон страницы
  • Появляется в админке при создании/редактировании страницы
  • Используется для создания уникальных страниц с особой версткой

Получение URL шаблона

Часто нужно получить путь к файлам темы:

1

<?php echo get_template_directory_uri(); ?>

Используется для:

  • Подключения изображений
  • Работы с файлами темы
  • Правильных путей к ресурсам

Пример использования:

1

<img src="<?php echo get_template_directory_uri(); ?>/images/dist/logo.svg" alt="Logo">

Работа с меню

Регистрация меню

Регистрация меню позволяет создавать разные меню для разных частей сайта:

1
2
3
4
5
6

add_action('after_setup_theme', function() {
    register_nav_menus([
        'header_menu' => 'Меню в шапке',
        'footer_menu' => 'Меню в подвале'
    ]);
});

Этот код:

  • Создает два меню в админке WordPress
  • Позволяет управлять меню через админку
  • Используется для создания многоуровневых меню

Удаление контейнера у меню

Часто нужно убрать лишние обертки у меню:

1
2
3
4
5

add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args');
function my_wp_nav_menu_args($args = '') {
    $args['container'] = false;
    return $args;
}

Этот код:

  • Убирает лишние div-обертки у меню
  • Нужен для чистоты HTML
  • Используется для соответствия верстке

Вывод меню

Вывод меню с нужными параметрами:

1
2
3
4
5
6
7
8

<?php 
wp_nav_menu([
    'theme_location' => 'header_menu',
    'container' => false,
    'menu_class' => 'menu',
    'fallback_cb' => false
]); 
?>

Этот код:

  • Выводит меню в нужном месте
  • Добавляет нужные классы
  • Отключает fallback-меню

Работа с ACF

Advanced Custom Fields - популярный плагин для создания дополнительных полей. Вот основные способы работы с ним:

Вывод поля ACF

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php 
// Простое поле
echo get_field('field_name');

// Повторитель
if(have_rows('repeater_field')):
    while(have_rows('repeater_field')) : the_row();
        echo get_sub_field('sub_field');
    endwhile;
endif;

// Группа
$group = get_field('group_field');
echo $group['sub_field'];
?>

Этот код:

  • Выводит значения полей ACF
  • Работает с повторителями
  • Работает с группами полей

Условный вывод

Часто нужно проверять наличие поля перед выводом:

1
2
3
4
5

<?php if(get_field('field_name')): ?>
    <div class="field-content">
        <?php echo get_field('field_name'); ?>
    </div>
<?php endif; ?>

Этот код:

  • Проверяет наличие поля
  • Выводит контент только если поле заполнено
  • Предотвращает ошибки

Работа с WooCommerce

WooCommerce - популярный плагин для создания интернет-магазинов. Вот основные способы работы с ним:

Вывод товаров

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
$args = array(
    'post_type' => 'product',
    'posts_per_page' => 8,
    'tax_query' => array(
        array(
            'taxonomy' => 'product_cat',
            'field' => 'slug',
            'terms' => 'category-slug'
        )
    )
);
$products = new WP_Query($args);

if($products->have_posts()):
    while($products->have_posts()): $products->the_post();
        wc_get_template_part('content', 'product');
    endwhile;
    wp_reset_postdata();
endif;
?>

Этот код:

  • Выводит товары из определенной категории
  • Использует стандартный шаблон товара
  • Правильно обрабатывает запрос

Кастомные хуки WooCommerce

Часто нужно изменить стандартное поведение WooCommerce:

1
2
3
4
5
6
7
8
9
10
11

// Изменение цены
add_filter('woocommerce_get_price', 'custom_price', 10, 2);
function custom_price($price, $product) {
    return $price * 1.2; // Увеличиваем цену на 20%
}

// Изменение кнопки "Добавить в корзину"
add_filter('woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text');
function custom_add_to_cart_text() {
    return 'Купить';
}

Этот код:

  • Изменяет цену товара
  • Меняет текст кнопки
  • Использует хуки WooCommerce

Оптимизация изображений

Автоматическая оптимизация

1
2
3
4
5
6
7
8
9
10
11

// Добавление размеров изображений
add_image_size('custom-thumbnail', 300, 200, true);

// Отключение создания лишних размеров
add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');
function remove_default_image_sizes($sizes) {
    unset($sizes['thumbnail']);
    unset($sizes['medium']);
    unset($sizes['large']);
    return $sizes;
}

Этот код:

  • Создает нужные размеры изображений
  • Отключает ненужные размеры
  • Оптимизирует хранение

Ленивая загрузка

1
2
3
4
5
6

// Включение ленивой загрузки
add_filter('wp_get_attachment_image_attributes', 'add_lazy_loading');
function add_lazy_loading($attributes) {
    $attributes['loading'] = 'lazy';
    return $attributes;
}

Этот код:

  • Включает ленивую загрузку изображений
  • Улучшает производительность
  • Экономит трафик

Работа с формами

Contact Form 7

1
2
3
4
5
6
7
8
9
10
11
12

// Вывод формы
<?php echo do_shortcode('[contact-form-7 id="123" title="Контактная форма"]'); ?>

// Кастомная валидация
add_filter('wpcf7_validate_text', 'custom_text_validation', 10, 2);
function custom_text_validation($result, $tag) {
    $value = isset($_POST[$tag->name]) ? trim($_POST[$tag->name]) : '';
    if($value == '') {
        $result->invalidate($tag, 'Поле обязательно для заполнения');
    }
    return $result;
}

Этот код:

  • Выводит форму Contact Form 7
  • Добавляет кастомную валидацию
  • Обрабатывает ошибки

Кастомная форма

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
    <?php wp_nonce_field('custom_form_action', 'custom_form_nonce'); ?>
    <input type="hidden" name="action" value="custom_form_submit">
    <input type="text" name="custom_field">
    <button type="submit">Отправить</button>
</form>

<?php
add_action('admin_post_custom_form_submit', 'handle_custom_form');
add_action('admin_post_nopriv_custom_form_submit', 'handle_custom_form');

function handle_custom_form() {
    if(!isset($_POST['custom_form_nonce']) || 
       !wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_action')) {
        wp_die('Ошибка безопасности');
    }
    
    // Обработка формы
    $custom_field = sanitize_text_field($_POST['custom_field']);
    // Дальнейшая логика
}
?>

Этот код:

  • Создает безопасную форму
  • Обрабатывает отправку
  • Проверяет nonce

Полезные функции

Получение ID страницы по slug

1
2
3
4

function get_page_id_by_slug($slug) {
    $page = get_page_by_path($slug);
    return $page ? $page->ID : null;
}

Используется для:

  • Получения ID страницы по URL
  • Работы с динамическими страницами
  • Создания ссылок

Проверка активного пункта меню

1
2
3

function is_menu-item_active($menu_item) {
    return in_array('current-menu-item', $menu_item->classes);
}

Используется для:

  • Подсветки активного пункта меню
  • Создания навигации
  • Улучшения UX

Получение URL изображения миниатюры

1
2
3
4
5
6

function get_thumbnail_url($post_id = null, $size = 'full') {
    if(!$post_id) {
        $post_id = get_the_ID();
    }
    return get_the_post_thumbnail_url($post_id, $size);
}

Используется для:

  • Получения URL миниатюры
  • Работы с изображениями
  • Создания галерей

Очистка кеша при обновлении поста

1
2
3
4
5
6

add_action('save_post', 'clear_cache_on_save');
function clear_cache_on_save($post_id) {
    if(defined('WP_CACHE') && WP_CACHE) {
        wp_cache_flush();
    }
}

Используется для:

  • Очистки кеша
  • Обновления данных
  • Оптимизации производительности

Заключение

После внедрения этих оптимизаций вы должны увидеть значительное улучшение производительности вашего сайта:

  • Время загрузки страниц уменьшится до 0.5-1 секунды
  • Улучшится пользовательский опыт
  • Снизится нагрузка на сервер
  • Улучшится индексация поисковыми системами

Если у вас есть проблемы с производительностью, начните с этих базовых шагов. Если нужна помощь с конкретными компонентами или настройками, пишите в комментариях - поделимся опытом и знаниями.

Полезные ссылки

WordPress, Технологии
wordpress интеграция разработка
Авторский пост защищен лицензией CC BY 4.0 .

© Oleg Dobrynin. Некоторые права защищены.