В этой статье я дам конкретные советы, как правильно оформлять материалы Joomla.
6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.

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

Что плохого в неправильном оформлении текстов.

Когда возникает необходимость добавить текст на сайт, люди, не искушенные веб-технологиями, обычно действуют по следующей схеме:

  1. Написать статью в MS Word или заказать на бирже, получив примерно в таком же формате. Обычно написание сопровождаете копированием некоторых отдельных предложений с разных сайтов в Интернете.
  2. Скопировать статью из MS Word и вставить ее в редактор при создании материала Joomla.
  3. Вставить изображения, если это необходимо.
  4. Подправить статью и сохранить.

Казалось бы, все правильно. И на сайте статья отображается более-менее корректно. Так что же не так? Я вам покажу.

Возьмем цитату:

“Кролики это не только ценный мех но и 3 4 килограмма диетического легко усваиваемого мяса”

Скопируем ее из Word’а и вставим в стандартный редактор Joomla TinyMCE. Вот такой код мы должны получить в идеале:

1

А вот то, что выдаст нам TinyMCE в реальности:

2

Мне страшно. И это с учетом того, что речь идет об одной единственной фразе, к которой не применены разношёрстные Word’овские стили.

Человек и в случае первого и в случае второго кода увидит после вставки только текст, т.е. не заметит никакой разницы. Но разница есть. Ниже привожу список недостатков такого подхода:

  1. Первое и главное – самое разное стилевое оформление в каждом из материалов Joomla. Один материал может быть написан шрифтом Times New Roman 11 размера, другой – Calibri 10 размера. Когда мы просматриваем полный текст статьи, это не особенно ощущается, но стоит увидеть эти статьи на странице блога рядом друг с другом – разница становится очевидной.
  2. В материалах при вставке к каждому абзацу текста, а иногда даже к каждому предложению добавляется атрибут style с собственными уникальными стилями оформления, что неправильно с точки зрения html-разметки.
  3. Если стилевое оформление чистых от style материалов редактируется в CSS всего парой строк кода для всего сайта, то приоритет style выше css, что приводит к необходимости редактирования каждого отдельного материала в случае, когда необходимо, например, увеличить размер шрифта текстов.
  4. Размеры каждой отдельной статьи в базе данных сильно увеличиваются. Это не играет роли в случае, если на сайте мало материалов, но может заметно раздуть базу данных, когда материалов тысячи.
  5. Некорректный перенос из Word’а подзаголовков материалов. Редко кто оформляет в Word подзаголовки материалов правильно. Обычно мы просто увеличиваем текст подзаголовка или делаем его жирным. Ни один скрипт переноса не поймет того, что это подзаголовок, а, следовательно, вставит его в редактор Joomla хоть и большим жирным текстом, но с использованием html-тега простого абзаца, но не тегов h2-h6, которые крайне важны для поисковых систем.

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

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

  1. Установите, настройте и включите по умолчанию сторонний текстовый редактор для Joomla – JCE(подробнее про установку и настройку читайте ниже).
  2. Никогда не вставляйте тексты из блокнота Windows. В блокноте есть только перенос строк, но нет абзацев. Это приводит к неверному формированию кода при вставке в редактор Joomla.
  3. После каждой вставки текста в редактор, нажимайте кнопку «< >», которая показывает html-код, и проверяйте, что в коде нет атрибутов style. Звучит сложно, но на самом деле, это вопрос 3 секунд.
  4. После вставки текста в редактор выделяйте заголовки и добавляйте для них соответствующий тип оформления (h1 – не используем, поскольку это заголовок материала, h2 – заголовки второго уровня, h3 – заголовки третьего уровня, и т.д.):
    3
  5. Задавайте для изображений только относительную ширину и высоту (в идеале: ширина 100%, высота: не задана), либо не задавайте ее вовсе. В противном случае, вы рискуете получить проблемы при добавлении сайту адаптивности под мобильные устройства. Да, знаю, на wedal.ru сделано как раз-таки неправильно =).
  6. Используйте при оформлении маркированных списков кнопки в редакторе:

4

Списки при вставке будут генерироваться автоматически при условии их правильного создания в Word.

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

Установка и первичная настройка редактора JCE.

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

  1. Скачайте и установите расширение JCE для Joomla. Сделать это можно через закладку Установить из JED, которая находится в менеджере расширений Joomla. Другой способ, перейти на официальный сайт JCE и скачать расширение для вашей версии Joomla.
  2. После установки JCE перейдите в общие настройки Joomla (Система –> Общие настройки) и выберите в настройке Редактор по умолчанию опцию JCE.
  3. Перейдите в Компоненты –> Редактор JCE–> Профили редактора –> Default –> Вкладка «Параметры плагина» –> Буфер обмена, и установите в опциях Удалять все SPANS и Удалять все стили значение Да. Этим вы установите отчистку текста от всех лишних стилей Word’а.
  4. Перейдите в Компоненты –> Редактор JCE–> Профили редактора –> Default –> Вкладка «Параметры плагина» –> Отображение блоков, и установите в опции Состояние значение Да. Этим вы включите выделение тегов в редакторе. Сначала  это может показаться неудобным, но вскоре вы привыкните и уже не будете представлять, как вы работали с редактором без этого выделения раньше.

Вот и всё. Напоследок хочу отметить, что для большинства как простых пользователей, так и веб-мастеров работа с редактором JCE ограничивается установкой и активацией. Но если потратить некоторое время и детально разобраться в редакторе, можно увидеть, что он имеет в себе множество тонких и очень полезных настроек, которые незаменимы при оформлении материалов Joomla. А какие особенности JCE используете вы? Поделитесь в комментариях =).

--------------

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # RE: 6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.Magnum79 03.09.2016 13:33
А что, про вставку "как обычный текст" знаю только я ? :))
Ответить | Ответить с цитатой | Цитировать
+1 # RE: 6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.Wedal 05.09.2016 05:40
Magnum79, вставка "как обычный текст" аналогична вставке из блокнота Windows. Всё форматирование теряется.
Ответить | Ответить с цитатой | Цитировать
+2 # JCEКонстантин 26.05.2016 23:46
Спасибо за статью, хотя уже все это знал, но прочел с интересом. Долго поначалу мучался с форматированием после вёрда. Потом стал пользоваться "метлой" и "ластиком" но и они не дают полноценной очистки от форматирования. В конце концов нашел самый простой на мой взгляд способ. В верхнем левом углу над панелью редактора есть кнопка [Toggle Editor] с помощью которой редактор переключается в другой режим. В режиме отображения кода - вставляя текст из вёрда не вставляется форматирование, после вставки текста, снова переключаюсь в режим редактора.
Ответить | Ответить с цитатой | Цитировать
+2 # RE: 6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.KrukIV 23.10.2015 09:55
Не сочтите за рекламу, но… как бы мы не хотели, клиенты использовали, используют, и будут использовать MS Word для набора и редактирования текстов для сделанных нами сайтов. Поэтому, здесь стоит скорее задача, как ОЧИСТИТЬ код от всего вордовского мусора. На мой взгляд, я расписал это достаточно наглядно и подробно.
Ответить | Ответить с цитатой | Цитировать
0 # RE: 6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.spro1 04.09.2015 05:58
Метла и стирашка рулит))) а еще есть один интересный способ: берем текст с форматированием из ворда иди с какого-то сайта например, затем открываем чистый, пустой документ мс ворд и вставляем туда скопированный заранее текст. После вставки появляется значок "параметры вставки", в нем выбираем объединить форматирование или еще лучше сохранить только текст. Таким образом сохраняются параграфы, а другое оформление, включая ссылки пропадает, после этого текст можно смело копировать и вставлять в редактор на сайт, останется только добавить свое форматирование(заголовки, списки и пр.).
Ответить | Ответить с цитатой | Цитировать
0 # JCE MediaBoxMiheich 31.08.2015 12:34
Это расширение использую удобно очень.
Ответить | Ответить с цитатой | Цитировать
+2 # RE: 6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.ALEHAN 31.08.2015 11:08
Справа вверху в редакторе есть кнопочки с изображением метлы и ластика, жамкаю обе и бОльшая часть оформления убирается
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх