Добавление пользовательских шрифтов и форматирования в редактор WordPress WYSIWYG

Содержание

• Понимание конфликта
• Комбинированное решение для пользовательских шрифтов и форматирования
• Добавление выбора размера шрифта
• Полное руководство по интеграции
• Альтернативные решения с плагинами
• Устранение распространенных проблем

Понимание конфликта

Конфликт возникает из-за того, что оба фрагмента кода по-разному изменяют конфигурацию style_formats TinyMCE:

• Первый фрагмент добавляет кнопку выпадающего списка styleselect на панель инструментов
• Второй фрагмент полностью перезаписывает массив style_formats, а не объединяет существующие форматы

Когда оба фрагмента активны, json_encode($style_formats) из второго фрагмента заменяет все существующие стили, включая форматы WordPress по умолчанию и ваши пользовательские параметры форматирования.

Комбинированное решение для пользовательских шрифтов и форматирования

Вот как правильно объединить обе функции без конфликтов:

// Добавляем кнопку styleselect во вторую строку кнопок TinyMCE
add_filter( 'mce_buttons_2', 'dgtlnk_custom_tinymce_buttons' );
function dgtlnk_custom_tinymce_buttons( $buttons ) {
    // Добавляем выпадающий список styleselect, если его еще нет
    if ( !in_array( 'styleselect', $buttons ) ) {
        array_unshift( $buttons, 'styleselect' );
    }
    
    // Добавляем выпадающий список выбора размера шрифта
    array_unshift( $buttons, 'fontsizeselect' );
    
    return $buttons;
}

// Объединяем пользовательские форматы с существующими форматами TinyMCE
add_filter( 'tiny_mce_before_init', 'dgtlnk_custom_tinymce_formats' );
function dgtlnk_custom_tinymce_formats( $init_array ) {
    // Получаем существующие форматы, если они есть
    $style_formats = isset( $init_array['style_formats'] ) ? json_decode( $init_array['style_formats'], true ) : array();
    
    // Добавляем ваши пользовательские параметры форматирования
    $custom_formats = array(
        array(
            'title' => 'Создать кнопку',
            'selector' => 'a',
            'classes' => 'btn',
        ),
        array(
            'title' => 'Выделение',
            'inline' => 'span',
            'styles' => array(
                'backgroundColor' => '#ffff00',
            ),
        ),
        array(
            'title' => 'Начальная буква',
            'inline' => 'span',
            'classes' => 'drop-cap',
            'wrapper' => true,
        ),
    );
    
    // Объединяем пользовательские форматы с существующими
    $style_formats = array_merge( $style_formats, $custom_formats );
    
    // Добавляем пользовательские шрифты в настройку font_formats
    $custom_fonts = array(
        'Arial, Helvetica, sans-serif' => 'Arial',
        '"Times New Roman", Times, serif' => 'Times New Roman',
        'Georgia, serif' => 'Georgia',
        'Verdana, Geneva, sans-serif' => 'Verdana',
        'Courier New, Courier, monospace' => 'Courier New',
        'Comic Sans MS, cursive, sans-serif' => 'Comic Sans MS',
    );
    
    // Получаем существующие шрифты, если они есть
    $font_formats = isset( $init_array['font_formats'] ) ? $init_array['font_formats'] : '';
    
    // Добавляем пользовательские шрифты к существующим
    foreach( $custom_fonts as $font_family => $font_name ) {
        if ( !strpos( $font_formats, $font_name ) ) {
            $font_formats .= "{$font_name}={$font_family};";
        }
    }
    
    // Обновляем массив инициализации
    $init_array['style_formats'] = json_encode( $style_formats );
    $init_array['font_formats'] = $font_formats;
    $init_array['fontsize_formats'] = '8px 10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 48px';
    
    return $init_array;
}

Добавление выбора размера шрифта

Приведенный выше код включает кнопку fontsizeselect и определяет доступные размеры шрифтов. Чтобы размеры шрифтов работали правильно, вам также может потребоваться добавить этот CSS в вашу тему:

/* Добавьте это в таблицу стилей вашей темы */
.mce-content-body p {
    font-size: 16px; /* Размер шрифта по умолчанию */
}

/* Определяем пользовательские размеры шрифтов, если необходимо */
.size-8 { font-size: 8px; }
.size-10 { font-size: 10px; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-20 { font-size: 20px; }
.size-24 { font-size: 24px; }
.size-28 { font-size: 28px; }
.size-32 { font-size: 32px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }

Полное руководство по интеграции

Шаг 1: Создайте резервную копию файла functions.php

Перед внесением изменений всегда создавайте резервную копию файла functions.php вашей темы.

Шаг 2: Добавьте комбинированный код

Замените оба существующих фрагмента кода на полный код, предоставленный выше. Это позволит:

• Добавить выпадающий список styleselect для пользовательского форматирования
• Добавить выпадающий список fontsizeselect для размеров шрифтов
• Добавить параметры пользовательских шрифтов в селектор шрифтов
• Сохранить существующую функциональность TinyMCE

Шаг 3: Проверьте в редакторе

После добавления кода перейдите к записи/странице и проверьте панель инструментов TinyMCE. Вы должны увидеть:

• Выпадающий список styleselect с вашими пользовательскими форматами
• Селектор шрифтов с вашими пользовательскими шрифтами
• Выпадающий список размеров шрифтов с различными опциями размеров

Шаг 4: Протестируйте пользовательское форматирование

Создайте тестовую запись и примените каждый параметр форматирования, чтобы убедиться, что:

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

Альтернативные решения с плагинами

Если вы предпочитаете не изменять код, рассмотрите эти варианты плагинов:

1. TinyMCE Advanced - популярный плагин, который расширяет редактор WordPress по умолчанию дополнительными параметрами форматирования и управления шрифтами.

2. Ultimate TinyMCE - предоставляет обширную настройку TinyMCE, включая пользовательские шрифты, стили и расширенные параметры форматирования.

3. Custom Font Manager - специально разработан для добавления пользовательских шрифтов в WordPress с легкой интеграцией в редактор.

Устранение распространенных проблем

Форматы не отображаются

Если ваши пользовательские форматы не отображаются в редакторе:

• Убедитесь, что выпадающий список styleselect виден на панели инструментов
• Проверьте, что в консоли браузера нет ошибок JavaScript
• Убедитесь, что ваши CSS-классы правильно определены в вашей теме

Проблемы со шрифтами

Если шрифты отображаются неправильно:

• Убедитесь, что шрифты правильно загружены (через Google Fonts или систему шрифтов вашей темы)
• Проверьте, что значения font-family точно совпадают в вашем CSS
• Очистите кэш браузера, чтобы увидеть изменения

Конфликты кода

Если вы столкнулись с конфликтами с другими плагинами:

• Временно деактивируйте другие плагины для определения конфликтов
• Используйте дочернюю тему, чтобы обновления темы не перезаписывали ваши изменения
• Рассмотрите возможность использования плагина, такого как Code Snippets, для управления вашим пользовательским кодом без изменения файлов темы

Реализовав это комбинированное решение, вы получите гармоничную работу как пользовательских параметров форматирования, так и выбора шрифтов в вашем WYSIWYG-редакторе WordPress, что даст вам полный контроль над внешним видом вашего контента, сохраняя при этом основную функциональность редактора.

Источники

1. WordPress.com Support - Personalize the WordPress editor
2. FolioVision - How to make tinyMCE plugin 4.9 more user-friendly
3. Jetpack Resources - How to Add Custom Fonts to WordPress