Текстовый редактор wordpress: Текстовый редактор для WordPress tinymce advanced

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

Смотрите также:

• Как добавить свои стили в WordPress редакторе TinyMCE
• Как изменить ширину колонки в визуальном редакторе записей WordPress
• Улучшаем вид редактора кода WordPress с помощью CodeMirror
• Создаем свои кнопки для редактора записей WordPress
• Настраиваем шаблон оформления в редакторе WordPress
• Используем шрифты Google Fonts в текстовом редакторе WordPress

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

1. Добейтесь большего со стандартным визуальным редактором

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

Визуальный редактор VS. Текстовый редактор

WordPress оснащён как визуальным, так и текстовым редактором. Текстовый редактор показывает вам исходный текст с разметкой HTML и позволяет вам настроить текст полностью:

Внутри самого текстового редактора вы можете непосредственно манипулировать изображениями и другими медиа файлами вместо того, чтобы использовать кнопку Add Media.

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

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

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

Кнопки Визуального Редактора

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

Большинство значков очевидны, но есть и менее понятны. Давайте взглянем на них поближе.

Цитата

Кнопка цитаты используется для отображения цитируемого текста.

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

Вставить тег Читать далее

Эта кнопка вставляет горизонтальную линию для разрыва текста, как на изображении ниже:

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

Вставить как текст

Кнопка Paste as Text используется для того, чтобы очистить текст, который вы скопировали из другого источника, от форматирования. Если вы просто скопируете и вставите, то текст может отобразиться в совершенно отличном от нужного формата виде. Кнопка Paste as Text убирает всё форматирование и тэги HTML.

Очистить форматирование

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

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

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

Сочетание клавиш

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

Сочетания клавиш могут предложить некоторые дополнительные функции, отсутствующие в панели инструментов, к примеру, «копировать», «вставить» и «код». «Код» используют для выделения блоков кода в тексте:

Полноэкранный режим

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

2. Плагины для визуального редактора

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

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

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

TinyMCE Advanced

С более чем миллионом установок, TinyMCE Advanced пользуется огромным успехом у пользователей WordPress. Это лёгкий в использовании плагин, который позволяет добавлять, изменять и удалять кнопки с панели инструментов визуального редактора WordPress. Он также позволяет вам настроить до четырех рядов кнопок, которые удовлетворят ваши нужды.

В наличии есть дополнительные кнопки Font Family, Font Sizes, Insert Date/Time, Page Break и многие другие. TinyMCE Advanced также упрощает создание и настройку таблиц. Плагин позволяет вам включить меню редактора, которое предлагает ещё больше параметров для создания и редактирования контента.

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

Основные характеристики:

• Кнопки drag-and-drop для настройки вашей панели инструментов
• Создание и редактирование таблиц
• Дополнительные параметры для вставки списков
• Поиск и замена функций
• Выравнивание текста
• Возможность вставить разрыв страницы
• Возможность добавить смайлики

Цена: Бесплатно

WP Edit

WP Edit не такой популярный, как TinyMCE Advanced — 100,000 активных установок, но он также предлагает целый ряд функций.

Основные характеристики:

• Простая вставка медиа файлов, например, изображений, видео и иллюстраций
• Создание и редактирование таблиц
• Простой доступ к шорткодам
• Вставка колонок в поле контента с помощью шорткодов
• Разрешённые шорткоды в полях виджетов

Цена: Базовый плагин бесплатный, а цена премиум версии начинается от $17.50.

3. Настройка отображения контента в редакторе

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

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

Также можно использовать фронтэнд редактор, как в Divi 3.0. Этот интуитивно понятный редактор позволяет редактировать страницы или записи прямо во фронтэнде вашего веб-сайта, не используя код.

Выводы

Хотя визуальный редактор WordPress – это полезный инструмент, но он имеет свои ограничения. Применяя советы, изложенные в этой статье, вы можете усилить визуальный редактор и улучшить процесс создания контента. Давайте вспомним:

• Максимально используйте стандартный визуальный редактор: Стандартный визуальный редактор имеет множество функций, особенно если вы знакомы с интерфейсом.
• Добавьте пользовательский функционал: Плагины типа TinyMCE Advanced и WP Edit могут расширить возможности визуального редактора WordPress.
• Настройте отображения контента в редакторе: Если вы чувствуете себя уверенно с кодом, то дальнейшая настройка достаточно проста.

А у вас есть секреты настройки визуального редактора WordPress? Поделитесь ими с нами в комментариях!

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Как использовать редактор блоков WordPress: Основное руководство по Гутенбергу

Что такое Гутенберг?

Как мне получить редактор Гутенберга?

Это редактор блоков, а не текстовый редактор

Что такое блоки?

Как эффективно использовать редактор блоков WordPress

Как добавлять новые блоки

Используйте клавишу Enter

Используйте кнопку Добавить блок

Метод быстрой вставки

Как выбрать и скопировать контент

Нажмите и перетащите курсор

Сочетание клавиш «выбрать все»

Как выбрать несколько блоков

Как скопировать весь пост

Как перемещать и переставлять блоки

Перемещайте блоки стрелками

Перемещайте блоки с помощью перетаскивания

Перемещайте несколько блоков одновременно

Вы все еще можете копировать и вставлять

Как удалить блоки

Сочетание клавиш удаления

Удалить, выбрав контент

Используйте кнопку «Удалить блок»

Как преобразовать типы блоков

Небольшая заметка о заполнителях

Как настроить внешний вид блока

Как разместить блоки рядом

Как получить еще больше блоков

Установите новые плагины

Добавить блоки из каталога блоков

Как настроить редактор блоков

Что, если я хочу вернуть классический редактор?

Вы эксперт по редактированию блоков!

Вас смущает редактор WordPress?

Я первый признаю: к этому нужно привыкнуть.

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

• Как добавить новые блоки?
• Как я могу перемещать блоки?
• Как удалить блок?

На все эти и многие другие вопросы мы ответим в этом руководстве по редактору WordPress.

Прежде чем мы перейдем к деталям использования редактора WordPress, вот краткое объяснение того, почему вы можете видеть разные редакторы в статьях WordPress в Интернете и что такое редактор «Gutenberg».

Что такое Гутенберг?

Более десяти лет WordPress использовал текстовый редактор, который выглядел так, теперь он считается «классическим редактором»:

Затем 6 декабря 2018 года вышла версия WordPress 5.0, которая переключила все сайты на новый редактор, который они назвали «Гутенберг» в честь первого печатного станка.

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

Итак, если вы видите, что кто-то в Интернете говорит о редакторе «Гутенберг», они просто имеют в виду редактор, который сейчас используется на всех сайтах WordPress (в отличие от классического редактора).

Как мне получить редактор Гутенберга?

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

Если вы посетите публикацию или страницу в панели управления администратора, она должна выглядеть так:

Если это не так, убедитесь, что вы используете WordPress версии не ниже 5.0. Вы можете проверить свою версию WordPress в правом нижнем углу панели инструментов.

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

Плагин редактора Gutenberg устанавливать не нужно .  Это бета-плагин для пользователей, которые хотят опробовать новые функции, прежде чем они будут включены в ядро ​​WordPress.

Теперь, когда вы понимаете, откуда взялось название «Гутенберг» и как получить доступ к редактору, поговорим о блоках.

Это редактор блоков, а не текстовый редактор

Вы можете думать о редакторе блоков как о текстовом редакторе особого типа.

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

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

Чтобы полностью оценить эти различия, вам нужно точно знать, что такое блок.

Что такое блоки?

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

Например, этот абзац, который вы читаете в данный момент, является блоком абзаца, а заголовок над ним был добавлен с блоком заголовка.

Каждый фрагмент контента, который вы добавляете на страницу в WordPress, содержится в блоке.

Таким образом, блок – это не визуальный элемент – вы не видите прямоугольных блоков на странице – блок – это просто термин, обозначающий единицу контента. Это контейнер.

Все в редакторе – блок

Хотя я считаю, что понимание этой терминологии чрезвычайно полезно, я знаю, что вы здесь не по этой причине.

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

Ниже приведены все советы и рекомендации по рабочему процессу, которые вам понадобятся, чтобы эффективно работать с редактором WordPress.

Как эффективно использовать редактор блоков WordPress

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

Первое, что вам нужно знать, это как добавлять блоки.

Как добавлять новые блоки

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

Используйте клавишу Enter

Опыт набора текста в редакторе блоков практически такой же, как и в обычном текстовом редакторе.

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

Когда вы нажимаете Enter, вы создаете новый блок, а не новый абзац. Новый блок может стать любым блоком (например, изображением или видео). Он становится абзацем только после того, как вы вводите в него слова.

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

Используйте кнопку Добавить блок

На данный момент кнопка «Добавить блок» довольно сбивает с толку. Я надеюсь, что они скоро его изменят, поскольку они уже сильно изменили его за последние два года.

Если вы нажмете клавишу Enter, чтобы создать пустой блок, вы увидите эту черную кнопку с плюсом в правой части редактора:

Щелчок по нему откроет всплывающее окно выбора блока, позволяющее вставлять любой тип контента, который вы хотите.

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

Это дает вам гораздо большее и удобное окно для выбора типа блока.

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

Как только вы узнаете, какие блоки у вас под рукой, вы можете перейти на улучшенный метод быстрой вставки …

Метод быстрой вставки

Вот как я добавляю блоки в свои сообщения.

После нажатия клавиши Enter для создания нового пустого блока введите косую черту «/», чтобы открыть меню быстрого выбора. Затем начните вводить имя блока, который хотите добавить. Он сразу появится в меню.

Хотя вы можете использовать мышь для выбора блока, быстрее просто пролистайте список вверх / вниз и снова нажмите Enter. Этот метод добавления изображений и других элементов намного быстрее, чем все, что вы можете сделать с помощью традиционного текстового редактора. Чтобы добавить изображение, вы просто набираете «/ ima» и нажимаете Enter. Это моя любимая часть редактора блоков.

Теперь, когда вы знаете, как добавлять блоки, давайте поговорим о их выборе и копировании.

Как выбрать и скопировать контент

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

Вот три способа выделить текст в редакторе блоков.

Нажмите и перетащите курсор

Чаще всего люди выделяют текст, перетаскивая его через слова.

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

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

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

Сочетание клавиш «выбрать все»

Способ «выбрать все» в редакторе блоков на самом деле намного лучше, чем в обычном текстовом редакторе.

Обычно в текстовом редакторе вы нажимаете cmd + a (ctrl + a в Windows), чтобы выделить весь текст во всей статье. Если вы попробуете это в редакторе блоков, он выделит только весь текст в текущем блоке.

Однако вы можете снова нажать cmd + a, чтобы выбрать все блоки в сообщении.

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

Как выбрать несколько блоков

Есть два способа выбрать несколько блоков в редакторе.

Во-первых, вы можете щелкнуть и перетащить курсор по блокам, например:

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

Лучший способ – щелкнуть первый блок, который вы хотите выбрать, прокрутить до самого дальнего блока, который вы хотите выбрать, а затем, удерживая клавишу SHIFT, щелкнуть по нему, например:

Эта техника выберет оба блока, на которые вы нажали, и все блоки между ними.

Как скопировать весь пост

Если вам нужно скопировать все содержимое сообщения, вы можете использовать двойной cmd + ярлык, или вы можете использовать опцию Копировать все содержимое, найденную в меню настроек.

Это отличный способ быстро переместить сообщение с одного веб-сайта WordPress на другой.

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

Как перемещать и переставлять блоки

Как вы только что узнали, копирование и вставка – не лучший способ переставить абзацы. Редактор блоков предоставляет два способа перемещения блоков по странице.

Перемещайте блоки стрелками

Если вам нужно переместить блок немного вверх или вниз по сообщению, вы можете использовать кнопки со стрелками, добавленные на панель инструментов:

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

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

Перемещайте блоки с помощью перетаскивания

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

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

Вы увидите синюю линию в том месте, где будет вставлен блок.

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

Перемещайте несколько блоков одновременно

Если вы читали советы выше, то уже знаете, что можете удерживать клавишу SHIFT, чтобы выбрать диапазон блоков. После того, как вы выбрали несколько блоков, вы увидите, что панель инструментов отображается только над первым блоком. Затем вы можете использовать кнопки со стрелками или перетащить всю группу сразу.

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

Вы все еще можете копировать и вставлять

Кнопки со стрелками – это самый простой способ перемещать абзацы и изображения по вашему сообщению, но вы все равно можете использовать копирование и вставку, если хотите.

Для этого вы должны использовать cmd + ярлык для копирования содержимого блока, затем использовать cmd + x, чтобы вырезать содержимое, а затем создать новый блок с помощью клавиши Enter и нажать cmd + v, чтобы вставить скопированное содержимое.

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

Как удалить блоки

Удаление контента – это часть создания контента, поэтому вам нужно знать, как удалить свои блоки.

Есть три способа удалить любой блок в редакторе.

Сочетание клавиш удаления

Я всегда предпочитаю сочетания клавиш, поэтому рекомендую в первую очередь.

Щелкните любой блок, а затем нажмите следующие клавиши.

• Mac: ctrl + option + z.
• Windows: alt + shift + z

Это немедленно удалит блок.

Удалить, выбрав контент

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

1. Щелкните где-нибудь в блоке
2. Нажмите cmd + a (ctrl + a), чтобы выбрать полное содержимое.
3. Нажмите Delete / Backspace, чтобы удалить содержимое.
4. Снова нажмите Delete / Backspace, чтобы удалить блок.

Для блока изображения вы можете просто щелкнуть изображение, а затем нажать клавишу Delete / Backspace, чтобы удалить его.

Используйте кнопку «Удалить блок»

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

Чтобы удалить блок таким образом:

1. Нажмите на блок
2. Щелкните значок Дополнительные параметры
3. Нажмите «Удалить блок».

Этот метод работает для всех типов блоков.

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

Как преобразовать типы блоков

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

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

Вы можете щелкнуть любой блок абзаца, а затем щелкнуть значок абзаца на панели инструментов, чтобы показать типы блоков, в которые он может быть преобразован.

Это также работает для блоков на основе изображений. Например, вы можете преобразовать изображение в галерею или блок «медиа и текст».

Небольшая заметка о заполнителях

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

Воспользовавшись советом по быстрой вставке, полученным ранее, введите «/ ima» и нажмите Enter, чтобы вставить блок изображения, затем снова нажмите клавишу Enter, чтобы продолжить ввод следующего абзаца. После этого остается красивый заполнитель, куда вы позже загрузите свое изображение.

Как настроить внешний вид блока

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

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

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

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

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

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

Как разместить блоки рядом

Распространенным разочарованием при использовании классического редактора было то, как размещать текст и / или изображения рядом. Новый редактор делает это намного проще.

Если вы хотите поместить изображение рядом с текстом, лучше всего использовать блок «Медиа и текст».

Если вы хотите разместить изображения рядом друг с другом, один из вариантов – вставить блок галереи.

Это особенно полезно для размещения трех или четырех изображений в ряд.

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

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

На этом этапе вы узнали все основы использования редактора WordPress. Затем вы изучите еще несколько важных приемов, позволяющих максимально эффективно использовать редактор Гутенберга на своем веб-сайте.

Как получить еще больше блоков

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

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

Есть два способа получить больше блоков для вашего сайта.

Установите новые плагины

Самый распространенный способ получить больше блоков – это добавить на ваш сайт новые плагины.

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

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

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

• Окончательные блоки
• Блоки Гутенберга
• Штабелируемый

Я бы рекомендовал сначала привыкнуть к блокам по умолчанию, но когда вы будете готовы перейти на более продвинутый уровень, эти плагины станут потрясающими.

Добавить блоки из каталога блоков

В WordPress 5.5 добавлен новый «каталог блоков». Я включил его сюда, чтобы он был исчерпывающим, и потому, что он, вероятно, будет повторяться и станет более популярным в будущем.

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

• Пока доступно не так много блоков, но есть множество плагинов, которые добавляют новые блоки.
• У блоков очень мало отзывов пользователей
• Вместо этого вы можете просто установить один плагин с десятками блоков.
• Новые блоки искать сложнее, чем плагины.
• Невозможно удалить блоки после их добавления (!)

И единственный способ найти их в первую очередь – это если вы ищете блок, и он не возвращает результатов:

Это означает, что вы не можете найти новые блоки для таких ключевых слов, как «изображение» или «встраивать», поскольку они производят уже установленные блоки.

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

Как настроить редактор блоков

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

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

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

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

Что, если я хочу вернуть классический редактор?

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

Тем не менее, вы не можете быть проданы на это. В этом случае есть несколько вариантов, если вы хотите отключить редактор Гутенберга или не использовать его.

Во-первых, вам не нужно использовать редактор блоков. Вы можете установить плагин Classic Editor.

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

А вот о чем еще нужно подумать …

Вам не нужно писать свои сообщения в WordPress.

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

В конце концов, WordPress – это то место, где вы публикуете свой контент, но это не обязательно должно быть место, где вы создаете свой контент.

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

Вы эксперт по редактированию блоков!

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

Вы научились:

• Добавить блоки
• Скопируйте и выберите блоки
• Удалить блоки
• Переместить блоки
• Преобразовать блоки
• Получите новые типы блоков
• И настройте свои блоки

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

Если вам интересно узнать больше о WordPress и вы думаете, что готовы серьезно заняться созданием классного веб-сайта, я думаю, вам понравится мой бесплатный курс:

Пройдите 7-дневный курс электронной почты WordPress Mastery

Он выводит вас за рамки основ, чтобы вы могли узнать о настройке, производительности и зарабатывании денег с помощью WordPress.

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

Спасибо за прочтение!

Источник записи: www.competethemes.com

Gutenberg – новый блочный редактор WordPress.

WordPress

Дек 29, 2017

Elena B.

12хв. читання

Вступление

Редактор WordPress, предназначенный для создания и редактирования записей и страниц, поставляемый вместе с ним  уже давно существует, возможно пришло время для обновлений?

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

Оглавление

Что такое Gutenberg?

Вкратце, Gutenberg – это новый редактор WordPress для записей и страниц. Проект назван именем Иогана Гутерберга, презентовавшего Европе печатный станок и начавшего печатную революцию. Его работа сделала знание и информацию доступной для масс и запустила социальную революцию. Аналогично этому, разработчики хотят сделать доступным создание продвинутый макетов страниц для всех пользователей WordPress.

Основная особенность редактора Gutenberg – это преставление всего контента в виде блоков и определение макета записи прямо в редакторе. Текущий редактор WordPress free-flow как любая другая программа для обработки текста, а макет страницы и стили определяются в файлах HTML и CSS.

Используя редактор Gutenberg, вам больше не понадобится знание HTML или CSS для размещение двух блоков контента друг возле друга, создание сложных макетов станет более доступным для большинства пользователей. Вы можете просто нажать Выровнять по левому краю в одном блоке и Выровнять по правому краю в другом, или вы можете вставить подготовленный блок с разделением до 4 колонок. Вы также можете легко двигать блоки вверх и вниз по своему документу.

Разработчики также хотят заменить использование шорткодов, когда добавляешь много контента в запись или на страницу. Это означает, что встраивание внешнего содержимого проще, со специальными настройками для видео с YouTube, публикаций Reddit, Tweets, ссылки Spotify и многое другое. Это упрощает процесс, который обычно требует плагина или генерирования специального встроенного кода на сайте, откуда вы хотите взять контент. На данный момент поддерживается  34 ресурса.

Они также хотят раскрыть некоторые скрытые от пользователей WordPress моменты. Ссылаясь на то, что WordPress фактически поддерживает встраивание с более 30 ресурсов и, если вы посмотрите на редактор WordPress по умолчанию, вы заметите, что нет кнопок для их удобного включения в контент. Единственный путь добавить их — это метод экспериментирования. Но редактор Gutenberg уже поддерживает 34 встраиваемых ресурса. И все из них легко доступны. Всё, что вам нужно это ввести URL, который вы хотите добавить и редактор Gutenberg сделает всё остальное.

Gutenberg всё ещё на стадии бета версии и поэтому есть много нерешённых задач. Он даже идёт с предупреждением, что он не готов для использования на реальных сайтах. Тем не менее, он поставляется с переводом на 15 языков (включая английский), что делает его очень доступным, если вы решите испробовать его на ранней стадии разработки и помочь найти ошибки.

Установка редактора Gutenberg

Несмотря на то, что редактор Gutenberg всё ещё в бета версии, он уже доступен в репозитории плагинов WordPress для ручной установки. Как и любой другой плагин он также может быть установлен из панели управления админской части сайта.

Текущая версия 1.6.1 и требует версию WordPress 4.8+. Мы проверяли на версии 4.8.2.

Тестирование редактора Gutenberg

После установки и активации плагина редактора Gutenberg, нажимаем на Добавить новую в разделе Записи в консоли и попадаем на страницу с новым редактором (в более ранних версиях здесь был старый привычный редактор WordPress). Кроме того в админ меню есть отдельная ссылка для нового редактора. Как уже отмечалось редактор Gutenberg находится на стадии ранней разработки и разработчики WordPress не замещают полностью текущий редактор новым, пока Gutenberg не будет готов, функционал тщательно проверяется большой базой пользователей, все ошибки устраняются.

Разработчики Gutenberg недавно пересмотрели сроки перехода от плагина к редактору по умолчанию. Следующий важный выпуск плагина запланирован на ноябрь, чтобы совпасть с выпуском обновления WordPress до 4.9. Прежде чем встроить его в ядро WordPress, разработчики выпустят предложение о слиянии в декабре 2017 года, где редактор будет тщательно изучен. Предполагается, что окончательный переход на новый редактор будет частью обновления WordPress 5.0, возможно, в 2018 году.

Внизу админ меню в консоли расположен пункт Gutenberg с тремя выпадающими подпунктами-ссылками внутри. Одна из ссылок называется Demo, по нажатию открывается страница с примером записи в новом редакторе со всеми доступными вам функциями – текст, картинки, таблицы, различные примеры выравнивания блоков, а также некоторый встраиваемый контент.

Редактор Gutenberg открывается при выборе Добавить новую в меню Записи, но потом в списке Все записи меню Записи вы можете переключиться на Классический редактор, к которому все уже привыкли.

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

Создавая новую страницу вы заметите, что она также открывается в новом блочном редакторе. Ранее созданные страницы тоже можно редактировать пользуясь ссылкой Классический редактор под названием страницы в меню Страницы -> Все страницы, если нажать ссылку Изменить, то страница для редактирования откроется в блочном редакторе Gutenberg. Изучая страницу проекта на Github можно увидеть какие изменения автора собираются внести в плагин в ближайшее время.

Панели настроек или страницы с параметрами для предпочтительных установок для записи по умолчанию нет. Если ваша предпочтительная схема поведения для новых записей — это сохранить для рассмотрения прежде публикации, нужно нажать на Pending review перед сохранением любой публикации, о чём легко можно забыть.

Новый редактор

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

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

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

В редакторе Gutenberg, настройки meta и блока (боковая панель справа) изначально спрятаны и могут быть отображены вверху рабочей области по нажатию на кнопку настроек. После некоторого времени использования нового редактора контекстная панель инструментов начинает нравиться всё больше.

Добавление новых блоков

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

Новое меню имеет навигацию по вкладкам: Recent (недавно использованные), Blocks (блоки) и Embeds (встраиваемый контент). В этом меню также всегда доступна строка поиска. Усилия разработчиков по улучшению рабочего процесса хорошо видны на примере контекстно-зависимых меню.

• Recent – когда вы нажимаете на символ + или кнопку вставки, появляется список из 8 наиболее часто используемых блоков и встраиваемых ресурсов.
• Blocks – список блоков, сгруппированных в четыре категории:
  • Common Blocks – заголовки, параграфы, изображения и так далее
  • Formatting – таблицы, предформатируемый текст, код и т.д.
  • Layout – разделители, кнопки и др.
  • Widgets – последние записи, категории, шорткоды.
• Embeds – вы можете встраивать содержимое из длинного списка популярных сайтов таких как Reddit, YouTube, Instagram и есть кнопка для генерации встраиваемого контента, куда вы можете просто вставить верный URL и редактор WordPress сделает всё остальное. Работает как функция автоматического определения.

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

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

Настройки для выравнивая блока по левому краю, по центру или по правому краю внизу боковой панели на вкладке Block. Как вы можете заметить на скриншоте ниже, выравнивание работает не так хорошо, как при использовании своего HTML и CSS. Если длина текста в одном блоке столбце больше, чем в другом он может быть расположен с обтеканием следующего блока текста.

Визуальный редактор против Текстового редактора

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

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

Особые функции редактора Gutenberg

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

Оглавление

Gutenberg определяет все заголовочные теги (<h2><h3> и др.) в вашей записи и отображает оглавление в боковой панели перечисляя их все. Выглядит это, как дерево документа, улучшающее визуализацию текста вашей записи.

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

Якоря

Теги якорей (аnchor) позволяют вам сделать ссылку на определённую часть документа. Подобно тому, как вы можете использовать оглавление в редакторе, вы можете создать список своих заголовков, дать каждому заголовку якорь и позволить пользователям перейти в этот раздел записи.

Когда выбран блок заголовка, на странице параметров блока Block можно увидеть раздел HTML Anchor с текстовым полем под ним. При вводе имени для ссылки в текстовом поле, появляется кнопка Copy link для копирования ссылки, которую вы потом можете вставить в любое нужное место.

Это эквивалентно предоставлению любому элементу HTML идентификатора ID и привязке к нему, добавив #name-of-id к URL-адресу.

Дополнительные CSS стили

В большинстве блоков есть возможность добавить к нему дополнительные стили CSS.

Это позволяет вам назначать классы, определенные в файле stylesheet.css вашей темы.

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

Галерея

Вы можете легко добавлять группы изображений, создав удобную галерею, в свои записи и размещать их между других блоков. Добавление блока Галерея даёт вам ссылки для загрузки изображений или выбора изображений из библиотеки медиа WordPress.

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

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

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

Изображение записи (Cover Image / Hero Image)

Изображение записи — это большой заголовок, часто с текстом поверх него.

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

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

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

Цитаты и Блок цитат (Pull Quotes & Block Quotes)

Цитата — это отрывок текста статьи. Она применяется для выделения важного фрагмента текста или как чьё-то изречение и располагается обычно перед текстом статьи.

Вы часто видите их в статьях газет и журналов с сокращенными отрывками интересного текста, которые заставляют читателя заинтересоваться.

У блока цитат на данный момент есть дополнительные стили и способы выравнивания текста. Вы можете быстро переключаться между двумя стилями отображения по нажатию кнопки на панели инструментов.

После того, как вы выбрали стиль, вы можете выбрать способ выравнивания текста цитаты.

Пользовательский HTML (Custom HTML)

Блок пользовательского HTML позволяет вам добавлять любой HTML, который вы обычно пишете в текстовом редакторе или в файле шаблонов, непосредственно в визуальном редакторе.

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

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

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

Традиционный текст (Classic text)

Блок Classic text имитирует редактор WordPress по умолчанию и показывает полную панель инструментов TinyMCE вместо каких-либо кнопок Gutenberg. Единственным отличием от TinyMCE является опция ‘Additional CSS Class’ (дополнительный класс CSS) в меню настроек блока.

Classic Text существует как общий блок, который присваивается, когда Gutenberg не может автоматически определить тип блока (при вставке текста в редактор) и помогает в переходе между старым и новым редактором.

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

Строфа (Verse)

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

Когда вы нажимаете enter в блоке абзаца, редактор WordPress добавляет новый абзац. В блокеVerse курсор просто перемещается вниз на одну строчку.

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

В выбранной строке текст в блоке Verse отображается с серым фоном и отличный от блоков параграфа (Paragraph) шрифтом. Надеемся, что это будет усовершенствованно в будущих обновлениях редактора.

Текстовые колонки

Текстовые колонки позволяют добавлять любое количество встроенных текстовых блоков в ряд. Иным способом реализации могло бы было быть написание HTML и CSS с помощью текстового редактора или блока HTML.

Вы можете легко увеличить или уменьшить количество колонок с помощью ползунка в меню настроек блока. Ползунок увеличивается до 4, но вы можете ввести любое число в текстовое поле рядом с ним.

Параметры форматирования текста ограничены жирным шрифтом, курсивом, зачеркиванием и ссылкой.

Кнопки

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

Настройки блока для кнопки позволяют определить цвет фона с помощью списка общих цветов или выбирая цвет в палитре, который также имеет текстовую запись в кодах HEX, RGB или HSL. Палитра цветов автоматически преобразует ваше значение в hex и не поддерживает непрозрачность.

В настоящее время вы не можете изменить цвет текста с белого, однако в блочных вариантах есть текстовое поле ‘Additional CSS Class’ (дополнительный CSS-класс), поэтому вы можете создать простой стиль CSS, который определяет цвет.

Виджеты

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

Недавние записи

Виджет Недавние записи имеет несколько настроек для отображения списка.

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

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

Категории

Категории могут отображаться в виде списка или выпадающего списка.

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

Этот блок поддерживает выравнивание, поэтому вы можете перемещать их левее, правее или по центру.

Шорткоды

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

Тестирование производительности Gutenberg

Настольный компьютер

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

Хотя новый редактор WordPress не имеет потоковой обработки текста, вы всё так же можете копировать и вставлять текст из документа Word и Gutenberg сделает необходимую работу по определению, где контент должен быть разделён. Протестировав редактор по умолчанию и Gutenberg путём вставки текста из документа Microsoft Word 2016 было выявлено, что оба редактора определили фрагмент одинаково и применили одно и то же форматирование. Было два различия в том, как вставленный текст обрабатывался:

• В обоих редакторах текст, помеченный ‘Heading 1’ в Word, был определён, вместо этого, как отдельный параграф, ‘Heading 2’ был верно размещён как блок heading 2.
• В Gutenberg цвет шрифта был правильно применён в заголовке и в параграфах, в то время как редактор WordPress по умолчанию не определил их вообще.
• Один фрагмент в Word был выделен как ‘Intense Quote’ и он был преобразован в параграф в обоих редакторах. Изменение его на ‘Quote’ не дало эффекта определния как цитату.
• Редактор по умолчанию определил разрыв строки, в то время как Gutenberg этого не сделал.

Также был проведён тест копирования текста из WordPress и вставка в Word. В Gutenberg, выделение ведёт себя плохо. Выделение более одного блока приводит к выделению и верхнего меню блока, хотя потом оно не было вставлено в Word. Страница начинает хуже откликаться и была обнаружена задержка, при нажатии настроек и прокрутке.

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

Мобильное устройство

Также было протестировано удобство и производительность на смартфоне Android. Хотя разработчики не намереваются сделать Gutenberg фокусированным на мобильных устройствах, это было весьма привлекательно.

Прежде всего, производительность отличная и каждая кнопка откликается сразу же. Была выбрана демонстрационная запись, создаваемая Gutenberg так как она достаточно длинная (881 слов), к тому же несколько изображений, встроенный контент и блоки. Контент загрузился моментально, в то время как редактор WordPress по умолчанию заметно зависал, когда первый раз загружал первую страницу для редактирования. Можно было спокойно прокручивать вверх и вниз, спокойно проходя встроенный контент из YouTube и Tweets на странице.

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

Для передвижения блоков вверх или вниз документа, вначале выберите блок, потом нажмите в меню кнопку ‘extra options’, чтобы получить кнопки для перемещения. Все блоки перемещаются моментально. Это большое усовершенствование по сравнению с редактором по умолчанию, где вначале нужно выделить, затем вырезать, прокрутить до нового места положения, установить курсор и только потом вставить.

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

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

Удаление блока мгновенное, так же как и перемещение их вверх/вниз и не вызывает никаких проблем с общим внешним видом.

Отзывы

Пока что у Gutenberg различные отзывы и он получил скромные 2.4/5 звезды на WordPress.org. На момент написания было 74 отзыва с одной звёздочкой, и многие из них выражают одинаковые проблемы. Главная проблема заключается не в том, что далеко не каждому нужны блоки. Текущий редактор WordPress чрезвычайно гибкий и позволяет создавать сайты различных стилей, которые прекрасно соответствуют идее WordPress.

Заключение, За и Против

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

Редактор по умолчанию имеет собственные особенности, которые исчезают, когда текст помещается в блок. Например, при написании заголовков и сразу под ними параграфов редактор по умолчанию будет неправильно определять, где заголовок заканчивается и начинается абзац, заставляя вас переключиться на редактор на основе текста, чтобы исправить размещение тегов HTML. Наличие заголовка в одном блоке и абзаца в другом блоке устраняет путаницу.

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

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

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

Більше статей від Elena B.

Редактор WordPress

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем изучать Консоль WordPress

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

Речь о текстовом редакторе.

Дополнение продиктованное временем

Начиная с версии 5.03 WordPress комплектуется новым редактором. Не знаю, что сподвигло разработчиков на смену редактора.

Довольно долго висело сообщение о том, что грядёт новое издательское чудо, и вот оно грянуло, и ничего кроме новой головной боли не принесло.

Эта статья про привычный добрый TinyMCE, который многие годы служил нам верой и правдой, а чтоб он остался, разработчики подстраховались и создали плагин Classic Editor, установив который мы сможем продолжить пользоваться старым редактором.

Предчувствовали видимо, что меняют шило на мыло и народ, особенно тот, что привык писать на html, будет возмущаться.

Итак, на WordPress установлен небольшой текстовый редактор TinyMCE.

Код его находится в папке «wp-includes > js», вот только лезть в него, и что-то там исправлять, я не советую потому, что поначалу, желая увеличить функционал редактора, я добавил в код несколько кнопок.

В результате этого, не каждый раз конечно, TinyMCE, при обновлении, стал терять данные, то есть пишешь-пишешь, потом нажимаешь «Обновить», и всё написанное просто исчезает.

Так, что если кому-то захочется увеличить число кнопок в панели управления редактора, то делать это нужно только при помощи плагинов.

Благо, их для редактора TinyMCE великое множество, от добавки нескольких функций, до настоящих гигантов, с панелью управления аж из пяти строк.

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

Если нужно добавить страницу, то: Консоль — Страницы — Добавить новую.

Если добавить запись, то: Консоль — Записи — Добавить новую.

Если редактировать страницу, или запись, то пройти по ссылке «Изменить» на любой странице сайта.

Не буду расписывать назначение всех кнопок, так как их описание появляется при наведении курсора.

Как видите, набор функций вполне достаточный для написания текста.  Некоторые из них , я так ни разу и не использовал.

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

Выделенный текст приобретёт заданный размер.

Точно так же можно сделать его жирным, выделив и щёлкнув по первой кнопке, затем курсивным, щёлкнув по второй, затем, можно окрасить его в какой-нибудь цвет, выбрав его кнопкой «А«.

Затем, с новой строки, шрифт сам опять станет стандартным, и можно писать текст.

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

«Выравнивание» выбирается в самом начале работы в редакторе, и сохраняется до следующего изменения. Но, если Вам нужно будет выровнять один абзац по другому, то выделите его, и щёлкните по иконке с нужным Вам способом выравнивания.

С новой строки автоматически вернуться прежние настройки.

Чтобы отделить анонс статьи, который будет отображен в рубрике «Новости» со ссылкой «Читать далее», нужно установить курсор после той части текста, которую Вы решили оставить для анонса, и нажать кнопку «Вставить тег «more». У меня она 12-ая в первой строке панели.

При чём, ссылка «Читать далее» в анонсе, появляется только в том случае, если размер анонса у Вас не менее 50-и слов.

Кстати, было несколько случаев, когда я по рассеянности вообще забывал отделять анонс, так редактор делал это за меня сам. Но не всегда. Говорю-же: характер!

Это всё было про работу в визуальном режиме, теперь перейдём в режим HTML. Переходить в этот режим можно лишь ознакомившись с основами HTML и CSS. И тогда возможности для творчества в редакторе многократно возрастают.

Перейдя в режим HTML, Вы увидите упрощённый код страницы. Почему упрощённый? Потому, что редактор не показывает некоторые теги, такие, например, как абзац (тег «р»), перенос строки (тег «br»), и пробел. Они как бы сами собой подразумеваются.

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

Также можно заключить любой кусок текста в блок «div», подключить к нему CSS, и творить с ним вообще, что угодно — задавать фон, перемещать, в любом направлении, причём делать это в таких диапазонах, которые не доступны в визуальном редакторе.

Если страница получается очень длинной, то разделить её можно при помощи тега <!—nextpage—>. Вставляется он в режиме HTML, в том месте, где Вы хотите разделить страницу.

При этом на странице появляется навигация.

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

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

Если Вам потребуется поставить в тексте простые прямые кавычки, то нужно в HTML  режиме, вместо кавычек вставить спецсимвол &quot; .

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

В чем отличие между начинающим и продвинутым пользователем:
если программа глючит, начинающий пользователь бъёт по монитору, а
продвинутый…  продвинутый — по системному блоку.

— Что дают? — Хемингуэя. — Это лучше кpимплена? — Hе знаю, пить не пpобовал.

Создаём контент < < < В раздел > > > Как сделать главную страницу в WordPress постоянной
 

Запись опубликована в рубрике CMS WordPress Система управления сайтом для создания блога. Добавьте в закладки постоянную ссылку.

Editus v0.9.13.2 — продвинутый текстовый редактор для WordPress

• Выберите CMS

  •  Joomla 4.0
  •  Joomla 3.6
  •  Joomla 2.5
  •  Joomla 1.5
  •  WordPress

  Все авторы

  Все тематики

• Выберите CMS

  • 0″ data-imgsrc=»/./img/ico.png» data-quant=»96″ data-type=»filter-cms» data-value=»12″ data-checked=»»>  Joomla 4.0
  •  Joomla 3.6
  •  Joomla 2.5
  •  Joomla 1.5
  •  WordPress

  Все авторы

  Все тематики

Совместимость

WordPress

Рейтинг

(Оценок : 604)

Версия

0.9.13.2  

Данную кнопку следует нажимать только тогда, когда Вы на 100% уверены что разработчик выпустил новую версию на своем сайте. Если это окажится не так – нам придется оштрафовать Вас за ложное скликивание на 20-50% от вашего текущего членства.
Вы уверены что хотите продожить?

Тематика

Редакторы

Автор

Разных авторов

Скачано

53

Просмотров

1957

скачать архив для WordPress | Размер: 0.8 МБ

Нет демоОписание

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

Основные особенности расширения Editus: 

• Автоматическое сохранение во время написания статьи;
• Возможность встраивания в статьи изображений;
• Возможность встраивания в статьи карт с метками;
• Возможность встраивания в статьи эффектов;
• Возможность встраивания галерей;
• Полная свобода при написании;
• Полная поддержка Post Thumbnail; 
• Полная совместимость с вашей WordPress темой;
• Поддержка всех популярных браузеров;
• Возможность добавления собственных вариантов переводов;
• И многое-многое другое…

Нашли опечатку или неточность в описании? — Выделите фрагмент текста мышкой и нажмите Ctrl + Enter

Другие расширения от Разных авторов

• Advanced Custom Fields Pro 5.12.2

  Плагин Advanced Custom Fields Pro (ACF Pro) является бесплатным WordPress плагином, который действует как дополнительный слой графического интерфейса для пользовательских полей. Пользовательские поля являются стандарт …

  1 месяц назад Разных авторов Утилиты Редакторы

• FacetWP 4.0.3

  Используйте FacetWP для добавления продвинутого поиска на сайты электронной коммерции, библиотеки ресурсов, страницы со списками и многое другое. FacetWP основан на ajax, поэтому фильтрация происходит быстро и бе …

  3 месяца назад Разных авторов Утилиты Поиск

• iThemes Security Pro 7.1.1

  iThemes Security Pro показывает список изменений, которые нужно провести на сайте, чтобы обеспечить безопасность. Вам не придется изучать нюансы программирования и обеспечения безопасности сетевых технологий, плагин в …

  3 месяца назад Разных авторов Безопасноть Администрирование

• Elementor Pro 3.6.5 & 3.6.3

  Ведущий в мире конструктор сайтов на WordPress. Elementor PRO — отличный способ с легкостью продемонстрировать свой контент. Он имеет редактор живых форм, что означает, что вы можете редактировать свои формы, даж . ..

  3 месяца назад Разных авторов Утилиты Редакторы Администрирование

• WP All Export Pro 1.7.5

  Настроить расположение экспортируемого файла, редактирование данных и повторное импортирование с помощью WP All Export Pro. Отправить файл экспорта в Dropbox, Google Drive, и в более 500 других сервисов.

  WP Al …

  3 месяца назад Разных авторов Утилиты Администрирование Woocommerce

• UiPress 2.3.1.7

  Модернизируйте свою панель управления WordPress с помощью мощного расширения администратора с интегрированной аналитикой Google и WooCommerce.

  Легко организуйте и управляйте своими публикациями и медиа с помощ …

  3 месяца назад Разных авторов Утилиты Редакторы Администрирование

Показать ещё

Как перейти от классического редактора WordPress к Гутенбергу

Если вы используете WordPress 5.0 и выше, если вы не жили под камнем, вы, несомненно, услышали об обновлении Гутенберга, которое было объединено с WordPress в декабре 2018 года.

Так что, если вы используете последнюю версию WP, вы уже используете Gutenberg или продолжали использовать классический редактор, установив Плагин WordPress Classic Editor,

Почему Гутенберг?

Многие пользователи WP не готовы прыгать на фургоне Гутенберга, но некоторые из них, в том числе этот сайт.

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Некоторые из причин, почему вы можете захотеть использовать Гутенберг, потому что это:

• Это будущее для разработчиков WP.
• Обеспечивает лучший пользовательский опыт.
• Является более гибким, чем оригинальный редактор WP (TinyMCE).
• Предоставит новый рынок для разработчиков.

Каковы различия между WordPress и Гутенбергом?

Классический редактор WP — это текстовый редактор, который очень похож на Microsoft Word. Он имеет одно поле редактирования, как показано на скриншоте ниже.

Гутенберг — это блочный редактор, который выглядит так:

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

• кнопка
• Образ
• Таблица
• Встраивание
• Список
• Галерея
• аудио
• Котировки
• Heading
• Код
• строфа
• Пользовательский HTML

Кроме того, темы и плагины предлагают больше блоков и виджетов для использования в ваших постах и ​​страницах WP.

Как затрагиваются существующие страницы или сообщения?

После обновления и использования Gutenberg ваши существующие страницы и посты должны продолжать отображаться правильно.

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

Когда вы редактируете существующую страницу или сообщение, они автоматически открываются в одном новом классическом блоке редактора Гутенберга.

Готовы ли вы сделать выключатель?

Используйте промежуточный сайт

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

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

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

Проверьте свои плагины

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

Вы также хотите увидеть, какие плагины используются при редактировании контента в WordPress. Отдельные плагины, такие как Akismet, Contact Form 7, Google Sitemap Generator и WP Super Cache, не имеют никакого отношения к редактору и не будут затронуты при использовании Gutenberg.

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

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

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

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

Поскольку вы пытаетесь увидеть, будут ли ваши текущие плагины работать, попробуйте воссоздать, как вы использовали каждый из них, и посмотрите, работает ли он по-прежнему.

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

Обязательно сохраните список плагинов, которые не работают должным образом, чтобы вы могли удалить их при запуске с Gutenberg.

Что делать, если для той функциональности, которая вам нужна, блока по умолчанию нет?

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

Если ничего не помогает, попробуйте найти Плагин Гутенберга это делает то, что вам нужно. Удалите плагины, которые не работают, с вашего промежуточного сайта.

В прямом эфире

Прежде чем делать НИЧЕГО со своим действующим сайтом, сделайте полную резервную копию всего своего сайта на случай, если вы что-то пропустили при проверке на совместимость или произошла другая ошибка.

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

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

Хотите конвертировать старые сообщения и страницы в блоки Гутенберга?

Откройте каждую страницу и пост из классического блочного меню. Нажмите на три точки, чтобы просмотреть варианты. Выберите из выпадающего меню Convert to Blocks.

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

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

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

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Руководство для начинающих по использованию текстового редактора HTML WordPress

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

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

Почему вы можете предпочесть текстовый редактор?

• Ваш контент будет более понятным для ваших читателей и поисковых систем.
• Вам нужно знать всего несколько тегов HTML, чтобы сделать текстовый редактор очень полезным.
• Вы можете применять свойства стиля CSS непосредственно к коду HTML.

Что происходит при использовании визуального редактора?

Когда вы добавляете копию, мультимедиа или ссылки в визуальный редактор, вы на самом деле добавляете HTML на свою страницу или сообщение. Все происходит под капотом.

Не понимаю, что я имею в виду? Попробуй это.

Добавить копию в визуальном редакторе. Затем выберите вкладку Текст. То, на что вы будете смотреть, — это HTML. Как и в визуальном редакторе, вы можете редактировать свой HTML-код непосредственно в текстовом редакторе.

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

HTML максимально прост. Каждая веб-страница, в том числе сгенерированная WordPress, использует его.

Изучение HTML даст гораздо больше преимуществ, чем его использование с WordPress!

Что такое HTML?

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

HTML очень похож на грамматику.

Это не имеет НИЧЕГО общего с тем, как выглядит веб-страница или как она оформлена. Вопросы дизайна веб-страницы — компоновки, типографики и цвета — решаются с помощью CSS (каскадных таблиц стилей), языка стилей веб-дизайна.

HTML разрабатывается Консорциумом World Wide Web (W3C). Самая последняя версия — HTML5.

Теги, которые вы, скорее всего, будете использовать

HTML — это контейнерная система разметки. Для каждого открытого тега есть соответствующий закрывающий тег.

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

Все о HTML

и контейнер закрывается

Аналогично, вот как размечается абзац:

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

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

Вот объяснение наиболее распространенных тегов, которые вы будете использовать при написании HTML. Это заголовок, список, ссылка, группировка и несколько разных тегов.

БИРКИ ЗАГОЛОВКА

• Существуют также теги заголовков h5, h5 и h6, которые на практике редко используются.
• Никогда не используйте тег заголовка для изменения размера шрифта.

ТЕГИ СПИСКА

С помощью HTML можно создать 3 типа списков. 2 самых популярных — упорядоченные и неупорядоченные списки.

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

• цветы
• овощи
• деревья

• цветы
• овощи
• деревьев

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

1. Калифорния
2. Техас
3. Флорида

1. Калифорния
2. Техас
3. Флорида

(В этом примере порядок важен и определяется наибольшим населением в штатах США.)

ПРИМЕЧАНИЕ. Списки также можно вкладывать друг в друга для создания иерархии элементов списка. Это сложно сделать при использовании визуального редактора.

ТЕГ ССЫЛКИ

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

Для ссылки на страницу WordPress используйте:

ссылка на страницу WordPress

Для ссылка на любую страницу или ресурс, а не только на страницу WordPress, используйте:

ссылка на HTML-страницу

ПРИМЕЧАНИЕ. На самом деле существует третий способ. Вы можете использовать специальный способ создания ссылок WordPress со следующим синтаксисом:

ссылка на страницу вашего сайта

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

ГРУППОВЫЕ ТЭГИ

Технически не существует такого понятия, как «группировка тегов», но это лучший способ описать набор HTML-тегов, содержащих другие элементы. Цель этих тегов — более точно описать смысл вашего контента.

Например, тег

можно использовать для определения части страницы, которая содержит начальную информацию, например:

Начальная строка заголовка

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

Вот некоторые очень распространенные группирующие теги

TAG	ЧТО ЭТО ДЕЛАЕТ
<основной>	Используется только один раз на странице, этот тег группирует наиболее важную информацию страницы.
<раздел>	Тег section можно использовать несколько раз для разделения контента на разделы.
<артикул>	Чаще всего используется для определения контента как публикации в блоге или статьи.
<в сторону>	Используется для определения содержимого, которое является дополнительным к основному, разделу, статье или другому группирующему тегу.
<заголовок>	Используется для определения любого содержимого, которое является ведущей информацией на странице или в части страницы.
<нижний колонтитул>	Используется для содержания контента, который обычно завершает раздел или страницу, например, автора, контактную информацию, авторские права и ссылку «наверх».
<навигация>	Используется для определения интерфейса навигации. Обычно оборачивает (содержит) теги .
<дел>	Используется, когда не существует специального тега для более точного описания содержимого.

ДРУГИЕ ТЕГИ
Помимо тега, вы найдете эти теги очень полезными при работе с текстовым редактором.

ТЕГ	ЧТО ЭТО ДЕЛАЕТ
	Встраивает изображение на вашу страницу.
	Переводит строку текста на следующую строку. Аналогично мягкому возврату на клавиатуре.
	Это тег комментария, который используется для скрытия кода или любых заметок, сделанных вами в текстовом редакторе, которые вы не хотите отображать на веб-странице.
<цитата> или	Используйте любой из этих тегов для цитаты в вашей копии.
Сущности символов	Для всех не буквенно-цифровых символов, таких как авторские права или товарный знак. Подробный список.

Хотя эти теги помогут вам в этом, вот несколько ресурсов, которые вам помогут.

● Вам нужно всего 10 HTML-тегов (учебное пособие)
● Справочник по элементам HTML в алфавитном порядке
● Справочник по элементам HTML

Правила

Прелесть HTML в том, что есть всего несколько правил, которым нужно следовать, и они легко запомнить.

* HTML нечувствителен к регистру

Прописные, строчные или смешанные регистры — пишите HTML любым удобным для вас способом. Обычная практика — строчные буквы.

* Для каждого открытого тега должен быть закрывающий тег

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

* Теги закрываются в порядке, обратном тому, в котором они открываются внутри блока

Это может быть немного сложно понять, поэтому вот пример.

Вот абзац со ссылкой внутри, часть текста выделена.

Обратите внимание на порядок:

….

* Некоторые элементы не имеют закрывающего тега

Такие теги, как
и не имеет закрывающего тега, так как для него нет причин.

* Используйте HTML правильно, а НЕ для оформления страницы

Например, не используйте теги
, когда у вас есть список. Или не используйте теги

для создания сетки для макета.

Панель инструментов текстового редактора

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

HTML-плагины

Рано или поздно вы заметите, что если вы создадите абзац в визуальном редакторе, вы не увидите тег

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

, когда копия появится на вашей странице.

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

Всегда редактировать в HTML

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

Preserve HTML Editor Markup Plus

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

Подсветка синтаксиса редактора HTML

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

ПРИМЕЧАНИЕ. Я не тестировал два или более этих подключаемых модулей одновременно, поэтому возможна несовместимость.

Как шорткоды вписываются в изображение

Шорткоды — это то, что многие плагины используют для добавления формы, настройки столбцов или добавления некоторых других функций на страницу или сообщение. Это простой способ добавить код, такой как HTML, javascript, CSS и PHP, без каких-либо знаний об этих языках.

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

Для непосвященных шорткоды могут выглядеть как HTML, но это не так.

Вы можете вставить таким образом короткий код, если добавляете контактную форму, например, с помощью популярного плагина Contact Form 7,

[contact-form-7 id=»326″ title=»Образец контактной формы ”]

или вы можете использовать его так для плагина,

[one-half]Содержимое для левой части столбца[/one-half]

[one-half-last]Содержимое правой части столбца[/one-half-last]

Создает два столбца на странице.

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

В текстовом редакторе это можно сделать двумя способами.

Один из способов — добавить идентификатор или атрибут класса к элементу HTML, как в этом примере:

Это главный абзац моего поста.

Затем в файле style.css вы должны добавить свойства стиля для #lead. Может быть что-то вроде этого:

#lead

{начертание шрифта:жирный;

выравнивание текста: по центру;

color:#f00;}

Второй способ — добавить встроенный стиль. (Однако лучший подход — разделить HTML и CSS, как в приведенном выше сценарии.) Вы можете добавить встроенный стиль следующим образом:

шрифт для этого абзаца — Arial.

ПРИМЕЧАНИЕ. Это переопределит любое правило стиля семейства шрифтов для этого абзаца, которое может присутствовать во внешнем файле или в контейнере страницы.

Заключение

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

Биография автора

Бад Краус [email protected] — опытный инструктор по WordPress в Нью-Йорке, который преподает WordPress для отдельных лиц и групп посредством веб-семинаров. Он также работает над сайтами для малого бизнеса. http://joyofwp.com

Написание текста в WordPress – Служба поддержки WordPress.com

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

Содержание

Написание текста

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

Однако, если вы хотите начать с текста, просто начните печатать!

Когда вы начинаете печатать, блок абзаца вставляется по умолчанию. Блок «Абзац» — это блок по умолчанию, используемый для обычного текста.

Если вы хотите добавить заголовок или подзаголовок, вы можете добавить блок заголовка из + Блок вставки в верхнем левом углу.

↑ Содержание ↑

Одиночный интервал

Каждый раз, когда вы нажимаете ввод/возврат на клавиатуре, чтобы начать новую строку, создается новый блок абзаца. Однако могут быть ситуации, когда вы не хотите, чтобы это произошло. Если вы нажмете Shift+enter или Shift+return на клавиатуре, ваш курсор будет помещен на новую строку с одинарным интервалом вместо создания нового блока абзаца:

Одинарный интервал с помощью клавиатурной команды shift+return

↑ Table of Contents ↑

Форматирование текста

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

Параметры полужирного и курсивного начертанияСтрелка для поиска дополнительных параметровДополнительные параметры: По ширине

💡

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

↑ Содержание ↑

Формат нескольких блоков

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

↑ Содержание ↑

Повторно используемые блоки

Повторное использование формата блока

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

Сначала напишите текст как обычно и примените нужные параметры к этому блоку. Затем на панели инструментов блока выберите … (три точки) и выберите Добавить в блоки многократного использования:

После создания блока повторного использования вы можете добавить этот блок в любой другой пост или страницу, нажав кнопку + Устройство вставки блоков и выбрав его на вкладке Многоразовые :

Повторное использование группы блоков

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

1. Выберите блоки, которые вы хотите использовать в макете.
2. После выбора всех блоков в левой части плавающей панели инструментов вы найдете возможность преобразовать их в блок группы.
3. После того, как блоки сгруппированы, щелкните три точки в правом конце панели инструментов, и вы увидите вариант Добавить в Многоразовые блоки .
4. Дайте имя группе блоков и нажмите Сохранить.

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

↑ Содержание ↑

Поместите изображение и текст рядом (обтекание текстом)

Вы можете обернуть изображение вокруг текста, чтобы разместить его рядом.

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

Кроме того, вы можете использовать блок «Медиа и текст» для простого размещения изображения рядом с текстом.

↑ Оглавление ↑

Маркированные или нумерованные списки

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

Добавление блока списка Преобразование текста в блок списка

Быстрый способ добавить блок списка — начать новую строку с символа *. Редактор распознает это как маркер и автоматически создаст блок списка.

↑ Содержание ↑

Поэзия — Добавление стихов

Если вы пишете стихи, вы можете использовать блок «Стихи». Этот блок предназначен для поэтов, чтобы они писали красивые стихи, соблюдая интервалы, которые вы пишете в своем тексте.

↑ Содержание ↑

Использование блока Classic

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

Разнообразные планы и цены

6 лучших текстовых редакторов для разработчиков WordPress в 2020 году

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

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

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

Важность использования правильного текстового редактора для разработки WordPress

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

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

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

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

6 лучших текстовых редакторов для разработчиков WordPress в 2020 году

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

1. Atom

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

Atom — это редактор с открытым исходным кодом, который вы можете использовать независимо от того, являетесь ли вы новичком или опытным программистом. Он доступен для Windows, Mac и Linux.

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

• «Пакеты» для расширения основных функций редактора
• Запросы push и pull через GitHub
• Интеллектуальное автодополнение
• Браузер файловой системы
• Функция поиска и замены
• Редактирование и совместное использование в реальном времени
• Несколько панелей для параллельного кодирования
• Темы для улучшения внешнего вида редактора

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

2. Coda

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

Coda включает в себя все основные функции, которые вы можете ожидать от текстового редактора премиум-класса, включая подсветку синтаксиса, завершение кода и масштабирование. Тем не менее, он также обладает уникальными функциями, которых нет ни в одном другом текстовом редакторе, а именно «символом подстановки одним щелчком мыши».

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

• Встроенный терминал и инспектор
• Сенсорная панель
• Вертикальные отступы и настраиваемые направляющие столбцов
• Традиционные или визуальные вкладки с цветовой кодировкой
• Локальное индексирование для автозаполнения
• Переопределение CSS для редактирования в реальном времени сайт
• «Паника» для сайтов, паролей и закрытых ключей
• Сохранение, публикация и отслеживание удаленных файлов
• Поддержка различных языков программирования

Вы можете купить копию последней версии Coda за 99 долларов США или загрузите приложение для iOS за четверть этой цены в Apple Store. С редактором вы также получите доступ к первоклассной поддержке клиентов и ресурсным материалам, таким как электронные книги.

3. Sublime Text

Sublime Text — еще один популярный текстовый редактор, который может быть полезен независимо от языка программирования, который вы используете для своих проектов WordPress. Он также поддерживает несколько языков разметки.

Из текстовых редакторов в этом списке Sublime Text больше всего сравним с Atom. Они имеют много общего, как по внешнему виду, так и по характеристикам.

Одним из достоинств Sublime Text является то, что он невероятно легкий и не использует много ресурсов. Однако это не достигается за счет дополнительных функций, таких как:

• Редактирование с несколькими вставками для одновременной вставки повторяющегося текста
• Интерфейс Python API
• Плагины и менеджер пакетов для дополнительной расширяемости
• Различные инструменты поиска и ярлыки, в том числе «Перейти к чему угодно»

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

Если вы опытный программист, вам стоит подумать о Sublime Text. Ярлыки могут ускорить ваш рабочий процесс, как и кросс-платформенные возможности.

Хотя вы можете скачать Sublime Text бесплатно, вы также можете приобрести премиальную версию. Лицензия на одну копию стоит 80 долларов.

4. Brackets

Brackets — это бесплатный текстовый редактор от Adobe, который может быть особенно полезен, если вы новичок в разработке WordPress. Одной из особенностей этого решения с открытым исходным кодом является функция Live Preview.

Он имеет современный и простой интерфейс и обладает широким набором функций. К ним относятся:

• Частичная интеграция с файлами Photoshop и PSD
• Встроенные редакторы и упорядоченные файлы
• Автоматические обновления
• Подключение к GitHub через расширения
• Средства визуального предварительного просмотра

Brackets доступны для Windows, Mac и Linux. Хотя вы можете добавить больше языков с помощью расширений, этот текстовый редактор был разработан специально для HTML, CSS и JavaScript. Если вам нужна поддержка другого языка, это может быть не лучший вариант.

5. Codeshare

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

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

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

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

6. Notepad++

Каким был бы список текстовых редакторов без Notepad++? Эта платформа, вероятно, не нуждается в особом представлении, поскольку она является одной из самых популярных и старейших доступных.

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

• Подсветка и свертывание синтаксиса
• Инструмент поиска и замены
• Плагины для расширения и улучшения функциональных возможностей редактора
• Настраиваемый пользовательский интерфейс
• Многооконный редактор
• Автодополнение и переключение между несколькими документами

Хотя Notepad++ может быть удобным инструментом для продвинутых разработчиков, он особенно полезен на начальном уровне. Это легко понять по сравнению с другими вариантами. Он работает на Microsoft Windows.

Заключение

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

В этом посте мы обсудили шесть лучших текстовых редакторов для разработчиков WordPress, в том числе:

1. Atom: идеально подходит для совместной работы и простой интеграции с GitHub.
2. Coda: текстовый редактор только для Mac с уникальными расширенными функциями.
3. Sublime Text: популярный редактор, поддерживающий широкий спектр языков программирования и разметки.
4. Кронштейны: для дизайнеров, которые хотят интегрировать свой текстовый редактор с продуктами Adobe Creative Cloud.
5. Совместное использование кода: лучше всего подходит для совместных разработчиков, которым нужен относительно простой опыт редактирования.
6. Notepad++: удобный для начинающих текстовый редактор только для Windows.

У вас есть вопросы по выбору текстового редактора для разработки проектов WordPress? Дайте нам знать в комментариях ниже!

Как использовать редактор WordPress

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

Подпишитесь на наш канал Youtube

Что такое редактор WordPress?

Технически есть три редактора WordPress, которые вы можете выбрать. С выпуском WordPress 5.0 редактор изменился с TinyMCE по умолчанию на редактор блоков, который у нас есть сегодня. На фоне этого изменения плагин редактора Gutenberg был выпущен в качестве моста для бета-тестирования новых функций редактора блоков, прежде чем превратить его в ядро ​​​​WordPress.

Несмотря на то, что редактор блоков по умолчанию используется в WP версии 5.0, вы можете выбрать любой из трех вариантов. Вы можете установить плагин Classic Editor, чтобы сохранить старый TinyMCE, плагин Gutenberg, чтобы сохранить новейшие функции (хотя и потенциально нестабильные) в вашем редакторе, или вы можете оставить редактор блоков по умолчанию.

Учитывая дополнительные шаги, связанные с использованием чего-либо, кроме редактора по умолчанию (а также присущую нестабильность и изменяющийся характер плагина Gutenberg), в этом посте мы сосредоточимся исключительно на редакторе блоков по умолчанию. Тем не менее, вы должны отметить, что основы одинаковы с Gutenberg, и TinyMCE, содержащийся в плагине Classic Editor, имеет паритет базовых функций с любым данным текстовым редактором или программным обеспечением для обработки текстов — не говоря уже о любых функциях, специфичных для WP, которые мы обсуждаем. более, обычно отличающиеся только эстетикой, а не функциональностью.

После всего сказанного давайте научимся пользоваться редактором WordPress.

Основы редактора WordPress

Каждый раз, когда вы создаете страницу или сообщение (или пользовательский тип сообщения), вы будете использовать редактор блоков. Вам будет представлено учебное модальное окно при его открытии, и вы можете изучить основы, следуя ему через 4 слайда, которые он предлагает. Закройте его, и вы увидите основной редактор.

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

1. Блок заголовка . Все, что вы введете здесь, будет отображаться как основной тег h2 поста/страницы.
2. Область блоков/контента — это область, в которую вы будете добавлять различные блоки, составляющие содержимое вашего поста или страницы.
3. Кнопка добавления блока . Каждый раз, когда вы видите + в круге, вы можете щелкнуть его, чтобы добавить новый блок. Появится раскрывающийся список, из которого вы выбираете тип, который хотите вставить. Все они работают одинаково, поэтому независимо от того, щелкаете ли вы справа от блока, под блоком или в углу экрана, вы получаете одни и те же параметры.
4. Вкладка «Параметры документа» . На этой вкладке вы найдете все: категории, теги, постоянные ссылки, переключатели включения/выключения комментариев и многое другое. Плагины могут добавлять здесь параметры, но они всегда применяются ко всей странице или самой записи.
5. Вкладка «Параметры блока» — Эта вкладка обрабатывает параметры для любого выделенного блока. Если щелкнуть блок абзаца, вы редактируете параметры только для этого блока . Ни другие блоки, ни сам документ не меняются.

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

Что такое блоки?

Вы уже видели, как мы упоминали Блоки в этом посте, но что это такое? Блок — это отдельный настраиваемый элемент страницы или публикации. Это может быть один абзац, список, изображение или галерея. Эти блоки можно перемещать и настраивать по своему усмотрению, настраивать индивидуально и давать вам детальный контроль над вашим контентом, чего просто не может WYSIWYG-редактор. (Если вы являетесь пользователем Divi, вы уже знакомы с этой концепцией, потому что наши модули работают одинаково.)

Как видно выше, каждый элемент страницы содержится в своем блоке. Вы можете увидеть полный список блоков WordPress в документации поддержки WordPress.

Как создать группу блоков

Группа блоков — это набор блоков, которые вы настроили для работы как один блок. Вы перемещаете их и стилизуете их, как если бы они были единым блоком, но группа состоит из нескольких элементов.

Создать группу очень просто. Вы просто нажимаете на блок, затем, удерживая Shift или CTRL, нажимаете на другой. Если вы хотите сгруппировать все блоки в сообщении, вы можете нажать CTRL/CMD-A, чтобы выбрать все. Затем, когда вы увидите, что значок в левом верхнем углу изменится на квадрат, состоящий из маленьких блоков, вы можете щелкнуть его и выбрать Преобразование в группу .

Если вам нужно разгруппировать их, просто нажмите кнопку раскрывающегося списка с тремя точками и выберите «Разгруппировать».

Блоки снова будут функционировать как отдельные блоки.

Что такое многоразовые блоки?

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

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

Основная надпись

Блок заголовка, как показано выше, является основным тегом h2 вашего сообщения или страницы. Он также сгенерирует слаг постоянной ссылки для сообщения, но его можно отредактировать после того, как вы сохранили сообщение хотя бы один раз. Это также будет то, что селекторы CSS, такие как .post-title и .entry-title брать из. (Однако ваши SEO-плагины позволяют указать, что будет отображаться в поисковых системах.)

Это единственный блок в редакторе WordPress, который вы не можете удалить или переместить. Вы должны использовать настройки CSS или внешнего компоновщика страниц, чтобы настроить больше.

Блок/Область содержимого

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

Однако с помощью редактора блоков вы можете сделать намного больше. Каждый раз, когда вы нажимаете «ввод» или «возврат», вы добавляете новый блок абзаца. Чтобы добавить другой тип блока (любого типа), нажмите + в кружке, и вы получите раскрывающийся список всех доступных блоков. Обязательно прокрутите, потому что они тоже настроены в разных категориях. Вы также можете выполнить поиск определенного блока, если знаете, какой тип вам нужен.

Вы можете добавлять видеоблоки YouTube, изображения, галереи, аудиоплееры, списки, цитаты и многое другое. Каждый из них имеет свои собственные настройки и параметры стиля. Кроме того, чем больше вы используете блок, тем редактор WordPress распознает его как часто используемый и перечислит под 9.0104 Наиболее часто используемый , чтобы вам больше не приходилось прокручивать или искать его. Многоразовые блоки и группы блоков также могут отображаться в разделе «Наиболее используемые».

Если вы посмотрите на изображения в этом разделе, (1) указывает на кнопки изменения порядка, которые вы получаете для каждого блока, когда он выбран (просто нажмите на него, чтобы выбрать). (2) указывает на раскрывающийся список, который позволяет вам удалить блок, а также отредактировать его содержимое как HTML, клонировать его или добавить вокруг него новые блоки.

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

Структура документа, количество слов и другая информация

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

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

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

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

Вкладка «Параметры блока»

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

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

Если выбран блок изображения, вкладка «Блок» изменится на эту.

Каждый блок будет иметь определенные параметры, которые вы можете настроить внутри них, которые применяются только к этому типу блока (и будут отображаться только в этом конкретном блоке). Однако каждый блок имеет раздел Advanced на вкладке, который позволяет применять классы CSS к этому блоку. Затем вы можете стилизовать их по своему усмотрению, используя внешние таблицы стилей и код.

Вкладка «Параметры документа»

Слева от вкладки «Параметры блока» находится вкладка «Документ » «Параметры» . Если вы использовали WordPress в прошлом, они будут вам знакомы. Здесь вы сможете настроить категории вашего сообщения, теги, добавить избранное изображение, настроить слаг постоянной ссылки, добавить отрывок для использования в теме / SEO, а также включить или отключить комментарии.

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

Дополнительные почтовые метабоксы

В метабоксы поста подключаемые модули добавляют новые параметры и возможности для самого контента. Они появляются в самом конце области контента, под блоками.

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

Раскрывающийся список параметров редактора WordPress

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

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

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

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

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

И Переключатели Visual/Code Editor работают точно так же, как в редакторе TinyMCE. Примеры в этом посте до сих пор были с визуальным редактором. То есть вы видите визуальное представление поста по мере его написания. Вы получаете кнопки для нажатия, контекстные меню и визуализацию настроек в реальном времени по мере их изменения. Однако редактор кода — это всего лишь код. У вас будет простое текстовое поле, в котором вы будете писать в виде простого текста и HTML.

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

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

Глобальные ярлыки редактора блоков 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, которыми вы хотели бы поделиться? Дайте нам знать об этом в комментариях!

How to Change the Text Color in the WordPress Block Editor (Gutenberg)

3 Shares

While refreshing the look of our own site, нам нужен был способ изменить цвет текста некоторых слов с помощью блочного редактора WordPress (Gutenberg). Мы покажем вам несколько способов, как это сделать, а также еще несколько стильных способов.

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

Старый способ изменения цвета текста

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

Вы просто выделяете текст или фразу, а затем просто нажимаете кнопку цвета текста, чтобы изменить цвет. Это было так просто.

Кнопка «Цвет текста» в классическом редакторе / TinyMCE

Как изменить цвет текста в редакторе блоков (Gutenberg)

Новый редактор блоков WordPress предлагает два способа изменения цвета текста:

1. Изменение цвета текста всего блоков и
2. Изменение цвета текста групп слов.

Изменение цвета текста целых блоков

Например, в блоке абзаца вы можете получить доступ к инспектору и использовать палитру цветов, чтобы изменить цвет текста, а также цвет фона блока. Цвета будут применяться ко всему блоку.

Однако палитра цвета текста в инспекторе доступна только в выбранных блоках, таких как:

• Блок абзаца
• Блок заголовка
• Блок списка
• Блок цитат
• Блок таблицы
1 Блок стиха0011 Блок мультимедиа и текста
• Блок кнопок

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

Изменение цвета текста групп слов

Чтобы изменить цвет определенного текста в блоке, вам нужно сначала выделить текст, цвет которого вы хотите изменить. Затем на панели инструментов щелкните значок «Цвет шрифта» (тот, что с буквой А, как показано на фотографии).

Вы увидите, что у вас есть два варианта стилизации текста: Обычный и Подсветка. Обычный изменит цвет самого текста.

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

Все еще используете плохо спроектированные блоки Гутенберга? Получите самые мощные строительные блоки страницы с помощью Stackable! Загрузите наш бесплатный блочный плагин WordPress.

Изменение цвета выбранных слов с помощью плагинов

Хотя изменение цвета текста — это здорово, это максимум, что вы можете сделать с помощью встроенных элементов управления, чтобы выделить текст.

Если вы хотите дополнительно настроить текст, вам понадобится помощь плагинов.

Stackable

Stackable (да, этот веб-сайт) имеет более широкие возможности типографики, которые вы можете использовать для настройки любого текста в любом блоке.

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

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

Также добавлена ​​возможность выделения фона текста вместо цвета текста.

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

Stackable можно загрузить из каталога плагинов WordPress:

Stackable — Page Builder Gutenberg Blocks

Advanced Rich Text Tools

Другая альтернатива, которая, как мы обнаружили, хорошо работает, — это Advanced Rich Text Tools.

Плагин Advanced Rich Text Tools добавляет кнопки форматирования Inline Text Color, Inline Background Color, Superscript и Subscript. Они также предоставляют кнопку для удаления всего форматирования для всего блока.

В отличие от Stackable, где цветные кнопки расположены на панели инструментов, Advanced Rich Text Tools добавляет средства выбора цвета в инспектор каждого блока. Вам нужно будет выделить некоторые слова, а затем выбрать цвет в инспекторе, чтобы изменить цвета.

Advanced Rich Text Tools также хорошо работает вместе с Stackable. 👏

Вы можете скачать Advanced Rich Text Tools из каталога плагинов WordPress:

Advanced Rich Text Tools для Gutenberg

EditorsKit

Наконец, есть также EditorsKit.

EditorsKit добавляет дополнительные параметры форматирования к вашим собственным блокам. Хотя этот плагин не добавляет собственные блоки, он обогащает нативные.

Например, в собственный блок List EditorsKit добавляет новые параметры в инспекторе, такие как стили маркеров, параметры размера текста и параметры цвета текста:

Другие нативные блоки также получают больше опций, а плагин даже добавляет адаптивные опции отображения/скрытия для всех ваших блоков.

EditorsKit также хорошо работает вместе с Stackable, что является огромным преимуществом. 👏

Вы можете скачать EditorsKit из каталога плагинов WordPress:

Инструментарий редактора блоков Gutenberg — EditorsKit

Какой плагин выбрать?

Что выбрать? Stackable, Advanced Rich Text Tools или EditorsKit? Это зависит от того, что вам нужно.

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

Advanced Rich Text Tools добавляет только несколько инструментов форматирования. Так что, если вам нужно что-то очень легкое, чтобы дать вам эту функцию изменения цвета, и если вы не возражаете против некоторых дополнительных 2-3 новых панелей инспектора, выберите этот плагин.

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

Как изменить шрифт в текстовом редакторе WordPress

По мере значительного развития Всемирной паутины как никогда важно создать эффектный, функциональный веб-сайт, который служит жизненно важным инструментом для личного брендинга. Кто не хочет приумножать свои доходы, выделяясь из толпы? Редакторы WYSISYG — отличный способ создавать интерактивные веб-сайты, не прибегая к сложностям кода. Большинство профессиональных веб-разработчиков используют текстовый редактор WordPress для создания и обновления своих веб-сайтов, включая визуальные эффекты и интерактивный контент. Это сбывшаяся мечта — иметь возможность делать все это, не написав ни единой строчки кода. Хотя практично использовать JS-редактор RTF для украшения вашего сайта. Большинство людей не знают, как изменить шрифт в редакторе WordPress.

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

Содержание

Почему пользовательские шрифты имеют решающее значение для HTML-редактора веб-сайта?

Шрифты являются неотъемлемой частью вашего успеха. Ваш веб-сайт является главной страницей ваших услуг, поэтому он должен быть интерактивным и привлекательным. Шрифт и стиль должны быть такими, чтобы ваши услуги выделялись и отличались от других. В результате клиенты и потенциальные покупатели с большей вероятностью придут в ваш магазин. Что ж, если вы хотите оформить свой веб-сайт и сделать его более профессиональным, ваш поиск лучшего WYSIWYG-редактора javascript заканчивается здесь. Поддержка HTML-редактора Angular WYSIWYG от Froala — одна из лучших в бизнесе. Он предлагает базовые параметры стиля, а также расширенный стиль за счет интеграции плагинов. Кроме того, его Froala позволяет вам определить свой собственный класс стиля и, следовательно, настроить внешний вид вывода редактора.

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

Как изменить шрифт в текстовом редакторе WordPress?

Разочаровывает использование одного и того же старого и скучного шрифта для оформления веб-сайта. Никто больше не хочет смотреть на монотонные и равномерно расположенные буквы, текущая динамика требует, чтобы веб-сайт был визуально привлекательным с помощью красочных и жирных шрифтов. Чтобы настроить собственный шрифт с помощью Froala, вам понадобится плагин font_family.min.js . Сначала вы должны добавить шрифт на свой веб-сайт. В этом примере мы используем четыре шрифта Google: Roboto, Oswald, Montserrat и Open Sans Condensed. Затем параметр fontFamily используется для указания того, какие шрифты должны отображаться в меню семейства шрифтов. Эта опция представляет собой объект с ключом, указывающим имя шрифта (в точности как правило CSS семейства шрифтов, например, семейство шрифтов: «Roboto», sans-serif;) и значением, которое отражает имя шрифта в раскрывающемся списке, например Робото:

     <скрипт>
новый FroalaEditor('div#froala-editor', {
 семейство шрифтов: {
«Робото, без засечек»: «Робот»,
«Освальд, без засечек»: «Освальд»,
«Монтсеррат, без засечек»: «Монтсеррат»,
"'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
 },
fontFamilySelection: правда
 })
 

Как начать работу с редактором WordPress Froala WYSIWYG?

Начать работу с лучшим WYSIWYG-редактором WordPress относительно просто. На самом деле есть два способа установки Froala. Либо вы можете использовать GitHub, чтобы загрузить его вручную, либо просто добавить его в качестве администратора WordPress. Мы рассмотрим обе процедуры в этом посте. Чтобы загрузить его вручную, вам просто нужно зайти в репозиторий Froala на GitHub и загрузить содержимое. Затем создайте новую папку под папкой плагинов в мастере установки WordPress. После этого шага вы можете, наконец, скопировать Froala во вновь созданную папку и пользоваться им как плагином в админке WordPress.

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

Что делает Froala идеальным текстовым редактором WordPress?

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

От молниеносной обработки данных и изображений до мощного API и полной настраиваемости — в нем есть все.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт

Поиск:

Рубрики

• Seo
• Wordpress
• Дизайн
• Заработок
• Плагин
• Разное
• Рекомендац
• Сайт
• Совет
• Советы
• Тем
• Темы
• Урок
• Уроки