Главная » Wordpress » Как сделать на сайте WordPress кнопку добавить в избранное
Как сделать на сайте WordPress кнопку добавить в избранное

Как сделать на сайте WordPress кнопку добавить в избранное

Привет всем посетителям блога history-of-blog.ru. Данная статья будет посвящена одной необычной кнопке, кнопке благодаря которой любой посетитель сайта сможет добавить Ваш сайт в избранное браузера. Так же здесь будет рассмотрен более усложненный вариант, благодаря которому посетитель сможет добавить конкретную страницу со статьей в закладки браузера.Как сделать на сайте WordPress кнопку добавить в избранное

Кнопка “Добавить сайт в Избранное”

Результат:

Подобную кнопку лучше всего размещать таким образом, чтобы она всегда была видна на странице. Это можно реализовать например вот так:Добавить в закладки

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

Как осуществить на WordPress:

  • 1. Первое что нужно сделать – это загрузить картинку на хостинг. Осуществить это можно через Панель управления хостингом, либо через FTP. Все что нам надо – это адрес картинки. У меня он выглядит вот так: http://history-of-blog.ru/img/bookmark.png – можете скачать по этой ссылке картинку с надписью “Добавить в закладки”.
  • 2. Теперь нам нужно вставить картинку в нужное место. Для этого нужно отредактировать файл header.php. Открываем на редактирование этот файл и сразу после открывающегося тега <body> вставляем этот код (в котором заменяем фразы “Ссылка на главную страницу” и “Название блога”, а так же “Адрес до картинки”):
<div class="book"><a title="Название блога" onclick="window.external.AddFavorite('Ссылка на главную страницу','Название блога'); return false;" href="Ссылка на главную страницу" rel="sidebar"><img src="Адрес до картинки" alt="" width="22" height="151" /></a></div>

Код кнопки

  • 3. Внимательные читатели наверняка заметили что саму кнопку мы облачили в div контейнер под названием book, теперь нам необходимо прописать для него стили. Для этого открываем файл style.css и в самом конце добавляем следующие строки:
.book {
height: 151px;
width: 22px;
padding-left: 0px;
position: fixed;
top: 45%;
left: 0;
z-index: 5;
}

На установка кнопки добавить в избранное закончена! Давайте теперь рассмотрим другой вариант.

Кнопка “Добавить в закладки” определенную запись WordPress

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

Результат:

Можно добавить кнопку прямо в блок соц-кнопок, а можно вынести ее отдельно. Например вот так:Добавить страницу в избранное

Кликнув по звездочке пользователю предложат сохранить данную страницу со статьей в закладки. Конечно картинку можно заменить на свою, так же можно реализовать данный функционал при помощи текстовой ссылки, а не картинки.

Как реализовать:

  • 1. Первый пункт абсолютно такой же. Нам нужен адрес картинки, например: http://history-of-blog.ru/img/dobait.png. Можете воспользоваться этим, а можете закачать картинку к себе на хостинг и использовать свой путь до картинки.
  • 2. Теперь вставляем надпись “Понравилась статья? Добавь в закладки браузера” и звездочку в нужное место в шаблоне. Для этого редактируем файл single.php. В нужное место нужно вставить следующий код (если используете свою картинку – не забудьте поменять адрес):
<div class="izbran">Понравилась статья? Добавь в закладки браузера:
<a title="<?php the_title(); ?>" onclick="window.external.AddFavorite('<?php the_permalink(); ?>','<?php the_title(); ?>'); return false;" href="<?php the_permalink(); ?>" rel="sidebar"><img src="http://history-of-blog.ru/img/dobait.png" alt="" width="50" height="50" /></a></div>
  • 3. Открываем файл style.css и в самом конце прописываем стили:
.izbran {
text-align:center;
font: normal 20px "Verdana";
text-shadow: 1px 1px #ddd;
padding-top:10px;
}

Теперь при клике на звездочку пользователю будет предложено добавить страницу со статьей в избранное.

Первый и второй вариант отличаются адресами страниц. Если в первом случае мы конкретно указываем страницу, то во втором мы указываем стандартные переменные WordPress, которые отвечают за ссылку страницы записи и ее title (название). Точно такой же прием я использовал при вставке кнопки Твитнуть в анонсы статей.

Совместимость с браузерами

Мы используем атрибут rel=sidebar, который к сожалению поддерживают не все браузеры. Данная кнопка Добавить в избранное отлично работает в Опере и Мазиле, но не работает в Google Chrome (в нем при нажатии на кнопку нас лишь перенаправляют на указанную ссылку, а не предлагают сохранить ее в закладках).

Комментировать через ВКонтакте:
Отзывов к посту "Как сделать на сайте WordPress кнопку добавить в избранное" уже 45:
  • Вадим | 10.07.2012 в 11:01

    Как то не придаю таким дополнениям особого внимания. Люди надо, сами в браузере добавят в закладки. Читал как то опрос, дак многие вообще против не то, что добавления в закладки браузера, против всех социальных кнопок, ссылаясь на их загруженность. Хотя тут дело администратора и посетитель будет сам подстраиваться)))

    • admin | 10.07.2012 в 11:10

      “Люди надо, сами в браузере добавят в закладки” – абсолютно согласен, поэтому и убрал с блога – как только протестил. Но кнопочка интересная, как и сам атрибут с помощью которого она делается. Получается что Chrome так же не знает команды rel=”nofollow” – хорошо что этот атрибут только лишь для ПС.
      А вот социальные кнопки – обязательно должны быть :smile:

      • Gotvald | 07.04.2014 в 12:13

        А давайте быть ближе к людям и поможем им. Эта кнопочка как раз для тех людей, которые забыли добавить в “избранное”, а потом будут жалеть, что не сделали этого. Дополнительный механизм направленный на удобство работы пользователя с сайтом, про эффективность сего механизма пока умолчу – данных нет, но полезность от нее точно есть.

  • Татьяна | 10.07.2012 в 16:51

    Все понятно кроме фразы в комментах “Люди надо, сами в браузере добавят в закладки”так и хочется спросить какой язык учил в школе?”))) Ну да ладно. Так почему ты убрал Антоша и звездочку и панельку боковую? Мне например такая закладка больше нравится чем выпрыгивающее окно вконтакте, где тематика совершенно противоположная моему контенту. Я конечно сама часто добавляю в закладки браузера разные статьи, но тут вроде не сильное давление на читателя если где-то сбоку, как напоминание будет висеть такая табличка….

    • admin | 10.07.2012 в 17:17

      :x Ну я понял что он хотел сказать: “Если людям надо – они сами добавят страницу в закладки”.
      Просто если кто и посещает этот блог, те уже не только могут добавить сайт в закладки – те могут большее ;-) так что как добавить сайт в закладки точно догадаются.
      А вот на каких-нито развлекательных порталах вполне можно использовать для обращения внимания на свой сайт

    • Владимир | 10.07.2012 в 17:41

      Да ладно, напоминание. Если я чувствую, что статья мне очень пригодиться в дальнейшем, то я и без напоминания добавлю в закладки. А если уж забыл, то значит и не нужен был мне этот материал. ;-)

  • Евгений | 10.07.2012 в 17:39

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

    • Татьяна | 10.07.2012 в 17:43

      Жень парадокс, люди настолько ушли из реала в интернет что забыли русский язык наглухо! Я уже привыкла к заковыристым репликам Гриши, но блин ёмаё… тут просто абздец полный)))) Простите, но даже русских слов не хватает чтоб описать диагноз :lol: :roll:

      • Владимир Жданов | 13.07.2012 в 10:26

        Да не они в принципе понимают о чем говорят надо им так я не против в принципе понимаю. Хотя да ушли в инет дом труба шатать.

  • Татьяна | 10.07.2012 в 17:48

    “Если я чувствую, что статья мне очень пригодиться в дальнейшем” Владимир да вы провидец просто! Завидую вам если вы знаете, что завтра вашей светлой головушке может понадобится…. Я например часто если попадаю на увлекательный материал, так зачитываюсь, что потом закрываю страницу и забываю забить в закладки, а через пару дней или месяцев вспоминаю где я могла видеть сиюминутно нужный материал… :evil:

    • Владимир | 10.07.2012 в 18:10

      да ладно, не преувеличивайте. Это я о статьях о продвижении сайта, плагинах и т.п. Ну и ещё интересные сайты добавляю в закладки! :)

  • Татьяна | 10.07.2012 в 18:17

    :twisted: да не преувеличиваю я. Знаете такая панелька это своего рада “спотыкач”. Знаете что это?)))) Так очень полезная штука скажу я вам, своего рода маркетинговый ход. Хотя мы с вами Владимир не договоримся, получается диалог продавца и покупателя…А статья для “продавцов”! :smile:

    • Владимир | 10.07.2012 в 18:33

      какой там из меня продавец… :D

  • Руслан | 11.07.2012 в 11:52

    Да, весьма полезная конпочка, но ставить себе не буду :arrow: и так кнопок немеряно :x

  • Landorn | 11.07.2012 в 16:45

    Спасибо, полезная статья! Если не секрет, дизайн где заказывали?

      • Руслан | 11.07.2012 в 17:40

        Антон сам рисует и сам верстает! Вообще Красавчик! :shock:

        • admin | 11.07.2012 в 17:45

          Ну рисую я плохо (в фотошопе , а в жизни – хорошо, всегда говорили что талант :) )

          • Руслан | 11.07.2012 в 18:34

            А я вообще не рисую и не верстаю :x Хотя версткой все же скоро займусь :roll:

          • Лариса | 13.07.2012 в 2:32

            Антон, творчество из жизни – в студию! Правда интересно :smile:

            Руслан, а где, кстати, твой проект “это не Руслан”, я мож пропустила за месяц-то?

          • admin | 13.07.2012 в 2:38

            Да у меня и рисунков то нет при себе – все выброшено или осталось в тетрадках для лекций :roll:

  • Руслан | 13.07.2012 в 7:05

    Ларис, он еще в процессе… :oops:

  • Владимир Жданов | 13.07.2012 в 10:29

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

  • Серг | 17.08.2012 в 0:35

    а есть ли плагин или скрипт добавления понравившихся постов в профиль пользователя? например на сайте онлайн кино добавить фильм или сериал себе в профиль?

    • admin | 17.08.2012 в 0:43

      Хм… в профиль. Даже не знаю, просто на wordpress практически отсутствуют профиль пользователя как такового, он конечно есть, но ими мало кто пользуется

      • Серг | 17.08.2012 в 0:54

        я нашёл плагин похоже, пользуйтесь, кому надо: wp-favorite-posts.1.5.6

        • admin | 17.08.2012 в 1:05

          Посмотрел описание: действительно интересное, просто добавить в шаблон статьи один код и и создать еще одну страницу с шорт кодом. Что плохо, но в тоже время необходимо: плагин ориентируется на куки и ip. Я лично чищу куки очень часто

          • Серг | 19.09.2012 в 16:41

            Да, но многие пользователи этого не делают, к тому же можно оставить куки касательно того сайта, где есть данная полезная фича. Многие онлайн сервисы вообще не имеют такой опции даже на других cms…

  • Дима | 22.10.2012 в 19:13

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

  • Анна Зуева | 12.11.2012 в 19:49

    По мне так хорошая вещь-кнопка эта. Спасибо за статью, все очень понятно, я сделала у себя кнопочку…есть люди, которые не умеют самостоятельно добавлять сайт в закладки, так что пригодится :|

    • Сергей | 09.12.2012 в 4:23

      Да не просто много, а тьма :x

  • Сергей | 09.12.2012 в 4:22

    Нормальная кнопка, я уже ее сделал, только свой дизайн замутил, висит себе и ни кому не мешает… :evil:

  • Кристина | 27.05.2013 в 0:03

    Реализую такую кнопку, обязательно. Для кулинарии она просто необходима. :|

  • Евгений | 18.06.2013 в 21:59

    сделал по инструкции – отобразжается выше логотипа, установил в самый них header – стал мешать в меню, как его нормально установить?1

    • admin | 19.06.2013 в 1:09

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

    • Ольга | 11.12.2013 в 20:27

      Аналогичная ситуация и у меня! Прилипать то кнопка прилипает…но не туда,куда нужно.Я посмотрела,вы тоже от нее отказались!А жаль,мне тоже так хотелось ее установить….

    • Ольга | 12.12.2013 в 1:51

      Евгений,я нашла причину ,по которой у нас возникла проблема.Нужно вставить кнопку в файл Подвал (footer.php) и изменить вставку в файл стилей:
      .book {
      height: 151px;
      width: 22px;
      padding-left: 0px;
      position: fixed;
      top: 0px;
      left: 0;
      z-index: 5;
      }
      И тогда все получается.Кнопка “прилипает” слева вверху,но ничего не сдвигает.

  • Ольга | 11.12.2013 в 19:49

    Здравствуйте!А почему у меня при вставке кнопки “Добавить в закладки” она у меня “прилипает” к самому верху сайта и тем самым шапка оказывается далеко (по высоте кнопки) внизу? Как сделать,чтобы она находилась не в самом верху,а посередине высоты страницы сайта,как у Вас на скриншоте?Жаль,что пока мне ее пришлось убрать.

  • Олег | 07.01.2014 в 17:06

    Антон, с праздничком! Попытался по второму способу сделать кнопку для добавления в закладки. В google chrome не работает, а переводит на ту же страницу. В IE работает, но добавляет в избранное, а не в закладки. Что не так?

  • Кредит | 23.07.2014 в 18:40

    Кнопка не работает в браузере гугл хром, в мозиле работает нормально.

  • Лариса | 21.10.2015 в 20:56

    Антон, еще вопрос от чайника: “Первое что нужно сделать – это загрузить картинку на хостинг” – это в какую папку?.. :grin:

  • Лариса | 22.10.2015 в 21:27

    Что-то кнопка у меня только в эксплорере работает :) В хроме и яндекс-браузере не добавляется.

  • Alex | 24.12.2015 в 21:53

    Отличная инфа, весьма актуальная тема. Давно задавался вопросом про закладки. Ответ нашел на Вашем сайте. Спасибо!

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: