社会名流不显示图标

时间:2012-09-05 作者:Frank Morrison

我在考虑使用社交名流。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)中。

1 个回复
最合适的回答,由SO网友:Frank Morrison 整理而成

kaiser向我指出firebug(FF插件),它证实了我的想法,css/js文件没有正确加载。但一切似乎都很好。我将css复制到我的主样式表中,事情开始变得更好了(然而,有些事情仍然不起作用)。

我重新做了教程(第四次),但这次我没有使用sublime(用过的记事本),一切都正常。现在,我可以从我的主样式表中删除css,所有内容都仍然有效。

谢谢你的建议和firebug的提醒。。。从教程复制时:)

结束

相关推荐

ADMIN_PRINT_SCRIPTS-$HOOK_SUFFIX是否适用于指向单个文件的嵌套路径?

可以用钩子admin_print_scripts-$hook_suffix 用于创建的挂钩,如$hookname = get_plugin_page_hookname(\"my-quiz/lib/admin/$code_page\", \'\' );?哪里$code_page 是somefilename.php.我试过了,但似乎不起作用。我想这可能是因为文件路径?UPDATE上面的代码注册的是“admin\\u page\\u my-quick/lib/admin/question\\u form”,但这