Меню Рубрики

Установка иконки в вордпресс

Установка Favicon (фавикон) на WordPress сайт

Привет всем! Фавикон (Favicon) WordPress — как установить/добавить/поставить? Очень легко и просто. Как только вы создали блог/сайт на платформе WordPress, произвели базовую настройку вордпресс пора подумать об установке фавикона (favicon) для сайта. Инструкция: как установить favicon на WP с видео уроком .

Процесс этот не сложный, не стоит откладывать на потом. «Потом» может не наступит ни когда. Favicon или значок сайта — это крошечное изображение, которое отображается в браузере рядом с названием вашего сайта. Это помогает вашим пользователям идентифицировать ваш сайт, а более частые посетители вашего веб-ресурса мгновенно распознают эту маленькую картинку. Это повышает узнаваемость вашего бренда и помогает вам завоевать доверие аудитории.

Установка favicon на сайт WordPress

Возможность загрузки собственной иконки favicon в самом ядре WordPress появилась совсем недавно. Начиная с версии 4.3, вы можете добавить значок сайта из админки WordPress.

Что такое favicon?

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.

Фавиконка для Яндекс

Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример отображения фавиконки в результатах поиска:

Картинка, которая отображается в сниппете в результатах поиска Яндекса

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

Посмотрите на мою иконку блога, я выбрал картинку вордпресс. Раз блог на этом движке и я пишу о WP, то пусть иконка будет соответствующая. А теперь перейдем к делу, к загрузке и установке картинки на WP.

Как установить favicon на WordPress

Для того, чтобы установить фавикон на вордпресс, зайдите в панель управления (консоль). В разделе Внешний вид нажмите Настроить:

Консоль WordPress — настроить свой сайт

Затем, на странице визуальной настройки (Customizer) сайта откройте пункт Свойства сайта:

Настройка сайта — Свойства сайта WordPress

Да чуть не забыл, картинка у вас должна быть уже подготовлена — любой формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP. Рекомендуемый размер изображения значка вашего сайта — не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, а WordPress позволит вам обрезать изображение при его добавлении. Прозрачное или с фоном, без разницы.

Изображение должно быть четким и, как правило, соответствовать изображению и / или содержанию вашего сайта. Файл картинки лучше иметь с таким названием favicon

Если вам нужна картинка WordPress для значка сайта, то официальные находятся здесь — https://wordpress.org/about/logos/ .

В свойствах сайта — Иконка сайта — нажмите Выбрать изображение:

Иконка сайта — Выбрать изображение

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

Иконка вашего сайта вордпресс

Если всё окей, то нажимайте синею кнопку Опубликовать. Откройте свой сайт и проверьте вашу проделанную работу. Я установил прозрачную картинку и у меня иконка сайта в браузере гугла выглядит так:

Фавиконка установленная на сайт WP

Учтите, что многие браузеры (а также поисковые системы) кэшируют favicon-изображения, поэтому изменения могут вступать в силу не сразу. В браузере от Google картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.

Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/тему вордпресс.

Видео — Как установить Favicon WordPress

На этом, дорогие друзья, у меня все. До встречи. Пока, пока!

источник

Плагины WP для установки favicon (иконок) на сайт WordPress

Плагины WordPress для установки favicon

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

Стоит отметить, что с развитием WordPress практически все авторы тем стали добавлять инструмент создания favicon в настройки тем.

На сайте я уже писал статью, как установить favicon сайта WP при помощи вставки кодов в шаблон темы. В этой статье предложу несколько плагинов для создания иконок вашего сайта WordPress.

Читайте также:  Установка крючка на воблеры

Плагин FavIcon Switcher

Страница плагина: https://ru.wordpress.org/plugins/favicon-switcher/ . Данный плагин не тестировался с последними 3 значительными выпусками WordPress.

При помощи плагина FavIcon Switcher вы сможете установить несколько иконок для различных функциональных страниц.

  • Можно поставить favicon по умолчанию на весь сайт,
  • Можно установить отдельную иконку для admin панели,
  • Для страниц с любыми выбранными словами, находящимися в URL страниц.

Количество иконок не ограничено. Работает плагин на основе правил созданных URL match (может найти URL-адрес в тексте, с протоколом или без него). Локализован для русского языка частично. Картинки для иконок загружаются в папку: /wp-content/uploads/favicon/

Установка плагина FavIcon Switcher

  1. На вкладке Плагины→Добавить новый, найти плагин по слову и последовательно нажать на кнопки: Установить и Активировать.
  2. Скачать плагин со страницы плагина в WordPress.org, загрузить скаченный архив на сайт через Добавить плагин→Загрузить в меню «Плагины» и активировать плагин;
  3. Скачать плагин со страницы плагина в WordPress.org. Распаковать архив и загрузить все папки плагина на сайт в папку wp-content/plugins . Затем, активировать плагин в меню Консоль→Плагины→Установленные.

Настройка плагина Favicon Switcher

Для настройки плагина FavIcon Switcher нужно войти на вкладку Плагины→Установленные. Найти строку с плагином FavIcon Switcher и нажать «Настройки».

В настройках плагина есть несколько пунктов для выбора места устанавки фавикона. Первый пункт по умолчанию иконка на весь сайт. В других пунктах можно установить другие иконки для отдельных страниц. Сиснтаксис настроек следующий:

  1. .*\/wp-admin\/.* — favicon для административной панели;
  2. .*category.* -favicon для страниц со словом category;
  3. .*slovo.* — favicon для страниц, в адресе которой есть слово “slovo”.

Плагин All In One Favicon

Официальная страница плагина All In One Favicon на WordPress.org (https://wordpress.org/extend/plugins/all-in-one-favicon/).

Плагин All In One Favicon создает и размещает любые картинки форматов ico, png, gif в качестве иконок вашего сайта. Определены два места размещения иконок: на фронтальной (общедоступной) части сайта и в admin панели сайта.

Загружать картинки для иконок можно как по URL картинки, так и непосредственно с вашего (локального) компьютера. Размер картинки не имеет значение. Плагин русифицирован не полностью. Картинки для иконок загружаются в папку: /wp-content/uploads/Год /Месяц

Год и Месяц в патче это папки загрузки всех фото сайта, если вы поставили галочку в настройках Параметры >>>Медиафайлы.

Устанавливается плагин любым из возможных способов установки плагинов. После установки не забудьте плагин активировать.

Настройка плагина All In One Favicon

Для настройки плагина необходимо войти: Консоль→Параметры→ All In One Favicon. В открывшемся окне загружаем нужные картинки для favicon сайта, и, конечно же, сохранить все сделанные изменения.

Еще плагины WordPress для установки favicon.

Favicon by RealFaviconGenerator

Страница плагина: https://ru.wordpress.org/plugins/favicon-by-realfavicongenerator/

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

Создавайте и настраивайте иконку сайта для настольных браузеров, iPhone / iPad, устройств Android, планшетах Windows 8 и других. За считанные секунды создайте иконку, которая отлично смотрится на всех основных платформах.

Custom Favicon

Страница плагина: https://ru.wordpress.org/plugins/custom-favicon/ . Плагин обновлялся в начале 2015 года и плагин не тестировался с последними 3 значительными выпусками WordPress.

Простой плагин для генерации и добавления пользовательского фавикона для сайта WordPress.

Вывод

Как всегда WordPress предлагает два принципиальных варианта выполнения задачи. В данном случае была задача сделать favicon для сайта. Можно установить favicon вставив код в шаблон сайта (об этом читать в отдельной статье — ссылка вверху) или использовать плагины WordPress для установки favicon.

Свежие плагины

Еще плагины WordPress для установки favicon, протестированный на версии WP 4.9.5.

Genie WP Favicon

Very Simple Favicon Manager

azurecurve Multisite Favicon

источник

Установка иконки favicon на сайт WordPress

Вступление

Неразрывной «спутницей» адреса сайта является картинка расположенная рядом с ним. Это иконка сайта или favicon (favorites icon). Видна иконка в адресной строке открытой вкладки и при добавлении сайта в закладки браузера. Отсутствие иконки сайта делает его менее заметным и неотличимым от других сайтов, особенно в закладках браузера.

Новая установка иконки favicon на сайт WordPress в конце статьи (23-09-2019).

Что в статье

Для установки иконки на сайт WordPress нужно сделать несколько шагов:

  • Сделать иконку (Favicon) на генераторе Favicon;
  • Загрузить Favicon на сервер хостинга в каталог сайта;
  • Написать код с атрибутом rel и явным указанием на размещение Favicon;
  • Вставить код в шаблон сайта.

Как сделать Favicon для сайта WordPress

Для иконки сайта WordPress нужна картинка размером 16×16 пикселя, лучше в формате favicon.ico. Если в шаблоне, при помощи кода, указывать явное размещение иконки в каталоге сайта, то формат Favicona может быть отличным от [.ico].

Читайте также:  Установка андроида на внешнюю флешку

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

Для изготовления «фавикона» существует масса online инструментов. Предложу два из них. Я пользуюсь ими давно, они элементарны в своем исполнении.

FAVICON GENERATOR

Dynamicdrive

Чтобы сделать Favicon, нужно сначала указать нужный размер Favicona, загрузить в генератор любое изображение со своего компьютера и нажать изготовление favicon. Favicon генерируется за секунды, после чего его можно скачать опять на компьютер. Генерируются иконки с именем Favicon.ico.

Favicon готов можно загружать его на сайт WordPress

Сначала попробуем найти в корневом каталоге сайта ранее установленный Favicon. Favicon сайта может располагаться в двух основных местах каталога.

  • Первое место расположения Favicon это корень сайта, непосредственно папка [httpdocs] или [publ_html].
  • При установке стороннего шаблона WordPress Favicon шаблона может размещаться в папке: /themes/НАЗВАНИЕ_ТЕМЫ_WP/images.

Проверяем эти два адреса. Если находим старый Favicon его удаляем или переименовываем.

Загружаем новый Favicon в каталог сайта

Для работы с файлами сайта я пользуюсь FTP клиентом FileZilla. Загрузить Favicon сайта можно в любую папку каталога, а потом прописать место его нахождения в коде. Но наиболее разумны два места загрузки Favicona.

Первое место это непосредственно корневая папка сайта (папка [httpdocs] или [publ_html]). Второе место это папка [image] в рабочей теме вашего сайта. При втором размещении Favicon нужно будет менять каждый раз при смене темы (шаблона) сайта.

После размещения Favicona в каталоге сайта понадобятся следующие коды

При размещении Favicona в корне сайта нужен такой код:

При размещении Favicona в теме сайта нужен такой код:

Этот код можно использовать, если вы хотите сделать отдельную иконку для какого нибудь внутреннего плагина WordPress.

В этих кодах можно изменить название и формат favicon,который вы загрузили в каталог.

Остается последнее вставить прописанный код в шаблон сайта

Авторизуемся в административной панели сайта. В консоли, слева, в вертикальном меню выбираем: Внешний вид →Редактор.

В открывшемся редакторе справа ищем и выбираем шаблон header.php. На странице header.php вставляем написанные коды
внутрь элемента ,после всех уже стоящих кодов

Не забываем сохраняться. Открываем сайт в браузере. Через несколько секунд появляется ваш favicon рядом с названием сайта. Было:

установка иконки favicon на сайт WordPress

Как видно на фото в адресной строке иконка сайта не меняется. Меняется только иконка в закладках и в окне вкладки. Работа по размещению своего favicon (favorites icon), иконки сайта завершены. В итогах статьи отмечу:

  • Следите за совпадением названия и расширения favicon в коде и каталоге;
  • Вставляйте коды
  • после всех уже имеющихся кодов
  • ;
  • Если иконка долго не появляется, очистите кэш вашего браузера (Ctrl+F5 в Chrom).

Еще один вариант добавить одинаковый Favicon на сам сайт и на административную панель

  • Для этого удалите все старые коды с favicon (читать выше);
  • Сделайте в генераторе favicon понравившуюся вам иконку в формате favicon.ico;
  • Иконку favicon.ico загрузите в корневую папку вашего сайта [httpdocs] или [publ_html];
  • Вставьте следующий код в шаблон вашего сайта между тегами и ;
  • Для вставки кода войдите из консоли сайта WP в редактор: Консоль→Внешний вид→Редактор→header.php/;
  • Найдите тег и до тега вставьте код;
  • Не забудьте сохраниться.

Всё! Установлен одинаковый favicon для основной части сайта и для консоли.

Примечание: Анимированнная иконка для сайта (формата .gif) читается только последними версиями Firefox. Вставляется внутрь элемента ,также как и коды для favicon:

Дополнения

Начиная с версии WordPress 4.3 в ядре сайта появилась функциональность favicon. Теперь не нужно работать с кодом сайта или использовать сторонние плагины для добавления иконки сайта. Во всех темах WordPress установка (замена) фавикона (значок сайта) есть по умолчанию.

Чтобы установить фавикон сайта:

  • Авторизуйтесь в административной панели сайта;
  • Войдите на вкладку Внешний вид>>>Темы или Внешний вид>>>Настройки;
  • В первом варианте выберите рабочую тему и перейдите в её настройки;
  • На странице настроек темы откройте вкладку «Свойства сайта» и загрузите иконку сайта минимального размера 512 на 512 пикселов;
  • Сохранитесь.

источник

Как добавить в WordPress красивые иконки (иконический шрифт)

» data-medium-file=»https://wilhard.ru/wp-content/uploads/2017/02/icons-300×185.jpg» data-large-file=»https://wilhard.ru/wp-content/uploads/2017/02/icons.jpg»/>Чтобы добавлять в текст красивые иконки (такие например: , , , , ), необходимо установить в WordPress какой-нибудь так называемый иконический шрифт. Такие иконки и называются иконическим шрифтом.

Чтобы начать добавлять иконки в ваши посты, надо сделать следующее: 1.Установите плагин Better Font Awesome, 2. Ищите нужные иконки на страничке Font Awesome, затем кликайте на нужную иконку и на страничке иконки копируйте ее HTML-код и вставляйте в HTML-код своего поста. Это все!

Читайте также:  Установка лобовых стекол в могилеве

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

Самые популярные иконические шрифты

Самый популярный шрифт с иконками — это Font Awesome, его мы и будем устанавливать. Другие известные мне иконические шрифты, это: Genericons, IcoMoon, Linearicons.

И есть еще один иконический шрифт, который называется

Dashicons

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

Работу этого кода я не проверял, нашел его здесь: Enable Dashicons in WordPress Frontend. Думаю, что все должно работать, так как подобный же код я видел и на других авторитетных сайтах.

— Какого черта? — ругаюсь я, — ведь все было бы так просто. Можно было бы просто вставлять иконки Dashicons в посты и все. Я стараюсь по возможности не трогать functions.php, поэтому лучше уж я установлю плагин для Font Awesome. Надеюсь, что в одном из обновлений WordPress разработчики добавят возможность вставлять Dashicons в посты.

Как установить иконки Font Awesome в WordPress

Есть два способа. Добавить код или установить плагин Better Font Awesome. Я буду использовать плагин, но можно установить Font Awesome, добавив следующий код в functions.php:

function wpb_load_fa() <
wp_enqueue_style( ‘wpb-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ );
>
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’ );

Как добавлять иконки Font Awesome в тексты WordPress

Итак, вы установили плагин Better Font Awesome. Как теперь добавлять иконки в посты? Есть два способа:

Использовать кнопку «Вставить иконку»,

которая появится в редакторе WordPress после установки плагина Better Font Awesome и будет выглядеть так:

Этот способ подойдет вам, если вас устроят серые иконки маленького размера. Но мне он не очень понравился, так как в результате в HTML вставляется такой вот код в квадратных скобках: icon name=»apple» > в котором «apple» — это название иконки, а еще добавлено два пустых класса. Т.е. этот плагин добавляет избыточный код, а еще, чтобы поменять цвет и размер иконки, необходимо задавать класс в таблице стилей, что сложно. Поэтому я не использую этот способ, а использую следующий способ попроще:

Вставлять HTML-код с названием иконки

Если мы хотим добавить иконку , например, то сначала находим ее на сайте Font Awesome, а затем кликаем на иконку и попадаем на страничку, посвященную этой иконке: fontawesome.io/icon/apple. На этой страничке написан HTML-код иконки:

Надо просто скопировать его и вставить в HTML-код нашей странички. Это действительно самый легкий способ!

Как изменить размер иконки Font Awesome

Чтобы изменить размер иконки Font Awesome, необходимо добавить код размера в HTML-код иконки (обязательно в то же место, как указано ниже — перед закрывающими кавычками class):

fa-3x » aria-h > , где

  • fa-lg — 33% увеличение;
  • fa-2x — двухкратное увеличение;
  • fa-3x — трехкратное увеличение;
  • fa-4x — четырехкратное увеличение;
  • fa-5x — пятикратное увеличение.

Таким образом, добавив код fa-3x, мы увеличили нашу иконку в три раза: .

Как изменить цвет иконки Font Awesome

Для изменения цвета нашей иконки добавим в код иконки код стиля с указанием цвета:

В качестве кода цвета можно использовать любой из кодов цветов, указанных на сайте: htmlcolorcodes.com/color-names/, при этом можно использовать как названия цветов на английском языке, так и их коды, указанные там же.

Таким образом, после добавления style=»color:green» наша иконка стала зеленой: .

Дополнительные возможности иконок Font Awesome

С иконками Font Awesome можно сделать еще много красивых и интересных вещей. Какие еще есть возможности, можно посмотреть по этой ссылке: fontawesome.io/examples/.

Заключение

С одной стороны, когда разберешься, то не так уж все и сложно, а с другой стороны, очень хотелось бы, чтобы появилась возможность просто копировать и вставлять нужные иконки, а потом менять их размер и цвет так же, как размер и цвет обычного шрифта без правки HTML-кода. Может быть, это реализовано в одном из плагинов? А может, вы знаете более простой способ добавлять иконки? Если да, то поделитесь, пожалуйста, в комментариях.

источник