建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

为你的wordpress网站增加说说(类似微博)功能(WordPress将选中内容分享到新浪腾讯微博的具体操作)

GG网络技术分享 2025-03-18 16:14 0


为你的wordpress网站增加说说(类似微博)功能

说说这个功能,只要用过微博,相信大家都不陌生,因为说说就是微博,有几句话想说一说,就发布,有一定字数限制,很短。

有时走在路上,有时趴在桌上,华哥的大脑很是活跃,会突然冒出一两个想法,用几句话能表达完毕,偏偏华哥不喜欢用那个新浪微博,也没有养成有啥说啥即时发微博的习惯。那,能不能有一种方式,把这种想法(有价值的)记录下来呢,那就是你自己网站的微博——说说。

华哥网站(www.xiaoyunhua.com)用的是wordpress,那有没有方法在wordpress中实现这个功能呢。查找了,有。经过实践,成功了,见:华哥的说说。

看华哥在wordpress增加说说的具体方法。

1.首先在后台添加说说的菜单,能够在后台发布说说。

主要是操作所使用主题目录的functions.php,添加如下代码在最后面:

//说说

add_action(‘init’, ‘my_custom_init’);

function my_custom_init()

{ $labels = array( ‘name’ => ‘说说’,

‘singular_name’ => ‘singularname’,

‘add_new’ => ‘发表说说’,

‘add_new_item’ => ‘发表说说’,

‘edit_item’ => ‘编辑说说’,

‘new_item’ => ‘新说说’,

‘view_item’ => ‘查看说说’,

‘search_items’ => ‘搜索说说’,

‘not_found’ => ‘暂无说说’,

‘not_found_in_trash’ => ‘没有已遗弃的说说’,

‘parent_item_colon’ => ”,

‘menu_name’ => ‘说说’ );

$args = array( ‘labels’ => $labels,

‘public’ => true,

‘publicly_queryable’ => true,

‘show_ui’ => true,

‘show_in_menu’ => true,

‘query_var’ => true,

‘rewrite’ => true,

‘capability_type’ => ‘post’,

‘has_archive’ => true, ‘hierarchical’ => false,

‘menu_position’ => null,

‘supports’ => array(‘title’,’editor’,’author’) );

register_post_type(‘shuoshuo’,$args); }

检查无误后,上传,然后去后台,就发现,左侧的管理菜单中,就有说说。如上面的图。

2.制作一个页面模板,这个模板起名为shuoshuo.php,放在所使用的主题模板根目录下,用于显示后台所发布的说说内容。华哥的shuoshuo.php如下(相对于原教程代码,有不少的改动)

<?php /*

Template Name: 说说

*/

get_header(); ?>

<link href=”/wp-content/themes/blogrow/shuoshuo.css” rel=”stylesheet”>

<section class=”pad group”>

<div class=”shuoshuo”>

<ul class=”archives-monthlisting”>

<?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1″);if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><span class=”tt”>

<?php the_time(‘Y年n月j日G:i’); ?>

</span><br><span >—

<?php the_author() ?>

</span>

<div class=”shuoshuo-content”>

<P> <b><?php the_title(); ?></b></P>

<?php the_content(); ?>

</div>

<?php endwhile;endif; ?>

</li>

</ul>

</div>

</section>

<?php get_footer(); ?>

这个页面模板对应的就是:华哥的说说 这个样子。

3.上面只是准备好了模板,还需要创建一个页面,来使用这个模板,在页面中选择新建,输入标题后,内容不要填写为空,然后重点操作是选择模板为刚才所制作的“说说”模板。

上图模板中可以选择说说,那这个说说模板名称哪来的呢?模板是shuoshuo.php呀!那就要注意模板中第一行的注释了,如下:

<?php /*

Template Name: 说说

*/

get_header(); ?>

说说就是从上边来的。你可以改成任何你喜欢的名称。

4.能不能把最新发的说说,通过小工具,显示在首页或内容页的右侧呢?目前还没有找到方法和花费时间去实践。

WordPress将选中内容分享到新浪腾讯微博的具体操作

本文实例讲述了Wordpress将选中内容分享到新浪腾讯微博的方法。分享给大家供大家参考。具体方法如下:

1、引入jQuery,相信大多数WordPress博客都已经引入了jQuery,那就可以直接进行第二步了.

2、在页面底部,或者更确切的说,在引入jQuery库的后面加上这样一段JS,你就可以看到和本站一样的效果了.

选中即分享的功能看上去比较高级,其实实现是相当简单的,其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过,这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare

实例代码如下:

var miniBlogShare = function() {
//指定位置驻入节点
$(\'<img id=\"imgSinaShare\" class=\"img_share\" title=\"将选中内容分享到新浪微博\" src=\"1328255868614.gif\" /><img id=\"imgQqShare\" class=\"img_share\" title=\"将选中内容分享到腾讯微博\" src=\"/1328255868314.png\" />\').appendTo(\'body\');

//默认样式
$(\'.img_share\').css({
display : \'none\',
position : \'absolute\',
cursor : \'pointer\'
});

//选中文字
var funGetSelectTxt = function() {
var txt = \'\';
if(document.selection) {
txt = document.selection.createRange().text;
} else {
txt = document.getSelection();
}
return txt.toString();
};

//选中文字后显示微博图标
$(\'html,body\').mouseup(function(e) {
if (e.target.id == \'imgSinaShare\' || e.target.id == \'imgQqShare\') {
return
}
e = e || window.event;
var txt = funGetSelectTxt(),
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
if (txt) {
$(\'#imgSinaShare\').css({
display : \'inline\',
left : left,
top : top
});
$(\'#imgQqShare\').css({
display : \'inline\',
left : left + 30,
top : top
});
} else {
$(\'#imgSinaShare\').css(\'display\', \'none\');
$(\'#imgQqShare\').css(\'display\', \'none\');
}
});

//点击新浪微博
$(\'#imgSinaShare\').click(function() {
var txt = funGetSelectTxt(), title = $(\'title\').html();
if (txt) {
window.open(\'http://v.t.sina.com.cn/share/share.php?title=\' + txt + \' —— 转载自:\' + title + \'&url=\' + window.location.href);
}
});

//点击腾讯微博
$(\'#imgQqShare\').click(function() {
var txt = funGetSelectTxt(), title = $(\'title\').html();
if (txt) {
window.open(\'http://v.t.qq.com/share/share.php?title=\' + encodeURIComponent(txt + \' —— 转载自:\' + title) + \'&url=\' + window.location.href);
}
});
}();

可以看到$sinaMiniBlogShare方法有两个参数,eleShare和eleContainer,其中,前一个参数是必须的,指的是文字选中后出现的浮动层元素(在本文demo中就是新浪眼睛图标),后面一个参数指文字选择的容器元素,可选参数,如果不设置则指document元素,也就是整个页面文字选中都会触发分享的功能.

假设新浪微博分享图标的HTML如下:

<img id=\"imgSinaShare\" class=\"img_sina_share\" title=\"将选中内容分享到新浪微博\" src=\"http://simg.sinajs.cn/blog7style/images/common/share.gif\" />

则直接使用如下代码:

$sinaMiniBlogShare(document.getElementById(\"imgSinaShare\"));

希望本文所述对大家的WordPress建站有所帮助。

Wordpress将选中内容分享到新浪腾讯微博的具体操作 (https://www.wpmee.com/) WordPress使用教程 第1张

标签:

提交需求或反馈

Demand feedback