Бурный рост числа владельцев современных смартфонов вынуждает владельцев сайтов внедрять дополнительные инструменты для оптимизации своих сайтов и мониторинга мобильных посетителей. Все это делается с единственной целью: чтобы ваш сайт корректно отображался на экране пользовательского смартфона в зависимости от типа устройства, диагонали экрана и т.д.

Есть несколько способов для таргетирования пользователей, и в этом посте как раз предлагаю поговорить о настройке внешнего вида вашего сайта для тех, кто заходит на сайт при помощи iPhone.

Шаг 1: Пропишите функцию

Вам нужно прописать отдельную функцию и убедиться в том, что вы вставите ее перед закрывающим тэгом </head>. В темах по умолчанию TwentyEleven и TwentyTen, используется функция body_class(); в файле header.php для динамического добавления классов к стандартному тэгу <body>.

Например, если вы просматриваете отдельно взятую страницу на WordPress-сайте, <body> — это пример класса body для отдельного поста или страницы, который позволяет вам динамически изменять стиль оформления для определенных элементов дизайна при помощи CSS. Если в вашей теме не используется тег body_class(); (даже если он и должен бы применяться в этой теме оформления), возьмите и вставьте его, это будет выглядеть примерно вот так:

<body <?php body_class(); ?>>

У WordPress есть ряд глобальных переменных, которые можно применять для того, чтобы определить, какой браузер используется, включая переменную $is_iphone. Мы будем использовать эту переменную наряду с системой класса body для WordPress. Чтобы реализовать эту задачу, сначала мы должны написать функцию:

<?php
function detect_iphone($iphone) {
	global $is_iphone;
	if($is_iphone) $iphone[] = 'iphone';
	return $iphone;
}
add_filter('body_class','detect_iphone');
?>

Вот так выглядит наша функция. Для начала назовем нашу функцию "detect_iphone", чтобы мы могли легко отличить ее от остальных наших функций на сайте. Кроме того, вы заметите, что мы присвоили значение "global" нашей переменной $is_iphone. Это сделано потому, что переменная задана за пределами нашей функции. Потом мы "указываем" WordPress, что если условие выполняется (если пользователь открывает наш сайт при помощи своего iPhone), то надо добавлять значение "iphone" к нашему классу для body. Возьмите и вставьте сниппет кода над закрывающим тегом </head> в файле header.php

Шаг 2: Задайте для iPhone отдельный шаблон CSS

Эта функция дает нам возможность показа настроенного дизайна специально для владельцев iPhone, которые с помощью смартфона смотрят наш сайт, и для таргетирования мы применяем CSS с нашим созданным классом "iphone". К примеру,  мы можем включить такой код в нашу таблицу стилей для того, чтобы отображать другое оформление для заголовков первого уровня при просмотре сайта на iPhone:

h1 {
font-size: 30px;
line-height: 110%;
text-decoration: underline;
}

.iphone h1 {
font-size: 35px;
text-decoration: none;
color: #FF0000;
}

Число способов и методов оптимизации современного сайта на базе WordPress для экранов мобильных телефонов продолжает расти, и я надеюсь, что сегодняшний небольшой "хак" для WordPress вам помог понять один из подходов к оптимизации вашего сайта для просмотра его на смартфоне.

Источник: WP.TutsPlus.com

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

1 комментарий

сначала новые
по рейтингу сначала новые по хронологии