Продвинутый визуальный редактор WordPress. Редактор html wordpress
Бесплатный визуальный редактор WordPress
Стандартный редактор WordPress отличается скудностью своих возможностей. Действительно, там присутствуют только самые необходимые инструменты для работы с текстом, чего хватит обычному блогеру, но творческой душе будет негде развернуться.
В этой статье мы расскажем вам о плагине, который создаёт продвинутый редактор WordPress. Это не просто добавление дополнительных инструментов в стандартный редактор, это полноценный новый визуальный инструмент.
Редактор WordPress Simply Symphony Adaptive Editor
Simply Symphony Adaptive Editor – это революционный редактор WordPress, который позволяет создать страницу или запись практически любой сложности. Это один из лучших вариантов редакторов из бесплатного разряда плагинов. О другом похожем решении вы можете узнать тут.
Начинать нужно с обычного – скачайте, установите на свой и активируйте плагин Simply Symphony Adaptive Editor. После активации вы увидите новый пункт в консоли «Simply Symphony». Тут настройки плагина, в них можно вообще не заходить.
Для того чтобы использовать этот редактор WordPress, следует обратить внимание на верхний бар консоли, на пункт «Simply Symphony». Нажмите на него, и появится два подпункта – «Создать страницу» и «Создать запись». Выберите необходимое, и вы окажетесь в визуальном редакторе WordPress.
Рассмотрим, какие есть инструменты в этом редакторе страниц и записей:
- Переключение между просмотром на мобильном экране или на компьютерном. Очень удобная опция, если учесть современную погоню за адаптивностью дизайна.
- Создание текстовой области. Есть большие возможности по настройке дизайна этого элемента.
- Создание заголовков так же с большим количеством настроек дизайна.
- Установка в запись изображений и видео. Можно навсегда забыть о дополнительных плагинах для мультимедиа, всё это теперь можно делать одним кликом.
- Меню можно вывести в любом месте страницы или записи и создать можно навигационный элемент любой сложности.
- Есть кнопки для того, чтобы откатить изменения, если что-то пошло не так.
- И наконец, стандартные для всех редакторов WordPress кнопки для публикации, сохранения и удаления проекта.
Основным достоинством этого редактора WordPress является то, что каждый элемент в нём имеет ряд тонких настроек, что позволяет кастомизировать его практически под любую идею. Это отличное качество для бесплатного плагина такого рода.
Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.
Также по этой теме:
wpuroki.ru
wp_editor() - функция WordPress, добавляет редактор
Функция возвращает текстовое поле с прикрученными к нему TinyMCE (визуальный) и Quicktags (HTML) редакторами, также добавляет свой JavaScript через функцию wp_footer, если используется на страницах сайта (т.е. не в админке).
Имеется возможность загрузки файлов.
| wp_editor( $content, $editor_id, $settings = array() ) |
Кнопка появляется только в том случае, если у текущего пользователя имеются права на загрузку файлов!По умолчанию: true
textarea_name (строка) HTML-атрибут name текстового поля, можно использовать с [] для передачи параметров в виде массиваПо умолчанию: $editor_id textarea_rows (целое число) значение HTML-атрибута rows текстового поляПо умолчанию: get_option('default_post_edit_rows', 10) tabindex (целое число) значение HTML-атрибута tabindex editor_css (строка) дополнительные CSS-стили, которые нужно применить к редактору, должны быть заключены в тег <style>, поддерживается атрибут scope editor_class (строка) дополнительные классы для <textarea> teeny (логическое) нужно ли вывести только минимальную конфигурацию редактора без возможности отображения дополнительной панелиПо умолчанию: false dfw (логическое) нужно ли заменить обычный вариант полноэкранного отображения на вариант, используемый в админке (DFW)По умолчанию: false tinymce (массив) нужно ли задействовать визуальный редактор TinyMCE, также позволяет передавать настройки непосредственно в TinyMCE через массивПо умолчанию: true quicktags (массив) нужно ли задействовать вкладку HTML-редактора Quicktags, также позволяет передавать настройки непосредственно в Quicktags через массивПо умолчанию: true
Добавление второго редактора на страницу редактирования поста
В оригинальной документации WordPress не советуют добавлять редактор в перемещаемый метабокс в админке, однако я добавлял, все было ок… и тем не менее вот альтернативное рекомендуемое решение:
| /* * функция добавления редактора */ function true_double_editor() { global $post; echo '<h3>Описание</h3>'; // заголовок ко второму редактору wp_editor( get_post_meta($post->ID, '_true_editor_data', true), 'trueeditor' ); } add_action( 'edit_form_advanced', 'true_double_editor' ); add_action( 'edit_page_form', 'true_double_editor' ); /* * функция сохранения данных */ function true_save_double_editor($post_id){ update_post_meta($post_id, '_true_editor_data', $_POST['trueeditor']); } add_action('save_post', 'true_save_double_editor'); |
Пример использования редактора
Самое главное — если используете редактор непосредственно в теме (например в форме комментирования), убедитесь, что добавили функцию wp_footer() где-нибудь перед закрывающим тегом </body>, иначе редактор появится, но не будет работать. Я даже в примере хотел это показать, но потом передумал.
| $settings = array( 'textarea_name' => 'true_content', 'editor_class' => 'my_redactor commons', // несколько классов через пробел 'dfw' => true, 'quicktags' => false ); wp_editor( '', 'truewpeditor', $settings ); |
misha.blog
Визуальный редактор WordPress | Пространство сайтостроения
Последнее обновление:6/06/13
Продолжаем уроки по созданию блога на WordPress. Сегодня мы изучаем визуальный редактор WordPress.
Создаем новый пост
Входим в админ панель, выбираем Записи → Создать запись. Откроется окно редактора WordPress.
Редактор WordPress можно разделить на 3 части: визуальный редактор, HTML- редактор и вставка медиафайла.
В верхней рамке окна пишем заголовок поста (записи – по терминологии WordPress) и переходим в нижнюю, большую рамку. Как только мы поставили туда курсор, ниже заголовка появляется постоянная ссылка, то есть адрес нашего поста.
Если к этому времени у Вас настроены ЧПУ и установлен плагин RusToLat или ему подобный, то адрес поста будет повторять заголовок, только латиницей. В окошечке редактирования его можно откорректировать (сделать короче, например). Если ЧПУ не настроены, до написания постов обязательно настройте.
Если вид панели инструментов, как на скриншоте, нажимаем кнопку, помеченную цифрой «1» – появится дополнительная панель кнопок.
Кнопки редактирования текста в визуальном редакторе WordPress
Многие из них нам знакомы по редактору Microsoft Word. Обратите внимание, что когда наведешь курсор на кнопку, в большинстве случаев появляются подсказки, каким сочетанием клавиш (какими «горячими клавишами») можно вызвать эту команду.
Верхний ряд:
- Первые три кнопки: B, I и ABC – означают жирный текст, курсив и зачеркнутый.
- Дальше идут списки: маркированный и нумерованный.
- Перевернутые двойные кавычки – это цитата. Поисковиками этот текст не учитывается.
- Выравнивание текста: по левой стороне, по центру и по правой стороне.
- Вставить или редактировать ссылку:
Выделяем слово или сочетание слов, нажимаем на кнопку с изображением цепочки. Появляется всплывающее окошко.
В это окошко копируем адрес (URL) статьи, ее название и ставим галочку «Открыть ссылку в новом окне/вкладке». Нажимаем «Добавить ссылку». Если ссылку нужно сделать на другую статью того же сайта, то ниже есть отличная возможность для этого. Не заполняя верхнюю часть, щелкаем на «или связать с существующим контентом» и выбираем нужную статью из списка ниже. WordPress автоматически заполнит верхние поля.
Выделенное сочетание станет синего (фиолетового цвета) и подчеркнутое (впрочем, это зависит от установленного шаблона).
Если ссылку надо отредактировать, так же ее выделяем и в появившемся окошке исправляем то, что хотим исправить, затем нажимаем на «Обновление».
- Вставляем разрыв текста и тег «Читать далее» («Читать полностью», «more»… – тоже зависит от установленного шаблона).
Текст после этого тега не будет показываться на главной странице (это называется «убрать под кат»), а весь полностью будет отображаться на отдельной станице после нажатия на «Читать далее».
- Включить или выключить проверку орфографии – к сожалению, не работает для русского языка. Если нажать на стрелочку справа, то откроется список языков, для которых проверка возможна.
Мой совет: набирать тексты сначала в Microsoft Word, там проверка автоматическая, а потом уже копировать в редактор WordPress (хотя есть и другая возможность вставлять из Word, но об этом я напишу в другом посте).
- Перейти в полноэкранный режим. Чтобы выйти из него, наводим стрелку курсора на верхнюю часть экрана, там всплывет панелька с надписью «Выйти из полноэкранного режима».
- Показать или скрыть дополнительную панель кнопок.
Нижний ряд:
- Параграф – здесь можно выделенный текст сделать заголовком от 1-го до 6-го уровня, либо адресом ссылки:
- Подчеркнутый текст
- Выравнивание по ширине
- Цвет текста. Если нажать на стрелочку справа, то можно выбрать цвет
- Вставить, как простой текст. Если не нужно сохранять форматирование вставляемого фрагмента, то можно воспользоваться этой кнопкой.
- Вставить из Word – вставляемый текст из Word сохраняет форматирование (по моему опыту: не всегда).
- Убрать форматирование. Убирает цвет, выделение, еще какие-нибудь прибамбасы – не представляю, для чего это может понадобиться.
- Вставить произвольный символ. Здесь можно выбрать любой символ из таблички:
- Убрать отступ и Увеличить отступ – убрать или увеличить отступ от левого края для выделенных строк.
- Отменить и Повторить – эти кнопки нам знакомы.
- Помощь – что приятно, на русском языке. Можно немного больше узнать про визуальный редактор WordPress, а особенно про «горячие клавиши» для работы в этом редакторе.
На этом урок про визуальный редактор WordPress заканчивается. В следующем посте я расскажу про HTML редактор.
В конце, как всегда, видеоролик:
Это тоже интересно:
mojbiznes.ru
Визуальный редактор Wordpress - Знакомство
Привет всем, в прошлых статьях мы определились с названием, тематикой блога. И все, что осталось — это написать первую статью. Но для начала необходимо разобраться в стандартном текстовом редакторе от WordPress.
Лично я данной функцией для написания статей не пользуюсь, разве что только для того, что бы отредактировать статью по мелочи. Тем, чем я пользуюсь на данный момент мы разберем немного позже, потому что знать азы стандартного редактора обязан каждый блоггер.
На самом деле многие блоггеры пользуются стандартной функцией для того что бы написать статью, и он не плох. С помощью него можно сделать многие основные функции, которые требует статья: выделить слова, вставить изображения и оптимизировать её для статьи, вставить цитаты, пронумеровать сроки. В общем все для того, что бы написать качественную статью.
Визуальный редактор Wordpress — главные функции.
Давайте рассмотрим верхнюю строчку, что можно вытворять с текстом с помощью нее? 
Ниже на картинке, вы можете увидеть что — за что отвечает. Первые три кнопки выглядят как B, I и abc. Выделяют жирным, курсивом и зачеркивают текст. Данную область для примера на изображении я выделил зеленым цветом (Картинка увеличивается, не портите свое зрение 
).
Следующие три кнопки способны выделить каждую строчку для перечисления, так же пронумеровать. Это еще не все, с помощью третьей кнопки вы сможете цитировать текст. Данную область я выделил красным на изображении…
Следующие три кнопки отвечают за постановку текста, вы можете приказать ему стоять слева, по центру и справа 
. На картинке выделено синим цветом.
Следующие две кнопки отвечают за установки ссылки для определенного слова. Для того, что бы вставить ссылку, вы должны выделить нужную область и нажать на кнопку ссылки как показано на картинке.
Далее вылезет новое окошко, где в первой строчке вам необходимо добавить нужный URL, вписать заголовок ссылки, а так же выбрать каким образом открывать ссылку (в новой вкладке / на этой же странице).
Так же открыв специальную панель в этом окне, которая называется «Или сделайте ссылку на существующий материал». Вы можете установить ссылку одним кликом, на существующие страницы и статьи вашего блога.
Что бы удалить ссылку, достаточно выделить ее и нажать на следующую кнопку. Это проще простого …
Следующая кнопка добавляет тег «Далее» в вашу статью, вы могли заметить, что на WpMen, на главной странице отображается неполная запись, для того, что бы прочитать полностью, вы должны перейти на страницу записи.
Что бы сделать так же, достаточно нажать на эту кнопку в нужном месте разделения, после чего у вас появится тоненькая линия — это знак места деления статьи 
…
Следующая функция — это автопроверка вашего текста. Для того, что бы функция вступила в действие, достаточно нажать на нее и выбрать язык написания, после чего система автоматически будет проверять орфографию текста.
Так же вы можете перейти в полноэкранный режим с помощью соответствующей кнопки. Данный режим предназначен для тех, кому сложно сориентироваться на обычной странице. Посмотрите как это выглядит и вы все поймете сами
Дополнительная панель. Визуальный редактор WordPress.
Это еще не все, вы можете открыть дополнительную панель настроек текста, что довольно удобно. Для того нажмите на последнюю кнопку первой строки и давайте посмотрим какие функции предоставляет нам эта панель.
Первой кнопкой, которую вы увидели при появлении дополнительной панели, является кнопка, меняющая формат изображения. При написании статьи, просто необходимо выделять текст заголовками и подзаголовками. Именно с помощью этой кнопки вы сможете определить судьбу формата написанного вами текста.
Следующими тремя кнопками являются так же часто используемые функции от вордпресс. Первое это подчеркивание текста, не знаю почему разработчики засунули его в дополнительную панель, ведь можно было дать ему жизнь среди кнопок выделения жирным, курсивом и т. д, об этом мы говорили чуть выше…
Для того, что бы изменить текст, необходимо, в прочем как и всегда, выделить нужное место и нажать на кнопку, после чего ваш текст будет подчеркнут таким образом.
Следующая кнопка — это выравнивание по краям, то есть текст будет с двух сторон выровнен в одну линию. Думаю объяснять как это выглядит не нужно, потому что вы встречали данную функцию в программе Word.
Последняя из описанных трех кнопок называется «Выбор цвета текста». Данная функция используется не так часто, но все же. С помощью нее вы сможете выделив нужный участок изменить стандартный — черный цвет текста.
Следующие две кнопки — «Вставить как текст» и «Вставить из Word» я описывать не стану, потому что ни раз не пользовался данной функцией, и вообще сомневаюсь, что кто-то ею пользуется. Вставить различные тексты можно от руки .
А вот кнопка «Убрать форматирование» иногда может понадобится. Дело в том, что визуальный редактор WordPress может изменять отображение текста автоматически как он считает нужным. Либо производить другие чудеса с написанным текстом, сам до конца не разобрался, ни раз не пользовался этой функцией.
И если вдруг вам не нравится то, что натворил Вордпресс, вы можете установить все по стандарту, как настроено в вашем шаблоне, для этого опять же выделяем текст и нажимаем на эту заветную кнопку .
Разнообразьте свою статью разными символами, тогда, она будет более интересной, станет больше привлекать внимание. Но бывает так, что на клавиатуре не хватает нужных символов, и об этом наш любимый WordPress позаботился.
Нажмите на кнопку произвольных символов, и выберите из внушительного объема знаков тот, который нужен именно вам.
Следующие две кнопки отвечают за отступ, очень удобно, если вы хотите выделить одну из частей текста. Для этого достаточно лишь выделить нужную часть текста и нажать на соответствующую кнопку. Подробнее на изображении :
Ну и как уж без кнопок отмены и возврата. Для того, что бы текст выглядел красиво, не так банально как у меня, нужно его разбавлять различными цитатами, различными вставками и так далее. Экспериментируя над этим часто появляются ошибки, что бы от нее избавится достаточно нажать на соответствующую кнопку, и материал вернется в исходный вид.
Ну и наконец последняя кнопка — это помощь. Где вы можете просмотреть подробнее все установки, секреты и возможности текстового редактора WordPress, данную текстовую помощь написали сами разработчики вордпресс, а они как никто другой знают о возможностях своего продукта. ( Хотя не знаю куда подробнее, по моему я и так описал подробнее некуда )…
HTML редактор от WordPress.
Та же для правки и написания статей существует html-редактор. Он предназначен для того, что бы менять текст именно кодом. Иногда бывает, что функций визуального редактора не хватает, и приходится вводить код вручную.
На первый взгляд это кажется сложным, но если запомнить основные базовые знания html, то это очень даже легко. Этим как за таки мы займемся в ближайшее время, а пока довольствуйтесь визуальным редактором . Да, кстати, у меня есть такие знакомые блогеры, которые сразу пишут статьи в html коде, круто да?)
На этом все, я считаю я довольно подробно описал функции визуального редактора. Если что-то непонятно, есть вопросы, предложения, критика, то прошу, комментарии нам помогут связаться. Я открыт для общения 
А сейчас бежим читать статью о том как настроить WordPress …
Спасибо за ваше внимание, с вами был Альберт…
wpmen.ru
Редактор CKEditor для WordPress | www.wordpress-abc.ru
Вступление
CKEditor это текстовый редактор для создания страниц и постов сайта. Это визуальный редактор, а это значит, что редактируемый текст в редакторе выглядит почти так, как будет выглядеть на сайте. Получается это из-за использования веб-функций общего редактирования, таких как Microsoft Word и OpenOffice.
Особенности редактора WordPress с CKEditor
- Заменить по умолчанию редактор WordPress с CKEditor
- Оставить комментарий с CKEditor обеспечить стиле и красочным Комментарии (по желанию).
- Встроенный файловый менеджер и менеджер загрузки.
- Строить-в WordPress «читать далее» Button.
- Управление выходной формат.
- Настраиваемые кнопки на панели инструментов
- Интеграция с WordPress кнопки средствах массовой информации:
- Управление и вставить смайлики в сообщении.
- Настроить кожи редактора.
- … И многое другое.
Этот плагин требует WordPress версии wp 3.2 или более поздних версий. Последнее тестирование плагина на версии wp 4.3.16.
Два варианта установки плагина CKEditor
Вариант 1.
Скачать на Wordpress.org (https://wordpress.org/plugins/ckeditor-for-wordpress/).
Далее стандартная установка:
- Распаковать и загрузить файлы в wp-content/plugins корневого каталога;
- Активировать плагин;
- Готово, наслаждайтесь этим.
Вариант 2.
- Зайти в свою админ. панель сайта WordPress;
- Открыть в меню: Плагин→Добавить новый;
- В окне [Поиск плагина] нужно набрать название нужного плагина, в этом случае: CKEditor;
- В открывшейся таблице с вариантами найти нужный плагин. Он будет на первых местах;
- Под названием плагина Установить/Детали, выбираем Установить.
- Установка автоматическая. На открывшейся странице нужно активировать плагин, нажав [Активировать].
Редактор CKEditor для WordPress — Настройка плагина
В настройках можно выбрать две темы, два цвета тем и еще несколько простых настроек. После изменения настроек незабываем [Сохранить].
Вывод
Плагин Редактор CKEditor значительно расширяет возможности визуального редактирования и оформления статей и страниц сайта. Напомню, по умолчанию система использует визуальный редактор TinyMCE и если хотите расширить функционал редактора, лучше установить плагин TinyMCE Advanced. Он тестируется под все новые версии.
Этот плагин позволит вам добавлять, удалять и упорядочивать кнопки, которые отображаются на панели инструментов Visual Editor. Вы можете настроить до четырех строк кнопок, включая размер шрифта, семейство шрифтов, цвета текста и фона, таблицы и т. д.
©www.wordpress-abc.ru
Другие статьи раздела: Плагины
Статьи связанные по теме:
www.wordpress-abc.ru
