Визуальный редактор wordpress: Визуальные редакторы WordPress | WordPress Custom: работа с ВордПрес

Визуальные редакторы WordPress | WordPress Custom: работа с ВордПрес

Мифы о конструкторах

Тема регулярно поднимается в различных уголках интернета. При этом однозначного ответа о целесообразности создания сайта данным способом нет. Дать его невозможно по причине разности интересов и принципов веб-проектов. К примеру, вы собираетесь создать доску объявлений. Это серьезная задумка, которая потребует создания площадки практически с 0. Будущий сайт должен отвечать запросам современной ЦА, быть адаптированным под конкретную нишу, если это необходимо. Так сайты по продажи автомобилей и жилья кардинально отличаются кодом, дизайном и наполнением. Можно изначально заложить в веб-ресурсе возможность расширения на смежные ниши. В общем, все зависит от фантазии основателя, его финансов и стремлений. Потребуется детальная проработка кода не одним, а целым штатом специалистов разного профиля.

Путь развития блога или интернет-магазина не нуждается в подобных глобальных решениях. Для их создания вполне подойдет конструктор. 90% новичков ищут ответы на популярных форумах, где и делятся своими мыслями о предполагаемом использовании визуальных редакторов. Здесь начинается самое интересное: малоопытные пользователи сталкиваются с тотальной критикой данного решения. Мол необходимы знания HTML и CSS, навыки работы со скриптами, и вообще создание сайта требует от вас уровня мега-мастера программирования. Настроение новичков падает, многие отказываются от затеи. Остается 10-15% тех, кто решает идти до конца. Они спрашивают у «профессионалов» о вариантах решения проблема. Те отвечают, что могли бы помочь, но это стоит денег. Специально для них они готовы сделать скидку. Уже проследили схему? Форумчане и не думали о реальной помощи, а играли на банальной неопытности и наивности оппонента.

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

• вшитая и визуальная реклама. Веб-специалисты уверяют, что получить ресурс с чистой структурой нереально. Обязательно закрадется рекламная ссылка, которая испортит репутацию веб-сайта в глазах поисковой системы. Проблема актуальна для бесплатных версий. Купите минимальный тариф, и реклама пропадет. Стоимость сопоставима с ценой хостинга;
• однотипный внешний вид. Готовые решения визуальных редакторов строятся на базе стандартных шаблонов: якобы никакой индивидуальностью здесь и не пахнет. Абсурдная точка зрения! Конструкторы используют не для поиска готового решения. В них стиль корректируется по индивидуальным критериям. Никто не мешает начать все и с буквально чистого листа;
• не попадают в Топ выдачи. Очередное ошибочное мнение. Индексация зависит от ряда показателей. Ключевыми являются структура, контент и уровень домена. Выяснили, что первая ничем не уступает ресурсам, сделанным вручную. Контент должен быть уникальным, интересным, востребованным – зависит от автора. Бесплатная версия редактора предполагает домен 3 уровня. Он является главной проблемой для продвижения. Решается она покупкой и привязкой нормального домена 2 уровня.

У веб-конструкторов есть главный плюс и основной минус. Первый заключается в простоте освоения и использования. Сервисы построены на базе функции Drag-and-Drop: выбирайте элемент, редактируйте и перетаскивайте его на нужное место. Система автоматически генерирует адекватный код. Многим его хватает на весь период существования проекта. Продвинутые версии предполагают 75-80% открытого кода, который правится вручную. Недостатком является отсутствие возможности переноса ресурса на другой хостинг в дальнейшем. Варианты данного обзора его лишены, ведь сегодня мы говорим не о веб-сервисах, а плагинах.

WPBakery Page Builder

$ 45 на момент написания статьи

Непревзойденный лидер в мире визуальных редакторов страниц в WordPress. Данный плагин прошел тернистый путь от простенького инструмента до комплексного плагина для сайта. В актуальном наборе дополнения содержатся элементы не только для редактирования внешнего вида ресурса, но и внутренних панелей, блока SEO, отдельных частей кода. Название WPBakery расширение получило не так давно. Ранее оно было известно миру как Visual Composer. Первоначальная версия утилиты вышла еще 22 мая 2011 года. Плагин относится к категории «Премиум» и не имеет бесплатной версии. Годовая стоимость составляет 45-250$. На момент написания обзора (07.05.2019), дополнение приобрели 380 000+ пользователей. Средний показатель рейтинга составляет 4,5 звезды из 5.

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

Чтобы начать работу, устанавливаем WPBakery как обычное расширение. Переходим в одноименную вкладку главного меню и задаем настройки. Их немного и на первых парах достаточно «По умолчанию». На будущее приводим пояснения:

• основные настройки – активируем адаптивный дизайн и Гугл-кириллицу;
• Role Manager – права доступна администраторов;
• дизайн элементов – цветовая гамма, стиль, размеры и прочее;
• индивидуальные CSS – добавляем свои стили и таблицы. Пригодится веб-мастерам;
• лицензия – автоматические обновления и авторская поддержка;
• Shortcodes – для своих наработок.

Использование WPBakery осуществляется через уникальный композер. Есть две вариации – Backend Editor и Frontend Editor. Первая подразумевает настройку из административной панели, а вторая – полностью визуальный редактор. По ходу предлагаются предустановленные шаблоны. Пользоваться или не обязательно. Необходимые элементы выбираются из меню Add element. Здесь есть ряд, текстовые блоки, делители, информационные сообщения, форма комментариев, слайдеры и многое другое. Также разработчики предлагают фильтры изображений, расширенный инструментарий, аддоны с дополнительными элементами, эффектами и Parallax-фоны. Большим преимуществом является частично русский перевод.

Beaver Builder

Прямой конкурент WPBakery, набирающий популярность. Данное расширение из той же категории «Премиум».  Нужно сказать, оно очень похоже на предыдущего оппонента. Аналогия прослеживается на этапе установки, настройки, работы. Активация занимает несколько минут. В случае с Beaver Builder настройки по умолчанию можно не трогать. Если зашли от имени главного администратора, сразу приступаем к созданию страниц. Имеется две панели для работы: в админке и верхней строке визуального просмотра. Иногда жалуются, что вторая не появляется. Рекомендуем проанализировать список установленных дополнений. Нередко пользователи намеренно блокируют вывод верхней строки специальными инструментами.

Создание страницы начинается с выбора ее типа и стиля. Представлено 3 варианта: домашняя, контентная и ваша собственная, шаблонная. Пользователю доступно 15+ стандартных вариантов страниц, которые правятся по желанию, и чистый бланк. Компактный интерфейс вмещает в себя большое количество функций. Однако за счет простой подачи и пояснений вопросов не возникает. Функционал аналогичен WPBakery, поэтому останавливаться на нем не будем. С Beaver Builder разберется даже новичок без опыта работы с подобными расширениями. Недостатком является отсутствие русского языка.

Простота – это критерий, в котором Beaver Builder ушел вперед. Открытым остается вопрос стоимости. Здесь выгода не очевидна, так как за этот плагин придется заплатить от 99 до 399$. Разница с ценовым предложением конкурента WPBakery колоссальная. Справедливости ради, не понятно, чем она обусловлена. Из-за этого многие принимают решение не в пользу Beaver Builder. Со второго года стоимость пакетов снижается на 40%, что приводит к диапазону от 59 до 239$. Последний вариант пакета выгоднее аналогичного от WPBakery на 11 долларов, но компенсация разницы стартовых цен займет более 13 лет…

Elementor

Бесплатные «строители» для ВП встречаются редко. Ярким представителем безвозмездной категории является это дополнение. Elementor не просто стал хорошей альтернативой для любителей и веб-мастеров, но и взял оливковую ветвь лидерства. Всего на базе расширения созданы и успешно работают 2+ млн. ресурсов. Как и большинство аналогичных продуктов, Elementor имеет премиум-версию. Она предусматривает пакеты для 1, 3 или 999 сайтов. Обходятся тарифы в 49, 99 и 199$ соответственно. В последние годы Pro-версия плагина дышит в спину потомку Visual Composer. Но это не значит, что ее срочно нужно покупать. Многим хватает и бесплатного варианта. На момент 7 мая 2019 года в него входит 83 функции. Повод познакомиться с ним поближе.

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

1. Универсальность. Работает с любыми темами без пейдж-билдеров.
2. Большой каталог инструментов. Слайдеры, карусели, блоки текста и информации, виджеты, формы комментирования и прочее.
3. Детальное редактирование. Выбранный элемент многосторонне правится: цвет, шрифт, размер, анимация, эффекты – это далеко не все из доступного.
4. Расширенная библиотека готовых шаблонов. Намного больше, чем в аналогичных платных дополнениях. Конечно же, все правится по желанию.

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

MotoPress

Очередной коммерческий проект, который полюбился миллионам по всему миру. Точная дата появления проекта не известна. В сегодняшний обзор MotoPress попал не просто так. У него тернистая, интересная история развития. Изначально утилита создавалась как альтернатива стандартному визуальному редактору контента WordPress – панели, с которой мы работаем в записях. Ожидаемый успех к разработке не пришел, так как она не имела изюминки. При этом дополнение отлично справлялось с возложенными на нее функциями. Продукт MotoPress Content Editor долгое время не модернизировался создателями. Их внимание поглотил новый проект – MotoPress Slider. Речь идет о расширении для работы со слайдерами в записях. Его главной особенностью являлась функция полноценного редактирования изображения в рабочей области. Это избавляло от покупки дорогостоящих графических программ и просто экономило время.

На данный момент, MotoPress Slider стал бонусом для премиум-пакетов. MotoPress Content Editor занял центральное место в ассортименте продуктов компании. Он подвергся глобальной модернизации, по итогу которой в него добавлен функционал для работы не только с записями, но и страницами. Недостаток в лице невозможности редактирования ранее созданных информационных блоков также устранен. Установка Content Editor аналогична любому дополнению. В левой колонке главного меню появляется одноименная ссылка, ведущая в панель. Последняя представлена двумя зонами: центральной для создания структуры в визуальном режиме и боковой колонкой инструментов в левой части экрана. Целью команды разработчиков было реализовать решения, позволяющие создавать структуры профессионального уровня с применением простейших элементов и функции Drag-and-drop. Результатом стал следующий инструментарий:

• текст;
• изображения;
• сетка элементов;
• кнопки;
• социальные иконки;
• видео и аудио;
• звуковые эффекты;
• вкладки;
• таблицы;
• счетчики статистики;
• карты;
• конструкции HTML;
• виджеты;
• пространственные элементы;
• визуальные эффекты.

От конкурентов продукт отличает ряд особенностей. Во-первых, уникальная и полноценная панель визуального редактирования. Нередко пользователи отмечают, что она удобнее и понятнее аналогов конкурентов. Во-вторых, дополнение подойдет для работы с любыми темами, совместимо со многими сторонними расширениями. В частности, пакеты MotoPress полностью адаптированы под Multisite. В-третьих, имеются вшитые Гугл-шрифты, стили и шаблоны. Продукт совместим с WPML-технологиями. Автоматические обновления проходят регулярно и незаметно для пользователей. MotoPress переведен на несколько языков, но русского среди них нет. Есть демо-версия с сильно урезанным функционалом. Она не подойдет для серьезной работы. Цена премиального пакета зависит от количества ресурсов и необходимости аддонов. 1 сайт обойдется в 29$/год, 5 – 47 долларов, а неограниченное их количество – 139. Стоимость пакетов премиум-инструментария составляет 69$ для одного ресурса и 179$ для «Без ограничений». Unlim-набор брать не выгодно, однако, сгенерировать нечто среднее за разумные деньги не составит труда.

Live Composer

Известный бесплатный визуальный редактор. Толчком к его созданию стал банальный интерес. Со временем плагин дорабатывался несколькими командами разработчиков. Отсутствие автоматических обновлений, огрехи любительского перевода и редкие сбои не играют в плюс расширению. Однако оно имеет функционал, сравнимый по масштабу с коммерческими проектами. Отметим, что Live Composer предназначен для работы только с таблицами. Записи придется править в других плагинах. Это может плохо сказаться на скорости работы и структуре веб-сайта.

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

1. Выбор шаблона. Есть предустановленные варианты. Их можно скачать, либо загрузить собственные шаблоны.
2. Поиск элементы. Они находятся в меню модулей (крайняя левая вкладка).
3. Настройка выбранного. Перетаскиваем элемент в рабочую область, правим с помощью микшеров, стрелок и прочего. Все на уровне потяни, разверни, напиши и прочее. Никакого кода и HTML-конструкций.
4. Сохранение результатов. Функция предпросмотра сэкономит время.

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

VelocityPage Drag and Drop Builder

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

VelocityPage попал в обзор не случайно. От аналогов он отличается рядом особенностей. Первая из них – настраиваемая панель. В меню модулей можно переставлять кнопки местами, формировать перечень часто используемого, менять высоту строки. Нельзя изменить только ширину колонки. Дополнительных аддонов для VelocityPage не предусмотрено. Не спешите расстраиваться: функционал плагина близок к набору инструментов в максимальных пакетах Beaver Builder и WPBakery. Модули в утилите представлены блоками. Среди них есть текст, изображения, медиафайлы, чаты, форумы, комментарии и многое другое. Ориентирование в рабочей зоне осуществляется простым перетаскиваем. Параметры элементов по типу формы, цвета, размеров и др. изменяются в 1 клик. 

Проект является коммерческим, и цена порадует далеко не каждого. Завышенную стоимость разработчики компенсируют расширенный функционалом и оперативной поддержкой клиентов. Акцент на последней сделан не случайно. Сегодня пользователь не привык разбираться в нюансах самостоятельно. Намного проще написать в саппорт и получить грамотный ответ. С внятностью и скоростью отклика поддержки нередко возникают проблемы. Обычно первыми в очереди стоят держатели самых дорогих наборов. Компания-разработчик VelocityPage решила проблему, обеспечив одинаково качественную поддержку и любителям, и бизнесменам. Если не устраивает сервис, в течение 30 дней можно подать жалобу и вернуть деньги.

Заключение

Визуальные редакторы в WordPress решают сразу несколько проблем. Во-первых, они позволяют быстро и без знания HTML, CSS, шорткодов и прочего менять содержимое и структуру страниц и записей. Во-вторых, при этом не страдает их структура, скорость загрузки. В-третьих, не нужно тратиться на услуги специалистов. Новичок быстро разберется с функционалом и самостоятельно реализует задумки. Однако перечисленные преимущества характерны лишь для проверенных плагинов. Найти таковые не просто: в интернете масса информации на разный лад. Мы проанализировали ее за вас и составили Топ, который отвечает актуальным задачам новичков и профессионалов. Удачных проектов!

Визуальный редактор WordPress – плагин TinyMCE Advanced

Дорогие читатели, сегодня мы поговорим об удобстве написания и оформления статей для блога. А именно, о плагине для WordPress TinyMCE Advanced.

Содержание статьи:

Зачем нужен нормальный визуальный редактор WordPress

Возможно, вы уже воспользовались советом из статьи Windows Live Writer — программа для написания статей и пишете ваши записи через нее. А может она вам не понравилась. Да и разные ситуации, когда воспользоваться ей не предоставляется возможным и нужно писать статью через админку блога с использованием визуального редактора (WYSIWYG — “Что видишь, то и получаешь”).

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

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

Не работает визуальный редактор WordPress?

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

Установка плагина TinyMCE Advanced для WordPress

Установка стандартная. Удобнее всего скопировать название плагина «TinyMCE Advanced» в поиск плагинов и установить. Можете так же скачать плагин TinyMCE Advanced с официального сайта вордпресс. Если вы не знаете, как его установить, учитесь здесь.

Настройка плагина

1. В админке блога: «Параметры» -> «TinyMCE Advanced». Открылись настройки плагина.
2. Названия кнопок сейчас на английском, но не переживайте, при редактировании статьи визуальный редактор отобразится  полностью на русском.
3. Четыре строки сверху показывают строки визуального редактора, которые можно наполнять функциональными элементами. Ниже расположен перечень имеющихся кнопок. Перетаскивая левой кнопкой мыши значки, вы сможете расположить их в нужном порядке. Аналогично можно избавиться от ненужных инструментов: перетащите их мышью вниз.
   
4. Обратите внимание, что чем больше инструментов вы добавите на панель редактора, тем медленнее он будет работать. Поэтому добавляйте только те кнопки, которыми вы пользуетесь.

Как отключить визуальный редактор WordPress

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

Функционал и преимущества редактора TinyMCE Advanced

После того, как вы закончили настраивать редактор, откройте любую статью и возрадуйтесь! Теперь это уже похоже на серьезный редактор типа MS Word. Визуальный редактор для вордпресс TinyMCE Advanced обладает множеством свойств, которые помогут вам оформлять статьи, как пожелаете. Перечислю основные из них:

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

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

Редактор WordPress. Работа с блоками — Справка

Редактор WordPress — это средство создания страниц и записей на веб-сайте. Ниже приведены инструкции по его использованию.

Редактор блоков WordPress

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

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

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

Блоки

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

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

---

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

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

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

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

1. Щелкните черный + значок сбоку любого пустого блока.
2. Щелкните синий + значок в левом верхнем углу редактора.
3. Нажмите клавишу Enter (клавишу перевода строки), находясь в выбранном блоке, чтобы создать под ним новый блок.
4. Щелкните черный + значок в середине в верхней части существующего блока, чтобы добавить блок над ним.
5. Щелкните три точки над выделенным блоком и выберите, куда добавить новый блок: выше или ниже текущего.

По умолчанию для вставки выбран блок абзаца, который можно использовать для вставки обычного текста. С помощью дополнительных кнопок (значок «+») можно выбрать другой тип блока. Также для поиска по блокам можно ввести косую черту, а затем имя блока, например /image (изображение) или /heading (заголовок).

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

---

Перемещение блоков

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

Перемещение блоков

---

Настройка блока

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

Примеры различных панелей инструментов для работы с блоками

Панель инструментов блока абзаца Панель инструментов блока изображения Панель инструментов блока списка

Настройки блока — панель инструментов

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

1. Скрыть параметры блока: позволяет закрыть меню настроек.
2. Дублировать: создаёт на той же странице второй блок с таким же содержимым.
3. Вставить до/после: добавляет новый блок до или после текущего.
4. Редактировать как HTML: переключает блок в режим HTML для непосредственного редактирования его HTML-кода. В режиме редактирования HTML эта опция меняется на «Редактировать визуально».
5. Добавить в мои блоки: позволяет создать блок, который можно использовать на других страницах с сохранением содержимого и оформления. Подробнее.
6. Удалить блок: позволяет удалить блок со страницы или из записи.

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

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

Настройки блока — Боковая панель

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

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

Если настройки блока в правой части окна редактора не отображаются, щелкните значок настроек (значок шестеренки ⚙️) рядом с кнопкой «Опубликовать» или «Обновить», чтобы раскрыть боковое меню.

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

---

Изменение типа блока

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

Изменение типа блока

---

Навигация по блокам

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

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

Блок навигации особенно полезен для выбора труднодоступных блоков, таких как столбец внутри блока столбцов или блок внутри группы блоков.

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

---

Удаление блока

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

Удалить блок

---

Настройки документа

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

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

Настройки документа

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

---

Шаблоны блоков

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

1. Нажмите значок «+» для добавления нового блока.
2. Щелкните вкладку Шаблоны.
3. Щелкните шаблон, который нужно вставить, и он будет вставлен в документ в том месте, где находится ваш курсор.

Дополнительная информация доступна в нашем руководстве по шаблонам блоков.

---

Дополнительные параметры

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

Просмотр

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

Редактор

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

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

Инструменты

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

Параметры

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

Дополнительные параметры

---

Распространённые вопросы

Как редактировать код HTML в редакторе WordPress?

Чтобы написать собственный HTML-код, используйте блок Пользовательский HTML.

Другие способы изменения HTML-кода в редакторе WordPress см. здесь.

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

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

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

Почему внешний вид содержимого в редакторе отличается от того, как он отображается на сайте?

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

Почему некоторые настройки доступны не на всех моих веб-сайтах?

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

Некоторые настройки блоков («wide» или «full-width») должны поддерживаться в вашей теме. Одинаковые блоки могут присутствовать на разных сайтах, но какие-то настройки, применяемые для них, могут немного отличаться в зависимости от используемой темы.

Смогу ли я использовать старый редактор?

Да. Для перехода в классический редактор щелкните значок настроек «. . .» в правом верхнем углу экрана редактирования.

Затем нажмите «Переключиться на классический редактор».

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

Будут ли по-прежнему работать шорткоды?

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

Будет ли этот редактор доступен для всех?

Наша цель — сделать новый редактор WordPress настолько же удобным для работы, как и предыдущие редакторы, и даже лучше. Мы хотим, чтобы все могли им пользоваться. Согласно стандартам доступности WordPress, «весь новый или обновляемый код, выпускаемый на WordPress, должен соответствовать рекомендациям Руководства по обеспечению доступности веб-контента (WCAG) 2.0 на уровне AA». Без исключений. Если вы обнаружили проблему с использованием специальных возможностей, свяжитесь с нами.

Нужно ли использовать какую-то специальную тему для нового редактора?

Нет. Новый редактор блоков будет работать со всеми темами. Однако не во всех темах поддерживаются специальные функции разметки (например, содержимое с настройками wide и full width).

Где можно посмотреть полный список горячих клавиш?