Редактор wordpress


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

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

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

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


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

Использование визуального редактора Front-end Editor

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

Создание страницы или статьи

Обычно, нажимая кнопку «Добавить», вы перенаправляетесь к wysiwyg редактору в панель управления WordPress. Плагин Front-end Editor позволяет оставаться на главной сайта, и дает возможность производить создание страницы прямо на ней. Вы просто вводите нужный заголовок туда, где написано «ЗАГОЛОВОК», а содержимое на место надписи «Just write…». Если один раз кликнуть на эту надпись, то появится постоянная ссылка для страницы, которую можно изменить во всплывающем окне.


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

редактор статей Front-end Editor

Добавление содержимого

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

  • Медиафайлы (изображение, аудио, видео);
  • Горизонтальную линию;
  • Кнопку «Читать далее»;
  • Разрыв страницы.

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


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

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

  • Жирный шрифт;
  • Курсив;
  • Зачеркивание;
  • Ссылка;
  • Цитата;
  • Заголовки H2 и H3.

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

Прикрепление медиа

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


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

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

Благодаря тем возможностям, которые приносит плагин Front-end Editor, большую часть изменений текста постов можно сделать прямо на главной, за исключением настроек SEO, а также некоторых HTML тегов. Но на каком месте веб-сайта вы бы не находились, вы всегда можете зайти в расширенный визуальный редактор, нажав на кнопку «Edit in admin» в меню редактирования записей.

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

Сохранение и публикация

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


Какое будущее у Front-end Editor

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

Вывод

Помимо большого количества плюсов, плагин Front-end Editor имеет и несколько минусов. В основном, они связанны с некоторыми ошибками, которые, впрочем, не мешают ему работать. Например, есть проблемы с сохранением и публикацией постов при активации одного из стандартных шаблонов WordPress, а также незначительные сбои при изменении контента. Как бы то ни было, это замечательный плагин, который может сэкономить огромное количество времени при создании контента, а также дать опыт использования настоящего wysiwyg.

Похожие статьи


wordpresslib.ru

WordPress редактор текста: плагин TinyMCE Advanced

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

  • маркеры списков;
  • таблицы;
  • шрифт;
  • размер шрифта;
  • цвет фона текста и т.д.

Ниже представлена пошаговая инструкция по использованию плагина TinyMCE Advanced.

Видео урок.

WordPress редактор текста: плагин WP Edit

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

  • добавление ID сообщения/страницы;
  • контроль над ревизиями сообщения/страницы;
  • создание и размещение шаблона контента (при помощи шорткода) в любом месте сообщения/страницы;
  • выделение выбранным Вами цветом сообщений/страниц, в зависимости от их статуса;
  • добавление сетки (колонок) при помощи шорткода и т.д.

Ниже представлена пошаговая инструкция по использованию плагина WP Edit.

Видео урок.

На официальном сайте WordPress плагин  представлен на английском языке, скачать плагин WP Edit на русском языке, Вы можете на странице Перевод плагинов.

blogwp.ru

Редактор текста WordPress: функцииРедактор текста WordPress «Визуально»

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

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


  • «Жирный», «Курсив», «Подчёркнутый», «Перечёркнутый». Форматирует текст соответственно своей функциональности. Для форматирования необходимо выделить нужный участок и нажать на необходимую кнопку.
  • «Маркированный список», «Нумерованный список». Список маркерами или цифрами. Для применения нужно выделить несколько строк и нажать на необходимую кнопку. То, какие маркеры будут в маркированном списке, зависит от установленного шаблона.
  • «Цитата». Выделяет текст. То, как будет выглядеть цитата на страницах вашего сайта, зависит от того, какие стили прописаны к ней в установленном шаблоне.
  • «Горизонтальная линия». Просто разделительная линия.
  • «По левому краю», «По центру», «По правому краю», «По ширине». Ориентирует текст соответственно выбранной опции.
  • «Вставить/изменить ссылку». Позволяет вставить ссылку в нужное слово (слова). При нажатии на эту кнопку открывается окно, в котором необходимо вписать URL ссылки и выбрать, будет она открываться в новом окне или же в этом. «Текст ссылки» заполняется тем текстом, который был выделен пред нажатием на данную кнопку. Если нажать на «Или сделайте ссылку на существующий материал», то появится удобная форма поиска по материалам сайта. Таким образом, можно легко вставить внутреннюю ссылку.
  • «Удалить ссылку». Убирает ссылку.

  • «Вставить тег «Далее». Устанавливает тег <!—more—> в том месте, где располагается курсор. Этот тег прерывает вывод записей ссылкой на продолжение её чтения. То, какой текст будет в этой ссылке – «Читать далее», «Read more» или что-то ещё, зависит от установленного шаблона.
  • Список «Абзац», «Заголовок 1», «Заголовок 2» и т.д. В этом списке можно создавать подзаголовок в тексте или сделать его обычным. Имеется шесть видов заголовков с тегами от <h1> — самый старший, до <h6> — младший. Младшие заголовки могут входить в состав старших, таким образом, создавая иерархию разделов в записи. Разметка подзаголовков в статье важна для продвижения.
  • «Цвет текста». Палитра цветов.
  • «Вставить как текст». Если вы хотите вставить текст из Word или другого редактора, в котором есть форматирование, то при нажатии на эту кнопку, текст вставится без форматирования. Если выключить эту кнопку, то редактор текста WordPress попытается сохранить форматирование оригинала.
  • «Очистить форматирование». Если вы вставили отформатированный текст, то эта кнопка может полностью убрать его оформление.
  • «Произвольный символ». Таблица спецсимволов, которых нет на клавиатуре.

  • «Уменьшить отступ, «Увеличить отступ». Уменьшает или увеличивает горизонтальный отступ текста.
  • «Отменить», «Повторить». Возвращает сделанные изменения в тексте или наоборот.
  • «Горячие клавиши». Показывает таблицу горячих клавиш. Будет работать, только если функция включена в настройках профиля WordPress.
  • «Полноэкранный режим». Переключает редактор текста WordPress в полноэкранный режим для удобства работы.

Редактор текста WordPress «Текст»

Приведу описания всех имеющихся кнопок в панели управления текстового редактора WordPress «Текст». Названия – это текст, написанный на той или иной кнопке. Первый клик по некоторым кнопка открывает тег, второй – закрывает. Например, первый клик по кнопке «Жирный» поставит тег <strong>, а второй — </strong>.

  • «b», «i», «del». Делает текст жирным, наклонным или перечёркнутым, соответственно.
  • «link». Работает с ссылками, открывает окно так же, как аналогичная функция в визуальном редакторе текста WordPress.
  • «Ins». Данный тег позволяет выделить текст, которым текущий документ был обновлён. Например, если вы опубликовали статью, а вписали в неё что-то новое, то с помощью этого тега вы можете сообщить читателем, что это обновление.
  • «b-quote». Выделение цитаты.
  • «Img». При клике открывает окно для работы с изображением. Сначала необходимо ввести ссылку на картинку, затем привести описание для неё.
  • «ul» и «ol». Маркированный и нумерованный списки, соответственно.
  • «code». Если вы приводите в редакторе текста WordPress какой-либо код, который может выполниться, но вам нужно его просто показать, а выполнять не надо, то его необходимо окружить тегами <code>.
  • «more». Устанавливает тег <!—more—> для прерывания вывода записи.
  • «Закрыть теги». Все теги, которые вы открыли, закроются при нажатии на эту кнопку.

wp-system.ru

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

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

Устанавливается плагин стандартно — , распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Активируйте и переходите к его настройкам в раздел «Параметры» — «Ultimate TinyMCE».

Визуальный редактор TinyMCE

По умолчанию все кнопки в визуальном редакторе WordPress располагаются в два ряда. Чтобы отобразить второй ряд используется кнопка «Показать/скрыть дополнительную панель». О функционале каждой кнопки, можно догадаться по значку на ней или по подсказке, которая появляется при наведении на нее курсора мыши. Ultimate TinyMCE добавляет еще около 40 новых функций и два дополнительных ряда кнопок.

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

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

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

Настройки Ultimate TinyMCE

Change the color of the Editor — меняет цвет блока с кнопками в визуальном редакторе WordPress.

Enable NextPage (PageBreak) Button — добавляет функцию NextPage для постраничного представления текста статьи.

Add ID Column to page/post admin list — на страницу админке WP со списками всех статей и записей добавляется новая колона, в которой указываются ID каждой записи/страницы блога. Можете прочитать, как узнать ID записи, страницы и рубрики в WordPress.

Allow shortcode usage in widget text areas — позволяет использовать «короткий код» в виджете «Текст». Короткий код (shortcode) предназначен для быстрого добавления кода Contact Form 7, NextGEN Gallery, Syntax Highlighter Evolved и других плагинов в текст страницы.

Use PHP Text Widget — позволяет использовать код php в виджете «Текст». Код интерпретируется и на страницу блога выводится уже результат его работы.

Enable Line Break Shortcode — добавляет в «Короткие коды» тег Break, который предназначен для добавления пустой строки в текст.

Enable Columns Shortcodes — добавляет в «Короткие коды» большое количество тегов, отвечающих за формирование колонок текста.

Enable Advanced Insert/Edit Link Button — добавляет продвинутую возможность вставки/редактирования ссылок.

Enable «Div Clear» Buttons — добавляет кнопки Div Clear both, left и right предназначенные для отмены обтекания элемента, которое задано с помощью свойства float.

Remove p and br tags — отключает автоматическую вставку тегов p (абзац) и br (перевод строки). Если не хотите для каждого параграфа указывать тег p в ручную, то лучше эту опцию не трогать.

Add a Signoff Shortcode — можно задать часто используемую фразу и вставлять ее в статьи с помощью тега Signoff из «Коротких кодов» (Shortcode).

fairheart.ru

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

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

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

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

Редактор wordpress» />

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

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

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

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

Редактор wordpress» />

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

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

Редактор wordpress

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

Цитата

Редактор wordpress» />

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

Редактор wordpress» />

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

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

Редактор wordpress» />

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

Редактор wordpress» />

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

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

Редактор wordpress» />

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

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

Редактор wordpress» />

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

Редактор wordpress» />

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

Редактор wordpress» />

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

Редактор wordpress» />

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

Редактор wordpress» />

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

Редактор wordpress» />

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

Редактор wordpress» />

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

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

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

Редактор wordpress» />

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

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

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

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

TinyMCE Advanced

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

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

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

Редактор wordpress» />

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

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

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

WP Edit

Редактор wordpress» />

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

Премиум версия WP Edit Pro включает в себя два дополнительных ряда кнопок и дополнительных функций, к примеру, 80 готовых стилей, интеграция с Dropbox и Google Fonts. Вы также можете использовать пользовательские шрифты и создавать пользовательские стили редактора.

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

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

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

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

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

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

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

Выводы

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

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

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

hostenko.com

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

Чтобы запустить визуальный редактор нужно в виджете “Записи”, он размещен в верхнем левом углу администраторской панели блога, кликнуть по ссылке “Добавить новую”. Откроется окно, в котором все будет готово к набору текста Вашей новой записи.

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

Настройка визуального редактора wordpress.

Откройте Ваш профиль(виджет “Пользователи”) – снимите флажок напротив пункта “Отключить визуальный редактор”

Кликнув по ссылке “Все записи” открывается панель “Записи”, вид которой можно настроить. Кликнув по ссылке “Настройки экрана” разворачивается панель(1), на которой выведены названия виджетов, которые могу активировать или запретить их к показу(2).

настройка виджетов визуального редактора

Панель настраиваю таким образом(выставлены флажки): после вывода названия записей(по умолчанию), вывожу название рубрик, количество комментариев и просмотров(Views), дату публикации,  title (заголовок), description (описание)(2). Вывод последних двух виджетов возможно только после установки плагина All In One SEO Pack, количество просмотров выводиться плагином WP-PostViews. Количество опций в панели настройки может изменяться в зависимости от установленных плагинов на блоге.

Кликнув по ссылке “Добавить новую” запускаем визуальный редактор WordPress. В правом верхнем углу вызываем выпадающую панель “Настройки экрана”(3).

настройка визуального редактора wordpress

Я могу настроить отображение виджетов и самого визуального редактора в 1 или 2 колонки, само окно редактора и виджет “Опубликовать” являются активными по умолчанию. Настройка виджетов визуального редактора:

  • инструменты SEO – доступен после установки плагина All In One SEO Pack, который позволяет прописать мета теги к каждой записи, настроить запрет/разрешить ее индексировать поисковыми системами(4).
  • настройка маскировки ссылок – виджет доступен после установки плагина WP No External Links(5)
  • виджеты рубрик и меток – позволяет привязать запись к одной или нескольким рубрикам или меткам. Уже год следую жесткому правилу: один пост = одна рубрика и ни одной метки. Это защищает блог от искусственного и бесполезного наращивания страниц.(6 — 7).
  • цитата (8) – только недавно узнал о том, что с помощью заполнения поля цитата можно организовать вывод оригинальных  анонсов. Вот только не все шаблоны позволяют это реализовать.
  • когда Вы проставляете ссылку на страницу какого-то ресурса можете вписать ее адрес в форму и отправить сообщение его автору. По умолчанию приходят сообщения Вам на почту после сохранения/редактирования записи(9)
  • произвольные поля(10) – задействованы в работе некоторых плагинов и хаков. К примеру, автоматически создаются плагином WP-PostViews, выводя количество просмотров статей(вы можете искусственно их накрутить тогда, когда реализован их вывод в активированном шаблоне на блоге. Плагин WP No External Links создает свое поле. Иногда для работы плагина Related Posts Thumbnails приходится создавать произвольное поле в ручную.
  • обсуждение или комментирование – выводятся все комментарии к одной конкретной статье(11), если конечно читатели их напишут.
  • Виджет Ярлык – выводятся латинские слова через дефис, на их основе формируется ЧПУ – адрес, если конечно же Вы активировали нужную опцию на блоге. На первых порах проконтролируйте создание ярлыков, чтобы вовремя исправить непредвиденные ошибки в формировании адресов.

Работа с визуальным редактором wordpress

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

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

Перемещаю курсор мыши в поле визуального редактора(14), при активной вкладке  “Вазуально”(15), вставляю заранее набранный текст записи из редактора NotePad++. Никогда не набираю текст в визуальном редакторе wordpress, так как может пропасть связь с сервером, заглючить ОС либо какая-то программа, отключиться питание компьютера. Из-за этого приходиться работу с начала либо с последней сохранённой копии либо надеется, что будет сохранен черновик. И редакции записей, которые создаться движком, мало чем помогут. Тем более многие блоггеры их создание отключают.

Текст набираю в визуальном редакторе Word, с помощью которого можно также выполнять первичное размещение материалов на блог, избавить текст от орфографических и пунктуационных ошибок. Копирую его в окно редактора NotePad++,  затем вставляю в окно визуально редактора Wordprpess (14).

Далее проводиться работа по форматированию текста: разбитие на абзацы, выделение фраз курсивом, жирным, выравнивание относительно левого поля, вставляется тег more. Базовый визуальный редактор wordpress весьма скуден по возможностям(16), все они давно знакомы пользователям того же блокнота или Word.

В левой части панели размещен виджет “Опубликовать”(17), он позволяет:

как использовать виджет опубликовать на блоге

  • отправить набираемый тексn в черновик  достаточно не сохранив запись закрыть вкладку браузера в котором отрыто окно визуального редактора, либо сразу же опубликовать материал(20). Кликнув по ссылке “Изменить”(17) оправить материал на утверждение. Полезно только для тех, кто имеет статус ниже, чем статус администратора.
  • определить видимость записи – будет ли он доступен только админу – личное, защитить паролем – если на ресурсе одобрена регистрация пользователей, имеется возможность выводить анонс записи в начале ленты новостей и она не будет перемещаться по ней в низ, после публикации последующих материалов(21).
  • существует возможность публикации записи сразу же после размещения текста в окне (22), но я всегда назначаю публикацию через час(выполняю планирование статьи) . Чуть ниже размещена кнопка “Планировать/Опубликовать”(19). После нажатия на ней, запись помещается в базу данных CMS WordPress и используется для генерации страницы.

Нужно обязательно привязать запись хоть к одной рубрике (18), иначе после клика по кнопке “Опубликовать” она будет размещена в рубрике, которая определена в настройках по умолчанию, как основная.

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

Как определить мета-теги записи в визуальном редакторе wordpress

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

Обновлённая версия плагина All In One SEO Pack позволяет не только определить метатеги title (23), description (24), ключевые слова(25), но и подогнать их длину к принятым стандартам. Кроме того, Вы можете определить будет ли конкретная страница закрыта от индексации Яндексом или Google (26).

Чуть выше расположено окно, в котором можно попробовать настроить оформление блока, который будет находиться в поисковой выдаче с этой страницей(27). Задумка в следующем: вы прописываете заголовок(23), после сохранения он отображается в виджете, как бы показывая сколько знаков в прописанном title будет доступно поисковым роботам. Так же настраивается видимая часть сниппета. К сожалению он формируется плагином на основе заполненного поля “Описания записи”. Если поля виджета оставить пустыми, то в качестве заголовка выводиться название статьи 13, сниппет не формируется.

Определить адрес страницы в визуальном редакторе wordpress

Как только в визуальном редакторе блога на WordPress разместили заголовок и перешли к размещению текста, выполняется формирование sef-ссылки по правилам, которые вы сами определили(28).

как изменить ярлык записи в визуальном редакторе wordpress

Ярлык, который используется для этого, можете увидеть в вышеописанном виджете(12)

Вы сможете отредактировать адрес страницы, кликнув по кнопке “Изменить”, прописав ярлык латинскими буквами слова, разделив их черточками. В основу ярлыка может взят перевод название записи на английский язык, в моем случае WordPress-Visual-Editor. После сохранения записи(19), можете вместо короткого названия вставить длинное, завлекающее читателей название статьи, sef-ссылка уже не изменится. Если же это проделать до сохранения записи, то ее адрес сформируется на общих правилах.

HTML-редактор WordPress

Как такового HTML редактора нет, представлен некое его убогое подобие, чтобы его вызвать просто кликните на ярлыке “Текст”, он находиться возле вкладки “Вазуально”(15). В это окно можете вставлять код видео, взятого на странице Youtube, шоткод используемого плагина на блоге, как пример приведу NextGEN Gallery.

Как вставить разделитель записи в визуальном редакторе.

Каждый пост состоит из двух частей: анонса и полной версии, разделяет их тег more, вставить в запись можно нажав иконку “Разделитель”(29), либо переведя редактор в режим “Текст” и вставить следующий тег:

  1. <!— more —>     — анонс отображается в начале полной версии статьи
  2. <!—moreКак беситься правильно —> то же, что и первый вариант, только анкором ссылки more будет текст “Как беситься правильно”
  3. <!—noteaser—><!—more —>  — анонс не является частью статьи
  4. <!—noteaser—><!—moreКак создать блог —>  то же, что и третий вариант, только анкором ссылки more выступает индивидуально заданный текст “Как создать блог”

Как редактировать уже созданную запись на блоге

Кликните по ссылке “Все записи”, которая находиться в виджете “Записи”, откроется панель, где Вы сможете:

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

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

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

seomans.ru

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

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

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

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

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

3) Скачайте свежую версию движка WordPress на компьютер, распакуйте и возьмите 2 папки wp-admin и wp-includes. Откройте программу FTP подключитесь к своему сайту, и скопируйте себе на компьютер 2 папки wp-admin и wp-includes на всякий случай, потом их удалите.

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

 

firstprize.ru

Плагин для редактирования текста WordPress

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

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

Редактор wordpress

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

Так и в случае с редактором. Когда-нибудь вполне может настать момент, когда вам будет не хватать чего-то и вы зададитесь вопросом: как же мне редактировать текст? как его оформить?

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

Как обычно, начинаем с поиска плагина.

Редактор wordpress

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

Редактор wordpress

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

Давайте взглянем на настройки плагина, они находятся в меню Настройки — TinyMCE Advanced.

Редактор wordpress

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

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

Редактор wordpress

webformyself.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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