n-wp.ru — блог о WordPress
Как добавить favicon сайтов к внешним ссылкам, ведущим на них | n-wp.ru

Как добавить favicon сайтов к внешним ссылкам, ведущим на них

Я уже писал о том, как визуально выделить внешние ссылки — решение для современных браузеров и способ, работающий в старых версиях Internet Explorer. Хочу поделиться еще одним способом, являющимся кроссбраузерным и более гибким. В нем используются скрипты jQuery, и он удобен тем, что к ссылкам, ведущим на сайты, добавляется не стандартная иконка, а favicon этих сайтов. Таким образом ссылки получаются более узнаваемыми.

Как добавить favicon сайтов к внешним ссылкам, ведущим на них

Убедитесь, что у вас подключена библиотека скриптов jQuery (Как подключить jQuery). После этого откройте файл header.php используемой вами темы, и добавьте в него код скрипта:

<

Если у вас в тексте есть ссылка, указывающая на внешний сайт, то скрипт находит на этом сайте favicon, и выводит его после ссылки. Если же скрипт не находит favicon, то отображается стандартная иконка, указанная в строке 10. В той же строке кода вы можете в скрипте изменить размер иконки ссылки - <

. Чтобы не загромождать код файла header.php, можно этот скрипт записать в отдельный файл. Вот сжатый код скрипта:

Создайте пустой текстовый файл jquery.favicons.js, и запишите в него этот код. После этого перепишите файл jquery.favicons.js в папку с используемой темой, например, в папку js. После этого вам остается только подключить скрипт одной строчкой, вставленной в файл header.php:

Не хотите ничего создавать и переписывать? Да нет проблем - качайте и подключайте!

Пользуйтесь с умом!

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

9 комментариев

  • Спасибо большое!

    Для тех кто предпочитает, чтобы favicon выводился ПЕРЕД ссылкой — нужно заменить

    на

  • Скрипт, конечно бы желательно модицифировать.

    Т.к. при ссылке даже на такого сайто держателя, как Microsoft есть большой шанс favicon не получить.

    К примеру вот: пример
    ссылка на favicon:

    Может получится что-то сделать?

  • Ненавижу холивары.
    Но попробовав открыть эту страницу в двух браузерах IE 9 (дома и на работе Win 7 x64 и Win 7 x32) я вижу одну и ту же картину
    [img]http://bafff.ru/blog/wp-content/uploads/2011/09/holywar.png[/img]

    В отмеченном месте должен быть значок WordPress… А у вас всё корректно?

  • А можете добавить максимальное время выполнения скрипта? А то если сервер с которого пытается получиться favicon недоступен — можно натолкнуться на различные глюки. К примеру долгое время не передаётся управление синтакс хайлайтеру, из-за чего код выглядит не так, как нужно…

/* ]]> */