Когда-то я рассматривал интересный проект — визуальный редактор для создания WordPress шаблона непосредственно из админки. Сегодня расскажу о похожем, но более функциональном и мощном продукте — . Это отдельная версия профессионального десктопного веб-редактора Pinegrow, который используется при создании сайтов с адаптивностью, скриптами, Bootstrap’ом и другими фишками. Так вот Pinegrow WP — это специальное дополнение, позволяющее создавать именно WordPress шаблоны.
Основные функции Pinegrow WP:
- Преобразование статических HTML макетов в WordPress темы — выделяете те или иные элементы шаблона и выбираете для них соответствующие параметры.
- Создание WP шаблонов с нуля с помощью визуального редактора — просто добавляете на страницу нужные элементы (сайдбар, список постов и т.п.)
- Поддержка 175 WordPress тегов — позволяет быстро найти для элементов HTML макета нужные значения (заголовок поста, дата, имя автора).
- Поддержка плагинов и PHP функций — в качестве параметров элементов можно выбирать не только WordPress теги, но и задавать переменные, добавлять PHP функции.
- Просмотр в реальном времени создаваемой WordPress темы позволяет увидеть что получается после ваших настроек.
- Просмотр генерируемого PHP кода для макета.
Кроме этого, вы сможете работать непосредственно с контентом вашего WordPress сайта, импортируя картинки в Pinegrow WP. На выходе получаете чистый код PHP/HTML код, сервис не добавляет никакие лишние элементы в базовый макет.
Вот небольшое видео как работает Pinegrow WP:
Вы можете потестировать данный софт самостоятельно. Для этого скачиваете программку с официального сайта (есть версии для Windows, Mac и Linux). После установки запрашиваете бесплатный временный лицензионный ключ (на 7 дней). Вводите пароль, что приходит на почту и попадаете в систему.
В настройках (значок шестеренки) Framework & Plugin Manager for index.html отмечаете WordPress, после чего загружаете какой-то HTML шаблон. Далее кликаете по определенным элементам макета и выбираете для них соответствующие WordPress функции. Например: для картинки — the_post_thumbnail, для заголовка — the_title, для даты — the_date и т.п. То есть пользователю не нужно знать как именно в WordPress задавать тот или иной элемент, просто ищите его в имеющихся функциях и добавляете в макет. Задав всем блокам на странице соответствующее значение, в итоге получите работающий WordPress шаблон для экспорта. Алгоритм приблизительно такой, хотя с программой Pinegrow WP придется разбираться детальнее (там очень много разных функций и настроек).
В целом, Pinegrow WP — штука очень мощная, но не бесплатная. Персональная лицензия (на 3 компьютера) стоит 99 долларов. Вы можете использовать ее для скольких угодно проектов! Есть лицензии для компаний и команд разработчиков. В принципе, именно для этих целей программа и нужна — если вы или ваша компания профессионально занимается созданием сайтов (в том числе и на WordPress), то этот софт пригодится.
Всем привет!
Сегодня я расскажу вам про плагин Ultimate tinyMCE, позволяющий значительно расширить функции стандартного визуального редактора wordpress.
С помощью плагина Ultimate tinyMCE вы сможете выбрать подходящий шрифт текста, указать его размеры, более функционально обработать изображения и видео.
Во время написания статьи проставить в нужных местах различные смайлики и многое другое. И даже если вы не являетесь сторонником лишних плагинов, то и в этом случае статья для вас окажется полезной, т.к. в ней я покажу, как реализовать некоторые из функций с помощью обычных кодов.
Итак, начнем! Все кто работает с движком wordpress, прекрасно знают, как выглядит рабочая панель стандартного визуального редактора:
Она включает в себя минимальный набор функций, позволяющий веб мастерам писать и публиковать полезный материал на своем блоге. Лично меня стандартный набор функций редактора вордпресс вполне устраивает, но не все им довольны и предпочитают использовать другие редакторы или программы.
Плагин Ultimate TinyMCE. Совершенствуем визуальный редактор wordpress
Скачать плагин Ultimate TinyMCE можно . Далее, устанавливаем его на свой блог и активируем. Кто не знает, как устанавливаются плагины, . После установки и активации плагина, в административной панели вашего ресурса появится дополнительная вкладка Ultimate TinyMCE:
Перейдя во вкладку, вы увидите внушительный список различных кнопочек, каждая из которых наделена определенной функцией. Теперь вы сможете облагородить свой визуальный редактор любой из недостающих возможностей, которые присутствуют в плагине.
Описывать каждую кнопочку я не буду, т.к. большинство из них переведены на русский язык и каждый из вас самостоятельно сможет с ними разобраться. Единственное о чем все же стоит упомянуть, это о их реализации на блоге.
Для того чтобы та или иная кнопка отобразилась в рабочей панели визуального редактора, достаточно в столбце «Enable», напротив нужной кнопки установить галочку. Помимо этого плагин предлагает самостоятельно выбрать расположение кнопок, что можно сделать в столбце «Row Selection»:
Как вы, наверное, заметили, все кнопочки в панели редактора располагаются в две строки, но благодаря Ultimate tinyMCE можно увеличить количество строк до четырех, но не больше. Этому способствует значение «ROW», что в переводе означает «Строка».
По умолчанию в каждом пункте установлено «ROW 1». Если оставить все без изменений, функция в виде кнопки продолжит первую строчку панели визуального редактора и отобразится в самом конце, после всех стандартных функций.
Если из списка выбрать, например значение «ROW 3», кнопка с функцией переместится на третью строку. Я думаю, это понятно! Активировав все дополнительные функции (я насчитал 53) и раскидав их по строкам, у меня получилась вот такая картина:
Впечатляет, не правда ли? И забыл упомянуть, что при добавлении или удалении какой-либо функции, не забывайте в самом низу плагина нажимать кнопку «Update Buttons Options» для сохранения настроек.
Как расширить функционал визуального редактора wordpress с помощью кода
Итак, какие функции можно добавить с помощью кода и как это сделать?
1. Можно добавить «Семейство шрифтов», т.е. вы сможете выбрать из списка нужный вам шрифт и написать им целый пост или небольшой отрывок. Для реализации данной функции, откройте на редактирование файл functions.php (путь до файла: /wp-content/themes/название темы (шаблона)/functions.php).
Внимание: перед редактированием файла functions.php обязательно делайте во избежание неверных действий!
Открыв файл, найдите в самом конце тег: ?>
и сразу перед ним вставьте вот этот код:
| add_filter("mce_buttons_2" , "add_fontselect_row_2" ) ; function add_fontselect_row_2( $mce_buttons ) { $pastetext = array_search ( "pastetext" , $mce_buttons ) ; $pasteword = array_search ( "pasteword" , $mce_buttons ) ; $removeformat = array_search ( "removeformat" , $mce_buttons ) ; unset ( $mce_buttons [ $pastetext ] ) ; unset ( $mce_buttons [ $pasteword ] ) ; unset ( $mce_buttons [ $removeformat ] ) ; array_splice ( $mce_buttons , $pastetext , 0 , "fontselect" ) ; return $mce_buttons ; } add_filter("tiny_mce_before_init" , "restrict_font_choices" ) ; function restrict_font_choices( $initArray ) { $initArray [ "theme_advanced_fonts" ] = "Andale Mono=andale mono,times;" . "Arial=arial,helvetica,sans-serif;" . "Arial Black=arial black,avant garde;" . "Book Antiqua=book antiqua,palatino;" . "Comic Sans MS=comic sans ms,sans-serif;" . "Courier New=courier new,courier;" . "Georgia=georgia,palatino;" . "Helvetica=helvetica;" . "Impact=impact,chicago;" . "Symbol=symbol;" . "Tahoma=tahoma,arial,helvetica,sans-serif;" . "Terminal=terminal,monaco;" . "Times New Roman=times new roman,times;" . "Trebuchet MS=trebuchet ms,geneva;" . "Verdana=verdana,geneva;" . "Webdings=webdings;" . "Wingdings=wingdings,zapf dingbats" . "" ; return $initArray ; } |
Сохраните файл и переместите его обратно в папку с темой вашего блога с заменой старого.
2. Добавляем кнопки горизонтального разделителя, верхнего и нижнего индекса, размер шрифта, изменение стилей и цвет фона. Для этого все в тот же файл functions.php, перед тем же тегом?> добавляем следующий участок кода:
| function add_more_buttons($buttons ) { $buttons = "hr" ; $buttons = "del" ; $buttons = "sub" ; $buttons = "sup" ; $buttons = "fontselect" ; $buttons = "fontsizeselect" ; $buttons = "cleanup" ; $buttons = "styleselect" ; $buttons = "backcolor" ; return $buttons ; } add_filter("mce_buttons_3" , "add_more_buttons" ) ; |
После, снова сохраняем файл и перемещаем его обратно на сервер, заменив старый. Обновляем страницу с визуальным редактором и смотрим, что у нас получилось:
На этом у меня все и теперь вы тоже знаете, как добавлять функциональные кнопки в редактор wordpress, тем самым расширив его стандартные возможности! Желаю всем удачи! Пока и до скорых встреч!
Как вам статья? Возможно, вам известны другие варианты улучшения стандартных функций визуального редактора вордпресс? Поделитесь ими с читателями блога в виде комментариев к данному посту.
Данная инструкция завершена, но в ней имеются ссылки на ещё не опубликованные материалы. Прошу не пугаться, если какая-то из ссылок не откроется. Скоро всё заработает! 🙂
С уважением, Александр.
Визуальный редактор - самый удобный и быстрый способ публикации материалов на сайте. Он используется при создании записей и страниц, некоторые плагины так же используют его в своих настройках.
Мы бегло рассмотрели возможности визуального и текстового режима редактора в заметке , а теперь давайте немного углубимся и пробежимся по основным кнопкам.
Как только вы установите WordPress, редактор будет выглядеть очень бедным и не функциональным:
Вы меня извините, но я нарочно буду обрезать некоторые изображения по высоте, чтобы не растягивать и без того длинные статьи. Если видите резкий обрыв снизу изображения - это значит, что там ничего полезного нет. В каких-то конкретных случаях я буду обращать на это внимание.
В общем, как вы видите, кнопок редактор предлагает не так много, как хотелось бы. Но даже их хватает для того, чтобы эффективно работать над материалами.
Здесь есть всё необходимое для базового форматирования:
- Полужирное, курсивное и зачёркнутое выделение текста
- Маркированный и нумерованный списки
- Выделение текста как цитаты с оформлением
- Горизонтальная разделительная линия
- Выравнивание текста слева, по центру и справа
- Вставка и удаление ссылки
- Кнопка «Разрыв страницы»
- Кнопка активации дополнительных возможностей
- Кнопка перехода в полноэкранный режим
Работают данные кнопки в двух режимах, рассмотрим оба.
Пример 1
Понять, как работает этот способ, очень просто: вы нажимаете на нужное вам оформление в панели инструментов и начинаете набирать текст. Кнопка визуально вдавливается и кажется нажатой.
Любой текст, который будет введён в этом режиме, автоматически получит тот вариант оформления, который активен в панели инструментов.
Взгляните:
Первые два предложения я писал не нажимая на кнопку [B], написал их и нажал Enter. В редакторе сформировался новый пустой абзац, перед вводом которого я нажал на кнопку полужирного начертания и стал вводить текст.
Всё, что я ввёл - автоматически становилось полужирным. Для того, чтобы отключить применение этого стиля, достаточно отжать кнопку и тогда следующее символы будут уже без оформления.
Таким же образом работают и все остальные варианты оформления.
Пример 2
Есть другой способ, который (на мой личный взгляд) более удобный и быстрый. Заключается он вот в чём: сначала вы пишете простыню текста без оформления, а потом уже оформляете ваш текст как пожелаете.
Тот же самый текст я мог сначала просто написать:
Затем необходимо выделить тот абзац, который я хочу сделать полужирным и нажать на соответствующую кнопку на панели инструментов:
После этого наш абзац станет полужирным. Отжимать кнопку [B] для этого не понадобится - оформление применится ко всему выделенному тексту автоматически.
Пример 3
WordPress, как и Microsoft Word, позволяет вам выполнять разнообразные действия не мышкой, а клавиатурными сочетаниями. Для каждого действия есть свой набор кнопок, нажимая которые, применяются те или иные стили.
Например, если бы во втором примере этой инструкции мы не нажали кнопку [B] на панели инструментов, а воспользовались комбинацией «Ctrl» и «B» (пишется как Ctrl+B, кнопка «B» - английская, от слова «Bold»), то полужирное выделение сразу бы применилось на наш абзац.
О клавиатурных сочетаниях будет материал в конце этой инструкции.
Активация дополнительных кнопок
В какой-то момент вы поймёте, что текущих возможностей редактора вам не хватает и хотелось бы выделять текст подчёрнутым стилем или же задавать заголовки в тексте. Для этого надо активировать дополнительную панель инструментов.
Находим вот эту кнопку:
Появится второй ряд кнопок, которые добавляют новые возможности в ваш редактор:
Здесь мы с вами уже можем наблюдать дополнительные варианты для оформления текста, пробежимся по ним слева-направо:
- Создание заголовков любого из шести доступных уровней
- Подчёркивание текста
- Выравнивание текста по ширине страницы
- Задание цвета текста
- Активация режима вставки текста из буфера обмена без форматирования
- Очистка форматирования у выделенного фрагмента текста
- Вставка специальных символов
- Удаление и добавление отступов слева у абзацев
- Отмена или повтор предыдущего действия
- Справка по работе с редактором
Как вы можете убедиться, уж этих-то возможностей действительно хватит для работы над текстом и его оформлением.
Всем привет!. Сегодня мы поговорим о месте, где вы будете проводить огромное количество времени, ведя свой блог. Это место — ! Ведь именно в нем вы будете писать новые посты и публиковать их на своем блоге. WordPress предоставляет две версии редактора — визуальный и текстовый. Рассмотрим особенности каждой из них и научимся добавлять новый функционал.
Визуальный редактор WordPress и плагин Ultimate TinyMCE
Визуальный редактор WordPress напоминает внешне и по функциям Word, с которым знакомы практически все. К сожалению, по умолчанию его функционал очень скуден, что значительно ограничивает ваши возможности форматирования текста. Данную проблему превосходно решает плагин Ultimate TinyMCE, который добавляет огромное количество всевозможных новых кнопок.
Устанавливается плагин стандартно — скачайте Ultimate TinyMCE , распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Активируйте и переходите к его настройкам в раздел «Параметры» — «Ultimate TinyMCE».
По умолчанию все кнопки в визуальном редакторе WordPress располагаются в два ряда. Чтобы отобразить второй ряд используется кнопка «Показать/скрыть дополнительную панель». О функционале каждой кнопки, можно догадаться по значку на ней или по подсказке, которая появляется при наведении на нее курсора мыши. Ultimate TinyMCE добавляет еще около 40 новых функций и два дополнительных ряда кнопок.
Фактически, все настройки Ultimate TinyMCE сводятся к тому, чтобы отметить кнопки, функционал которых вам нужен, и выбрать для них ряд. Описание в настройках на английском языке, но после добавления их в редактор, подсказки будут на русском. Хотя в большинстве случаев можно разобраться и вовсе без подсказок.
Рассмотрим только дополнительные опции, которые представлены в самом низу настроек:
Change the color of the Editor — меняет цвет блока с кнопками в визуальном редакторе WordPress.
Enable NextPage (PageBreak) Button — добавляет функцию NextPage для .
Add ID Column to page/post admin list — на страницу админке WP со списками всех статей и записей добавляется новая колона, в которой указываются ID каждой записи/страницы блога. Можете прочитать, .
Allow shortcode usage in widget text areas — позволяет использовать «короткий код» в виджете «Текст». Короткий код (shortcode) предназначен для быстрого добавления кода , NextGEN Gallery, и других плагинов в текст страницы.
Use PHP Text Widget — позволяет использовать код php в . Код интерпретируется и на страницу блога выводится уже результат его работы.
Enable Line Break Shortcode — добавляет в «Короткие коды» тег Break, который предназначен для добавления пустой строки в текст.
Enable Columns Shortcodes — добавляет в «Короткие коды» большое количество тегов, отвечающих за формирование колонок текста.
Enable Advanced Insert/Edit Link Button — добавляет продвинутую возможность вставки/редактирования ссылок.
Enable «Div Clear» Buttons — добавляет кнопки Div Clear both, left и right предназначенные для отмены обтекания элемента, которое задано с помощью свойства float.
Remove p and br tags — отключает автоматическую вставку тегов p (абзац) и br (перевод строки). Если не хотите для каждого параграфа указывать тег p в ручную, то лучше эту опцию не трогать.
Add a Signoff Shortcode — можно задать часто используемую фразу и вставлять ее в статьи с помощью тега Signoff из «Коротких кодов» (Shortcode).
Текстовый редактор WordPress и плагины Post Editor Buttons и AddQuicktag
Многие считают код, создаваемый в визуальном редакторе WordPress, грязным, то есть содержит лишние теги и стили, которые по-хорошему должны быть вынесены в файл стилей, используемой темы WP. Большую власть над кодом дает текстовая версия редактора ВордПресс. Там все теги вставляются в ручную, за исключением разве что тегов абзаца (p) и перевода строки (br), они добавляются автоматически.
Все хорошо, но опять же не хватает функционала. Чтобы справиться с этой бедой можно воспользоваться плагином Post Editor Buttons.
Скачайте последнюю версию Post Editor Buttons . Устанавливается плагин стандартно. Настройки плагина проживают по адресу «Параменты» — «Post Editor Buttons».
Там все очень просто:
- Caption — название кнопки, которую добавляем;
- Before — открывающий тег;
- After — закрывающий тег;
- Delete — удалить.
К сожалею, на моем блоге Post Editor Buttons не работает . Просто не добавляются созданные в нем кнопки. Прекрасной альтернативой стал плагин AddQuicktag .
Скачайте свежую версию AddQuicktag . Плагин устанавливается стандартно, его настройки располагаются в одноименном разделе «Параметры» — «AddQuicktag». Добавлены четыре новых столбика опций, которыми я даже не пользуюсь.
Основные все те же:
- Button Label — название;
- Start Tag (s) — открывающий тег;
- End Tag (s) — закрывающий тег.
Спасибо за внимание! На этом все. Берегите себя.
Приветствую вас на блоге сайт. В этой стать я расскажу вам, как можно заменить, а заодно и починить стандартный визуальный редактор записей WordPress . Итак начнем с того что стандартный текстовый редактор по своей сути ничто иное как обычный Word, которым каждый из нас пользовался, но вот только в очень упрощенной форме. Многим просто неудобно писать статьи, когда есть всего лишь пара кнопок для оформления своих записей, и поэтому многие начинают изучать , чтобы в коде прописать то, что хотят, но и тут их ждет подвох.
HTML редактор позволяет использовать не все известные теги а только основные. Вот кстати, список тех тегов, которые редактор WordPress понимает: address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.
Если вы попытаетесь вписать какой-то другой тег не входящий в этот список, то редактор WordPress просто его удалит из записи. Также в html редакторе нельзя использовать код PHP и JavaScript. Если вы все же хотите засунуть код JavaScript в стать, то вам придется в отдельном файле вставлять этот код, потом закачивать его на блог и прописать в html редакторе путь к открытию этого файла.
Все это обременяет тратить куда больше времени на , чем многие могут себе позволить. Поэтому многие и ищут, как заменить стандартный визуальный редактор WordPres, который соответствовал бы их потребностям и целям. Вот как раз сегодня об одном таком и поговорим.
Редактор называется TinyMCE Advanced, который делает навороченный плагин CKEditor . Я не просто так это сказал, так как в него впихнули целых 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.
Это на сегодняшний день самый навороченный текстовый редактор, который вообще только существует. Вообще оказывается плагин платный, но почему-то раздается абсолютно бесплатно. Разработчики пишут что, мол, для просто ознакомления можно попользоваться бесплатно, но для коммерческих сайтов нужно приобретать лицензию.
Хотя я думаю тут дело в другом. Сам плагин очень много весит и не всем нужны, определенные функций, кнопки, которых там просто моря, поэтому плагин можно собрать под себя оставив только то, что нужно, тем самым уменьшив его размер, не замедляя работу блог.
