Как добавить иконки в любой виджет вордпресс. Установка favicon на WordPress. Плагин FavIcon Switcher

Прочие модели 02.03.2019
Прочие модели

На днях решил подробно разобраться с куками: как работают, как устроены, как использовать. Для окончательного понимания было принято решение скачать плагин для работы с куками на Jquery. Ссылочка на плагин прилагается Cookie Plugin for jQuery.

Начну пожалуй с теории. Сookie являются составной частью протокола HTTP. От сервера клиенту cookie передаются в заголовке HTTP-ответа сервера. Точнее - в поле Set-Cookie этого заголовка. Поле Set-Cookie может содержать данные нескольких кук. Также в заголовке HTTP-ответа может содержаться несколько полей Set-Cookie. Формат поля Set-Cookie заголовка HTTP-ответа сервера приведен далее:

Set- Cookie: < name>=< value> [ ; < name>=< value> ] ...
[ ; expires=< date> ] [ ; domain=< domain_name> ]
[ ; path=< some_path> ] [ ; secure] [ ; httponly]

Видно, что строка Set-Cookie заголовка ответа сервера состоит из последовательности подстрок, разделенных символами ";" (точка с запятой). Вначале следуют одна или несколько пар =. Каждая из этих пар соответствует одной куке с именем name и значением value. Потом следуют атрибуты, с которыми устанавливаются куки, содержащиеся в данном поле Set-Cookie. Далее приведено описание значений атрибутов cookie.

  • Атрибут expires. Задается в формате: expires= . Определяет дату и время окончания действия устанавливаемых данным полем Set-Cookie заголовка HTTP-ответа сервера cookie. Значение должно являться строкой, задающей время по гринвичскому меридиану (GMT) в формате "DAY, DD-MMM-YYYY HH:MM:SS GMT" (например "Tue, 28 Feb 2006 12:41:04 GMT"). После истечения срока действия cookie удаляются браузером. Если атрибут expires не задан (время действия cookie не установлено), cookie удаляются при окончании работы браузера. Такие cookie называют "сессионными" (действуют только до окончания текущей сессии).
  • Атрибут domain. Задается в формате domain= . Определяет окончание множества имен доменов, в которых действительны устанавливаемые cookie. К примеру, если при установке cookie, значение равно.codeguru.ru, установленные cookie будут отсылаться серверу при запросе документов с сайтов, расположенных на доменах web.codeguru.ru, forum.codeguru.ru, и.т.д. При этом дополнительным условием отсылки cookie будет являться проверка значения атрибута path - см. далее. Атрибут domain весьма полезен. Он может использоваться, например, для организации единой системы аутентификации пользователя для различных web-сервисов, расположенных на различных поддоменах. Например, на основном сайте и на форуме сайта. Во избежание неконтролируемой отсылки cookie, значение не должно содержать только имя зоны (например, .com, .net.ru, и.т.д.).
  • Атрибут path. Задается в формате path= . Определяет множество URL, для которых действительны устанавливаемые cookie. Например, если значение при установке cookie равно /temp, то установленные cookie будут отсылаться при запросе документов, включая пути /temp000 и /temp/temp.htm. Если значение path не определено, в качестве него принимается путь к ресурсу, при запросе которого были установлены cookie.
  • Атрибут secure. Это атрибут логического типа. Указание атрибута secure в поле Set-Cookie заголовка HTTP-ответа сервера делает устанавливаемые cookie защищенными. Такие cookie должны отсылаться на сервер только по протоколу https. HTTPS - это, практически, тот же протокол http, только данные между клиентом и сервером передаются через защищенное (данные шифруются) SSL (Secure Socket Layer) соединение.
  • Атрибут HttpOnly. Это атрибут логического типа. Указание атрибута HttpOnly в поле Set-Cookie заголовка HTTP-ответа сервера делает устанавливаемые cookie не доступными клиентским скриптам (это применяется из соображений безопасности).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 jQuery.cookie = function () {
var url = location.href ; // путь для устанавливаемых кук
this .cookieID = "cookie" ; // имя для переменной, которая будет содержать наши куки

this .set = function (options) { // Функция для установки кук
var cookieContent = "" ; // инициализируем переменную для цикла for
var filterProperties = { "cookieID" : 0 , "set" : 1 , "get" : 2 } ; // создаем объект с известными значениями
options = options || { } ; // если переданы пользовательские переменные, используем их. По умолчанию ничего не устанавливаем

for (var property in this ) { // перебираем все элементы полученного объекта
if (! (property in filterProperties) ) { // вытягиваем все элементы кроме тех, которые содержатся в filterProperties
if (this [ property] === null ) this [ property] = "" ; // если имеем ноль заменяем на ""
cookieContent += (property) + ":" + (this [ property] ) + "," ; // записываем имя переменной + значение переменной
}
}
cookieContent = cookieContent.substring (0 , cookieContent.length - 1 ) ; // удаляем последнюю запятую
var expires = "" ; // инициализируем переменную
if (options.expires && (typeof options.expires == "number" || options.expires .toUTCString ) ) { // если у нас есть какое ли значение то
var date; // создаем переменную для даты
if (typeof options.expires == "number" ) { // если это число
date = new Date() ; // текущую дату
date.setTime (date.getTime () + (options.expires * 24 * 60 * 60 * 1000 ) ) ; // устанавливаем время
} else {
date = options.expires ; // пустое значение; куки будут храниться до конца сессии
}
expires= "; expires=" + date.toUTCString () ; // устанавливаем время жизни кук
}
var path = options.path ? "; path=" + (options.path ) : "" ; // устанавливаем url для которых действительны устанавливаемые куки
var domain = options.domain ? "; domain=" + (options.domain ) : "" ; // устанавливаем мия сайта
var secure = options.secure ? "; secure" : "" ; // указываем, следует ли шифровать данные или нет
document.cookie = [ this .cookieID , "=" , encodeURIComponent(cookieContent) , expires, path, domain, secure] .join ("" ) ; // делаем из массива строку и записываем ее в куки
return true ;
} ;

this .get = function () { // функция для получения кук
var cookieValue = "" ;
if (document.cookie && document.cookie != "" ) { // если куки доступны и существуют
var cookies = document.cookie .split (";" ) ; // разбили и получили массив
for (var i = 0 ; i < cookies.length ; i++ ) { // выполняем перебор массива
var cookie = jQuery.trim (cookies[ i] ) ; // обрезали все отступы
if (cookie.substring (0 , this .cookieID .length + 1 ) == (this .cookieID + "=" ) ) { // находим слово cookie
cookieValue = decodeURIComponent(cookie.substring (this .cookieID .length + 1 ) ) ; // выдернули все значения
break ;
}
}
var properties = cookieValue.split ("," ) ; // разбили все значения по, в массив
for (var i = 0 ; i< properties.length ; i++ ) { // перебрали массив
var property = properties[ i] .split (":" ) ; // разбили каждый элемент и
this [ property[ 0 ] ] = property[ 1 ] ; // добавили свойства к объектам
}

}
return true ;
} ;
return this ;
} ;

HTML будет выглядеть таким вот образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

ul li .cat-item-16{ background: url("images/analitia.jpg") no-repeat;; } .top_comm_wid > ul li .cat-item-12{ background: url("images/ps.jpg") no-repeat;; } .top_comm_wid > ul li .cat-item-7{ background: url("images/tech.jpg") no-repeat;; }

Top_comm_wid > ul li .cat-item-16 {

Top_comm_wid > ul li .cat-item-12 {

background : url ("images/ps.jpg" ) no-repeat ; ;

Top_comm_wid > ul li .cat-item-7 {

background : url ("images/tech.jpg" ) no-repeat ; ;

Это 3 стиля к разным рубрикам. Как видим, то в каждом стиле сначала идет класс для тегов списка в боковой колонке (.top_comm_wid > ul li).

  • .top_comm_wid - класс, с помощью которого прописаны стили для виджета в боковой колонке;
  • ul li - тег списка (ненумерованного).

Таким образом, мы должны выяснить общий класс для списка ссылок в рубриках и создать новые стили для каждой, дописав индивидуальный класс с конкретным идентификатором каждой категории. Далее дописать путь к картинке, используя свойство "background". Все достаточно просто.

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

  • Google chrome - просмотр кода элемента;
  • Mozilla Firefox - исследовать элемент;
  • Opera - проинспектировать элемент.

Просто кликните правой кнопкой мыши на необходимую ссылку и выберете данную функцию в своем браузере. Инструмент исследования элемента даст вам панель с исходным кодом, где сразу выделит нужную строку, в которой и сможете узнать класс стилей, который в дальнейшем прописываем в файле стилей. В моем случае это класс "cat-item-ID рубрики" (см. скриншот выше).

И так к каждой рубрике. Затем вы к стилям списка в боковой колонке добавляете данный класс оформления и получаете на выходе что-то наподобие моих стилей выше. В принципе, если шаблон у вас обычный, не созданный на заказ, то индивидуальный класс будет такой же. Отличаться будет только класс для боковой колонки, который прописан в самом начале.

Также нужно загрузить изображения иконок для каждой рубрики в папку images внутри шаблона оформления. Теперь стоит вывести картинки для отображения. В моем случае это выглядит так.

Top_comm_wid > ul li .cat-item-16{ background: url("images/analitia.jpg") no-repeat;; }

Top_comm_wid > ul li .cat-item-16 {

background : url ("images/analitia.jpg" ) no-repeat ; ;

Сначала идет общий класс списка ul li в боковой колонке (.top_comm_wid > ul li), затем индивидуальный класс с идентификатором рубрики (.cat-item-16). Внутри стилей прописываем путь к изображению. В моих стилях путь к картинке прописан с учетом того, что внутри шаблона имеется папка images, в которую я все и загружал. Если папка у вас называется по другому, то придется изменить путь к ней.

Надеюсь, что у вас все получится создать без проблем. Если вдруг возникнут проблемы, то я всегда рад помочь в комментариях. Жду ваших вопросов.

Таким же образом можно добавить картинки и к пунктам меню, которые также имеют свои идентификаторы.


Принцип аналогичен:

  • Узнаем общий класс для списка в меню;
  • Узнаем индивидуальный класс с ID каждому пункту;
  • Задаем стили для рубрики со свойством background, где указываем путь к иконочному файлу.

    • Чем мне данный способ не нравится, так это тем, что иконки не кликабельны. Это связано с самой версткой большинства шаблонов, где кликабельна только ссылка на рубрику. Остальная же область, где находится ссылка - не кликабельна.

    Ваш шаблон может быть как раз таким, что вся область ссылки на рубрику будет кликабельна. Тогда и иконка будет кликабельна. В моем случае это не так.

    В плагине же совсем другая ситуация. Собственно, к нему и переходим.

    Плагин Category & Page Icons

    Судя по названию, вы должны были понять, что плагин позволяет добавить иконки не только к рубрикам, но и к пунктам меню, что делает дизайн еще боле уникальным.

    Скачиваем плагин с официальной страницы.

    Устанавливаете его, активируете и сразу переходим к настройкам.

    Тут нужно выбрать размер иконок до которого они будут сжиматься, если вдруг вы загрузите сильно большие изображения. По умолчанию стоит сжатие до размера 28х28 пикселей. Можете изменить это значение, если вам нужен меньший размер.

    Также можно выбрать путь к папке, в которую будут сохраняться все иконки. Если вам нужен будет доступ к ним на хостинге, то можете изменить путь. Я же не вижу в этом надобности, поэтому ничего не менял.

    Жмете на кнопку "Выберите файлы" и вбираете все нужные иконки. Далее они быстро загрузятся и появятся в списке ниже, как у меня на скриншоте. Они будут доступны в оригинальном размере, а также в уменьшенном, если уменьшение было произведено.

    Как видим, имеется выбор, как оригинального размера, так и уменьшенного. Параметр уменьшения мы ставили в настройках ранее.


  • Назначить иконки для пунктов меню;
  • Назначить иконки для категорий.


    • Выбор можно сделать, как иконки оригинального размера, так и уменьшенного. Естественно, если все ваши конки вы загружали в разных размерах, то выбирайте уменьшенный вариант, чтобы в конечном итоге они имели одинаковый размер.

    Я изначально подготовил все иконки с одинаковым размером, поэтому выбрал оригинальные.

    После выбора обязательно сохраните настройки, нажав на кнопку "Сохранить изменения" в самом низу страницы их выбора.

    Управление плагином Category & Page Icons не вызывает никаких сложностей и я бы с радостью его оставил у себя на сайте, так как все делается в 2 клика. Но пришлось сделать все руками, так как при активном плагине не работает . Какой-то конфликт скриптов.

    На этом все, ребята. Надеюсь, что вы со всем справились и мои материалы помогли вам. Если что, обращайтесь в комментариях. Чем смогу, помогу.

    Кстати, а какой способ вы выбрали? Напишите, пожалуйста, в комментах ниже.

    Спасибо все за внимание. Жду вас в других материалах. До встречи.

    С уважением, Константин Хмелев!



    Рекомендуем почитать