Как использовать редактор WordPress
Доброго времени суток, друзья!
В сегодняшней статье я бы хотел освятить всеми «не любимый» редактор блоков в WordPress.
WordPress как CMS обладает невероятно мощным набором функций. Плагины и виджеты привлекают людей к платформе, но когда они оказываются внутри, настоящая сила исходит от самого редактора WordPress. Независимо от того, какова ваша цель с платформой, вы будете использовать редактор постов/страниц в основном качестве. Поэтому я хочу показать вам, как использовать редактор WordPress в полной мере, чтобы ваш контент сиял, а ваш сайт процветал.
Что такое редактор WordPress?
Технически, есть три редактора WordPress, которые вы можете выбрать. С выпуском WordPress 5.0 редактор изменился с тогдашнего стандартного TinyMCE на Block Editor (Редактор блоков), который мы имеем сегодня. На фоне этих изменений плагин Gutenberg editor был выпущен в качестве моста для бета-тестирования новых функций для редактора блоков, прежде чем сделать его ядром WordPress.
Хотя редактор блоков используется в WP по умолчанию начиная с версии 5.0, вы можете выбрать любой из трех вариантов. Вы можете установить плагин Classic Editor, чтобы сохранить старый TinyMCE, плагин Gutenberg, чтобы сохранить новейшие функции (хотя потенциально нестабильные) в вашем редакторе, или вы можете сохранить редактор блоков по умолчанию.
Учитывая дополнительные шаги, связанные с использованием чего-либо, кроме редактора по умолчанию (а также присущую ему нестабильность и изменяющуюся природу плагина Гутенберга), я собираюсь сосредоточиться исключительно на редакторе блоков, который идет по умолчанию, в этом посте. Тем не менее, вы должны отметить, что основные принципы одинаковы с Gutenberg и TinyMCE, содержащийся в плагине Classic Editor, имеет базовую функцию паритета с любым данным rich-text редактором или программным обеспечением для обработки текстов — не говоря уже о любой конкретной функциональности WP, которую мы обсуждаем, как правило, отличаясь только эстетикой, а не функцией.
Учитывая все сказанное, давайте узнаем, как использовать редактор WordPress.
Основы работы редактора WordPress
Каждый раз, когда вы создаете страницу или запись (или пользовательский тип сообщения), вы будете использовать редактор блоков. Вам представлен учебник в модальном окне, и вы можете изучить основы, следуя ему все 4 слайда, которые он предлагает. Закройте его, и вы увидите основной редактор.
Базовый редактор блоков WordPress состоит из 5 элементов. Дополнительные плагины могут быть добавлены, но они обеспечивают базовую функциональность, с которой вы будете работать изо дня в день.
- Блок заголовка — все, что вы здесь введете, будет отображаться как основной тег H1 поста/страницы.
- Блок область содержимого — это область, в которую вы будете добавлять различные блоки, составляющие содержимое вашего сообщения или страницы.
- Кнопка «Добавить блок» — каждый раз, когда вы видите + в круге, вы можете щелкнуть по нему, чтобы добавить новый блок. Появится выпадающий список, из которого вы выбираете тип, который хотите вставить. Все они работают одинаково, поэтому, нажимаете ли вы один справа от блока, под блоком или в углу экрана, вы получаете одинаковые опции.
- Вкладка «Параметры документа» – на этой вкладке вы найдете все, начиная от категорий, тегов, постоянных ссылок, переключателей включения/выключения комментариев и многого другого. Плагины могут добавлять опции здесь, но они всегда применяются к общей странице или самому сообщению.
- Вкладка «Параметры блока» — эта вкладка содержит параметры для любого выделенного блока. Если вы щелкаете в блоке абзаца, вы редактируете параметры только для этого блока. Ни другие блоки, ни сам документ не меняются.
Ниже я расскажу о специфике этих областей и о том, как вы можете использовать их для создания наилучшего контента.
Что такое блоки?
Вы уже видели, как я упоминал блоки в этом посте, но каковы они? Блок представляет собой единый, настраиваемый элемент страницы или поста. Это может быть отдельный абзац, список, изображение или галерея. Эти блоки можно перемещать и настраивать по своему усмотрению, индивидуально настраивая и предоставляя вам детальный контроль над вашим контентом так, как это не может сделать редактор WYSIWYG.
Как вы можете видеть выше, каждый элемент страницы содержится в своем собственном блоке. Вы можете увидеть полный список блоков WordPress в документации по поддержке WordPress.
Как создать группу блоков
Группа блоков — это набор блоков, которые вы настроили для работы в качестве одного блока. Вы перемещаете их и стилизуете их, как если бы они были единым целым, но группа состоит из нескольких элементов.
Создать группу легко. Вы просто нажимаете на блок, затем удерживаете Shift или CTRL и нажимаете на другой. Если вы хотите сгруппировать все блоки в сообщении, вы можете нажать CTRL/CMD — A, чтобы выбрать все. Затем, когда вы видите значок в левом верхнем углу, который превращается в квадрат, состоящий из маленьких блоков, вы можете щелкнуть его и выбрать «Преобразовать в группу».
Если вам нужно разгруппировать их, просто нажмите кнопку с тремя точками и выберите «Разгруппировать».
Блоки теперь будут функционировать как отдельные блоки снова.
Что такое многоразовые блоки?
Вы можете превратить любой блок из одноразового блока в многоразовый блок из меню настроек. «Многоразовый блок» — это не шаблон, а скорее глобальный блок для вашего сайта. Вы создаете блок или группу блоков, а затем нажимаете кнопку «Добавить в повторно используемые блоки».
Любые изменения или правки, внесенные в этот повторно используемый блок, затем отражаются на всем сайте, изменяя каждый экземпляр блока, а не только тот, который вы редактировали.
Блок заголовка, как показано выше, является основным тегом H1 вашего поста или страницы. Он также создаст постоянную ссылку для сообщения, но его можно отредактировать, как только вы сохраните сообщение хотя бы один раз. Это также будет то, из чего извлекаются CSS-селекторы, такие как .post-title и .entry-title. (Однако ваши плагины для СЕО позволяют вам устанавливать то, что отображается в поисковых системах.)
Это единственный блок в редакторе WordPress, который вы не можете удалить или переместить. Вы должны использовать CSS или внешний компоновщик страниц (page-builder), чтобы настроить больше.
Блок область содержимого
В принципе, вы можете считать, что область содержимого находится там, где вы печатаете. Если вы хотите, вы можете начать печатать, написать целый пост, даже не рассматривая блоки вообще. Во всех основных отношениях это заменяет простую область WYSIWYG TinyMCE и является самым большим изменением в редакторе WordPress с тех пор, как…ну…как-то так.
Однако с помощью редактора блоков вы можете сделать гораздо больше. Каждый раз, когда вы нажимаете «enter» или «return», вы добавляете новый блок абзаца. Чтобы добавить другой вид блока (любого вида), нажмите на + в круге, и вы получите выпадающий список всех доступных блоков. Обязательно прокрутите список, потому что они тоже настроены в разных категориях. Вы также можете искать конкретный блок, если вы знаете, какой тип хотите.
Вы можете добавлять видеоблоки YouTube, изображения, галереи, аудиоплееры, списки, цитаты и многое другое. Каждый из них имеет свои собственные настройки и варианты укладки. Кроме того, чем больше вы используете блок, редактор WordPress распознает его как часто используемый и перечислит его в разделе «наиболее часто используемый», так что вам больше не придется прокручивать или искать его. Многоразовые блоки и группы блоков также могут отображаться в разделе наиболее часто используемые.
Если вы посмотрите на изображения в этом разделе, то (1) указывает на кнопки переупорядочения, которые вы получаете для каждого блока, когда он выбран (просто нажмите на него, чтобы выбрать). (2) указывает на выпадающий список, который позволяет удалить блок, а также отредактировать его содержимое в виде HTML, клонировать его или добавить новые блоки вокруг него.
Однако эти параметры и настройки отличаются от вкладки «Параметры блока» в правом верхнем углу экрана, о которой я упоминал выше и обсудим в следующем разделе ниже.
План документа, количество слов и другая информация
В верхней панели инструментов страницы у вас есть i в круге. Нажмите на него, и вам будет представлен полный обзор того, из чего состоит ваш документ.
До тех пор, пока вы использовали блоки заголовков, у вас будет отображаться контур документа в дополнение к количеству слов, номеру абзаца и количеству блоков. Если у вас нет блоков заголовков, то этого раздела там не будет. Вы можете нажать на любой из элементов схемы документа, чтобы перейти непосредственно к этому блоку. Эта особенность неоценима в более длинных документах.
Если вы нажмете на значок вложенного списка рядом с этим, вы также увидите упорядоченный список всех блоков в сообщении, а не только заголовки для структуры.
Опять же, вы можете щелкнуть что-нибудь в списке, чтобы перейти непосредственно и выбрать этот блок.
Вкладка «Параметры блока»
В верхнем правом углу редактора WordPress вы увидите вкладку с надписью «Блок». Пока у вас выбран блок, вы получите контекстный набор опций для этого типа блока. Однако любые внесенные вами изменения будут влиять только на один выбранный вами блок.
Вы можете изменить размер миниатюр изображения на этой вкладке, добавить цветной фон к абзацу, чтобы создать предупреждение, или настроить размер шрифта в заголовке, например. Если у вас открыта вкладка «Блок», параметры изменяются на конкретно выбранный блок. Если вы выделили блок абзаца, вы увидите это.
При выборе блока изображения вкладка «Блок» изменится на эту.
Каждый блок будет иметь определенные параметры, которые вы можете настроить в них, которые применяются только к этому типу блока (и будут отображаться только в этом конкретном блоке). Однако каждый блок имеет раздел «Расширенные» на вкладке, который позволяет применять классы CSS к этому блоку. Затем вы можете стилизовать их так, как считаете нужным, используя внешние таблицы стилей и код.
Вкладка «Параметры документа»
Слева от вкладки «Параметры блока» находится вкладка «Параметры документа». Если вы использовали WordPress в прошлом, они будут вам знакомы. Здесь вы сможете настроить категории вашего поста, теги, добавить показанное изображение, настроить постоянную ссылку, добавить отрывок для использования темы/СЕО, а также включить или отключить комментарии.
Каждый из этих разделов в значительной степени идентичен тому, где и что они были в редакторе TinyMCE WYSIWYG. Они применяются ко всему сообщению или странице, а не к одному блоку или целому сайту. Кроме того, как вы можете видеть на изображении выше, есть окно «WP Rocket Options». Некоторые плагины будут применять поля к этой области, но они всегда будут относиться непосредственно к самому документу, а не к содержимому или блокам.
Дополнительные метабоксы поста
В метабоксах для поста плагины добавят новые опции и возможности для самого контента. Они появляются в самом конце области содержимого, под блоками.
То, что появится в этом разделе (если что-нибудь), будет зависеть от того, какие плагины вы установили (или от любых функций темы, которые могут использовать эту область). Плагины СЕО в значительной степени используют эту область и все остальное, что позволит вам каким-то образом взаимодействовать с содержимым страницы, а не с деталями документа.
Выпадающий список параметров редактора WordPress
Если вы нажмете на значок выпадающего списка с тремя точками в правом верхнем углу экрана, появится большой вертикальный выпадающий список. Здесь можно настроить ряд параметров, которые применяются к самому редактору, а не к документу, блокам или содержимому.
По большей части это довольно простые варианты, такие как управление многоразовыми блоками или предоставление списка сочетаний клавиш или повторное открытие приветственного руководства, о котором я уже упоминал в начале.
Однако некоторые из наиболее часто используемых вариантов находятся почти на самом верху. В частности, переключатели для верхней панели инструментов, полноэкранного режима и режимов визуального редактора кода.
Переключатель «Верхняя панель инструментов» означает, что вместо параметров для выбранного блока, отображаемого в виде контекстного меню в верхнем левом углу блока, как я упоминал выше, он будет находиться в фиксированной области в верхней части экрана.
«Полноэкранный режим» включает или выключает панель администратора WordPress. Если вы отключите полноэкранный режим, вы увидите левую боковую панель, которая содержит типичные параметры панели мониторинга, такие как «Записи», «Страницы», «Внешний вид», «Настройки», «Инструменты» и т. д.
А переключатели «Визуальный редактор/Редактор кода» работают точно так же, как в редакторе TinyMCE. Примеры в этом посте до сих пор были с визуальным редактором. То есть вы видите визуальное представление поста при его написании. Вы получаете кнопки для нажатия, контекстные меню и визуализацию настроек в режиме реального времени при их изменении. Однако редактор кода — это просто код. У вас будет простое текстовое поле, в котором вы будете писать как обычный текст, так и HTML.
Обычно это делается для устранения неполадок с редактором или для тонкой настройки отдельной области или блока. Или, возможно, вставить содержимое, написанное во внешнем редакторе, который не будет правильно форматироваться в нескольких блоках.
Редактор блоков использует определенные HTML-теги, чтобы сообщить WordPress, какие блоки нужно визуализировать, поэтому убедитесь, что вы сохраняете любой код, который выглядит как < !– wp : paragraph – > нетронутым. В противном случае, все может стать довольно грязным.
Глобальные клавиши редактора блоков WordPress
Редактор блоков также поставляется с собственным набором горячих клавиш. Они не такие же, как TinyMCE, но они одинаково полезны и не менее важны для изучения. Помня самые полезные из них, вы сможете сэкономить много времени и усилий, если судить по опыту. Вы можете нажать «Shift + Alt + H», чтобы отобразить следующий список клавиш в самом редакторе WordPress.
Сочетания клавиш для документов
- Переключение между визуальным редактором и редактором кода — «Ctrl + Shift + Alt + M»
- Открывает блок навигации по меню — «Shift + Alt + O»
- Показывает или скрывает боковую панель настроек — «Ctrl + Shift + ,»
- Перейти к следующей части редактора — «Ctrl + `» или «Shift + Alt + N»
- Перейти к предыдущей части редактора — «Ctrl + Shift + `» или «Shift + Alt + P»
- Перейти к ближайшей панели инструментов — «Alt + F10»
- Сохранить ваши изменения — «Ctrl + S»
- Отменить последние изменения — «Ctrl + Z»
- Повторить последнюю отмену — «Ctrl + Shift + Z»
Сочетания клавиш для выбора
- Выделить весь текст при наборе текста. Нажмите еще раз, чтобы выбрать все блоки — «Ctrl + A»
- Очистить выбор — «ESC»
Сочетания клавиш для блоков
- Дублирует выделенный блок (и) — «Ctrl + Shift + D»
- Удаляет выбранный блок (и) — «Shift + Alt + Z»
- Вставить новый блок перед выбранным блоком (ами) — «Ctrl + Alt + T»
- Вставить новый блок после выбранного блока (ов) — «Ctrl + Alt + Y»
- Удалить несколько выбранных блоков — «Del» или «Backspace»
- Изменить тип блока после добавления нового абзаца — «/»
Сочетания клавиш для текста
- Сделать выделенный текст жирным шрифтом — «Ctrl + B»
- Сделать выделенный текст курсивом — «Ctrl + I»
- Преобразовать выделенный текст в ссылку — «Ctrl + K»
- Удалить ссылку — «Ctrl + Shift + K»
- Подчеркивает выделенный текст — «Ctrl + U»
Завершение
Редактор WordPress прошел большой путь за последнее десятилетие, и нынешний редактор блоков, безусловно, достаточно мощный, чтобы провести нас через следующее. Благодаря возможности детального управления каждым элементом на странице вы можете создавать контент быстрее, проще и гораздо эффективнее, чем это было возможно раньше. Однако, если текущий редактор блоков не для вас, существует плагин «Classic Editor», а если вы один из тех, кто хочет быть на переднем плане, плагин «Gutenberg» остается на несколько выпусков раньше, чем редактор по умолчанию в ядре WordPress. Так что независимо от того, какой способ вы предпочитаете создавать, WordPress вас накроет.
Дайте мне знать об этом в комментариях ниже!
А я на этом буду заканчивать — до скорых встреч и берегите себя!
"Как использовать редактор WordPress"
- Создание сайта на WordPress (31)
- WordPress для начинающих (22)
- Блог на WordPress (19)
- CMS Wordpress (16)
- Плагины Wordpress (16)
- WordPress SEO (15)
- Безопасность WordPress (12)
- Услуги More WP (1)
- Пожалуйста. Фигмой тоже можно, отличный графический редактор, но сервисы подойдут для все, так как не все смогут задизайнить картинку а редакторе. В общем главное чтоб было удобно и результативно :)
- Еще можно пользоваться Figma для того чтобы сделать нужные размеры. Спасибо вам за сервис по генерации иконок, не знал что пачкой можно сразу для всего сделать.
- Всегда пожалуйста, очень рад, что вам помогло :)
- Спасибо за материал! Даже такой полный чайник, коим я себя считаю, нашла ответы на свои проблемы с сайтом.
- Sitemap.xml сейчас в WP автоматически делается, правда работает не всегда. А для html карты использую обычно WP Sitemap Page, как по мне самый лучший он. И стараюсь как то оживить если можно так выразиться, https://sverchokcorm.ru/sitemap/ тут например пару картинок добавил)
- Спасибо, мне действительно помогло. Написано подробно и понятно, для непрограммистов идеально.
Приветствую, Sergey!
Я сам такой — сколько раз заставлял себя разобраться с новым, но рука тянется установить классику, а мозг не понимает зачем это сделано)
Ну не нравится мне новый редактор не могу ничего поделать, привык к старому, поэтому использую плагин Classic Editor и буду до последнего.