! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2018-01-24
издатель:  в теме: HTML-CSS-PHP всякое полезное реплики: 7 комментариев
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Как сделать на сайте кнопку ′добавить в избранное′ — в закладки браузера.?.

Что ж, пришло время написать несколько коротеньких постов на в общем-то полезные темы!

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

Сегодня прикрутим и настроим на сайте кнопку «страницу в избранное».

Я, признаться, у себя на блоге такое чудо не использую: не знаю, как-то не раскушал прок… Но если у вас появилось желание реализовать такую кнопочку «у себя…», давайте приступим. Дело очень простое — займёт минут десять труда и, к тому же, как бы то ни было — очень полезное принципиальное js-познание…

В следующих статьях реализуем «прилепленное» меню и сайдбар (ссылки на эти статьи в комментариях)…


 

 

создаём кнопку «добавить в избранное»…

 

 

 

Что нам для этого потребуется?..

 

Во-первых: определиться с географией расположения сего элемента) От этого будет зависеть «устройство» селекторов css.

В-вторых, конечно же, не забыть сделать бэкап сайта.

 

 

И коли определённость и осторожность … достигнуты) — смело заходим в файловую директорию (ядро) своего шаблона; отыскиваем папку с именем js — если её нет — создаём новенькую, эта папка ещё потребуется много раз для иных полезных файлов: например, когда расширяем функционал визуального текстового редактора, скажем, добавляем свои полезные кнопочки

 

 

Итак: в созданной, или уже существующей папке под именем js, теперь необходимо создать js-файл… в который поместим необходимую на сегодня функцию.

 

 

 

К слову:

нам требуется к так называемому событию onClick какого-то элемента сайта прикрутить определённую JavaScript-функцию: сегодня — это строки данные чуть ниже.

 

<a href="" onClick="return add_favorite(this);">Добавить в закладки</a>

 

 

 

 

Продолжим… дадим новому файлу понятное имя, такое, чтобы в дальнейшем было легко определить его назначение…

 

Назовём, скажем, function-isbranoe.js (имя можете выбрать своё собственное).

 

 

Теперь в созданный файл пропишем такие чудо-строки: т.е саму JavaScript-функцию.

 

 

 

function addFavorite(a) {
var title = document.title;
var url = document.location;
try {
// браузер Internet Explorer
window.external.AddFavorite(url, title);
}
catch (e) {
try {
// браузер Mozilla
window.sidebar.addPanel(title, url, "");
}
catch (e) {
// браузер Opera
if (typeof(opera)=="object" || window.sidebar) {
a.rel="sidebar";
a.title=title;
a.url=url;
a.href=url;
return true;
}
else {
// Unknown
alert('Кликните Ctrl-D чтобы добавить страницу в закладки');
}
}
}
return false;
}

 

 

 

Практически всё готово! остаётся только расположить «физически» саму кнопку во фронтенде сайта: где-то в сайдбаре, ну или ещё как-то…

 

 

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

 

…я рекомендую кнопь «добавить в закладки браузера» как-то обработать стилистикой css: завернуть в какой-то div класс…

 

 

 

 

к оглавлению $

стили css для кнопки «добавить страничку в избранное»…

 

 

 

 

Например, так: у меня этот класс miha-isbraly.

 

Получится как-то так…

 

 

<div class="miha-isbraly"><a href="#" onclick="return addFavorite(this);">Страницу в избранное!</a></div>

 

 

 

А вот примерные стили:

 

 

.miha-isbraly a {
background: #fff;
color: rgb(0, 132, 143);
border-radius: 4px 4px;
box-shadow: 1px 0 1px 0 #b7b7b7;
border: 1px solid #ccc;
text-decoration: none;
}

 

 

 

 

Завершение:

 

Все наши наработки необходимо связать в единый цикл…

 

Открываем файл footer.php и перед закрывающем тегом </body> прописываем строку-привязку нашего созданного js файла: т.е подключим его, указав путь для системы WP…

 

 

<script type="text/javascript" src="/wp-content/themes/имя_темы/js/function-isbranoe.js"></script>

 

 

 

И вновь я рекомендую поступить несколько иначе, подключая подобные плюшки js.

 

А именно: поместите такой код (который, кстати сказать, можно дополнять и иными js строками, но — я бегу — обо всём по порядку…)

 

 

/** добавим в футер wp_footer скрипты js **/
function functionss_add_js_my_scr (){
echo <<<EOT
<script type="text/javascript" src="/wp-content/themes/имя_темы/js/function-isbranoe.js"></script>
EOT;
}
add_action('wp_footer', 'functionss_add_js_my_scr');
/** добавим в футер wp_footer скрипты js **/

 

 

Этак полезнее в плане всяких скоростей загрузок подключать некоторые js файлы — расскажу в следующей статье подробнее, ближе к теме, так сказать…

 

 

Вот и всё ! код создан на чистейшем js скрипте… всё легко и просто.

 

 

 

Дополнение:

 

статья о том, как правильно подключать скрипты JS …для отработки… это целесообразные вариации подключения js к событию wp_footer.

 

 

 

 

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

 

 

Спросите, зачем эта фотка в финале статьи???

 

отвечаю… эта дама и просила меня реализовать у неё на сайте кнопку быстрого добавления странички в закладки браузера…

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

Подписаться на life-News студии ATs media fashion squad
SendPulse - NoSpamX || Михалика ©

 

 


...город веб мастеров Михалика.ru - запросто с WordPress

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Как перевести сайт на https — сертификат ssl — шифрование   Как добавить ссылки на самые комментируемые по времени посты в сайдбар или на страничку   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Шаблон RealMik 4.0.2 — создать сайт на wordpress с максимальной выгодой для начинающего блогера   Уже в этом году WordPress потребует от пользователей протокол HTTPS   Выведем последние комментарии в любом месте сайта — несколько вариантов   Создаём плагин — добавочный файл функций — my-functions.php   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Как добавить свой новый (второй) сайт в Яндекс Директ   Как самостоятельно установить в Notepad++ плагин Compare   Подключение jQuery библиотеки от CDN Google — рационально!..   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме HTML-CSS-PHP всякое полезное
меточная навигация:


Комментарии © 7 к статье: Как сделать на сайте кнопку ′добавить в избранное′ — в закладки браузера.?.

  1. Добрый вечер! У меня возникла пара вопросов. В пункте: «А именно: поместите такой код (который, кстати сказать, можно дополнять и иными js строками, но — я бегу — обо всём по порядку…)», поместить в function.php? И как считаете, эффективна ли эта кнопка?

    Ответить - Наталья

    • Я не стала дожидаться ответа. У меня все получилось, спасибо вам за статью!

      Ответить - Наталья

      • И Вам вечер добрый!

        И как считаете, эффективна ли эта кнопка?

        Даже и не знаю — что ответить относительно эффективности кнопки, окромя сказанного в тексте: как-то лично не раскушал прок…
        Хотя, могу предположить одно твёрдо: установка любого функционала всегда оправдана, если способствует продвижению и целям.
        Так что, если нашли для своего проекта целесообразным установку кнопки «поделиться» — будет и эффект.
        Но это, правда, жутчайшее IMHO ))

        Ответить - Михаил

  2. Доброе время суток!
    В этой статье Вы написали: «….В следующих статьях реализуем «прилепленное» меню и сайдбар…». Когда то я попробовала некоторые плагины, они меня совсем не устроили. Мне очень надо прикреплённый сайдбар,чтобы информация «ехала вниз за читателем». Хотелось бы такой как на Вашем блоге.
    Жду!!!

    Ответить - Марина

    • И Вам доброго времени, Марина!
      …это моя недоработка: хорошо, что напомнили.
      Я, вероятно, ссылки подзабыл поместить сюда.
      Вот статья о том, как сделать прилепленный сайдбар сайдбар — виджетОрганизуем прилепленный виджет, или — фиксированный у верхнего края окна браузераОрганизуем прилепленный виджет, или — фиксированный у верхнего края окна браузера

      …а вот о том, как сделать прилепленное меню прилепленное менюКак сделать фиксированное меню — скрипт для нашего сайтаПовествование о том, как сделать фиксированное меню — скрипт для нашего сайта

      Ответить - Михаил

  3. Спасибо Михаил! Статью по теме сайдбара прочитала. Это хорошо, что без плагина. Хотя, в скриптах я не сильна, но попробую!

    Ответить - Марина

    • Без скриптов никак…
      В общем, тут всё просто! создать js файл и подключить. ну и организовать css.
      …кстати, в этой статье добавил ещё кое-какие ссылочки на полезные статьи о правилах подключения всяких js.

      Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика