Меню Рубрики

Установка иконки для wordpress

Установка 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

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

источник

Как добавить в 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 какой-нибудь так называемый иконический шрифт. Такие иконки и называются иконическим шрифтом.

Читайте также:  Установка порта usb на ноутбуке

Чтобы начать добавлять иконки в ваши посты, надо сделать следующее: 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-кода. Может быть, это реализовано в одном из плагинов? А может, вы знаете более простой способ добавлять иконки? Если да, то поделитесь, пожалуйста, в комментариях.

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

источник

Как быстро и качественно установить favicon на WordPress: 3 подробных метода и пошаговые инструкции

Стандартная функция WordPress в админке

В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.

Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.

Откроется новая вкладка, находим «Выберите значок сайта».

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

Рекомендуется использовать размер не менее 512 на 512 пикселей (px).

  • Выбираем откуда загрузим изображение с жесткого диска или ранее доступных в библиотеке
  • Отмечаем необходимое
  • Жмем Выбрать

Появится окно в котором настраиваем отображение, область квадратная по умолчанию. Изменить размер и нажать обрезать.

В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.

WordPress загрузит и сгенерирует несколько форматов для разных систем и браузеров, в зависимости откуда пришел посетитель:

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это «Favicon by RealFaviconGenerator» , особенность заключается в том, что он проставляет фото для всех устройств:

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим «Выберите из библиотеки мультимедиа».

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

Далее нажимаем кнопку Генерировать.

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку «Continue with this picture».

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

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

Даю код, который нужно добавить в раздел head в активной теме.

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

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

Важный момент, что большинство браузеров могут сами найти в корне сайта favicon, только необходимо чтобы он был в формате ico. Но не всегда срабатывает, потратьте 5 минут времени и установите элемент как надо. Полезно знать как вставлять шорткоды в темы. Чтобы увидеть все наглядно предлагая посмотреть мое видео.

Где хранится иконка

Задают вопросы где хранится иконка на сервере. Ответ прост, если размещали с помощью первых 2 методов, то расположение будет такое wp-content/uplouads .

папка на хостинге со всеми фото

В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.

Яндекс не видит значок

После внесения правок любым способом, описанных в статье, пользователи хотят наблюдать значок в выдаче поисковиков. Но Яндекс и Гугл не сразу обновят информацию, потому что это связано с индексированием ресурса. Смотрите когда у поисковых систем апдейты и следите за изменениями в выдаче.

Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в яндекс вебмастере. Время изменений в выдаче от 5 до 90 дней.

Переобход страниц в Яндексе

На этом урок закончу, потому что ответ на вопрос как установить 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

источник