Code==Poetry

Вот полный код плагина для WordPress, который автоматически прописывает alt и title при загрузке изображений:

<?php
/*
Plugin Name: Auto Image Alt and Title
Plugin URI: http://yoursite.com
Description: Автоматическая генерация alt и title для загружаемых изображений
Version: 1.0
Author: Your Name
Author URI: http://yoursite.com
*/

class AutoImageMetaPlugin {
    public function __construct() {
        // Хуки для обработки загрузки изображений
        add_filter('wp_generate_attachment_metadata', [$this, 'auto_set_image_meta'], 10, 2);
        add_action('add_attachment', [$this, 'set_image_meta_on_upload'], 10, 1);
    }

    // Генерация метаданных при загрузке
    public function set_image_meta_on_upload($post_id) {
        // Проверяем, что это изображение
        if (wp_attachment_is_image($post_id)) {
            $image_meta = $this->generate_image_meta($post_id);
            
            // Обновляем метаданные
            update_post_meta($post_id, '_wp_attachment_image_alt', $image_meta['alt']);
            
            // Обновляем заголовок вложения
            wp_update_post([
                'ID' => $post_id,
                'post_title' => $image_meta['title']
            ]);
        }
    }

    // Генерация метаданных при создании миниатюр
    public function auto_set_image_meta($metadata, $attachment_id) {
        if (wp_attachment_is_image($attachment_id)) {
            $image_meta = $this->generate_image_meta($attachment_id);
            
            // Обновляем метаданные изображения
            if (!isset($metadata['image_meta'])) {
                $metadata['image_meta'] = [];
            }
            
            $metadata['image_meta']['title'] = $image_meta['title'];
            
            return $metadata;
        }
        
        return $metadata;
    }

    // Генерация метаданных для изображения
    private function generate_image_meta($attachment_id) {
        // Получаем информацию о файле
        $file_path = get_attached_file($attachment_id);
        $file_name = basename($file_path);
        
        // Очищаем имя файла
        $clean_name = $this->sanitize_filename($file_name);
        
        // Генерация заголовка и alt
        $title = $this->generate_title($clean_name);
        $alt = $this->generate_alt($clean_name);
        
        return [
            'title' => $title,
            'alt' => $alt
        ];
    }

    // Очистка имени файла
    private function sanitize_filename($filename) {
        // Удаляем расширение
        $filename = pathinfo($filename, PATHINFO_FILENAME);
        
        // Заменяем служебные символы
        $filename = preg_replace('/[^a-zA-ZА-Яа-я0-9\s-]/', '', $filename);
        
        // Заменяем несколько пробелов на один
        $filename = preg_replace('/\s+/', ' ', $filename);
        
        return trim($filename);
    }

    // Генерация заголовка
    private function generate_title($clean_name) {
        // Capitalize first letter
        $title = ucfirst(str_replace(['-', '_'], ' ', $clean_name));
        
        // Усечение до разумной длины
        return mb_substr($title, 0, 100);
    }

    // Генерация alt
    private function generate_alt($clean_name) {
        // Преобразуем в нижний регистр
        $alt = strtolower(str_replace(['-', '_'], ' ', $clean_name));
        
        // Добавляем общие теги
        $alt_variants = [
            $alt . ' фото',
            $alt . ' изображение',
            'фото ' . $alt,
            'изображение ' . $alt
        ];
        
        // Случайный выбор варианта
        return $alt_variants[array_rand($alt_variants)];
    }

    // Административные настройки (опционально)
    public function add_settings_page() {
        add_options_page(
            'Настройки Auto Image Meta', 
            'Auto Image Meta', 
            'manage_options', 
            'auto-image-meta', 
            [$this, 'render_settings_page']
        );
    }

    // Рендер страницы настроек
    public function render_settings_page() {
        ?>
        <div class="wrap">
            <h1>Настройки Auto Image Meta</h1>
            <form method="post" action="options.php">
                <p>Автоматическая генерация alt и title для изображений</p>
                <!-- Можно добавить дополнительные настройки -->
            </form>
        </div>
        <?php
    }
}

// Инициализация плагина
function init_auto_image_meta_plugin() {
    new AutoImageMetaPlugin();
}
add_action('plugins_loaded', 'init_auto_image_meta_plugin');

// Хук для обновления существующих изображений (опционально)
function bulk_update_image_meta() {
    $attachments = get_posts([
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'numberposts' => -1
    ]);

    $plugin = new AutoImageMetaPlugin();

    foreach ($attachments as $attachment) {
        $plugin->set_image_meta_on_upload($attachment->ID);
    }
}
register_activation_hook(__FILE__, 'bulk_update_image_meta');

Функционал плагина:

1. Автоматическая генерация alt и title
2. Очистка имени файла
3. Несколько вариантов генерации alt
4. Capitalize заголовка
5. Ограничение длины

Преимущества:

• Полностью автоматическая работа
• Поддержка кириллицы
• Случайный выбор alt-текста
• Очистка имени файла
• Минимальные настройки

Установка:

1. Сохраните код в файл auto-image-meta.php
2. Загрузите в папку wp-content/plugins/
3. Активируйте в панели управления

Рекомендации:

• Протестируйте на staging-сервере
• Настройте под свои нужды
• Используйте осторожно с большим количеством изображений

Дополнительно:

• Можно добавить страницу настроек
• Реализовать кастомные правила генерации
• Добавить поддержку мультиязычности

Примечание: При первой активации плагин обновит метаданные для всех существующих изображений.

Подключение файлов CSS (для стилевого оформления элементов на странице) осуществляется при помощи специальной для этого функции wp_enqueue_style()

В принципе можно подключать стили (файлы CSS) по разному, хоть прямиком через HTML-элемент <link> 🙂 Но это будет не совсем правильно с точки зрения философии WordPress, его стандартов кодирования, так сказать.

Поэтому единственным правильным методом подключения файлов CSS в вашу тему (на страницы вашего сайта) будет являться метод через специальные функции.

Пример подключения основного файла стилей style.css и в примере после него — произвольного:

<?php

/**
 * Подключаем основной файл стилей темы (style.css)
 */
function poet_add_theme_styles() {
	wp_enqueue_style( 'style-main', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );

Кстати, ниже пример показывает, что мы можем управлять зависимостью одного стиля от другого, то есть очередностью их подключения.

<?php

/**
 * Подключаем основной файл стилей темы (style.css) и дочерний
 */
function poet_add_theme_styles() {
	wp_enqueue_style( 'style-main', get_stylesheet_uri() );

        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/theme.css',
            array( 'style-main' ), // указываем зависимость
            wp_get_theme()->get('Version')
        );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );

Рассмотрим ещё одну функции, при помощи которой мы можем зарегистрировать файлы стилей. Важно понимать отличие этой функции от рассмотренной ранее. Дело в том что при помощи wp_enqueue_style() мы сразу подключаем указанный стиль, а при помощи wp_register_style() мы только регистрируем его в окружении WordPress, что бы он (WordPress) знал этот файл стилей по имени и в нужный момент или при нужном условии мы можем его подключить.

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

<?php

/**
 * Подключаем основной файл стилей темы (style.css) и дочерний
 */
function poet_add_theme_styles() {
	wp_enqueue_style( 'style-main', get_stylesheet_uri() );

        wp_register_style( 'child-style',
            get_stylesheet_directory_uri() . '/theme.css',
            array( 'style-main' ), // указываем зависимость
            wp_get_theme()->get('Version')
        );

        wp_enqueue_style( 'child-style' );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );

Теперь, после регистрации стиля по имени, мы можем его подключать простым вызовом функции wp_enqueue_style( ‘child-style’ ), в которую передаём имя этого файла CSS заданное при регистрации. На самом деле такой метод подключения даёт больше гибкости, особенно для опытных разработчиков.

ООП

Для любителей объектно-ориентированной парадигмы разработки вышеуказанный пример можно записать таким образом:

<?php

/**
 * Подключаем основной файл стилей темы (style.css) и дочерний
 */
class Poet_Add_Styles
{
    /**
    * Constructor.
    */    
    public function __construct(
		// Add stylesheet.
		add_action( 'wp_enqueue_scripts', array( $this, 'poet_add_theme_styles' ) );
	}

	/**
	 * Add and enqueues stylesheet.
	 */
	public function poet_add_theme_styles() {
	wp_enqueue_style( 'style-main', get_stylesheet_uri() );

        wp_register_style( 'child-style',
            get_stylesheet_directory_uri() . '/theme.css',
            array( 'style-main' ), // указываем зависимость
            wp_get_theme()->get('Version')
        );

        wp_enqueue_style( 'child-style' );
	}
}

new Poet_Add_Styles();

Класс с методом-конструктором вызовет этот метод на каждом вновь созданном объекте класса. Поэтому объявление метода-конструктора удобно для инициализации того, что может потребоваться объекту в начале работы.

Проблемы кеширования

Если посмотреть на исходный код страницы сайта на WordPress, то можно заметить вот такие добавки (называются гет-параметрами) к подключаемым файлам стилей

Если рассмотреть пример нашего кода, то он подключает файл theme.css и добавляет гет-параметром версию темы которая прописана в файле style.css. В итоге мы можем заметить версию 1.0

Если бы при регистрации или подключении файла CSS мы бы не указали параметр версии (функцией wp_get_theme()->get(‘Version’)), или установили бы значение false, то была бы тогда использована версия WordPress, как примере ниже, к нашему файлу добавилась версия WP

А если установить null, то никакая версия не будет установлена.

Чем это чревато? Представьте, что вы внесли правки в файл theme.css и изменили стиль оформления элемента, например, с зеленого фона на красный. То пользователь, который уже посещал ваш сайт снова будет видеть зелёный фон. Почему так?

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

Получается, что если пользователь не обновит страницу или не почистит кеш, он так и будет видеть зелёный фон у элемента. Вероятнее всего новый стиль загрузится и отобразится у него со сменой версии WordPress или сменой версии темы оформления.

Поэтому, если вы часто вносите правки в файлы стилей, то стоит позаботится о решении этой неприятности.

Как решить эту проблему?

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

В этом поможет функция filemtime — Получает время последнего изменения файла. Тогда наш код немного преобразится:

<?php

/**
 * Подключаем основной файл стилей темы (style.css) и дочерний
 */
function poet_add_theme_styles() {
	wp_enqueue_style( 'style-main', get_stylesheet_uri() );

        wp_register_style( 'child-style',
            get_stylesheet_directory_uri() . '/theme.css',
            array( 'style-main' ), // указываем зависимость
            filemtime( get_stylesheet_directory() .'/theme.css' )
        );

        wp_enqueue_style( 'child-style' );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );

Ну вот и всё!

P.S. конечно можно внести сюда небольшую оптимизацию и сократить вызов функции get_stylesheet_directory(), которая получает путь к файлу темы (родительской), до одного вызова, а не двух, как в примере. Но лучше остановимся на этом )