От автора: приветствую Вас дорогой друг. В данной статье мы поговорим о том, как реализуется версия сайта для слабовидящих на Joomla, потому как пользователей c слабым зрением достаточно много, а значит, создавая хороший сайт обязательно нужно учесть это, дабы обеспечить максимальный комфорт от просмотра страниц для посетителей данной группы. Ведь если пользователю удобно просматривать материалы сайта и тем более они ему интересны, значит с большой вероятностью можно полагать, что он будет возвращаться на Ваш сайт снова и снова.
Для начала хотел бы отметить, что сайт для слабовидящих на joomla или вариант сайта, можно создать различными способами и конечно же, в рамках данной статьи мы с Вами рассмотреть все их просто не сможем. Мы реализуем, один из способов, который на мой взгляд наиболее удачный. Кстати в стандартном шаблоне CMS Joomla под названием Beez 3, данная возможность уже реализована с использованием функционала языка JavaScript. Напомню, что вверху страницы, Вы можете увидеть три ссылки: Больше. Сброс, Меньше, с помощью которых можно увеличить, или уменьшить размер шрифта страницы, хотя и незначительно.
Конечно, Вы можете спросить, зачем нужно отдельная версия сайта для слабовидящих на joomla, если используя инструменты браузера всегда можно изменить масштаб отображения страниц. И это действительно так, но при изменении масштаба вид сайта может измениться, причем некоторые блоки могут съехать со своих определенных позиций, а это не допустимо, для хорошего сайта. К тому же в версии для слабовидящих возможно потребуется немного переработать структуру всех страниц для лучшего восприятия, соответственно в этом случае изменение масштаба ни как не поможет.
Поэтому в данной статье версия для слабовидящих joomla будет реализована с использованием дополнительного шаблона и специального расширения, при помощи которого, пользователь в нужный момент сможет переключиться на данный шаблон. То есть другими словами для слабовидящих посетителей мы создадим отдельный шаблон, который будет использоваться для отображения информации сайта. Как правило, такой шаблон использует более крупный шрифт, для формирования текста и более увеличенные по размерам изображения.
Итак, для начала подготовим дополнительный шаблон. Конечно, с нуля мы его создавать не будем, так как на это просто не хватите времени, да и это не тема данной статьи. Мы используем стандартный шаблон Beez3, который используется в качестве шаблона по умолчанию для пользовательской части сайта и создадим его копию. Для этого открываем менеджер шаблонов.
Далее переходим на вкладку шаблоны.
И кликаем по ссылке “Параметры Beez3”, тем самым переходим на страницу настройки данного шаблона.
Нас интересует кнопка “Копировать шаблон”, используя которую мы сможем физически, создать копию данного шаблона, что собственно мы и сделаем. Кликнув по данной кнопке, необходимо указать имя будущей копии.
Указав имя, кликаем по кнопке “Создать копию шаблона”. После этого давайте перейдем в каталог templates исходных файлов Joomla и убедимся в том, что действительно был создан новый шаблон.
Теперь давайте перейдем в папку нового шаблона, а затем в каталог css, в котором откроем в текстовом редакторе файл layout.css. В котором, мы изменим несколько правил css и тем самым как бы изменим текущий шаблон. А именно, увеличим размер шрифта для отображения содержимого страниц сайта, тем самым улучшим читаемость для слабовидящих пользователей. Для этого, примерно на 56 строке, отредактируем правила CSS.
1 2 3 4 5 |
body p,body ol,body ul,body dl,body address { margin-bottom: 1.5em; font-size: 1.5em; line-height: 1.5em; } |
Конечно, изменения размера шрифта не достаточно, но для тестовых целей, вполне достаточно. Так же при необходимости задайте настройки для созданной копии шаблона в менеджере шаблонов.
Теперь, когда шаблон готов, возникает вопрос, каким образом реализовать переключение шаблонов в пользовательской части сайта? Конечно, данный функционал не предусмотрен стандартной комплектацией Joomla, а значит мы воспользуемся сторонним расширением, под названием Template Selector.
Как обычно, кликаем по кнопке “Download” для перехода на официальный сайт разработчиков.
Далее, выбираем для какой версии CMS необходимо скачать расширение, в нашем случае это Joomla 3.x., и кликаем по изображению бокса.
Затем соглашаемся с условиями лицензионного соглашения и скачиваем расширение. После, выполняем установку стандартным способом. Так как расширение состоит из модуля и плагина, первым делом необходимо активировать плагин в менеджере плагинов.
Далее, переходим в менеджер модулей и кликаем по заголовку модуля mod_template_selector, и тем самым переходим на страницу его настройки.
Главная задача данного модуля, отобразить в пользовательской части элементы управления шаблонами, то есть кнопки переключатели доступных шаблонов. Соответственно в параметре “Select Templates”, необходимо выбрать те шаблоны, которые будут доступны к переключению. В нашем случае – это шаблоны Beez3 и Beez3Copy. При этом конечно не забываем указать позицию, отображения модуля и сменить его состояние.
Теперь можно перейти в пользовательскую часть и проверить результаты работы.
Как Вы видите, модуль успешно отображается и с его помощью можно быстро переключаться между двумя шаблонами. А так как второй шаблон отличается от первого только размером шрифта, значит мы с Вами ответили на вопрос как сделать сайт для слабовидящих joomla.
Более подробно изучить шаблоны Joomla Вы сможете, пройдя бесплатный курс Создание уникального шаблона на Joomla. На этом данный урок завершен. Всего Вам доброго и удачного кодирования!