Редактор страниц wordpress

Редактор страниц wordpressЕсть у меня небольшой набор плагинов wordpress, которые смело можно называть «must have» для каждого блоггера, то есть обязательными к использованию. Устанавливаю по возможности практически одну и ту же сборку на все свои блоги, что позволяет сделать работу с системой более продуктивной, функциональной и удобной для посетителей. Думаю, в дальнейшем обзоры их всех вы найдете на страницах этого блога, про кое-какие модули уже успел рассказать, но большинство из них еще впереди. Сегодня речь пойдет о продвинутом текстовом редакторе TinyMCE Advanced – штука очень классная и практичная.

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


Редактор страниц wordpress

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

  • форматирование wordpress  шрифта (жирным, курсивом, с подчеркиванием и т.п.)
  • создание обычных и нумерованных списков, а также отступов для текста
  • выравнивание текста по краям, центру и всей ширине колонки
  • создание и удаление ссылок
  • вставка изображения
  • редактирования css
  • создание цитат
  • вставка разделителей в wordpress читать далее и следующей страницы
  • включение проверки орфографии, нахождения строки в тексте
  • включение полноэкранного режима, а также отображение дополнительной строки функциональных клавиш для текстового редактора TinyMCE Advanced
  • последняя кнопка – вставка голосования плагина wp-polls.

Вторая строка не менее важная и также содержит ряд интересных функций:


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

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

Установка и настройка TinyMCE Advanced

Скачать текстовый редактор TinyMCE Advanced можно с официального сайта вордпресс здесь. Следует заметить, что для разных версий wordpress (2.6, 2.7, 2.8+) нужно использовать свой дистрибутив.  На момент написания статьи последняя версия плагина есть 3.2.7.

Установка стандартная – после скачивания разархивируем и загружаем на фтп блога в папку wp-content/plugins. Далее активируем TinyMCE Advanced из админки, после чего заходим в меню «Параметры» — «TinyMCE Advanced», где нужно произвести его настройку. Финальным аккордом есть очистка кэша браузера.


Перед тем как рассказать о настройке еще пару слов про функциональность модуля. По описанию на официальном сайте в него входит аж 15 других плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras. Все это возможно получить, установив лишь один TinyMCE Advanced! Кроме английского языка плагин поддерживает и некоторые другие локализации (немецкую, французскую, итальянскую, испанскую, русскую и т.д.). В общем, сомневаться в широких возможностях модуля не приходится.

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

Редактор страниц wordpress

Видите сколько там еще все припасено? Вникать в детали вам уже придется самостоятельно, благо все элементы подписаны и достаточно наглядные. Выделил бы отдельно, пожалуй, блок с функциями для работы с таблицами – позволит быстро и легко создавать, изменять их в тексте. Еще в TinyMCE Advanced можно импортировать в редактор пользовательский css файл стилей – тоже может пригодиться. В целом, как я и сказал с самого начала поста, модуль must have!

Дополнения для TinyMCE Advanced

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


  • Изменяем цвет текста в WordPress с помощью модуля TinyMCE Color Grid и не только. Данное решение создает здоровенную палитрую цветов в редакторе + добавляет еще одну полезную функцию. Также в статье найдете хак для functions.php, позволяющий заменять базовые цвета в TinyMCE Advanced на свои.
  • Как подключить шрифт в WordPress редакторе — рассматриваю задачу установки новых пользовательских шрифтов в TinyMCE Advanced, а также добавление Google Fonts через обычные CSS стили.

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

wordpressinside.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

Плагин Front-End Editor


Начнем с плагина Front-End Editor – на мой взгляд, очень простого, но очень эффективного. Он способен на многое, если не на все – в смысле, как текстовый редактор. Как его установить, вы уже знаете. Если нет – читайте мою статью Несколько способов установки плагинов на WordPress. После активации плагина заходим в его настройки – это здесь: консоль – «Параметры» — «Front-end Editor». Вот сами настройки:

Плагин Front-End Editor

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

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

Первое, что вы можете сделать:

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

Плагин Front-End Editor

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

Плагин Front-End Editor

Как видите, если включить в настройках плагина отображение WYSIWYG редактора (визуального, а не HTML), то он напоминает обычный редактор WordPress, и работать с ним нужно точно так же. А если вы добавите к обычному редактору добавить расширение в виде плагина WP Super Edit, то и возможности редактора Front-End Editor тоже увеличатся.

Плагин Raptor Editor


Интерфейс плагина очень простой, я бы даже сказал – минималистический. Работать с ним, как и с плагином Front-End Editor, сумеет даже неопытный пользователь. Что может плагин? Умеет загружать картинки и другие файлы, умеет редактировать текст, управлять тегами, и т.д. Но внятно работает не со всеми шаблонами WordPress. У меня, например, не получилось сделать понятные скриншоты для дефолтного шаблона, поэтому пришлось поставить другую тему. Вот результат:

Плагин Raptor Editor

Вы видите, что возможностей у плагина – масса, и все это вы можете делать, не заходя в админпанель, а это – главное. А вот как выглядит страница плагина Raptor Editor с настройками. Их совсем немного – намного меньше, как я уже говорил, чем у Front-End Editor. На вкладке «Общие» все понятно – можно редактировать все и везде. Вкладка настроек «Редактор» отвечает за автоматическое изменение размеров вставленного изображения, когда изображение слишком велико.

Плагин Raptor Editor


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

Плагин Front End Upload

Плагин делает следующий фокус: он создает на любой странице (для этого нужно прописать шорткод [front-end-upload]) возможность для зарегистрированных пользователей загружать любые файлы, предназначенные для администратора. Загружать файлы можно как в свободном доступе, так и по паролю.

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

Плагин Front End Upload

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


Плагин Front End Upload

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

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

seobid.net

Визуальный редактор страниц Page Builder Sandwich

К достоинствам плагина относится упрощенное добавление текста. Выбираете нужную область, и просто начинаете набирать текст. Также действует технология перемещения (drag and drop) – это бесценная функция, позволяющая перемещать выделенные объекты относительно рабочей области с помощью мышки. Вам не придется размещать формы через код, подбирая их координаты «методом тыка». Это существенно сокращает время работы.

У плагина есть возможность отмены действий. Если вы сделали что-то не так, то просто воспользуйтесь комбинацией клавиш ctrl+z, и вы будете возвращены на один шаг назад.

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

Работа с плагином Page Builder Sandwich

После установки и активации плагина, перейдите в пункт «Пользователи», в подпункт «Ваш профиль» в консоли WordPress, и поставьте галочку напротив чекбокса «Show Toolbar when viewing site». После этого при посещении любой страницы на вашем сайте через front-end вы заметите кнопку визуального редактора справа наверху. Она большая и синяя, так что вы не промахнетесь. При нажатии на кнопку, откроется редактор, позволяющий налету редактировать все, что вам вздумается.

Еще одним достоинством данного дополнение является возможность немедленного наблюдения результата.

Слева расположена панель инструментов. В бесплатной версии количество инструментов ограничено. В платной оно тоже ограничено, но их значительно больше. На официальном сайте WordPress можно найти обучающий материал по работе с плагином.

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

Вы можете узнать о другом редакторе для WordPress в этой статье.

You May Also Like

About the Author: admind

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

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

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

Adblock
detector