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

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

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

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

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

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

 

 

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

 

 

 

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

 

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

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

 

 

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

 

 

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

 

 

 

 

 

 

 

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

 

Назовём, скажем, 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 скрипте… всё легко и просто.

 

 

 

 

 

 

 

 

 

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

 

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

 

 

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

 

 

 

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