Рейтинг:  0 / 5

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

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

В этой статье показано, как установить для Joomla favicon для всех платформ. Для этого нужно будет воспользоваться сторонним сервисом в web-интерфейсом (ничего не нужно устанавливать на компьютер) — сгенерировать набор фавиконок и сопутствующих файлов. После этого останется залить их на сервер и внести кое-какие изменения в шаблон сайта. Для тех, кому любопытно, почему всё нужно сделать так, а не иначе, в конце даны разъяснения.



Шаг первый. Генерирование favicon

Воспользуемся сторонним сервисом, предоставляющим удобны интерфейс для создания фавиконок под все платформы. В статье «Генератор favicon для всех платформ: iOS, Android, PC/Mac...» дана подробнейшая инструкция по тому, как создать набор иконок под все возможные платформы с помощью инструмента realfavicongenerator.net. К написанному мне добавить не чего, кроме того, что думайте, когда прописываете пути к файлам — это пригодится при встраивании иконок в HTML-код шаблона.

Шаг второй. Заливаем иконки на сервер

Заливаем и распаковываем архив иконок на сервер в ту папку, которую для этого выбрали при генерации иконок на realfavicongenerator.net.

У меня это папка ./templates/favicon

Относительно этой папки будут простроены пути к иконкам в контейнере <head>.

Шаг третий. Изменение кода шаблона сайта

Я до сих пор пользуюсь стандартным шаблоном protostar, поэтому некоторые пути могут отличаться, но общий смысл останется неизменным. Нужно вписать код выданный realfavicongenerator.net в шаблон сайта в контейнер <head> для того, чтобы браузер на пользовательском устройстве мог выбрать подходящую ему иконку.

Что получилось у меня:

Есть индексный файл index.php шаблона лежащий в папке ./templates/protostar/index.php можно с помощью Менеджера шаблонов сайта в админке Joomla.

Было:

<!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" />
	<jdoc:include type="head" />
	<!--[if lt IE 9]><script src="/<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->
</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" />
	<jdoc:include type="head" />
	<!-- favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="/templates/favicon/apple-touch-icon.png">
	<link rel="icon" type="image/png" href="/templates/favicon/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="/templates/favicon/favicon-194x194.png" sizes="194x194">
	<link rel="icon" type="image/png" href="/templates/favicon/android-chrome-192x192.png" sizes="192x192">
	<link rel="icon" type="image/png" href="/templates/favicon/favicon-16x16.png" sizes="16x16">
	<link rel="manifest" href="/templates/favicon/manifest.json">
	<link rel="mask-icon" href="/templates/favicon/safari-pinned-tab.svg" color="#587bf5">
	<link rel="shortcut icon" href="/templates/favicon/favicon.ico">
	<meta name="apple-mobile-web-app-title" content="MoonBase">
	<meta name="application-name" content="MoonBase">
	<meta name="msapplication-TileColor" content="#587bf5">
	<meta name="msapplication-TileImage" content="/templates/favicon/mstile-144x144.png">
	<meta name="msapplication-config" content="/templates/favicon/browserconfig.xml">
	<meta name="theme-color" content="#587bf5">
	<!-- favicon -->
	<!--[if lt IE 9]><script src="/<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->
</head>

Шаг четвёртый. Удаление устаревших favicon

Теперь нужно удалить старые иконки. Ниже объясню почему.

  1. Иконку из шаблона сайта: ./templates/protostar/favicon.ico
  2. Иконку из корня сайта: ./favicon.ico

Если их нет, то хорошо. Если есть - удаляем!

Шаг пятый. Всё работает!

После всех этих манипуляций, можно походить на свой сайт с разных устройств и с разных браузеров. Поэкспериментировать, как вставляется ссылка на сайт в мобильных устройствах, как и что добавляется в «Избранное»... Поводов для радости масса — всё по-взрослому! :)

И в заключение... Почему?

Остался не объяснённым вопрос: «Почему надо было удалять старые иконки?»

Объясню... Пока иконки не удалены, посмотрим в исходный код страницы в браузере:

<!DOCTYPE html>
<html lang="ru-ru" dir="ltr">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="utf-8" />
	<base href="http://mb4.ru/" />
	<meta name="keywords" content="windows, html" />
	<meta name="description" content="Горячий старт на просторы интернета" />
	<meta name="generator" content="Joomla! - Open Source Content Management" />
	<title>Главная</title>
	<link href="/?format=feed&amp;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
	<link href="/templates/protostar/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
	<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
	<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />
	<link href="/templates/protostar/css/template.css?5fcea3cfd7c7a410c5b4d0e4405e5379" rel="stylesheet" />
	<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

В 13-й строчке видим ссылку на старую иконку, а ниже видим такое же описание со ссылкой на новую иконку. Конфликт? Конфликт! И его нужно снять.

Откуда же появляется ссылка на старую иконку и как от неё избавиться?

В файле index.php шаблона сайта видим такую строчку:

<jdoc:include type="head" />

Без неё нельзя, но именно она генерирует весь поток заголовков. Разберёмся более подробно, что же она делает с favicon.

Функция формирования мета-тега вставки favicon находится в файле ядра Joomla ./libraries/joomla/document/html.php

	/**
	 * Adds a shortcut icon (favicon)
	 *
	 * This adds a link to the icon shown in the favorites list or on
	 * the left of the url in the address bar. Some browsers display
	 * it on the tab, as well.
	 *
	 * @param   string  $href      The link that is being related.
	 * @param   string  $type      File type
	 * @param   string  $relation  Relation of link
	 *
	 * @return  JDocumentHTML instance of $this to allow chaining
	 *
	 * @since   11.1
	 */
	public function addFavicon($href, $type = 'image/vnd.microsoft.icon', $relation = 'shortcut icon')
	{
		$href = str_replace('\\', '/', $href);
		$this->addHeadLink($href, $relation, 'rel', array('type' => $type));

		return $this;
	}

На вход эта функция получает URL иконки, на выход передаёт параметры генерирования метатегов заголовка функции addHeadLink.

Вызов функции addFavicon находится в том же файле ./libraries/joomla/document/html.php но ниже:

		// Try to find a favicon by checking the template and root folder
		$icon = '/favicon.ico';

		foreach (array($directory, JPATH_BASE) as $dir)
		{
			if (file_exists($dir . $icon))
			{
				$path = str_replace(JPATH_BASE, '', $dir);
				$path = str_replace('\\', '/', $path);
				$this->addFavicon(JUri::base(true) . $path . $icon);
				break;
			}
		}

		return $contents;

Из описания кода этого вызова понятно, что favicon ищется сперва в папке шаблона, если там favicon не найдена, то она ищется в корневой директории сайта. Ну и, если и там её нет, то значит её нет вообще.

Глубже лезть в ядро Joomla я уже не стал, а просто проверил данную гипотезу (смотрим на путь к favicon.ico в 13-й сточке):

1. Сперва имеем в html-коде страницы сайта:

	<link href="/?format=feed&amp;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
	<link href="/templates/protostar/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
	<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
	<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />

2. После того, как файл favicon.ico удалён из директории шаблона, подставляется favicon.ico из корневой директории сайта:

	<link href="/?format=feed&amp;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
	<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
	<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
	<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />

3. Ну и после удаления favicon.ico из корня сайта, мы наконец то свободны от дубля в описании favicon в контейнере <head>, который генерируется строчкой <jdoc:include type="head" /> в файле index.php шаблона сайта:

	<link href="/?format=feed&amp;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
	<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
	<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />

Чего мы и добивались: чтобы прописанный ниже код для сгенерированных иконок не перекрывался с кодом, генерируемым Joomla!

На этом всё. :)

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

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

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

Log in to comment

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

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