给wordpress添加网络便签功能

作为一个独立的个人博客,说说怎么少得了,有时候我们写日志,或者做通告,长不长,短不短的话语总是纠结怎么写成文章,但是为了人性化,像qq空间的说说,emlog的微语以及微博,都是把短语发挥到了极致,无奈wordpress没有这项功能,今天我就教大家添加该功能,非常简单,代码也很少。从此踏上说说的征途吧~
首先在主题的functions.php里面加入以下代码:

  1. //添加说说功能  
  2. function git_shuoshuo() {  
  3.     $labels = array(  
  4.         ‘name’ => ‘说说’,  
  5.         ‘singular_name’ => ‘说说’,  
  6.         ‘add_new’ => ‘发表说说’,  
  7.         ‘add_new_item’ => ‘发表说说’,  
  8.         ‘edit_item’ => ‘编辑说说’,  
  9.         ‘new_item’ => ‘新说说’,  
  10.         ‘view_item’ => ‘查看说说’,  
  11.         ‘search_items’ => ‘搜索说说’,  
  12.         ‘not_found’ => ‘暂无说说’,  
  13.         ‘not_found_in_trash’ => ‘没有已遗弃的说说’,  
  14.         ‘parent_item_colon’ => ,  
  15.         ‘menu_name’ => ‘说说’  
  16.     );  
  17.     $args = array(  
  18.         ‘labels’ => $labels,  
  19.         ‘public‘ => true,  
  20.         ‘publicly_queryable’ => true,  
  21.         ‘show_ui’ => true,  
  22.         ‘show_in_menu’ => true,  
  23.         ‘query_var’ => true,  
  24.         ‘rewrite’ => true,  
  25.         ‘capability_type’ => ‘post’,  
  26.         ‘has_archive’ => true,  
  27.         ‘menu_icon’   => ‘dashicons-format-chat’,  
  28.         ‘hierarchical’ => false,  
  29.         ‘menu_position’ => 4 ,  
  30.         ‘supports’ => array(  
  31.             ‘editor’,  
  32.             ‘author’  
  33.         )  
  34.     );  
  35.     register_post_type(‘shuoshuo’, $args);  
  36. }  
  37. add_action(‘init’, ‘git_shuoshuo’);  
  38. //说说的固定连接格式  
  39. function custom_shuoshuo_link( $link$post = 0 ){  
  40.     if ( $post->post_type == ‘shuoshuo’ ){  
  41.         return home_url( ‘shuoshuo/’ . $post->ID .’.html’ );  
  42.     } else {  
  43.         return $link;  
  44.     }  
  45. }  
  46. add_filter(‘post_type_link’, ‘custom_shuoshuo_link’, 1, 3);  
  47. function custom_shuoshuo_rewrites_init(){  
  48.     add_rewrite_rule(  
  49.         ‘shuoshuo/([0-9]+)?.html$’,  
  50.         ‘index.php?post_type=shuoshuo&p=$matches[1]’,  
  51.         ‘top’ );  
  52. }  
  53. add_action( ‘init’, ‘custom_shuoshuo_rewrites_init’ );  

之后创建一个php文档,把以下内容复制进去:

  1. <?php  
  2. /* 
  3.  
  4. Template Name: 说说页面 
  5.  
  6. */  
  7. get_header(); ?>  
  8. <div id=“content”>  
  9. <h1 itemprop=“name”>网络便签</h1>  
  10. <div class=“shuoshuo”>  
  11.  <ul class=“archives-monthlisting”>  
  12. <?php $limit = get_option(‘posts_per_page’);  
  13. $paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;  
  14. query_posts(‘post_type=shuoshuo&post_status=publish&showposts=’ . $limit=10 . ‘&paged=’ . $paged);  
  15. if (have_posts()) : while (have_posts()) : the_post(); ?>  
  16.  <li><span class=“tt”><?php  
  17.         the_time(‘Y年n月j日G:i’); ?></span>  
  18.  <div class=“shuoshuo-content”><?php  
  19.         the_content(); ?><br/><div class=“shuoshuo-meta”><span class=“shuoshuo-sjsj” style=“float:left”><?php  
  20.         the_time(‘Y年n月j日G:i’); ?></span ><span >— <i class=“fa fa-user”></i> <?php  
  21.         the_author() ?></span></div></div>  
  22.         <span class=“zhutou”><?php echo get_avatar(get_the_author_email(),64); ?></span>  
  23.         </li>  
  24. <?php endwhile;endif; ?>  
  25.  </ul>  
  26. </div>  
  27. </div>  
  28. <?php get_footer(); ?>  

保存该文档,命名为shuoshuo.php,将其放于主题目录下。
接下来就是进入wordpress后台新建页面,标题写“我的说说”,模版选择“说说”,发布,大功告成,之后可通过后台发表说说了。
样式自行发挥,或参照下面样式。

  1. //说说  
  2. .shuoshuo {position:relative;padding:10px 0}  
  3. .shuoshuo li {padding:8px 0;display:block}  
  4. .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;whitewhite-space:pre;whitewhite-space:pre-wrap;whitewhite-space:pre-line;whitewhite-space:-pre-wrap;whitewhite-space:-o-pre-wrap;whitewhite-space:-moz-pre-wrap;whitewhite-space:-hp-pre-wrap;word-wrap:break-word}  
  5. .shuoshuo-content p {margin:0}  
  6. .shuoshuo-meta {text-align:rightright;letter-spacing:0;margin-top:-10px}  
  7. .shuoshuo .tt {margin:35px 0 0 15px;float:left;font-size:.7em}  
  8. .shuoshuo li em {float:left;width:50px;height:10px;margin:42px 0 0 28px}  
  9. .shuoshuo li:hover .tt {color:#0c0;font-weight:700}  
  10. .shuoshuo .zhutou {border-radius:50%;margin:25px 35px 0 5px;float:rightright;padding:2px;border:1px #ddd solid;display:block;transition:.5s;width:40px;height:40px;overflow:hidden}  
  11. .shuoshuo li:hover .zhutou {transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);border-color:#0c0}  
  12. .shuoshuo:before {height:100%;width:2px;background:#eee;position:absolute;left:164px;content:“”;top:0}  
  13. .shuoshuo-content:before {position:absolute;top:40px;bottombottom:0;left:-42px;background:#fff;height:12px;width:12px;border-radius:6px;content:“”;box-shadow:inset 0 0 2px #0c0}  
  14. .shuoshuo-content:after {position:absolute;top:42px;bottombottom:0;left:-40px;background:#ccc;height:8px;width:8px;border-radius:6px;content:“”}  
  15. .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)}  
  16. .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)}  
  17. .shuoshuo:after {height:100%;width:2px;background:#eee;position:absolute;rightright:100px;content:“”;top:0}  
  18. .shuoshuo-meta:before {position:absolute;top:42px;bottombottom:0;rightright:-56px;background:#fff;height:12px;width:12px;border-radius:6px;content:“”;z-index:2;box-shadow:inset 0 0 2px #0c0}  
  19. .shuoshuo-meta:after {position:absolute;top:44px;bottombottom:0;rightright:-54px;background:#ccc;height:8px;width:8px;z-index:2;border-radius:6px;content:“”}  
  20. .shuoshuo li:hover .shuoshuo-meta:after {background:#0c0}  
© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论