Как выделить текст в WordPress (Гутенберг и классический редактор) в 2020 году

RyRob.com: A Blog by Ryan Robinson


Сегодня мы говорим о как выделить текст в WordPress (как в редакторе Гутенберга, так и в классическом редакторе), чтобы получить результат, выделенный следующим образом:

Вот пример выделенного текста.

Будучи новым блоггером, когда вы начинаете свой блог с нуля, все небольшие технические компоненты изучения WordPress могут стать нежелательной проблемой – например, обнаружение таких вещей, как выделение текста в WordPress или изменение цветов и размеров шрифта) для различных элементов. текст из вашего блога WordPress.

Что ж, хорошая новость заключается в том, что, хотя выделение текста в WordPress было менее интуитивно понятным для самостоятельного изучения, теперь это сделать намного проще в 2020 году (как в Гутенберге, так и в редакторе Classic).

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

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

Как выделить текст в WordPress (Гутенберг и классический редактор)

  1. Как выделить текст в редакторе WordPress Gutenberg
  2. Как выделить текст в классическом редакторе WordPress
  3. Когда выделять текст в своем блоге WordPress (и почему)

Хорошо, теперь давайте погрузимся и поговорим о выделении текста в WordPress!


1. Как выделить текст в редакторе Gutenberg WordPress

(Лучший) процесс выделения текста как в Gutenberg, так и в классических редакторах фактически одинаков с технической точки зрения – он выглядит немного иначе из-за визуальных изменений в Gutenberg по сравнению с классическим редактором.

В любом случае вы добавите атрибут текста в стиле фона в текст, который хотите выделить.

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

Вот быстрый GIF (демонстрация циклического видео), который показывает, как выделить текст в редакторе Gutenberg WordPress:

Как выделить текст в редакторе WordPress Gutenberg (запись в формате GIF) Учебное пособие и снимки экрана

Я знаю, что этот GIF движется немного быстро (и его нелегко читать на мобильных устройствах). Итак, вот пошаговое руководство для выделения текста в WordPress с помощью редактора Гутенберга (в 2 простых шага):

1. Выберите пункт «Редактировать как HTML» в абзаце, который содержит ваш текст.

Редактировать как HTML (Снимок экрана) в редакторе Гутенберга

После нажатия на “Редактировать как HTMLOption », вы увидите, что ваш абзац текста преобразован во что-то похожее на это (теперь все HTML-атрибуты вашего текста теперь видны):

Снимок экрана в режиме HTML в Гутенберге

Отсюда, здесь вы добавите атрибут стиля цвета фона (в HTML-версии вашего абзаца), который выделит ваш текст.

2. Добавьте атрибут стиля цвета фона (в режиме HTML), чтобы выделить текст.

Атрибут цвета фона (скриншот) в режиме HTML для выделения текста в WordPress

Это шаг, который на самом деле выделяет ваш текст, добавляя этот атрибут стиля фона в начало вашего текста:

example of text you want to highlight

Вы знаете, что, конечно, вы можете изменить Цветовой код здесь для всего 6-значный шестнадцатеричный код, который вы хотите использовать в качестве выделенного цвета – и все готово!

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

Когда вы закончите выделять текст, вы должны вернуться к «Редактировать визуально» в редакторе Гутенберга следующим образом:

Редактировать визуальные эффекты (Скриншот) в Гутенберге

Ваш текст теперь будет выделен и будет выглядеть так:

Выделенный текстовый скриншот (учебник завершен) в редакторе Gutenberg WordPress

Хорошо, теперь вы узнали, как выделять текст в редакторе Gutenberg WordPress, поэтому давайте сделаем то же самое с редактором Classic.

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

Если ты пишет в блоге в классическом редакторе WordPress и хочет выделить определенный раздел текста, подчеркнув его – так же легко, как и в Гутенберге.

Вот быстрый GIF (демонстрация циклического видео), который показывает, как выделить текст в WordPress с помощью классического редактора:

Как выделить текст в WordPress (классический редактор) Учебное пособие по GIF и экранное руководство пользователя

Поскольку этот GIF движется довольно быстро и его не так легко увидеть на вашем мобильном телефоне, как на рабочем столе, здесь приведено пошаговое описание того, что происходит, когда вы хотите выделить текст в WordPress с помощью редактора Classic (за 2 простых шага) ):

1. Используйте курсор для выбора текста, который вы хотите выделить

Образец текста выделен в Классическом редакторе WordPress (снимок экрана)

После того, как вы выбрали текст, который хотите выделить, пришло время переключиться в режим редактирования “Текстовый режим«В верхнем правом углу над панелью редактирования:

Как перейти в текстовый режим в классическом редакторе (скриншот)

Теперь вы увидите HTML-версию своего блога и добавите атрибут, который выделяет ваш текст.

2. Добавьте атрибут стиля фона цвета HTML (в текстовом режиме), чтобы выделить текст.

Снимок экрана: выделенный текстовый атрибут (цвет фона) в WordPress Classic

Здесь вы выделите свой текст, добавив к нему следующий цвет фона:

example of soon-to-be highlighted text

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

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

Теперь вернемся к «Визуальному режиму» в классическом редакторе, вот как будет выглядеть выделенный текст:

пример выделенного текста

И вуаля! Вы выделили свой текст в Классическом редакторе! 👏

Последние мысли: когда Стоит ли выделять текст в WordPress (и почему)?

Теперь, когда я провел несколько минут, показывая вам Как выделить текст в WordPress… мы еще не трогали Почему Во-первых, вы хотите выделить текст и при применении выделенного текста может оказать положительное влияние на содержание вашего блога.

Вот несколько причин, по которым я выделяю текст в своем блоге:

  • Привлечь внимание читателя к очень важному уроку или уроку
  • Чтобы определенное слово или предложение выделялись визуально на странице
  • Чтобы подчеркнуть, что текст можно нажать (как призыв к действию)

Ладно, все на сегодня!

Вы только что узнали, как выделять текст в WordPress (как в редакторе Гутенберга, так и в классическом редакторе) – и как использовать выделенный текст в ваших интересах.

Вам нравится то, что вы видите. Зарегистрируйтесь, чтобы получить больше технических руководств и подлинных советов по ведению блога от меня.


Хотите больше уроков по блогам, доставляемых прямо на ваш почтовый ящик?

Присоединяйтесь сегодня и присоединяйтесь к 122 843 другим умным блоггерам, которые получают лучшие советы по ведению блога.


Leave a Reply

Your email address will not be published. Required fields are marked *