Эта статья, в некотором смысле, крик души. Работая над оформлением коммерческих сайтов на Joomla, я снова и снова сталкиваюсь с одной и той же проблемой, а именно абсолютным неумением владельцев сайтов пользоваться текстовым редактором для корректного оформления текстов при создании материалов в админке. В этой статье я расскажу о том, почему это плохо, а также дам конкретные советы, как правильно оформлять материалы Joomla. Если вы относитесь к группе людей, которым приходится работать с Joomla, но фразы html-код и CSS практически ничего вам не говорят, то обязательно прочтите эту статью и возвращайтесь к пунктам из нее каждый раз, когда решите добавить на сайт очередной текст.
Содержание
Что плохого в неправильном оформлении текстов
Когда возникает необходимость добавить текст на сайт, люди, не искушенные веб-технологиями, обычно действуют по следующей схеме:
- Написать статью в MS Word или заказать на бирже, получив примерно в таком же формате. Обычно написание сопровождаете копированием некоторых отдельных предложений с разных сайтов в Интернете.
- Скопировать статью из MS Word и вставить ее в редактор при создании материала Joomla.
- Вставить изображения, если это необходимо.
- Подправить статью и сохранить.
Казалось бы, все правильно. И на сайте статья отображается более-менее корректно. Так что же не так? Я вам покажу.
Возьмем цитату:
“Кролики это не только ценный мех но и 3 4 килограмма диетического легко усваиваемого мяса”
Скопируем ее из Word’а и вставим в стандартный редактор Joomla TinyMCE. Вот такой код мы должны получить в идеале:
А вот то, что выдаст нам TinyMCE в реальности:
Мне страшно. И это с учетом того, что речь идет об одной единственной фразе, к которой не применены разношёрстные Word’овские стили.
Человек и в случае первого и в случае второго кода увидит после вставки только текст, т.е. не заметит никакой разницы. Но разница есть. Ниже привожу список недостатков такого подхода:
- Первое и главное – самое разное стилевое оформление в каждом из материалов Joomla. Один материал может быть написан шрифтом Times New Roman 11 размера, другой – Calibri 10 размера. Когда мы просматриваем полный текст статьи, это не особенно ощущается, но стоит увидеть эти статьи на странице блога рядом друг с другом – разница становится очевидной.
- В материалах при вставке к каждому абзацу текста, а иногда даже к каждому предложению добавляется атрибут style с собственными уникальными стилями оформления, что неправильно с точки зрения html-разметки.
- Если стилевое оформление чистых от style материалов редактируется в CSS всего парой строк кода для всего сайта, то приоритет style выше css, что приводит к необходимости редактирования каждого отдельного материала в случае, когда необходимо, например, увеличить размер шрифта текстов.
- Размеры каждой отдельной статьи в базе данных сильно увеличиваются. Это не играет роли в случае, если на сайте мало материалов, но может заметно раздуть базу данных, когда материалов тысячи.
- Некорректный перенос из Word’а подзаголовков материалов. Редко кто оформляет в Word подзаголовки материалов правильно. Обычно мы просто увеличиваем текст подзаголовка или делаем его жирным. Ни один скрипт переноса не поймет того, что это подзаголовок, а, следовательно, вставит его в редактор Joomla хоть и большим жирным текстом, но с использованием html-тега простого абзаца, но не тегов h2-h6, которые крайне важны для поисковых систем.
Ну и последнее. Удалить все эти лишние стили и другую грязь, генерируемую тем же TinyMCE при вставке текста в материалы крайне проблематично, если таких материалов уже опубликованы сотни. В каждом материале html-код в некоторой степени уникален, и просто взять базу данных и все вычистить не получится.
Чтобы не сталкиваться с проблемами, описанными выше, при добавлении материалов на ваш сайт используйте следующие простые правила:
- Установите, настройте и включите по умолчанию сторонний текстовый редактор для Joomla – JCE(подробнее про установку и настройку читайте ниже).
- Никогда не вставляйте тексты из блокнота Windows. В блокноте есть только перенос строк, но нет абзацев. Это приводит к неверному формированию кода при вставке в редактор Joomla.
- После каждой вставки текста в редактор, нажимайте кнопку «< >», которая показывает html-код, и проверяйте, что в коде нет атрибутов style. Звучит сложно, но на самом деле, это вопрос 3 секунд.
- После вставки текста в редактор выделяйте заголовки и добавляйте для них соответствующий тип оформления (h1 – не используем, поскольку это заголовок материала, h2 – заголовки второго уровня, h3 – заголовки третьего уровня, и т.д.):
- Задавайте для изображений только относительную ширину и высоту (в идеале: ширина 100%, высота: не задана), либо не задавайте ее вовсе. В противном случае, вы рискуете получить проблемы при добавлении сайту адаптивности под мобильные устройства. Да, знаю, на wedal.ru сделано как раз-таки неправильно =).
- Используйте при оформлении маркированных списков кнопки в редакторе:
Списки при вставке будут генерироваться автоматически при условии их правильного создания в Word.
Используя эти простые правила, вы будете иметь на сайте чистые, одинаково оформленные материалы с корректной разметкой. Пользователи и поисковые системы будут вам за это очень благодарны.
Установка и первичная настройка редактора JCE
Эта процедура делается только один раз и не отнимет у вас много времени. Следуйте шагам, описанным ниже:
- Скачайте и установите расширение JCE для Joomla. Сделать это можно через закладку Установить из JED, которая находится в менеджере расширений Joomla. Другой способ, перейти на официальный сайт JCE и скачать расширение для вашей версии Joomla.
- После установки JCE перейдите в общие настройки Joomla (Система –> Общие настройки) и выберите в настройке Редактор по умолчанию опцию JCE.
- Перейдите в Компоненты –> Редактор JCE–> Профили редактора –> Default –> Вкладка «Параметры плагина» –> Буфер обмена, и установите в опциях Удалять все SPANS и Удалять все стили значение Да. Этим вы установите отчистку текста от всех лишних стилей Word’а.
- Перейдите в Компоненты –> Редактор JCE–> Профили редактора –> Default –> Вкладка «Параметры плагина» –> Отображение блоков, и установите в опции Состояние значение Да. Этим вы включите выделение тегов в редакторе. Сначала это может показаться неудобным, но вскоре вы привыкните и уже не будете представлять, как вы работали с редактором без этого выделения раньше.
Вот и всё. Напоследок хочу отметить, что для большинства как простых пользователей, так и веб-мастеров работа с редактором JCE ограничивается установкой и активацией. Но если потратить некоторое время и детально разобраться в редакторе, можно увидеть, что он имеет в себе множество тонких и очень полезных настроек, которые незаменимы при оформлении материалов Joomla. А какие особенности JCE используете вы? Поделитесь в комментариях =).
--------------
Изображения, которые вы используете для материалов сайта, лучше держать на своем хостинге, а вот для изображении, которые добавляются пользователями в комментариях и на форуме, лучше использовать какой-нибудь бесплатный хостинг картинок без регистрации. Некоторые из таких хостингов даже платят владельцам сайтов за переходы. Помимо картинки пользователю показывается реклама, доходом с которой владелец такого хостинга картинок может поделиться с владельцем сайта, с которого был осуществлен переход. На сайте же показывается уменьшенная копия изображения.
