wordpress文章中手动添加分享到微博按钮 | 鱼小委个人网站

 

17Dec

wordpress文章中手动添加分享到微博按钮

时间: 2013-12-17 分类: WordPress教程 作者: 鱼小委 2819 次浏览

TAGS:

对于wordpress文章分享按钮,很多人会使用百度的分享按钮插件,一般情况下我们会将代码放在文章的最后。也有很多情况我们会根据自己的实际需求去布置这些分享按钮。

今天以boxoffice电影主题为例,将新浪微博与腾讯微博的分享按钮布置到文章标题的右侧。

效果:标题右侧的两个小东西

新浪微博、腾讯微博分享按钮布置方法:

1.登录新浪微博与腾讯微博开放平台,获取一键分享代码:
新浪微博开放平台地址:http://open.weibo.com/sharebutton
腾讯微博开放平台地址:http://dev.t.qq.com/websites/useshare?explain=1

2.申请完之后就能看到组件代码
1)我们在boxoffice主题中的single-movies.php文件中找到以下代码:

<h2><?php the_title(); ?></h2>

在上面的代码后面加入以下两句代码
腾讯微博代码:

<tsharebutton><div id="qqwb_share__" data-appkey="这里填写自己的腾讯appkey" data-icon="2" data-counter="0" data-content="<?php the_title(); ?>——<?php bloginfo('name'); ?>" data-pic="<?php get_image_url(); ?>"></div></tsharebutton>

新浪微博代码:

<ssharebutton><wb:share-button appkey="这里填写自己的新浪appkey" addition="simple" type="icon"></wb:share-button></ssharebutton>

2)在boxoffice主题中的header.php文件中插入以下代码:()
腾讯微博代码:

<script src="http://mat1.gtimg.com/app/openjs/openjs.js#autoboot=no&debug=no"></script>

新浪微博代码:

<html xmlns:wb="http://open.weibo.com/wb">
<script type="text/javascript" src="http://mat1.gtimg.com/app/openjs/openjs.js#autoboot=no&debug=no"></script>

如下图:
04

3)最后我们在boxoffice主题中的style.css中加入相应的css代码
首先找到下面的代码:

.title h2 {
margin: 0px 0px;
padding: 25px 20px 10px 25px ;
font-size: 16px ;
font-weight:bold;
}

然后我们在上述代码的下方加入以下代码

.title tsharebutton{
margin: -25px 30px;
font-size: 16px ;
font-weight:bold;
float:right;
}

.title ssharebutton{
margin: -28px 50px;
font-size: 16px ;
font-weight:bold;
float:right;
}

这样就能完成了,就能实现文章开头效果图的中效果,当然大家可以根据其他的主题完成相应的设置。

演示站:影推网经典电影秀

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前有 2 条精彩评论

  1. 小z 发表于: 2014 年 8 月 17 日 18:10:54

    好像图片挂掉了

    • 管理员

      鱼小委 发表于: 2014 年 8 月 19 日 23:19:39

      嗯,回头补上去,谢谢啦。

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部