Кнопки добавления в закладки

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

Для добавления таких к страницам движка WordPress есть рекомендуемый плагин, однако я решил изобрести велосипед пойти другим путем, а именно: «максимально упростить». Результатом стало решение, имеющее ряд серьезных плюсов:

• абсолютная настраиваемость
• отсутствие PHP‑скриптов и запросов к БД
• быстрая загрузка
• отсутствие привязки к CMS

Суть метода

Самое простым у универсальным решением в данном случае является вставка в шаблон кода этих самых кнопок.

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

• google.com
• yandex.ru
• bobrdobr.ru
• memori.ru
• moemesto.ru
• linkstore.ru
• rumarkz.ru
• 100zakladok.ru
• del.icio.us
• technorati.com

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

Предлагаемый код – самые обычные ссылки, в которых адрес добавляемой в закладки статьи заменен на абсолютный адрес материала, а описание – на название записи, или страницы.

Как использовать

Единственным требованием к CMS, в данном случае, является её возможность выводить абсолютный адрес страницы.

Вставлять код кнопок нужно внутри петли WordPress.

Пример вставки кнопок добавления в закладки в тему WordPress по умолчанию: ищем в файле wp–content\themes\default\single.php следующий код:

<?php the_content('<p class="serif">'. __('Read the rest of this entry &raquo;', 'kubrick'). '</p>'); ?>

И после него вставляем код, собствеено, кнопок:

<div class="bkmz">
 <span>Добавить в закладки: </span>
 <ul>
   <li>
   <a class="google" rel="nofollow" title="В закладки на Google" href="http: //www.google.com/bookmarks/mark? op=edit&bkmk=<?php the_permalink() ?>&title=<?php the_title(); ?>“>
     <span>google.com</span>
   </a>
 </li>
 […] здесь — остальные кнопки (см. файл bookmarks.html)
 </ul>
</div>

В примере оставлен только код ссылки для закладок Google. Остальные пункты маркированного списка выглядят очень похоже (см. подробнее тут). Код семантически верен, хорошо выглядит при отключении стилей. При желании, можно добавить заголовок статьи во всплывающую подсказку.

Каждому пункту должна соответствовать иконка, но вместо 10 разных файлов лучше использовать один – это уменьшит количество запросов к серверу, увеличит скорость загрузки. Этот единый файл выглядит так:

Далее, с помощью CSS прячем весь текст, задаем нашу картинку в качестве фона, а для каждого пункта маркированного списка, задаем смещение фоновой картинки по горизонтали – первый пункт смещения не имеет, второй – на 16 пикселей влево (каждая картинка иконка имеет размеры 16 на 16 пикселей), третий – на 32 и так далее.

Скачать

В прилагаемом архиве находятся:

• HTML с включенным в него CSS
• файл с картинками (ico‑bkms. gif)
• PSD файл со слоями (для изменения и добавления прочих кнопок (все кнопки любовно вырезаны из фона))

19 апреля 2008
Категория: Web–разработка
Метки: WordPress, закладки, кнопки
Комментировать ↓