Визуальный редактор Wordpress

Когда я использую редактор WordPress HTML, чтобы добавить значки icomoon, как это:

<span class="icon-shield"></span>

и затем переключитесь на визуальный редактор и затем вернитесь в редактор HTML, значки исчезнут. Я пытаюсь включить этот бит Javascript, чтобы исправить это. Я посмотрел на wp_enqueue_scripts и поместил это в functions.php, но это все еще не решает проблему.

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

Как я могу это исправить?

Фон

Эта проблема связана с удалением пустых <span></span>элементов в TinyMCE при сохранении сообщения или переключении между вкладками редактора Visualи Text. Проблема присуща основной функциональности (начиная с версии магистрали 4.0-alpha-20140602) и не может быть изменена через стандартные API WordPress, как упомянуто в билете № 26986 . Билет содержит подробное описание причин настройки и помечен как wont-fix, означающий, что ваша лучшая ставка - один из «обходных путей», перечисленных ниже.

Поведение WordPress / TinyMCE по умолчанию

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

Из документов MDN<span> :

Элемент HTML является общим встроенным контейнером для фразования контента, который по своей сути ничего не представляет. Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов class или id) или потому, что они имеют общие значения атрибутов, например lang. Его следует использовать только в том случае, если другой семантический элемент не подходит.

Как <span>и предполагалось, для группировки встроенных элементов / содержимого основные участники WordPress решили, что элемент должен быть неактуальным, когда тег пуст, и, таким образом, убрать его из содержимого.

Обходные

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

Идеально: дать <span>текст для чтения с экрана

Программы чтения с экрана - это части программного обеспечения, которые пытаются интерпретировать экранный контент, чтобы помочь слабовидящим. При обработке веб-страницы большинство программ чтения с экрана либо полностью отключают CSS (и Javascript), либо обрабатывают только подмножество, так что вещи, обычно скрытые с помощью CSS, будут обрабатываться так, как если бы они были видимы. Web-разработчики традиционно используют это поведение во имя доступности, создавая класс CSS, который можно применять к элементам, которые будут скрывать их от всех, у кого включен CSS, что-то вроде :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Когда этот класс доступен (таблицы стилей вашей темы, вероятно, имеют аналогичный класс), в пределах вашего диапазона значков вы можете добавить второй диапазон «screen-reader», который не будет (или, по крайней мере, будет казаться) отображаться на экране, но предоставит программам чтения с экрана доступную альтернативу вашей иконке, аналогично тому, как altработает атрибут <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Выше будет отображаться ваш значок, когда CSS включен, и программы чтения с экрана будут интерпретировать «Безопасность» на своем месте.

Предоставить <span>невидимый контент

Чтобы исключить возможность <span>удаления s, вы можете добавить контент, который явно не отображается:

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

  <span class="icon-shield">&nbsp;</span>

• Предполагая, что вы работаете с набором символов UTF-8, вы можете использовать символ "мягкого дефиса" через сущность HTML ­. В отличие от этого  , мягко-гиперный символ отображается так, как будто он не занимает места и не должен влиять на размер вашего диапазона:

  <span class="icon-shield">&shy;</span>

Используйте альтернативный элемент

В то время как WordPress TinyMCE настроен для удаления пустых <span>элементов, есть ряд других тегов, которые по умолчанию настроены для разрешения существования без содержимого. В комментариях билет # 26986 , TobiasBg рекомендует использовать<i> ( <em>, <b>и <strong>несколько других возможностей). См. Этот вопрос переполнения стека для получения дополнительной информации о практике использования <i>значков.

<i class="icon-shield"></i>

Создайте свой собственный экземпляр TinyMCE

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