Установка tinymce на joomla 3. Редактор Joomla с подсветкой синтаксиса кода CodeMirror
Во второй публикации из цикла заметок о мы детально рассмотрим вопрос как установить счетчик Яндекс Метрики на сайт. Этот сервис весьма популярен в рунете и часто используется в качестве альтернативы решению от Гугла. По функциональности они оба плюс-минус похожи, поэтому тут каждый выбирает что ему больше удобно и близко.
Есть 2 принципиально разных способа реализации задачи: правка файлов шаблона и с помощью плагинов. Причем в первом направлении можно выделить еще 2 метода — редактирование макета через FTP и внутри самой админки.
Поскольку в прошлой статье о том я рассказывал про работу с FTP, то сегодня будем использовать возможности CMS. Также в конце поста приведу краткий обзор нескольких плагинов Яндекс.Метрики для Вордпресс специально тем людям, которые панические боятся прикасаться к правке темы.
Общий алгоритм добавления Метрики на WordPress сайт , по которому будем действовать:
- Регистрация в самом сервисе и общая настройка аккаунта.
- Выбор и активация нужных вам параметров отслеживания аналитики и получение соответствующего кода вставки.
- Интеграция данного кода в подключенный активный шаблон.
В принципе, ничего сложного, но абсолютным новичкам в теме крайне рекомендую прочитать все заметки «трилогии».
Установка Метрики в WordPress (через админку в Footer)
Внимание(!) В отличии от предыдущей публикации мы будем: 1) добавлять код в подвал (футер) нашего веб-ресурса; 2) делать это через WP админку. Таким образом покажу вам еще один принцип работы, однако, если хотите, вместо футера можете разместить отслеживание в хедер (header.php). Какой-то сверх принципиальной разницы лично я не вижу: раньше аналитику юзали в конце страницы дабы не мешать ее загрузке, но сейчас все сервисы работают асинхронно, и считается, что чуть лучше данные грузятся из хедера (особенно, когда сайт медленный).
1. После регистрации и входа в свой аккаунт Яндекс.Метрики находите сверху кнопу «Добавить счетчик». При клике по ней появится следующая форма:
- Пишете имя — любое произвольное для отображения в системе.
- Вводите адрес своего сайта, например kasinoazov.com (можно добавить несколько).
- Отмечаете галочку «Принимать информацию только со указанного домена» (дабы сторонние значения не попадали в отчеты).
- Ставите часовой пояс.
- Если надо, дополнительно активируете функции Вебвизора, отслеживания скроллинга и т.п.
Затем соглашаетесь «Принять условия» пользовательского соглашения и нажимаете «Создать счетчик».
2. На следующем шаге вы сможете выбрать метод как вставить код Яндекс Метрики в WordPress и на другие CMS — через обычный HTML или с помощью существующих специальных решений. Признаться, юзабилити здесь получше чем у Google Analytics.
Нам нужна вкладка «HTML», где над формой кода увидите открывающийся блок «Дополнительные настройки».
Лично я тут всегда отмечаю:
- асинхронный вывод;
- в одну строку;
- информер — если хотите показывать счетчик;
- альтернативный CDN — позволяет корректно работать из любых регионов, где есть определенные сложности, например сейчас Яндекс.Метрика в Украине заблокирована .
После указания всех параметров внизу найдете готовый для вставки код.
3. Теперь заходим админ панель WP и выбираем пункт меню «Внешний вид» — «Редактор». По умолчанию будет открыта ваша текущая тема, поэтому остается только кликнуть по названию нужного файла — footer.php . Наверняка вы заметили, что в WP 4.9 появилась подсветка синтаксиса и автоматическая проверка ошибок.
Выбираете место в шаблоне, куда именно хотите установить код Яндекс Метрики в Вордпресс проекте. Разработчики советуют добавлять его в Header дабы учитывать даже тех юзеров, которые моментально закрыли страницу, но лично я ставлю его там, где хочу отображать счетчик — не охота «разрывать» информер и блок отслеживания по разным файлам макета.
Затем нажимаете на кнопку «Обновить файл» и проверяете все ли хорошо работает во фронтенде + внутри сервиса аналитики. Если собираетесь изменять настройки счетчика, то после выбора и сохранения соответствующих опций его нужно будет заново переустановить в шаблоне.
Плагины Яндекс Метрики для WordPress
Изначально находил некоторые модули непосредственно в репозитории, но как оказалось, список проверенных решений есть на странице API метрики . Думаю, причин усомниться во мнении разработчиков нет никаких, поэтому я рассмотрю их рекомендации.
Yandex Metrica
Из всех трех Yandex Metrica наиболее функциональный плагин со множеством фишек:
- легкая работа с разными параметрами счетчика;
- встроенный виджет статистики для консоли;
- отслеживание и отображение результатов с учетом ;
- поддержка i18n переводов.
Он полностью бесплатный. Имеется 20тысяч скачиваний, совместимость до последней версии WP и весьма недавнее обновление. Для установки важно чтобы в футере у вас был доступен хук wp_footer.
Просматривать статус внутри админки можно только в продвинутом режиме, которому понадобится доступ к API сервиса. Если данные/график не отображается, еще раз проверьте настройки счетчика — иногда в новых слегка глючит API.
Яндекс Метрика By Konstantin Kovshenin
Этот модуль отлично подойдет самым юзерам, т.к. избавляет от необходимости редактировать шаблон. После установки и активации в системе появится специальная одноименная страница с формой куда надо вставить код Яндекс.Метрики для WordPress сайта.
Преимущество такого подхода в том, что при смене макета вам не придется повторно выполнять подключение статистики. Загрузок у решения под 30 тысяч, но оно не обновлялось более 2х лет. Хотя с другой стороны, на его простую функциональность вряд ли это как-то влияет.
DL Yandex Metrika
Отличительная особенность плагина среди всех остальных — возможность видеть аналитику непосредственно через консоль. Причем здесь имеется не просто небольшой виджет, а подключен вывод разных данных в таблицах и графиках. Загрузок не так много как у других — всего 3 тысячи, но, вероятно, потому модуль новый.
Итого. Выбор способа как поставить Метрику на WordPress целиком и полностью зависит от ваших целей и опыта:
- Если собираетесь детально разбирать все отчеты, то лучше делать это непосредственно в онлайн сервисе, а в Вордпресс просто интегрировать соответствующий код (через админ панель, FTP или модули).
- Тем, кто хочет просматривать какие-то данные в консоли, пригодится один из плагинов — первый или третий из обзора.
- Делаете проект заказчику, который собирается часто менять шаблоны? — ставьте решение от Konstantin Kovshenin, где всю процедуру нужно выполнять лишь один раз.
- Кстати, иногда в продвинутых WP темах есть специальная отдельная опция, позволяющая вставлять HTML в футер — она отлично подойдет и для статистики.
Если есть что добавить про счетчик Яндекс Метрики на сайте W ordpress, пишите в комментах. Там же задавайте свои вопросы.
В установочный дистрибутив Joomal входит единственный визуальный редактор TinyMCE. Часто визуальные редакторы называют редакторы wisiwyg (визивиг). Перевод соответствует функциям редактора – что видишь, то и получишь.
Редактор Joomla TinyMCE относится к расширениям типа плагин. Соответственно, управление редактором производится на вкладке Расширения→ . Тип плагина (название основного каталога) editors, элемент плагина (название каталога плагина) tinymce. Лежит редактор в корневой папке сайта в каталоге: /…/plugins/editors/tinymce.
Важно! Удалять плагин TinyMCE нельзя. Являясь базовым редактором, на нем строится работа других сторонних редакторов Joomla: JCE, CKEditor, Ark Editor (бывший JCK).
Визуальный редактор JoomlaTinyMCE - настройка
Исходный функционал редактора TinyMCE скудный, хотя и вполне достаточный для написания статей, вставки фотографий и расстановки ссылок.
Если вы привыкли работать с расширенным функционалом визуальных редакторов, идем в настройки плагина TinyMCE на вкладку: Расширения→Менеджер плагинов и воспользовавшись фильтром по названию TinyMCE, открываем плагин для редактирования.
Расширить функционал редактора можно в строке: Режим редактора (1). Можно выставить три режима: Простой, Стандартный, Расширенный (2). Каждый режим редактора имеет свой набор кнопок визуального редактирования.
В последних версиях Joomla, не помню, с какой версии, убрали стили редактора, оставив, один стиль: lightgray.
Недостатки редактора TinyMCE
К сожалению, для себя я изначально привык работать с редактором JCE и поэтому TinyMCE, субъективно имеет ряд недостатков. Основной из них это неудобное вставление фото в текст. На кнопке «Добавить изображение» фото можно вставить только по него URL. Это неудобно, так как нужно заранее скопировать URLы фотографий в Медиа-менеджере. Однако это удобно, если вы используете для сайта внешние хранилища фотографий.
class="eliadunit">
Обращу ваше внимание: В настройках TinyMCE есть строка, какой тип ссылок нужно вставлять в редакторе, относительную или абсолютную. По умолчанию стоит относительная ссылка. Такая настройка не запрещает вам вставлять в редакторе внешние ссылки абсолютного типа. Напомню, относительный тип ссылки указывает адрес файла относительно корня сайта. Абсолютная ссылка полный адрес файла, как в браузере.
Вернемся к недостаткам TinyMCE. В исправлении неудобства вставки фотографий на помощь приходит сама система Joomla. В системе, по умолчанию установлен плагин: Кнопка - Изображение (тип-editors-xtd, элемент-image). По умолчанию он включении внизу любого визуально редактора, включая внешние, появляется кнопка «Изображение». Она значительно упрощает вставку фото, непосредственно из папок Медиа-менеджера.
Причем, можно вставить фото кнопкой «Изображение», а потом отредактировать его кнопкой «Добавить фото» редактора TinyMCE добавив атрибут alt и title к изображению.
Как отключить редактор
Часто приходится редактировать или добавлять тексты не в визуальном режиме, а в режиме текстового редактора. Для этого не нужно входить в Общие настройки и переключать редакторы на «CodeMirror» или «Без редактора». Достаточно нажать кнопку внизу окна редактора «Выключить редактор».
На этом все! В следующих статьях про редакторы: JCE, JCK, Ark Editor. Сообщение о новых статьях и их анонсы можно получить по почте после подписки.
И так, мы установили джумла 3 и прежде чем приступить к размещению контента, нам необходимо настроить стандартный визуальный редактор для joomla 3
Настройка редактора joomla
Когда мы размещаем статью, мы стараемся сделать ее удобной для чтения и в тоже время нам нужен приятный, эстетический вид. Для этого мы используем визуальный редактор. Для джумалы создано много разнообразных редакторов, но о них мы поговорим чуть позже. Сейчас мы рассматриваем, стандартный редактор tinymce.
При установке joomla интерфейс редактора сильно урезан.
Для того что бы расширить функционал редактора, нужно перейти: Расширения/ Менеджер плагинов далее мы находим ссылку «Редактор - TinyMCE» и кликаем по ней. В открывшемся окне, находим строку: Режим редактора и в выпадающем списка, выбираем «Расширенный»
Если Вы собираетесь добавлять материалы с мобильных устройств, дополнительно вклюем «Мобильную версию». Далее мы спускаемся ниже и проверяем корректность настроек языка. Они должны выглядеть вот так:
На этой вкладке все. Переходим на следующую вкладку: Дополнительные параметры
Здесь мы настраиваем размеры самого редактора и права для пользователей. После этого нажимаем кнопку «Сохранить и закрыть». Снова переходим на вкладку создание материалов и обновляем страницу. Функционал нашего редактора заметно расширился.
Теперь, что бы не загромождать панель инструментов редактора лишними кнопками, часть их можно отключить.
Для этого мы снова переходим в менджер плагинов.
Далее нажимаем: Инструменты поиска в выпадающем списке выбираем: editors-xtd и снимаем с публикации не нужные нам кнопки. Любые кнопки Вы снова можете подключить, проделав все действия в обратном порядке. Все, редактор tinymce для joomla 3 у нас настроен!
Разобъем настройку TinyMCE на несколько шагов. Обычно нужно сделать следующее:
- Добиться, чтобы текст внутри редактора TinyMCE отбражался согласно заданному набору CSS-правил
- Добиться, чтобы курсор при нажатии Enter перепрыгивал вниз на высоту строки
- Добиться, чтобы текст, написанный в TinyMCE, выглядел на сайте так же, как и в редакторе
- Разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте
Итак, по-порядку.
В первую очередь надо добиться, чтобы текст внутри редактора TinyMCE выглядел так, как нам надо. То есть, нужно настроить CSS-файл, в котором прописаны CSS-правила отображения текста в TinyMCE.
Существует мнение, что настройка форматирования текста, для самой популярной темы advanced, происходит в файле /themes/advanced/skins/default/content.css. Это не так. На деле, обращения к этому файлу, без дополнительной настройки, TinyMCE не делает.
Чтобы настроить внешний вид текста в области редактирования TinyMCE, надо сделать следующее:
1. Скопировать файл /themes/advanced/skins/default/content.css в каталог, где лежат css-файлы сайта или CMS. Я обычно использую каталог /css (относительно корня сайта).
2. Переименовать скопированный файл с /css/content.css на /css/tinymce.css, ибо через некоторое время можно забыть, откуда появился и для чего нужен файл с названием "content.css".
3. В настройках TinyMCE (т.е. в настроечном массиве tinyMCE.init) надо добавить опцию:
4. Надо убедиться, что данный файл влияет на TinyMCE. Для этого надо в первой строчке заменить размер шрифта font-size с 10px на 12px. Вот так:
Данную настройку имеет смысл так и оставить, ибо размер 10px все считают слишком мелким.
5. Обновляем страницу. Для того, чтобы увидеть изменения оформления, в некоторых браузерах, особенно это касается Opera, надо обязательно очистить кеш, чтобы перегрузился css-файл.
Далее нам необходимо сделать так, чтобы курсор при нажатии Enter перепрыгивал на следущую строчку, а не делал большой отступ, показывая создание нового параграфа. Как показывает практика, появление большого отступа при нажатии Enter в TinyMCE вызывает ступор у многих пользователей. Связано это с тем, что в "обычных" редакторах типа MS Word, межстрочный интервал и интервал между параграфами по-умолчанию равны. А в TinyMCE, по умолчанию, интервал между параграфами больше, чем межстрочный.
Многие пытаются решить эту проблему путем прописывания в настроечный массив tinyMCE.init следующей настройки:
force_br_newlines: true
Этого делать ненадо! Во-первых, TinyMCE глючит при работе со строками, разделенными тегом
. Об этом знают разработчики TinyMCE, но напрямую не говорят, а настоятельно не рекомендуют пользоваться такой настройкой. А во-вторых, наша задача совсем в другом - надо сделать одинаковым межстрочный интервал и интервал между параграфами. Тогда пользователю будет удобно работать.
Поэтому, в созданный нами файл /css/tinymce.css нужно добавляем строку:
С помощью этой строки новый параграф не будет отделяться большим отступом, а будет внешне выглядеть как новая строка.
Теперь нужно сделать так, чтобы текст, созданный в TinyMCE, отображался на страницах сайта именно в том виде, в котором он виден в области редактирования TinyMCE.
Если мы просто подключим файл /css/tinymce.css к коду страницы сайта, то ничего хорошего из этого не выйдет. А не выйдет потому, что правила, прописанные в /css/tinymce.css, написаны в "явном виде" для всех основных тегов. Таким образом, простое подключение /css/tinymce.css к HTML-коду страницы сайта, может нарушить верстку страницы.
Я долго разбирался, каким же образом можно подключить CSS-правила, используемые в TinyMCE так, чтобы они влияли только на определенную область HTML-кода (то есть на ту облась, в которой находится текст, созданный с помощью TinyMCE). В результате подошел только один метод. Немного неудобный, но зато работающий железобетонно.
Нам нужно сделать следующее:
1. Скопировать файл /css/tinymce.css, дав ему имя /css/site_tinymce.css. В этом новом файле надо перед каждым CSS-правилом прописать строку ".tinymce " . Например, имеем файл /css/tinymce.css с содержимым:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
body {background:#FFF;}
p, span { margin: 0; padding: 0; }
body.mceForceColors {background:#FFF; color:#000;}
h1 {font-size: 2em}
MceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
td.mceSelected, th.mceSelected {background-color:#3399ff !important}
table {cursor:default}
table td, table th {cursor:text}
img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
font {font-family:inherit !important}
Тогда содержимое файла /css/site_tinymce.css должно быть:
Tinymce body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
Tinymce body {background:#FFF;}
Tinymce p, span { margin: 0; padding: 0; }
Tinymce body.mceForceColors {background:#FFF; color:#000;}
Tinymce h1 {font-size: 2em}
Tinymce .mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
Tinymce a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
Tinymce td.mceSelected, th.mceSelected {background-color:#3399ff !important}
Tinymce img {border:0;}
Tinymce table {cursor:default}
Tinymce table td, table th {cursor:text}
Tinymce * html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
Tinymce img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
Tinymce font {font-family:inherit !important}
2. Подключаем файл /css/site_tinymce.css к HTML-коду страницы сайта:
3. Ту область, где должен выводиться текст, созданный в TinyMCE, заключаем в тег div, с указанием класса tinymce:
Таким образом, мы создали CSS-файл правил, которые применяются только к элементам, расположенным внутри тега с классом "tinymce". Посему, эти правила не будут нарушать верстку сайта. А чтобы эти правила применялись к тексту, созданному в TinyMCE, мы заключаем этот текст в тег
Почему такой подход неудобен? Да потому, что теперь нужно постоянно помнить, что если что-то перенастроили в файле /css/tinymce.css, тоже самое нужно сделать и в файле /css/site_tinymce.css.
А почему бы не обойтись одним файлом? Например, можно было бы иметь один CSS-файл (с содержимым /css/site_tinymce.css), а вставку редактора TinyMCE заключить бы в тег
Отвечаю. На самом деле, CSS-файл, подключаемый через опцию content_css - не настоящий css-файл. Он нигде в TinyMCE не подключается в том виде, в котором считан. Вместо этого он парсится ява-скриптом, и свойства отображения текста применяются динамически. Эксперименты и изучение кода TinyMCE (v. 3.3.6 от 20.05.2010) показали ограничения, которые накладываются на css-файл, подключаемый через опцию content_css . Вот эти ограничения:
1. В файле нельзя использовать сложные селекторы. Селекторы должны быть написаны для тегов в явном виде, либо простыми правилами. Вследствие этого, не работает идея прописывания строки ".tinymce " перед каждым селектором, и обрамление