! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !
— отредактировано:  2017-06-06
издатель:   в теме: HTML-CSS-PHP  реплики: будьте первым в диалоге
 
Запросто с WordPress - студия занимательная МИХАЛИКА

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

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

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

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

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

 

 

 

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

 

 

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

 

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

 

 


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

 

Подписаться на life-News студии занимательная Михалика
SendPulse - NoSpamX || Михалика ©

 

 


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

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
ещё статьи по теме:

меточная навигация:


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

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

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

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