Невозможно изменить шрифт редактора WordPress.

Question

Я сейчас пытаюсь изменить шрифт редактора WordPress tinymce, но он не работает.

Сначала я создал tinymce-custom-editor.css со следующим содержимым:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    font-family: "Open Sans", Arial, sans-serif !important;
}

Послесохраняя и загружая, я включил его в мой файл тем functions.php следующим образом:

/**
 * Add editor styles
 */
add_action( 'after_setup_theme', 'add_custom_editor_style' );
function add_custom_editor_style() {
    add_editor_style( get_stylesheet_directory_uri() . '/css/tinymce-custom-editor.css' );
}

Я не получаю ошибки, что файл не может быть найден, поэтому я ожидаю, что он будет успешно включен.Когда я удаляю кеш и перезагружаю страницу, шрифт по-прежнему неправильный:

font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;

Это должно выглядеть вот так:

Что я здесь не так делаю?

Answer 1

Теперь я нашел проблему.Требуется получить файл, но фильтр, который я нашел на SO, кажется неправильным.Так что я углубился в лабиринт и нашел правильный фильтр.Поэтому, если вы хотите:

Редактировать стили CSS для tinymce (в моем случае это font-family)

Вы должны использовать этот фильтр:

/**
 * Add custom editor styles to tinymce editor
 */
add_filter( 'mce_css', 'add_custom_editor_style' );
function add_custom_editor_style() {
    return get_stylesheet_directory_uri() . '/css/tinymce-custom-editor.css';
}

Теперь вы можете поместить все, что хотите, в свой собственный стиль редактора CSS файл.

Answer 2

Прежде всего, вы должны убедиться, что ресурс css загружен (ищите его в источнике страницы).Если он загружен, вы на правильном пути.Если это не так, выясните, откуда WP пытается загрузить его и исправьте путь.

Ваша вторая проблема в том, что ваш селектор * слишком общий (он повлияет на все, что еще не былонабор font-family) и слишком слабый (он будет переопределен практически любым другим селектором, применяющим font-family к любому элементу).

Итак, если таблица стилей загружается правильно, все, что вам удалось сделать, это применить font-family к любому элементу, для которого он еще не установлен.

Вам нужно проверить элемент, который вы пытаетесь стилизовать, и найти специфику селектора, который в настоящее время применяет свойство font-family.Как только ваш селектор окажется сильнее, чем тот, который применяется, ваш font-family будет применяться (если ваша таблица стилей загружается позже, специфичность может быть эквивалентна, и ваше значение будет по-прежнему применяться).