Статьи

Визуальный редактор WordPress: советы и рекомендации для начинающих

WordPress изначально создавался как простая система ведения блогов, которая упростила публикацию контента в Интернете. Со временем она превратилась в полноценную систему управления контентом (CMS). Теперь пользователи имеют полный контроль над дизайном и функциональностью своих веб-сайтов WordPress. Однако без контента дизайн и функция ничего не значат, и в этом отношении WordPress остается верным своим корням: созданию контента и управлению им.

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

WYSIWYG

WordPress позволяет вам создавать контент и управлять им визуально, а не кодировать его непосредственно в ваших файлах. Поэтому для непосвященных он называется WYSIWYG-редактором или «Что видишь, то и получаешь». Инструмент редактирования состоит из трех частей:

  1. Визуальный редактор
  2. Текстовый редактор (где вы можете ввести код)
  3. Media Uploader (для загрузки файлов изображений)

По умолчанию визуальный редактор активен, когда вы создаете новую запись или страницу (Страницы > Добавить новую или Сообщения > Добавить новую ). Если случайно он не активен, щелкните по нему:

Визуальный редактор WordPress: советы и рекомендации для начинающих

WYSIWYG означает, что то, что вы видите в визуальном редакторе при редактировании сообщения, будет отображаться в опубликованном сообщении. Текстовый редактор позволяет вводить простой текст, а также позволяет вводить код (разметку HTML) напрямую, как если бы вы работали с фактическим файлом HTML. Вы активируете его, щелкнув вкладку Текст в правом углу редактора:

Визуальный редактор WordPress: советы и рекомендации для начинающих

Media Uploader делает именно это: загружает медиа-файлы в медиа-библиотеку, чтобы вы могли вставлять их в свои сообщения по своему усмотрению:

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Добавление текста

Первым делом нужно запустить новую страницу или сообщение и открыть визуальный редактор: перейдите в «Сообщения» > «Добавить». По умолчанию при создании новой публикации вы увидите сокращенную панель инструментов:

Визуальный редактор WordPress: советы и рекомендации для начинающих

Щелкните значок кухонной раковины, чтобы отобразить другие параметры форматирования на панели инструментов:

Визуальный редактор WordPress: советы и рекомендации для начинающих

Для создания базового контента и управления им подойдут указанные выше параметры форматирования. Даже если вы новичок в WordPress, большинство значков будут знакомы по другим текстовым редакторам, таким как Microsoft Word. Фактически, все значки на панели инструментов визуального редактора выполняют ту же функцию, что и идентичные значки в Microsoft Word, поэтому я выделил менее знакомые для обсуждения.

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

Визуальный редактор WordPress: советы и рекомендации для начинающих

Использование этого способа выполняется быстро, а визуальный редактор хорошо сохраняет большую часть вашего форматирования из Word – по крайней мере, лучше, чем стандартное копирование и вставка. Однако, как вы вскоре обнаружите, это не безупречная работа, и иногда вы можете получить искаженный текст. Я считаю, что гораздо проще вставить обычный текст, а затем выполнить форматирование в визуальном редакторе.

Удалить форматирование из вашего текста

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

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Изменение типа текста

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

Визуальный редактор WordPress: советы и рекомендации для начинающих

Очевидно, что вы можете форматировать свои сообщения как хотите, но убедитесь, что есть некоторая структура для согласованности. Заголовки разделов, например, должны иметь одинаковый формат заголовка, например заголовок 2, в то время как основным заголовком обычно является заголовок 1. Кроме того, стандартный текст абзаца должен иметь формат по умолчанию, а также предварительно отформатированный текст и адреса.

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

Используйте тип «Абзац» в раскрывающемся списке, чтобы удалить форматирование из заголовков, поскольку кнопка «Удалить форматирование» не работает для заголовков и цитат.

Используйте кнопку Цитата, чтобы отформатировать или удалить форматирование цитаты:

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Вставить еще тег

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Здесь пригодится изящная функция «Вставить больше тегов». Это позволяет вам точно указать, где закончится отрывок. Ссылка, указывающая на полный текст сообщения, будет вставлена ​​там, где вы указали конец отрывка. Есть много способов отформатировать этот тег, но помните, что по умолчанию он работает только для сообщений (не для страниц):

Визуальный редактор WordPress: советы и рекомендации для начинающих

Примечание. Использование тега Insert More зависит от поддержки выбранной вами темы. Большинство продуманных тем поддерживают его, но некоторые нет.

Добавить и удалить ссылки

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Специальные символы

Визуальный редактор WordPress: советы и рекомендации для начинающих

Если вы когда-либо использовали кнопку специальных символов в Word, это тоже должно быть вам знакомо. Однако этот более интуитивно понятен, поскольку он отображает коды HTML и NUM персонажа при наведении на него курсора:

Визуальный редактор WordPress: советы и рекомендации для начинающих

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

Я также хотел бы услышать от вас, как вы используете визуальный редактор. У вас есть какие-нибудь советы или хитрости, которыми вы хотели бы поделиться?

Кнопка «Наверх»