Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Как админке Joomla сделать favicon для всех платформ

Как проще становится жизнь, когда всё на своих местах: инструменты разложены по полочкам, а информация хранится в удобном для её поиска виде! В статье «Как в Joomla сделать favicon для всех платформ» дана подробная пошаговая инструкция, как сделать favicon для фронтенда сайта. То есть той части, которую видят и используют пользователи сайта. Для пользователей удобно, но почему бы не сделать удобно и для себя?



Введение

В этой статье рассказано как поставить favicon для «Панели управления» (админки) сайта на Joomla. Зачем оно нужно? Ну хотя бы для того, чтобы можно было легко визуально различать ссылки на админку и сайт. Кто не согласен, что такое разделение иконок крайне упрощает работу с сайтом:

легко визуально различать ссылки на админку и сайт

Это реальный скриншот моих закладок в Opera. Раньше были стандартные скучные фавиконки, сгенерированные автоматически, но такие иконки мне нравятся больше, т.к. времени на принятие решения, на какую из них кликнуть тратится раза в два точно меньше.

Генерируем favicon

Итак, про то, как сгенерировать иконки с помощью сервиса realfavicongenerator.net рассказано в статье «Генератор favicon для всех платформ: iOS, Android, PC/Mac...». Инструкция полная, с картинками и объяснениями: понять, как пользоваться генератором favicon для всех платформ, сможет любой. Ну и создать набор favicon не составит большого труда.

Заливаем favicon на сервер

Сервис realfavicongenerator.net выдаёт заархивированную папку с комплектом favicon. Всё, что остаётся — это залить её на сервер и распаковать. При генерации favicon нужно указать папку, где они будут лежать. Для фавиконок админки я намеренно указываю тапку с шаблонами админки. Так логично + они будут всегда доступны из любого шаблона админки.

Если для фариконок сайта путь до каталога с favicon был: /templates/favicon/, то для админки этот путь на одну папку длинее: ../administrator/templates/favicon/.

Прописываем путь до favicon в файл index.php панели управления и в файл login.php формы входа в панель управления

Да, именно так! Изменения для админки нужно вносить в два файла:

  • файл login.php генерирует форму авторизации в «Панель управления» Joomla
  • файл index.php генерирует форму авторизации в «Панель управления» Joomla

Как вносить изменения в файлы админки подробно описано в статье «Изменение файлов шаблона «Панели управления» Joomla в админке».

Куда же и что нужно прописывать покажу на собственном примере (для обоих файлов login.php и index.php последовательность абсолютно одинаковая и мало зависит от того, какой из шаблонов админки выбран.

В файле нужно найти запись содержащую тег <head> (она не в самом начале файла, но найти её не составит труда):

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<jdoc:include type="head" />
	<!--[if lt IE 9]><script src="/<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->
</head>

после этого нужно внести код, сгенерированный realfavicongenerator.net (не меняя больше ничего, просто вставить дополнительно между строк):

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<jdoc:include type="head" />
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/../administrator/templates/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/../administrator/templates/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/../administrator/templates/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/../administrator/templates/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/../administrator/templates/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/../administrator/templates/favicon/manifest.json">
<link rel="mask-icon" href="/../administrator/templates/favicon/safari-pinned-tab.svg" color="#aa44ee">
<link rel="shortcut icon" href="/../administrator/templates/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#aa44ee">
<meta name="msapplication-TileImage" content="../administrator/templates/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="../administrator/templates/favicon/browserconfig.xml">
<meta name="theme-color" content="#aa44ee">
<!-- favicon -->
	<!--[if lt IE 9]><script src="/<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->
</head>

После этого сохранить изменения в файлах.

Заключение

Если этих изменений для сайта было не достаточно и приходилось удалять старые favicon сайта из корня и из папки шаблона, то с админкой этого делать не надо. Хотя, возможно, это связано с тем, что у меня они уже удалены. Не проверял. Но всё работает сразу после того, как залил файлы favicon на сервер и поменял код в файлах login.php и index.php.

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Log in to comment

Обсуждение этой статьи

ИНФОРМАЦИЯ: Вы оставите комментарий к этой статье как 'Гость'