有任何上古卷轴的问题,请直接到MOD社区发帖求助

异次元分享工具条

最初是由 C++爱好者博客 分享的,但是我用了之后工具条顶部会多出一块空白的地方,然后就网上到处搜索,最后搜到了 彼岸世界 ,然后就把里面的给复制下来了。

本来没打算分享的,一来 C++爱好者博客 已经分享过了,二来因为我使用的都是经过JS/CSS压缩的,要从里面整理出来好麻烦。因为某人有需要,所以我就分享一下。

内容其实与 彼岸世界 里面的差不多,但是做了以下调整:
原版没有添加 浏览次数 的显示,可能是作者没有找出 小X 显示 浏览次数 的方法,也可能是作者没安装相关插件所以注释掉……我的方法是在js里面多加了一个变量,用来显示 浏览次数 ;
原版是把 css 放在 js 文件里面的,我把他们分开了;

顺便提一下,这边除了实现 分享工具条 ,还实现了 无觅相关文章 。

使用此工具条之前,你需要先安装 WP-PostViews 插件,此插件是用来显示浏览次数的。

资源下载:share_toolbar.7z

下面是完整的内容(有点复杂,做好准备……):

(1)把文件夹 js 和 images 复制到主题目录内;
(2)把 styles.css 的内容添加到你的主题的 styles.css 内(建议添加到底部);
(3)打开主题文件的 header.php ,找到 <?php wp_head();?>,在上面添加以下内容:

Show the Content

<?php if ( is_single() ) : ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/common.js"></script>
<?php endif ; ?>


(4)打开主题文件的 single.php
在你想要的位置(通常是在 <?php the_content();?> 上面)添加以下内容:

Show the Content

<div id="share_toolbar_wrapper"></div>


在你想要的位置(通常在文章末尾)添加以下内容:

Show the Content

<script type="text/javascript">/*<![CDATA[*/var post_title = '<?php the_title() ?>';
    var post_description = '<?php get_the_description() ?>';
    var post_url = "<?php the_permalink() ?>";
    var post_views = "<?php if (function_exists('the_views')): ?><?php the_views(); ?><?php endif; ?>";
    <?php $next_post = get_previous_post();
    if ($next_post) { ?>var next_post_title = '<?php echo get_the_title( $next_post->ID ); ?>';
    var next_post_url = "<?php echo get_permalink( $next_post->ID ); ?>";
    <?php } else { ?>var next_post_title = '上一篇:木有了';
    var next_post_url = "javascript:alert('你正在看的文章已经是最新的了...');";
    <?php } ?><?php $previous_post = get_next_post();
    if ($previous_post) { ?>var previous_post_title = '<?php echo get_the_title( $previous_post->ID ); ?>';
    var previous_post_url = "<?php echo get_permalink( $previous_post->ID ); ?>";
    <?php } else { ?>var previous_post_title = '上一篇:木有了';
    var previous_post_url = "javascript:alert('你正在看的文章已经是最新的了...');";
    <?php } ?>bds_config = {
        "bdDes":post_description,
        "bdText":post_title
    };
    bdShare_config = {"url":post_url};
    var wumiiPermaLink = post_url; 
    var wumiiTitle = post_title;
    var wumiiTags = "<?php get_the_keywords() ?>";
    var wumiiSitePrefix = "<?php get_bloginfo('url'); ?>";
    var wumiiParams = "&num=6&mode=2&pf=JAVASCRIPT";
    loadShareToolbar('683',post_url,previous_post_url,previous_post_title,next_post_url,next_post_title,post_views);/*]]>*/</script>


(5)上面用的两个函数 <?php get_the_description() ?> 和 <?php get_the_keywords() ?> 请替换为你的主题中显示 description 和 keywords 的方法,如果还是不明白的,可以在 WordPress 中自定义 description 和 keywords 复制一份;
(6)打开主题的 footer.php
在你想要的位置(通常是在 <?php wp_footer();?>)下面添加以下内容(这是无觅相关文章需要的)

Show the Content

<script type="text/javascript" src="http://widget.wumii.com/ext/relatedItemsWidget.htm?type=1&mode=2&num=6"></script>


(7)到这边,我们已经完成大部分的内容了,剩下的就是一些小调整。
(8)设置 – PostViews 里面,定义你要的 Views Template ,我是直接使用 %VIEW_COUNT% ;
(9)打开 styles.css ,搜索 share_toolbar ,修改 width 数值以符合你的主题布局;
搜索 share_toolbar_wrapper ,修改 background 以符合你的主题背景色;
(10)打开 js/common.js ,参考 百度分享 调整以下数值(红色字体部分)

Show the Content

var bds_config = {
    'review': 'on',
    'wbUid': '1642980755',
    'snsKey': {
        'tsina': '610475664', 
        'tqq': '468235b5feec4c5a9b02e4fbe679fa52'
    }
};
var bdShare_config = {
    "type": "small",
    "color": "blue",
    "uid": "665594",
    "likeText": "不错",
    "likedText": "已赞过"
};

每个参数的说明可参考百度分享官方说明

icedream

About icedream

其实我知道的东西很少,只是翻译了一些东西,悲催的是翻译过后很快就忘了。

One Response to 异次元分享工具条

  1. 漫雪南山 2012 年 11 月 26 日 at 下午 11:37 #

    来了,我实验一下。谢谢了。