В данном посте мы сделаем для нашего сайта красивые кнопки социальных сетей “поделиться”. Кнопки показались мне наиболее красивыми из тех, которые устанавливаются без плагина.
При необходимости необходимо подключить jQuery через файл functions.php:
function my_jquery() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );
Теперь необходимо вставить HTML основу кнопок в необходимое место шаблона
<div id="share"> <div class="like">Понравилось? Поделитесь с друзьями!</div> <div class="social" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>"> <a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a> <a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a> <a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a> <a class="push google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a> <a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a> </div> </div>
В style.css добавим следующий код:
#share {
width:100%;
border:1px solid #eaeaea;
margin: 0 auto;
background:#fff;
text-align:center;
}
.like {
font-size: 16px;
font-weight: 700;
line-height: 50px;
}
.push {
display: inline-block;
width: 17%;
min-width: 100px;
line-height: 40px;
margin: 5px 2px 20px 2px;
font-size: 15px;
text-align: center;
color:#fff;
cursor: pointer;
}
.facebook {background-color:#3b5998;}
.facebook:hover {background-color:#2d4373; color:#fff;}
.google {background-color:#dd4b39;}
.google:hover {background-color:#c23321; color:#fff;}
.twitter {background-color:#55acee;}
.twitter:hover {background-color:#2795e9; color:#fff;}
.vkontakte {background-color:#587ea3;}
.vkontakte:hover {background-color:#466482; color:#fff;}
.ok {background-color:#ee8208;}
.ok:hover {background-color:#ee7808; color:#fff;}
Создаём файл share.js и копируем в него следующий код:
var Shares = {
title: 'Поделиться',
width: 600,
height: 400,
init: function() {
var share = document.querySelectorAll('.social');
for(var i = 0, l = share.length; i < l; i++) {
var url = share[i].getAttribute('data-url') || location.href, title = share[i].getAttribute('data-title') || '',
desc = share[i].getAttribute('data-desc') || '', el = share[i].querySelectorAll('a');
for(var a = 0, al = el.length; a < al; a++) {
var id = el[a].getAttribute('data-id');
if(id)
this.addEventListener(el[a], 'click', {id: id, url: url, title: title, desc: desc});
}
}
},
addEventListener: function(el, eventName, opt) {
var _this = this, handler = function() {
_this.share(opt.id, opt.url, opt.title, opt.desc);
};
if(el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
el.attachEvent('on' + eventName, function() {
handler.call(el);
});
}
},
share: function(id, url, title, desc) {
url = encodeURIComponent(url);
desc = encodeURIComponent(desc);
title = encodeURIComponent(title);
switch(id) {
case 'fb':
this.popupCenter('https://www.facebook.com/sharer/sharer.php?u=' + url, this.title, this.width, this.height);
break;
case 'vk':
this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height);
break;
case 'tw':
var text = title || desc || '';
if(title.length > 0 && desc.length > 0)
text = title + ' - ' + desc;
if(text.length > 0)
text = '&text=' + text;
this.popupCenter('https://twitter.com/intent/tweet?url=' + url + text, this.title, this.width, this.height);
break;
case 'gp':
this.popupCenter('https://plus.google.com/share?url=' + url, this.title, this.width, this.height);
break;
case 'ok':
this.popupCenter('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=' + url, this.title, this.width, this.height);
break;
};
},
newTab: function(url) {
var win = window.open(url, '_blank');
win.focus();
},
popupCenter: function(url, title, w, h) {
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 3) - (h / 3)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
if (window.focus) {
newWindow.focus();
}
}
};
$('.social a').on('click', function() {
var id = $(this).data('id');
if(id) {
var data = $(this).parent('.social');
var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
Shares.share(id, url, title, desc);
}
});
На очереди заключительный шаг – подключение обработчика share.js Кидаем файл в папку .js вашей темы (там где остальные у вас находятся) и прописываем к нему дорогу в футере:
<script defer src="https://good-webmaster/wp-content/themes/goodthemes/design/js/share.js"></script>
Проверяем! На некоторых сайтах бывает выскакивает не то что ожидали. Тогда в файле share.js нужно заменить это:
$('.social a').on('click', function() {
var id = $(this).data('id');
if(id) {
var data = $(this).parent('.social');
var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
Shares.share(id, url, title, desc);
}
});
на это:
Shares.init();
Готово!
Автор публикации
Создание и продвижение премиальных сайтов
Комментарии 0