Как выровнять текст в редакторе WordPress

В предыдущих версиях WordPress вы могли легко выравнивать текст с помощью кнопки. Но кнопка Justify была удалена из классического редактора WordPress и никогда не включалась в Gutenberg. Для этого есть веская причина. Выровненный по ширине текст во многих случаях может быть труднее читать, поэтому, вообще говоря, вы должны использовать его с осторожностью.

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

Хотя вам могут нравиться выровненные края текста по ширине, это делает интервалы между словами неравномерными, что затрудняет чтение, особенно большими блоками.

Тем не менее, если у вас есть варианты использования выравнивания текста по ширине, вот несколько способов, которыми вы можете добавить его обратно в редактор WordPress.

Как выровнять текст в классическом редакторе WordPress

Если по какой-то причине вы все еще используете классический редактор, вы, возможно, были встревожены, когда кнопка выравнивания была удалена в WordPress 4.7. Однако вы можете легко добавить его обратно с помощью этого простого плагина: Кто украл кнопку выравнивания текста?

Никаких настроек — установите и активируйте плагин и все готово. При следующем посещении экрана редактирования вы снова увидите кнопку «Выровнять текст по ширине»:

Не беспокойтесь о том, что этот плагин официально не тестировался с последней версией:

Плагин все еще работает — я тестировал его на WordPress 5.9.

Как выровнять текст в блочном редакторе WordPress/Гутенберге

Когда вы добавляете блок «Абзац» в Гутенберге, у вас есть некоторые основные параметры форматирования, такие как жирный шрифт, курсив, выравнивание текста по левому/правому/центру и несколько других, доступных за стрелкой вниз:

По умолчанию вы не найдете там опции «Обоснование». Но есть еще несколько разных способов выравнивания текста в редакторе блоков.

Использовать плагин

Реактивный ранец

Если вы используете Jetpack, у вас уже есть возможность выравнивать текст. Опция доступна за стрелкой раскрывающегося списка:

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

Плагин набора редакторов

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

Кто украл кнопку выравнивания текста?

Тот же плагин, упомянутый выше, добавит кнопку выравнивания обратно в классический блок в Гутенберге:

Используйте CSS

Создайте повторно используемый класс CSS

Если вам нужно использовать выровненный текст только в нескольких случаях, вы можете создать специальный класс CSS для применения к определенным блокам.

В этом есть две части:

1. Добавьте правило стиля, которое применяет выравнивание к CSS вашего сайта.
2. Добавьте пользовательский класс в редактор блоков

В разделе CSS настройщика или там, где вы добавляете пользовательский CSS для своего сайта, добавьте следующее:
.justifymyp {text-align:justify;}

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

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

Затем в Дополнительный CSS класс поле, добавьте собственное имя класса CSS. Обратите внимание, что вам не нужен предыдущий .только само название: justifymyp

Теперь к этому блоку будет применено ваше CSS-правило обоснования.

Глобальный стиль CSS

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

Например, в следующем примере текст с выравниванием по ширине будет применен ко всем абзацам в пределах entry-content раздел вашего сайта.

.entry-content p {text-align:justify;}

Горячие клавиши

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

Я оставлю их здесь, чтобы вы попробовали, может быть, вам повезет;)

Сочетание клавиш Mac для выравнивания текста:

CTRL + ОПЦИЯ + J

Ярлык Windows:

CTRL + ALT + J (Windows)

Теперь у вас есть возможность выравнивать текст, используйте ее ответственно!