我在考虑使用社交名流。js加载我的twitter/facebook图标。我发现the following tutorial, 这帮助我构建了所需的功能。
链接显示,但仅显示为文本(带有HTML列表项目符号)。一切似乎都准备就绪(css/js/sprite)。
我知道可能性很小,但有人有什么想法吗?提前谢谢。
编辑:这是我使用的代码。。。希望这对某人有意义哈哈:)
Function.php:
function wptuts_load_socialiate() {
// Register Socialite
wp_register_script( \'socialite\', get_template_directory_uri() . \'/js/socialite.min.js\', array(), \'\', true );
// Register social initialiser script
wp_register_script( \'wptuts-social\', get_template_directory_uri() . \'/js/wptuts-social.js\', array(\'jquery\', \'socialite\'), \'\', true );
// Now enqueue Socialite
wp_enqueue_script( \'wptuts-social\' );
// Register social CSS
wp_register_style( \'wptuts-social\', get_template_directory_uri() . \'/css/wptuts-social.css\');
// Now enqueue social
wp_enqueue_style( \'wptuts-social\' );
}
add_action( \'wp_enqueue_scripts\', \'wptuts_load_socialite\' );
function social_after_the_content( $content ) {
$custom_content .= $content;
$custom_content .= \'
<ul class="social-buttons cf">
<li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li>
<li><a class="socialite googleplus-one" href="https://plus.google.com/share" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li>
<li><a class="socialite facebook-like" href="http://www.facebook.com/sharer.php" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li>
</ul>
\';
return $custom_content;
}
add_filter( \'the_content\', \'social_after_the_content\' );
JS
jQuery(document).ready(function($)
{
$(‘.social-buttons’).one(‘mouseenter’, function()
{
Socialite.load($(this)[0]);
});
});
CSS
.social-buttons { display: block; list-style: none; padding: 0; margin: 20px; }
.social-buttons > li { display: block; margin: 0; padding: 10px; float: left; }
.social-buttons .socialite { display: block; position: relative; background: url(\'http://tuts-authors.s3.amazonaws.com/wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png\') 0 0 no-repeat; }
.social-buttons .socialite-loaded { background: none !important; }
.social-buttons .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
.social-buttons .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
.social-buttons .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
.social-buttons .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
js与Socialite一起位于js文件夹(主题/js)中。min.js和css文件也位于其自己的文件夹(主题/css)中。