远方的海
远方的海,WordPress,免费
2015 Sep 14 23 : 55

WordPress添加说说、微博、碎语、状态的功能

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

WordPress增加一个说说功能用来发状态是最好不过的了,平时我们都是用短文字来写点随笔,但是却要占用一整个文章,好像有点不划算,现在OK了,你们要的说说来了!

DEMO在此,教程在下面。

源代码部分

WordPress添加说说、微博、碎语、状态的功能

引用声明:源代码来自秋叶的博客,地址http://www.wuover.com/141.html,Sven略有改动。

以下代码放入functions.php中

以下代码放入主题的functions.php中,位置请随意,一般都是最后一个?>前面。

//shuoshuo
 add_action ('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '说说', 'singular_name' => '说说', '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); }

增加一个php文件

在主题的目录下,新建一个文件,seavia-shuo.php,把下面的代码放入这个php文件中:

<?php 
/*
 Template Name: 说说
 author: 秋叶,Sven修改
 */
 get_header(); ?><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:H'); ?></span>
 <div class="shuoshuo-content"><?php the_content(); ?><br/><div class="shuoshuo-meta"><span >—<?php the_author() ?></span></div></div><?php endwhile;endif; ?></li>
 </ul>
</div>
<?php get_footer();?>

美化CSS样式

新建一个名为seavia-shuo.css的css文件,里面放入以下代码,然后把这个css文件放入主题根目录下。声明这个代码还是从原作者秋叶那里扒下来然后略作修改的,如果你需要创新的设计,自己可以再改:

.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f2f2f2;
border:1px #ccc solid;
border-radius: 4px;
font-size: 1.2em;
line-height:1.5em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 30px;
color: #666;
min-height:60px;
position: relative;
 white-space: pre; /* CSS 2.0 */ 
 white-space: pre-wrap; /* CSS 2.1 */ 
 white-space: pre-line; /* CSS 3.0 */ 
 white-space: -pre-wrap; /* Opera 4-6 */ 
 white-space: -o-pre-wrap; /* Opera 7 */ 
 white-space: -moz-pre-wrap; /* Mozilla */ 
 white-space: -hp-pre-wrap; /* HP Printers */ 
 word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */
}
.shuoshuo-content p{margin:0;}
/*作者*/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-10px;
}
/*时间*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.7em;}
.shuoshuo li em{float:left;width:50px;height:10px;margin:42px 0 0 28px;}
.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
/*头像*/
.shuoshuo .zhutou{border-radius: 50%;margin: 25px 35px 0 5px;float:right;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
.shuoshuo li:hover .zhutou {
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
/*前面的轴*/
.shuoshuo:before {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
left: 164px;
content: "";
top:0px;
}
.shuoshuo-content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
position: absolute;
top: 42px;
bottom: 0px;
left: -40px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
background: #0c0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);}
/*后面的轴*/
.shuoshuo:after {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
right: 100px;
content: "";
top:0px;
}
.shuoshuo-meta:before {
position: absolute;
top: 42px;
bottom: 0px;
right: -56px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
z-index:2;
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-meta:after {
position: absolute;
top: 44px;
bottom: 0px;
right: -54px;
background: #ccc;
height: 8px;
width: 8px;
z-index:2;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
background: #0c0;
}
@media screen and (max-width: 800px) { 
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}
.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}
.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

调用seavia-shuo.css

我们的思路是,判断页面,如果这个页面是shuoshuo,那么,我们就使用这个css文件。

还是functions.php哦,加入下面代码,里面的css地址换成你自己的地址噢噢噢

//调用seavia-shuo.css
add_action('wp_enqueue_scripts', 'seavia_script');
function seavia_script() {
if( is_page(shuo) ) {
wp_enqueue_style( 'shuoshuo', "http://www.seavia.com/wp-content/themes/Wildfire/seavia-shuo.css",array(),'',false );
}
}

或者你如果嫌麻烦,可以直接把这些css放在seavia-shuo.php里,用<style>标签包裹起来即可。

发布说说

在新建里面找到说说,写说说的时候可以留空标题栏,直接在文章内容里面键入文字,这样显示出来的就和微博,说说一样啦。

WordPress添加说说、微博、碎语、状态的功能

 

所有发布过的说说,都会统一的出现在shuoshuo这个页面哦。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. 花臣 :

    为甚麽不一样的 啊 我弄出来 ,

    2016-6-18
  2. 闲鱼 :

    添加了,为什么没有头像呢,求解答

    2016-4-24
  3. 龙笑天 :

    非常不错的功能,收藏了!

    2016-4-18
  4. ScottJu :

    seavia-shuo.php感觉这么有问题哇。试了好几次,都没成功。

    2015-10-29
    • Sven水神 :

      @ScottJu 是哪里有问题呢,要具体点。显示不了说说的页面还是css不全,还是?反正timle已经完全实践成功了。

      2015-10-29
  5. 小子 :

    厉害 我一直很想要的 但是网上都没得提供css样式 自己也不会扒

    2015-10-14
  6. ScottJu :

    突然发现码农们都在学习设计了,码农加设计在一起,才能设计出一个美观的网站。你这个教程我个生搬硬套,真是丑的没到边了。

    2015-10-1
    • Sven水神 :

      我也不是码农,业余搞搞,我是学高分子的。

      2015-10-1
  7. 路易大叔 :

    相当不错的功能 不过发表起来会不会太麻烦啊 还要登录后台

    2015-9-16
    • Sven水神 :

      就是和普通的撰写文章一样的流程啦

      2015-9-16
  8. 老杨 :

    其实就是添加自定义文章类型吧?换主题也得移植过去才行,要不就没了。

    2015-9-16
    • Sven水神 :

      是的,因为是加在主题functions.php里面的。

      2015-9-16
  9. Timle.CN :

    DEMO页面显示宽度有问题,过宽。

    2015-9-15
    • Sven水神 :

      你是手机屏访问的么,电脑上还不错,手机上的适应我还没仔细看。

      2015-9-15
      • Timle.CN :

        @Sven 电脑上访问的,1600×900分辨率,chrome浏览器

        2015-9-15
        • Sven水神 :

          我懂了,你是说,说说是宽屏的,页面不是宽屏的。这个一会改掉。

          2015-9-15
          • Timle.CN :

            @Sven 把这里改成就可以。.shuoshuo {
            position: relative;
            margin: 50px auto;
            width: 1060px;
            },不过可能会影响你的响应式,在根据响应式做一下调整就完美了。

            2015-9-15
          • Sven水神 :

            我已经加了响应式变化,OK啦。

            2015-9-15