Визуальный редактор страниц wordpress – Визуальный редактор для wordpress — плагин вордпресс для редактирования текста

18.01.2020 alexxlab

Содержание

Работа с новым визуальным редактором записей и страниц. WordPress 5.

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

Посмотрите видео, чтобы увидеть, как этот редактор выглядит с версии WordPress 5. Столкнуться с ним придется если вы будете создавать новые записи и страницы.

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

Этот редактор не похож на привычным нам текстовый редактор Microsoft Word или что-то подобное. В WordPress используется редактор блоков.

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

У нас есть блок заголовка, текстовые блоки и.т.д. (см. видео) и мы можем их заполнять.

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

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

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

Блоки можно перетаскивать в нужное место веб-страницы.

Блоки создаются специальной иконкой «+». Есть еще несколько способов создания блоков, об этом в видео.

В настройках блока мы можем выбрать уровень заголовка h2-h6.

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

Блоки можно преобразовывать из одного типа в другой.

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

webkyrs.info

как настроить, как пользоваться, ошибки и нюансы

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

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

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

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

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

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

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

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

Я могу настроить отображение виджетов и самого визуального редактора в 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).

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

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

HTML-редактор WordPress

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

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

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

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

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

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

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

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

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

seomans.ru

CSSHero v3.4.2 — визуальный css-редактор тем и плагинов WordPress

Легко и быстро настраивайте и редактируйте любые темы WordPress вживую, при помощи плагина CSSHero. CSS Hero – это мощный плагин WordPress, который позволяет легко настраивать каждое css-свойство ваших тем с помощью простого и интуитивно понятного визуального интерфейса. Контролируйте каждый аспект ваших сайтов на WordPress. CSSHero позволяет визуально настраивать любой элемент вашего сайта, – всё из вашего интерфейса администратора.

Особенности плагина WordPress CSSHero:

Настройка адаптивности
CSSHero позволяет вам легко редактировать, просматривать и контролировать, как ваш сайт отображается на настольных и мобильных устройствах. Используйте стандартные контрольные точки или свои собственные.
Установите полный контроль над внешним видом вашего сайта
Просто наведите указатель мыши в визуальном редакторе и выберите элемент, который вы хотите отредактировать, и настройте его в соответствии с вашими потребностями вживую!
Стили шрифтов и типографика
Добавьте немного классов к вашим собственными шрифтами, огромная коллекция Google Fonts находится под рукой. Также поддерживаются шрифты TypeKit.
Управление цветом
Используйте подборщик цветов, чтобы экспериментировать с цветами и изменениями фона вживую, как никогда раньше. Плагин CSSHero также сохраняет ваши последние использованные цвета и помогает создавать согласованную цветовую палитру.
Настройка разделителей
Легко настраивайте поля элементов и разделители: просто перетащите ползунок и просмотрите, что произойдет.
Упрощённый комплекс CSS
Сделайте элементы вашего сайта привлекательными: градиенты, бокс-тени, текстовые тени и все современные свойства CSS теперь очень просто добавить.
Готовые фрагменты
Готовые редактируемые сочетания стиля, готовые повысить ваше творчество одним кликом мыши!
История отмены / повтора
Мы все проектируем экспериментами. Ой! Нужно отменить? Не паникуйте. CSS Hero автоматически сохраняет все ваши изменения в подробном списке истории, возвращаясь назад и вперед по этапам истории так же просто, как нажатие кнопок отмены / повтора.
Отсутствие блокировки
Экспортируйте свою работу как CSS, LESS, JSON: вы можете мгновенно экспортировать персонализацию своего сайта и загрузить его в файл для целей резервного копирования.
Редактор CSS-кода
Просмотрите, уточните и отредактируйте созданный код CSS, в то же время сможете быстро отладить свою работу, если это необходимо.

https://www.csshero.org

https://www.upload.ee/files/9480289/csshero-v342.rar.html
https://www97.zippyshare.com/v/i1vr54lZ/file.html
http://www.solidfiles.com/d/kGdL6DLAPBzNX
https://openload.co/f/nhgPxliYHtM/csshero-v342.rar
https://uptobox.com/xoanjy7x6211
https://userscloud.com/d315bhdvozji
https://bayfiles.com/peD3Lbrfb5/csshero-v342_rar
https://anonfile.com/neD0L9r9bc/csshero-v342_rar
https://www.datafilehost.com/d/987dd5b3
https://dailyuploads.net/cgyirixsaaiz
https://sendit.cloud/9uqyg1lwpwix
https://my.pcloud.com/publink/show?code=XZQy7K7Z63mhtePMDJhEBEwRzHJh9HuKk8ak
https://mega.nz/#!S2xRRYhR!tca06jUM7rJPuqHs_s2DWnOWPSbSOX9OqOl5_Hh-Sm4
https://mir.cr/053GVNLQ

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

wptp.info

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

Данная инструкция завершена, но в ней имеются ссылки на ещё не опубликованные материалы. Прошу не пугаться, если какая-то из ссылок не откроется. Скоро всё заработает! 🙂

С уважением, Александр.

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

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

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

Содержимое статьи

Интерфейс визуального режима

Как только вы установите WordPress, редактор будет выглядеть очень бедным и не функциональным:

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

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

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

Здесь есть всё необходимое для базового форматирования:

Полужирное, курсивное и зачёркнутое выделение текста
Маркированный и нумерованный списки
Выделение текста как цитаты с оформлением
Горизонтальная разделительная линия
Выравнивание текста слева, по центру и справа
Вставка и удаление ссылки
Кнопка «Разрыв страницы»
Кнопка активации дополнительных возможностей
Кнопка перехода в полноэкранный режим

Работают данные кнопки в двух режимах, рассмотрим оба.

Пример 1

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

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

Взгляните:

Пример выделения текста

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

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

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

Пример 2

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

Тот же самый текст я мог сначала просто написать:

Сначала набираем текст без оформления

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

Выделяем абзац, к которому необходимо применить оформление

После этого наш абзац станет полужирным. Отжимать кнопку [B] для этого не понадобится — оформление применится ко всему выделенному тексту автоматически.

Пример 3

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

Например, если бы во втором примере этой инструкции мы не нажали кнопку [B] на панели инструментов, а воспользовались комбинацией «Ctrl» и «B» (пишется как Ctrl+B, кнопка «B» — английская, от слова «Bold»), то полужирное выделение сразу бы применилось на наш абзац.

О клавиатурных сочетаниях будет материал в конце этой инструкции.

Активация дополнительных кнопок

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

Находим вот эту кнопку:

Активация дополнительной панели инструментов

Появится второй ряд кнопок, которые добавляют новые возможности в ваш редактор:

Второй ряд кнопок панели инструментов

Здесь мы с вами уже можем наблюдать дополнительные варианты для оформления текста, пробежимся по ним слева-направо:

Создание заголовков любого из шести доступных уровней
Подчёркивание текста
Выравнивание текста по ширине страницы
Задание цвета текста
Активация режима вставки текста из буфера обмена без форматирования
Очистка форматирования у выделенного фрагмента текста
Вставка специальных символов
Удаление и добавление отступов слева у абзацев
Отмена или повтор предыдущего действия
Справка по работе с редактором

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

Многие могут возразить — «Где же таблицы?» — и будут совершенно правы. WordPress во встроенное редакторе не даёт возможности создания таблиц.

Для этого надо устанавливать дополнительные плагины, которые расширяют функциональность редактора. Один из них мы рассмотрим в статье Плагин TinyMCE Advanced в конце нашего курса.

Клавиатурные сочетания редактора

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

Кнопка «Горячие клавиши»

После её нажатия всплывает окно с информацией:

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

Для браузеров в операционной системе семейства Windows, следует нажимать сочетание Ctrl + та буква, которая вам нужна. Для операционной системы Mac OS первая клавиша будет Cmd, как и написано на этом снимке экрана.

Пробуйте, дерзайте! 😉

Если вы нашли ошибку — выделите фрагмент текста и нажмите Ctrl+Enter.

Поделитесь ссылкой на инструкцию с вашими друзьями!

Твитнуть

Плюсануть

Запинить

wordpress1.ru

TinyMCE Advanced: расширенный визуальный редактор для WordPress

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

Плагин TinyMCE Advanced

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

Плагин TinyMCE Advanced является бесплатным и распространяется под свободной лицензией GNU GPL через официальную директорию плагинов на WordPress.org. Это означает, что установить данный плагин вы можете не покидая вашу панель администрирования WordPress — воспользуйтесь поиском в разделе Плагины → добавить новый.

После установки и активации плагина вы можете перейти в раздел Настройки → TinyMCE Advanced и перетащить те кнопки, которые вам необходимы в визуальном редакторе, а так же изменить расположение существующих кнопок или же полностью их скрыть.

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

На этой же странице вы можете включить контекстное меню для визуального редактора, дополнительные настройки списков и изображений, а в разделе «Advanced Options» вы можете включить расширенную поддержку гиперссылок или отключить автоматическое удаление тегов <p> и <br /> при переходе в режим HTML.

Стоит отметить, что автор данного плагина, Эндрю Оз, является одним из ведущих разработчиков ядра WordPress и принимает активное участие в разработке редактора TinyMCE.

Скачать TinyMCE Advanced для WordPress вы можете из директории плагинов, или установить в разделе «Плагины → Добавить новый» в вашей панели администрирования WordPress. На момент написания статьи, плагин имеет более 2,5 миллионов скачиваний и находится в списке топ 15 плагинов на WordPress.org.

wpmag.ru

Визуальный редактор для виджетов WordPress | Как сделать сайт WordPress

Вступление

По умолчанию, виджеты WordPress не имели визуальных редакторов. Сейчас ситуация исправлена. Однако вам может пригодиться плагин Black Studio TinyMCE widget. Этот плагин протестирован (официально) на версии WordPress 4.9.5. Конфликтов с другими плагинами не замечено.

Визуальный редактор для виджетов WordPress – установка

Название плагина нам известно, поэтому устанавливаем плагин используя поиск плагина на вкладке Плагины→Добавить новый.

Плагин ставится автоматом, вам остается только активировать его.

Если ваш хостинг не поддерживает автоматическую загрузку плагинов, то скачайте плагин на странице плагина ТУТ и установите его на вкладке Плагины→Добавить новый→Загрузить плагин, выбрав его на своем компьютере. Не забываем активировать плагин.

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

Добавляем виджеты «Редактор»

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

В любой сайдбар темы можно добавлять любое количество виджетов типа «Редактор»

Создаем виджет в редакторе

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

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

Все виджет готов, сохраняем его и смотрим результат на сайте.

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

Выводы

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