Применение семейства шрифтов к одному дефису НЕ работает в Wordpress

Question

Проблема высокого уровня: стиль шрифта CSS не применяется к одному дефису в пределах диапазона

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

HTML-код очень прост:

<h2>Test<span class="angleHyphen">-</span>Heading</h2>

CSS также очень прост:

 @import url('https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy');

    span.angleHyphen {
      font-family:'Sorts Mill Goudy', serif;
    }

Проблема уникальна для Wordpress

Если вы запустите этот код в CodePen или на обычной HTML-странице, он будет работать точно так, как вы ожидаете.Тем не менее, он не работает, когда генерируется редактором Wordpress - либо Гуттенберг, либо визуальный композитор.Если вы собираетесь ответить (что я искренне ценю), я бы посоветовал вам проверить это в любой среде Wordpress, прежде чем ответить «Это работает в этом фрагменте кода или стека».

Только проблема при применениик одному дефису

Это кажется уникальным, если дефис быть единственным содержимым промежутка.Если расширить диапазон, чтобы включить весь заголовок, шрифт (включая дефис) будет применен правильно.Другими словами, это работает (хотя и не дает нам нужного нам решения):

<h2><span class="angleHyphen">Test-Heading</span></h2>

Другой подход, который мы пытались проверить:

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

Я создал демонстрационную версию проблемы в wptest.4sdesignstudio.com , который также содержит некоторые дополнительные заметки и примеры, если вам интересно или вы хотите потратить время на изучение этого вопроса.

Вы увидите, что нет ошибок консоли.Если вы проверите элемент, вы увидите, что шрифт показывает, что он применяется.Мы включили приведенный выше пример, где мы заключаем весь заголовок в промежуток, показывая, что шрифт корректно загружается через Google Fonts.

Несколько других вещей, которые мы пробовали на основе вчерашних отзывов от Stack(и базовая отладка):

• Добавление дефиса с использованием юникода, шестнадцатеричного кода, HTML-кода и HTML-сущности
• Использование! важное в CSS
• Добавление шрифта-weight, как в @import, так и в качестве атрибута .angleHyphen в CSS (этот конкретный шрифт имеет только один font-weight, поэтому в этом нет необходимости, но у нас нет вариантов).
• Добавление встроенного стиля, как автономного, так и! Важно, чтобы 100% гарантировало, что не было никакого другого перехвата стилей.
• Изменение имени класса на угловой дефис, чтобы гарантировать отсутствиепроблема с учетом регистра из базы данных или иным образом.
• Добавление дефиса с использованием CSS (например, содержимое: "\ 2010")

Мы изначально столкнулись с проблемой в Чиld тема Salient, которая в основном строится с использованием Visual Composer и плагина классического редактора.Чтобы исключить некоторые противоречия, мы загрузили их в новой установке с использованием базовой темы Twenty Seventeen и встроенного редактора Guttenberg (версию, которую вы увидите по ссылке выше).

У меня нет идей для тестирования.Любые предложения приветствуются и приветствуются!Заранее благодарен стек сообщества!

Answer 1

Как уже упоминали @Turnip и @JA Streich, проблема в том, что по умолчанию Wordpress заменяет «дефис» на дефис.По-видимому, это делается для того, чтобы пользователям было проще добавлять в текстовое содержание en das и em dash, используя редактор, набирая такие вещи, как «-» и «---».

Решение состоит в том, чтобы удалить wptexturize.функция фильтра в functions.php.Это выглядит так:

remove_filter( 'the_content', 'wptexturize' );

Однако простое добавление этого в functions.php с большой вероятностью будет перезаписано во время будущего обновления, как указывал @JAStreich.

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

Решениеперехватывать после того, как загружен файл functions.php родительской темы.Вы можете сделать это в файле functions.php дочерней темы следующим образом:

function remove_parent_filters(){
    remove_filter( 'the_content', 'wptexturize' );
}
add_action( 'after_setup_theme', 'remove_parent_filters' );

Я надеюсь, что это поможет кому-то в будущем, потому что я бы ненавидел потраченное на это время впустую =).

Обновление:

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

С тех пор я отключил wptexturize глобально в файле functions.php дочерней темы.Мы посмотрим, будет ли оно работать со временем с основными обновлениями Wordpress, но пока это разумное решение.

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

add_filter( 'run_wptexturize', '__return_false', 9999 );

Это решение вместе с некоторыми проницательнымиКомментарии были взяты из этого стека: https://wordpress.stackexchange.com/questions/241454/how-can-i-reliably-and-globally-disable-wptexturize/241468

Answer 2

Wordpress превращает символы тире в символы тире, два или три тире в тире.Как правило, это правильно делать типографски и символически.Это происходит при сохранении поста.Замена производится в файле /wp-includes/formatting.php.Это основной файл WordPress, поэтому изменения в нем с высокой вероятностью будут заменены при обновлении WordPress, поэтому имейте в виду, что если вы сделаете это изменение, вам, возможно, придется периодически его переделывать.Тем не менее, переменные, которые вы бы изменили, это $static_characters, и это замена в $static_replacements.