5 способов расширить возможности редактора WordPress


Содержание

Расширяем WordPress пользовательскими функциями

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

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

Плагины против functions.php

И плагины, и функции темы (скрипты, содержащиеся в functions.php) могут расширять функционал вордпресса, но есть некоторые различия между ними, о которых мы уже говорили ранее:

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

Когда же используем возможности functions.php? Если функции привязаны к шаблону, если это пользовательские функции шаблона, если это маленькие и простые скрипты и функции.

Примеры полезных функций тем

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

Как отключить уведомления об обновлениях

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

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

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

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

Шорткоды для сайта

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

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

И если вдруг нужно будет изменить ссылку везде, где она использовалась, достаточно просто исправить ее адрес в функции. Более подробно про шорткоды можно почитать тут https://codex.wordpress.org/Shortcode_API

Перемещение плагинов в functions.php

Этот файл настолько крутой, что может заменить собой все плагины. Это хороший способ изолировать функциональность плагинов внутри специального шаблона. По умолчанию плагины влияют на все темы, но если включить их в functions.php, то при смене шаблона плагины работать не будут. Легче всего переместить те плагины, которые состоят из одного файла — нужно просто скопировать содержимое этого файла в functions.php и удалить. Остальные плагины могут потребовать дополнительных маневров для корректной работы и переноса, но в теории – это возможно.

Создание плагинов из функций

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

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

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

От автора

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


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

По умолчанию WordPress использует визуальный редактор TinyMCE. Причем, по умолчанию, визуальный редактор WordPress имеет ограниченный функционал по редактированию текстов статей. Чтобы расширить возможности редактора, есть несколько сторонних плагинов, устанавливающие новые визуальные редакторы (например, TinyMCE Advanced: https://ru.wordpress.org/plugins/tinymce-advanced/ ).

Но можно улучшить визуальный редактор WordPress без плагинов. Для этого используются специальные теги шаблонов WordPress. Коды нужно добавить в файл «Функции темы (functions.php)». Ниже следующие коды показывают принцип формирования дополнительных кнопок редактора.

Примечание

Рекомендую, чтобы избежать редактирования файла functions.php напрямую из редактора, используйте отличный плагин CodeSnippets: https://ru.wordpress.org/plugins/code-snippets/ ). Добавляя спиппет через этот плагин, не забываете его активировать или в настройках плагина объедините функции «сохранить» и «активировать».

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

Чтобы добавить в редактор дополнительные функциональные кнопки, добавьте нижеследующий код в functions.php или создайте сниппет используя плагин CodeSnippets.

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

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

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

Добавить эти же кнопки в третий ряд, нужен следующий код:

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

Простое руководство по массовому редактированию в WordPress

И снова здравствуйте!

С вами на связи ваш друг и немного наставник – Юрич!

Сегодня я бы хотел рассказать о массовом редактировании страниц, постов, картинок, комментариев и т. д. Это хорошо когда у вас маленький блог с 10-20 страниц, ну а если вы ведете свой блог уже не один год и у вас накопилось постов 300, 500 или 1000.

И тут вы решаете что пора сменить тему на более продвинутую и современную. Вы ставите тему и видите что все выглядит не так как нужно вам. Миниатюры маленькие или наоборот большие, комментарии везде запрещены, а все посты не показываеют мета-данные.

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

Если вам когда-либо приходилось вносить изменения в число опубликованных постов на вашем веб-сайте WordPress, вы, вероятно, знаете, что надо редактировать пост за постом. К счастью, есть более простой способ! Массовое редактирование в WordPress позволяет одновременно вносить множество изменений в свой сайт – будь то обновление статуса ваших публикаций и страниц, изменение URL-адресов, изменение размера изображений или улучшение СЕО.

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

Почему массовое редактирование в WordPress?

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

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

Просмотр большего количества элементов на странице

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

Для редактирования большого количества элементов в этих списках полезно начать с отображения как можно большего количества элементов. Нажмите на вкладку “Параметры экрана” в правом верхнем углу страницы, чтобы развернуть ее. Затем, рядом с “Количество элементов на странице:” введите 999, максимальное значение. Если у вас есть тысяча или более элементов для редактирования, по крайней мере, вы можете вносить эти изменения большими партиями.

Цукерберг рекомендует:  Сортировка и голосование с помощью jQuery


Массовое редактирование сообщений и страниц

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

Такое меню должно появиться в верхней части списка:

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

На странице редактирования сообщений вы можете сделать следующее:

  • Добавить категории и теги
  • Сменить автора
  • Включить или выключить комментарии
  • Изменить статус сообщения
  • Изменить формат сообщения
  • Разрешить или запретить пингбэки
  • Делать посты прикрепленными или нет

В списке “Редактировать страницы” вы можете сделать следующее:

  • Сменить автора
  • Добавить родительскую страницу
  • Изменить шаблон
  • Включить или выключить комментарии
  • Изменить статус страницы

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

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

Массовое редактирование категорий и тегов

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

По умолчанию единственное массовое действие, к которому у вас есть доступ на страницах “Редактировать теги” или “Редактировать категории” – это удаление:

Тем не менее, удобный бесплатный плагин под названием Term Management Tools изменит это (правда плагин не обновлялся уже очень долгое время). Используя этот плагин, у вас есть возможность:

  • Объединить две или более категории или тега в один
  • Массовый набор родительских категорий для создания иерархии
  • Изменить таксономии (т. е. вы можете изменить тег на категорию или наоборот)

Установка и активация плагина просто добавляет эти действия в выпадающий список на страницах “Редактировать категории” и “Редактировать теги”.

Массовое редактирование комментариев

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

Одной вещью, для которой полезно массовое редактирование WordPress, является отключение комментариев на многих страницах одновременно. Используя приведенные выше инструкции для массового редактирования всех своих страниц, просто измените поле “Комментарии” на “Не разрешать”.

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

Массовое редактирование изображений

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

Если вы измените свою тему на тему, в которой используется изображение другого размера, рекомендуется восстановить эскизы. Для этого вы можете использовать бесплатный плагин Regenerate Thumbnails. Чтобы использовать плагин, сначала измените размеры миниатюр в разделе “Настройки – Медиа”. (Если вы изменили тему, это следует сделать автоматически.) После установки и активации плагина просмотрите медиатеку в виде списка. Затем выберите все и выберите “Регенерировать миниатюры” под выпадающим списком массовых действий.

Может быть, вам не нужно восстанавливать эскизы изображений, но вам нужно сэкономить место. Вы можете использовать плагин EWWW Image Optimizer для массовой оптимизации ваших изображений. Просто установите и активируйте плагин, настройте параметры, если это необходимо, а затем перейдите к “Media – Bulk Optimize” (Медиа – Массовая оптимизация).


Массовое редактирование Yoast СЕО заголовков и описаний

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

В панели управления WordPress перейдите к “СЕО – Инструменты” и нажмите “Массовый редактор”. В верхней части редактора находятся вкладки для переключения между редактированием заголовков и описаний СЕО.

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

А теперь подведем итог

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

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

Вот такая вот статейка! Но на этом все и до скорых встреч!

Как расширить функциональность визуального редактора вашего блога WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi — самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Визуальный редактор WordPress обновлен версией 3.9 WordPress . Теперь он предлагает базовые кнопки 14 или 26, когда опция «Кухня» раковина Включен , Многие пользователи ценят его новый внешний вид, но иногда его возможностей недостаточно.

В этом уроке мы покажем вам как расширить функциональность визуального редактора вашей панели WordPress .

Вот плагины 2 на выбор.

1. TinyMCE РАСШИРЕННАЯ

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

TinyMCE РАСШИРЕННАЯ позволит вам добавлять, удалять и упорядочивать кнопки вашего визуального редактора. Это принесет новые кнопки 16 в визуальный редактор, который будет автоматически добавляться или удаляться в соответствии с вашими потребностями.

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

2. WP Edit

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Новый редактор WordPress как с ним работать?

Приветствую вас, дорогие друзья!

Вы уже видели новый редактор WordPress? Как он вам?

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


Ведь если вы создавали страницу каким-нибудь плагином для создания структуры страниц, например, то при открытии его в новом редакторе WordPress вся её структура собьётся!

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

Зачем нужен новый редактор WordPress?

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

Для этой цели они выбрали редактор Gutenberg.

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

Многие вебмастера его опробовали и оставили свои отзывы. Как видно по скриншоту оценки он получил далеко не самые высокие, но разработчиков WordPress это не остановило.

И вот, начиная с версии 5.0 миру явился новый WordPress с новым редактором и целой кучей несовместимых с ним плагинов.

Как обновить WordPress и не испортить сайт?

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

Как вы наверняка догадались, его основное предназначение заключается в том, что он позволяет открывать страницы и записи при помощи старого редактора, с которым работают все привычные нам плагины WordPress.

Цукерберг рекомендует:  Обучение - Почему не могу войти в вибинар!

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

После установки и активации плагина Classic Editor вы можете настроить возможность выбора каким редактором открывать страницы или записи.

  1. 1. Переходим в раздел «Настройки»«Написание».
  2. 2. Здесь мы можем выбрать редактор по умолчанию для всех пользователей, а так же включить возможность переключения редактора.

Основные элементы интерфейса нового редактора WordPress

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

Над областью редактирования контента размещается панели инструментов, которая содержит следующие кнопки:

  • Кнопка добавления новых блоков
  • Кнопка отмены действий
  • Кнопка повтора действий
  • Информация о структуре статьи
  • Навигация по блокам.

Справа у нас есть панель с двумя вкладками «Документ» и «Блок» на которых мы можем задавать настройки для страницы в целом, а так же для конкретного выделенного блока.

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

Более подробно обо всех этих настройках я рассказываю в видео инструкции ниже.

Видео инструкция

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

Цитата

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

TinyMCE Advanced

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

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

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

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

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

WP Edit

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? Поделитесь ими с нами в комментариях!

Источник: elegantthemes.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 2

Расширяем возможности редактора в WordPress

В новой версии WordPress 2.1 редактор претерпел некоторые изменения — появились вкладки, переключаясь между которыми можно быстро переходить в режим кода и обратно в WYSIWYG-режим. Однако есть ещё одна новинка, о которой знают немногие. Если вы нажмите в Mozilla Firefox Alt+Shift+V и Alt+V в Internet Explorer, то получите дополнительные возможности — например, вставлять специальные символы (не обязательно помнить их коды). Ну а самое главное – можно вставлять текст в формате «просто текст», без оформления, а также из Word (присущая этому текстовому процессору грязь будет удалена).

Нужно расширить возможности визуального редактора wordpress

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

И чтобы в визуальном редакторе был select с вариантами big, wide, content соответствующий каждой обертке.

Судя по всему нужно добавить какой-то хук. Но пока что не особо понимаю с чего начать. Может кто-нибудь наведет на мысль?

2 ответа 2

Для модификации контента есть хук the_content . Чтобы не лезть в дебри написания плагинов для визуального редактора (из вопроса не ясно, кстати, что это за редактор — стандартный или Visual Editor или Page Builder и т.д.), можно инструктировать пользователя вносить в текст поста следующее:

Тогда нижеприведенный фильтр контента уберет указанный пользователем текст в квадратных скобках и обернет контент в требуемые div-ы.

Если речь о добавлении в контент html-обёртки произвольного контента то вот мой старенький плагин из 2х файлов. Он добавляет в редактор кнопку по который вставляется html-код. (идея плагина — для добавления «отзывов» в контент. Потом стилями придаётся внешний вид ;))

Продвинутые шаблоны редактора WordPress

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

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

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

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

Все, что мы собираемся сделать — ввести несколько HTML-элементов в окне редактирования и задать им стиль оформления. Фильтр WordPress, именуемый default_content , позволяет вставить предопределенное заранее содержимое в любую создаваемую запись, дабы клиентам не пришлось изучать тонкости блочной верстки. Этот фильтр также отлично подходит для добавления «рыбы» в новую запись.

Back End

Добавив следующую строку в functions.php, каждая новая запись, созданная пользователем, будет предварительно снабжена двумя блоками div со стилями content-col-main и content-col-side , соответственно. Должен отметить, в настоящее время этот код был проверен только в WordPress версии 3.0 и выше:

Пара заметок на полях:
Фильтр default_content запускается только при создании новой записи; любая запись или страница созданная прежде не будет изменена. Отбивка строк и дополнительны теги не являются необходимыми, но я счел их полезными, так как иногда TinyMCE чудит.

Теперь нам нужно добавить стили оформления. Впишите следующее в ваш functions.php :

Функция add_editor_style() прикрепляет применяемый для оформления заданный стиль к содержимому окна редактора TinyMCE. Если вы не зададите параметров функции, она сама прикрепит editor-style.css , используемый по умолчания, но для целей этой статьи я написал свой стиль. Создайте файл стиля editor-style.css и поместите его в папку темы оформления. Содержимое файла будет следующим:


Теперь, создавая запись на сайте, вы увидите две колонки для редактирования и вставки в них текста:

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

И вот оно — заветный шаблон для вашего редактора. Вы можете вернуться и отредактировать код default_content и стиль editor-styles.css под ваши цели:

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

Front End

Теперь, когда ваша запись будет отображаться на сайте, ее содержимое по прежнему отображается в один столбик как и прежде? Не забудьте в style.css добавить стили, использованные нами раннее в функции custom_editor_content() . Откройте style.css (или любую другую таблицу стилей, используемую в вашей теме оформления) и оформите блоки div как вам вздумается.

Эта техника применима не только к оформлению записи. С помощью JavaScript
вы так же можете привратить в «карусель» или добавить другие динамические
эффекты на лету.

Выжмите из вашего шаблона еще немного

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

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

Шаблоны для шаблонов

Приведенный ранее код позволит вам применять один и тот же стиль ко всем записям, страницам и пользовательским типам записей где используется редактор TinyMCE. Скорее всего это не самое лучшее решение. Вы можете изменить это, задав условие на использование того или иного custom_editor_content() , определяя различные шаблоны для каждого вида записи:

Так же вы можете задавать индивидуальный стиль оформления по умолчанию в файле editor-style.css , но если вам понадобится применять свои стили оформления для каждого из типов записей, вы можете сделать это, используя следующий снипет от WPStorm:

Добавьте этот код в functions.php вашей темы, и, затем, создайте файл/ы editor-style-[POSTTYPE].css что бы использовать стили оформления специально созданные для каждого случая. Просто замените [POSTTYPE] на имя произвольного типа записи (custom post type). Расширьте приведенный код выше, добавив в него другие типы для каждого дополнительного типа записи.

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

(В приведенном коде editor-style.css будет также включен во всех типах редактируемых материалов, в добавок к дополнительным стилям, определенным для данного типа записи/страницы и имеющий имя editor-style-[POSTTYPE].css .)

Послесловие

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

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

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

Расширенный визуальный редактор WordPress TinyMCE много функций

Всем привет, сегодня я решил написать про очень популярный wordpress плагин – TinyMCE Advanced . С помощью данного плагина вы сможете добавить в ваш визуальный редактор wordpress много новых функций и примочек. Плагин расширяет стандартный редактор, добавляя в него новые кнопки: Смайлики, Шрифты, Блоки, Таблицы, Цвет фона, Разрыв страницы, Вырезать, Исходный код, Печать, Новый документ, Найти и заменить и т.д. В настройках плагина, вы сможете настроить ваш редактор по вашему усмотрению, какие-то кнопки добавить, а какие-то удалить.

Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

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

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

Адаптивная таблица, вид на сайте.

У меня всё на этом, жду ваших комментариев, до новых встреч !

Цукерберг рекомендует:  Best Practices при работе с Drupal 8
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих