怎么给wordpress增加说说/微博功能

沃森博客
沃森博客
沃森博客
1421
文章
9
评论
2017年9月12日23:24:47WordPress评论241阅读模式

作为一个个人的独立博客，说说怎么少得了，有时候我们写日志记心静，或者做通告，长不长，短不短的话语总是纠结怎么写成文章，但是为了人性化，像qq空间的说说，emlog的微语以及微博，都是把短语发挥到了极致，无奈wordpress没有这项功能，今天西安SEO就给大家说说“怎么给wordpress增加说说/微博功能”。

怎么给wordpress增加说说/微博功能

怎么给wordpress增加说说/微博功能

样式一：

首先在主题的functions.php里面加入以下代码：

  1. //说说功能?
  2. add_action('init',?'my_custom_init');
  3. function?my_custom_init()
  4. {?$labels?=?array(?'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'?=>?'',?'menu_name'?=>?'说说'?);
  15. $args?=?array(?'labels'?=>?$labels,
  16. 'public'?=>?true,
  17. 'publicly_queryable'?=>?true,
  18. 'show_ui'?=>?true,
  19. 'show_in_menu'?=>?true,
  20. 'exclude_from_search'?=>true,
  21. 'query_var'?=>?true,
  22. 'rewrite'?=>?true,?'capability_type'?=>?'post',
  23. 'has_archive'?=>?false,?'hierarchical'?=>?false,
  24. 'menu_position'?=>?null,?'supports'?=>?array('editor','author','title',?'custom-fields')?);
  25. register_post_type('shuoshuo',$args);
  26. }

其次，把下方代码保存为一shuoshuo.php文件上传到你正在使用的主题根目录里。

  1. <?php?/*
  2. ????Template?Name:?说说页面
  3. ????author:?沃森博客
  4. ????本文教程:http://wosn.net/540.html
  5. ????*/
  6. ????get_header();??>
  7. <style?type="text/css">
  8. ????#shuoshuo_content?{
  9. ????????background-color:?#fff;
  10. ????????padding:?10px;
  11. ????????min-height:?500px;
  12. ????????text-align:center;
  13. ????}
  14. ????/*?shuo?*/
  15. ????body.theme-dark?.cbp_tmtimeline::before?{
  16. ????????background:?RGBA(255,?255,?255,?0.06);
  17. ????}
  18. ????ul.cbp_tmtimeline?{
  19. ????????padding:?0;
  20. ????}
  21. ????div?class.cdp_tmlabel?>?li?.cbp_tmlabel?{
  22. ????????margin-bottom:?0;
  23. ????}
  24. ????.cbp_tmtimeline?{
  25. ????????margin:?30px?0?0?0;
  26. ????????padding:?0;
  27. ????????list-style:?none;
  28. ????????position:?relative;
  29. ????}
  30. ????/*?The?line?*/
  31. ????.cbp_tmtimeline:before?{
  32. ????????content:?'';
  33. ????????position:?absolute;
  34. ????????top:?0;
  35. ????????bottom:?0;
  36. ????????width:?4px;
  37. ????????background:?RGBA(0,?0,?0,?0.02);
  38. ????????left:?80px;
  39. ????????margin-left:?10px;
  40. ????}
  41. ????/*?The?date/time?*/
  42. ????.cbp_tmtimeline?>?li?.cbp_tmtime?{
  43. ????????display:?block;
  44. ????????/*?width:?29%;
  45. ????????padding-right:?110px;??*/
  46. ????????max-width:?70px;
  47. ????????position:?absolute;
  48. ????}
  49. ????.cbp_tmtimeline?>?li?.cbp_tmtime?span?{
  50. ????????display:?block;
  51. ????????text-align:?right;
  52. ????}
  53. ????.cbp_tmtimeline?>?li?.cbp_tmtime?span:first-child?{
  54. ????????font-size:?0.9em;
  55. ????????color:?#bdd0db;
  56. ????}
  57. ????.cbp_tmtimeline?>?li?.cbp_tmtime?span:last-child?{
  58. ????????font-size:?1.2em;
  59. ????????color:?#9BCD9B;
  60. ????}
  61. ????.cbp_tmtimeline?>?li:nth-child(odd)?.cbp_tmtime?span:last-child?{
  62. ????????color:?RGBA(255,?125,?73,?0.75);
  63. ????}
  64. ????div.cbp_tmlabel?>?p?{
  65. ????????margin-bottom:?0;
  66. ????}
  67. ????/*?Right?content?*/
  68. ????.cbp_tmtimeline?>?li?.cbp_tmlabel?{
  69. ????????margin:?0?0?45px?65px;
  70. ????????background:?#9BCD9B;
  71. ????????color:?#fff;
  72. ????????padding:?.8em?1.2em?.4em?1.2em;
  73. ????????/*?font-size:?1.2em;?*/
  74. ????????font-weight:?300;
  75. ????????line-height:?1.4;
  76. ????????position:?relative;
  77. ????????border-radius:?5px;
  78. ????????transition:?all?0.3s?ease?0s;
  79. ????????box-shadow:?0?1px?2px?rgba(0,?0,?0,?0.15);
  80. ????????cursor:?pointer;
  81. ????????display:?block;
  82. ????}
  83. ????.cbp_tmlabel:hover?{
  84. ????????/*?transform:scale(1.05);?*/
  85. ????????transform:?translateY(-3px);
  86. ????????z-index:?1;
  87. ????????-webkit-box-shadow:?0?15px?32px?rgba(0,?0,?0,?0.15)?!important
  88. ????}
  89. ????.cbp_tmtimeline?>?li:nth-child(odd)?.cbp_tmlabel?{
  90. ????????background:?RGBA(255,?125,?73,?0.75);
  91. ????}
  92. ????/*?The?triangle?*/
  93. ????.cbp_tmtimeline?>?li?.cbp_tmlabel:after?{
  94. ????????right:?100%;
  95. ????????border:?solid?transparent;
  96. ????????content:?"?";
  97. ????????height:?0;
  98. ????????width:?0;
  99. ????????position:?absolute;
  100. ????????pointer-events:?none;
  101. ????????border-right-color:?#9BCD9B;
  102. ????????border-width:?10px;
  103. ????????top:?4px;
  104. ????}
  105. ????.cbp_tmtimeline?>?li:nth-child(odd)?.cbp_tmlabel:after?{
  106. ????????border-right-color:?RGBA(255,?125,?73,?0.75);
  107. ????}
  108. ????p.shuoshuo_time?{
  109. ????????margin-top:?10px;
  110. ????????border-top:?1px?dashed?#fff;
  111. ????????padding-top:?5px;
  112. ????}
  113. ????/*?Media?*/
  114. ????@media?screen?and?(max-width:?65.375em)?{
  115. ????????.cbp_tmtimeline?>?li?.cbp_tmtime?span:last-child?{
  116. ????????????font-size:?1.2em;
  117. ????????}
  118. ????}
  119. ????.shuoshuo_author_img?img?{
  120. ????????border:?1px?solid?#ddd;
  121. ????????padding:?2px;
  122. ????????float:?left;
  123. ????????border-radius:?64px;
  124. ????????transition:?all?1.0s;
  125. ????}
  126. ????.avatar?{
  127. ????????-webkit-border-radius:?100%?!important;
  128. ????????-moz-border-radius:?100%?!important;
  129. ????????box-shadow:?inset?0?-1px?0?#3333sf;
  130. ????????-webkit-box-shadow:?inset?0?-1px?0?#3333sf;
  131. ????????-webkit-transition:?0.4s;
  132. ????????-webkit-transition:?-webkit-transform?0.4s?ease-out;
  133. ????????transition:?transform?0.4s?ease-out;
  134. ????????-moz-transition:?-moz-transform?0.4s?ease-out;
  135. ????}
  136. ????.zhuan?{
  137. ????????transform:?rotateZ(720deg);
  138. ????????-webkit-transform:?rotateZ(720deg);
  139. ????????-moz-transform:?rotateZ(720deg);
  140. ????}
  141. ????/*?end?*/
  142. </style>
  143. </head>
  144. <body>
  145. <div?id="primary"?class="content-area"?style="">
  146. ????<main?id="main"?class="site-main"?role="main">
  147. ????????<div?id="shuoshuo_content">
  148. ????????????<ul?class="cbp_tmtimeline">
  149. ????????????????<?php?query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if?(have_posts())?:?while?(have_posts())?:?the_post();??>
  150. ????????????????<li>?<span?class="shuoshuo_author_img"><img?src="http://wosn.net/wp-content/themes/begin/img/touxiang/timg7.jpg"?class="avatar?avatar-48"?width="48"?height="48"></span>
  151. ????????????????????<a?class="cbp_tmlabel"?href="javascript:void(0)">
  152. ????????????????????????<p></p>
  153. ????????????????????????<p><?php?the_content();??></p>
  154. ????????????????????????<p></p>
  155. ????????????????????????<p?class="shuoshuo_time"><i?class="fa?fa-clock-o"></i>
  156. ????????????????????????????<?php?the_time('Y年n月j日G:i');??>
  157. ????????????????????????</p>
  158. ????????????????????</a>
  159. ????????????????????<?php?endwhile;endif;??>
  160. ????????????????</li>
  161. ????????????</ul>
  162. ????????</div>
  163. ????</main>
  164. ????<!--?.site-main?-->
  165. </div>
  166. <script?type="text/javascript">
  167. ????$(function?()?{
  168. ????????var?oldClass?=?"";
  169. ????????var?Obj?=?"";
  170. ????????$(".cbp_tmtimeline?li").hover(function?()?{
  171. ????????????Obj?=?$(this).children(".shuoshuo_author_img");
  172. ????????????Obj?=?Obj.children("img");
  173. ????????????oldClass?=?Obj.attr("class");
  174. ????????????var?newClass?=?oldClass?+?"?zhuan";
  175. ????????????Obj.attr("class",?newClass);
  176. ????????},?function?()?{
  177. ????????????Obj.attr("class",?oldClass);
  178. ????????})
  179. ????})
  180. </script>
  181. <?php?get_sidebar();??>
  182. <?php?get_footer();?>

最后，打开后台 → 页面 → 新建页面，标题处输入“我的说说”，页面模板处选择我们的“说说页面”，然后直接点击发布页面。你会发现后台左侧栏目出现了一个说说栏目，点击它就可以发表说说了。

怎么给wordpress增加说说/微博功能

效果请看：http://wosn.net/shuoshuo.html

注意：在上方代码（即说说页面代码）150行处，替换自己的头像图片。

样式二（未测试）：

操作方法同上，只是样式不同。

首先在主题的functions.php里面加入以下代码：

  1. /说说
  2. ?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);?}

其次，把下方代码保存为shuoshuo.php文件上传到你正在使用的主题根目录里。

  1. <?php?/*
  2. ???Template?Name:?说说页面
  3. ???author:?沃森博客
  4. ???url:?http://wosn.net/540.html
  5. ???*/
  6. ???get_header();??><link href="shuoshuo.css" rel="stylesheet"><div?class="shuoshuo">
  7. ????<ul?class="archives-monthlisting">
  8. ????<?php?query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if?(have_posts())?:?while?(have_posts())?:?the_post();??>
  9. ????<li><span?class="tt"><?php?the_time('Y年n月j日G:i');??></span>
  10. ????<div?class="shuoshuo-content"><?php?the_content();??><br/><div?class="shuoshuo-meta"><span?>—<?php?the_author()??></span></div></div><?php?endwhile;endif;??></li>
  11. ????</ul>
  12. ???</div>
  13. ???<?php?get_footer();?>

把下方代码保存为shuoshuo.css文件上传到你正在使用的主题根目录里。

  1. ?.shuoshuo?{
  2. position怎么给wordpress增加说说/微博功能relative;
  3. margin怎么给wordpress增加说说/微博功能50px?0;
  4. }
  5. .shuoshuo?li?{
  6. padding怎么给wordpress增加说说/微博功能8px?0;
  7. display怎么给wordpress增加说说/微博功能block;
  8. }
  9. .shuoshuo-content?{
  10. box-shadow:?0?0?3px?RGBA(0,0,0,.15);
  11. background-color怎么给wordpress增加说说/微博功能#f8f8f8;
  12. border:1px?#eee?solid;
  13. border-radius:?4px;
  14. font-size:?1em;
  15. line-height:2.3em;
  16. margin:0?150px?0?200px;
  17. letter-spacing怎么给wordpress增加说说/微博功能1px;
  18. padding怎么给wordpress增加说说/微博功能20px?20px?5px?30px;
  19. color怎么给wordpress增加说说/微博功能#666;
  20. min-height:60px;
  21. position怎么给wordpress增加说说/微博功能relative;
  22. ?whitewhite-space怎么给wordpress增加说说/微博功能pre;?/*?CSS?2.0?*/
  23. ?whitewhite-space怎么给wordpress增加说说/微博功能pre-wrap;?/*?CSS?2.1?*/
  24. ?whitewhite-space怎么给wordpress增加说说/微博功能pre-line;?/*?CSS?3.0?*/
  25. ?whitewhite-space:?-pre-wrap;?/*?Opera?4-6?*/
  26. ?whitewhite-space:?-o-pre-wrap;?/*?Opera?7?*/
  27. ?whitewhite-space:?-moz-pre-wrap;?/*?Mozilla?*/
  28. ?whitewhite-space:?-hp-pre-wrap;?/*?HP?Printers?*/
  29. ?word-wrap:?break-word;?/*?IE?5+,?鏂囨湰琛岀殑浠绘剰瀛楀唴鏂?紑?*/
  30. }
  31. .shuoshuo-content?p{margin:0;}
  32. /*浣滆??*/
  33. .shuoshuo-meta?{
  34. text-align怎么给wordpress增加说说/微博功能rightright;
  35. letter-spacing怎么给wordpress增加说说/微博功能0px;
  36. margin-top:-85px;
  37. }
  38. .toolbar{display:none}
  39. /*鏃堕棿*/
  40. /*.shuoshuo?.tt{margin:?35px?0?0?15px;float:left;font-size:0.9em;}*/
  41. /*.shuoshuo?li?em{float:left;background:url("//www.100day.cc/wp-content/themes/frontopen2_v1.5.04.15/images/bolangxian.png")?no-repeat;width:50px;height:10px;margin:42px?0?0?28px;}*/
  42. /*.shuoshuo?li:hover?.tt?{color:#0c0;font-weight:bold;}?*/
  43. /*澶村儚*/
  44. .shuoshuo?.zhutou{border-radius:?50%;margin怎么给wordpress增加说说/微博功能25px?35px?0?5px;float:rightright;padding怎么给wordpress增加说说/微博功能2px;border怎么给wordpress增加说说/微博功能1px?#ddd?solid;display怎么给wordpress增加说说/微博功能block;transition:?.5s;width怎么给wordpress增加说说/微博功能40px;height怎么给wordpress增加说说/微博功能40px;overflow:hidden;}
  45. .shuoshuo?li:hover?.zhutou?{
  46. transform:?rotate(720deg);-webkit-transform:?rotate(720deg);-moz-transform:?rotate(720deg);border-color怎么给wordpress增加说说/微博功能#0c0;}
  47. /*鍓嶉潰鐨勮酱*/
  48. .shuoshuo:before?{
  49. height:?100%;
  50. width怎么给wordpress增加说说/微博功能2px;
  51. background怎么给wordpress增加说说/微博功能#eee;
  52. position怎么给wordpress增加说说/微博功能absolute;
  53. left怎么给wordpress增加说说/微博功能164px;
  54. content怎么给wordpress增加说说/微博功能"";
  55. top:0px;
  56. }
  57. .shuoshuo-content:before?{
  58. position怎么给wordpress增加说说/微博功能absolute;
  59. top怎么给wordpress增加说说/微博功能40px;
  60. bottombottom怎么给wordpress增加说说/微博功能0px;
  61. left:?-42px;
  62. background怎么给wordpress增加说说/微博功能#fff;
  63. height怎么给wordpress增加说说/微博功能12px;
  64. width怎么给wordpress增加说说/微博功能12px;
  65. border-radius:?6px;
  66. content怎么给wordpress增加说说/微博功能"";
  67. box-shadow:?inset?0?0?2px?#0c0;
  68. }
  69. .shuoshuo-content:after?{
  70. position怎么给wordpress增加说说/微博功能absolute;
  71. top怎么给wordpress增加说说/微博功能42px;
  72. bottombottom怎么给wordpress增加说说/微博功能0px;
  73. left:?-40px;
  74. background怎么给wordpress增加说说/微博功能#ccc;
  75. height怎么给wordpress增加说说/微博功能8px;
  76. width怎么给wordpress增加说说/微博功能8px;
  77. border-radius:?6px;
  78. content怎么给wordpress增加说说/微博功能"";
  79. }
  80. .shuoshuo?li:hover?.shuoshuo-content:after?{
  81. background怎么给wordpress增加说说/微博功能#0c0;
  82. -webkit-transform:?scale(1.3);
  83. -moz-transform:?scale(1.3);
  84. -ms-transform:?scale(1.3);
  85. -o-transform:?scale(1.3);
  86. }
  87. .shuoshuo?li:hover?.shuoshuo-content:before?{-webkit-transform:?scale(1.3);
  88. -moz-transform:?scale(1.3);
  89. -ms-transform:?scale(1.3);
  90. -o-transform:?scale(1.3);}
  91. /*鍚庨潰鐨勮酱*/
  92. .shuoshuo:after?{
  93. height:?100%;
  94. width怎么给wordpress增加说说/微博功能2px;
  95. background怎么给wordpress增加说说/微博功能#eee;
  96. position怎么给wordpress增加说说/微博功能absolute;
  97. rightright怎么给wordpress增加说说/微博功能100px;
  98. content怎么给wordpress增加说说/微博功能"";
  99. top:0px;
  100. }
  101. .shuoshuo-meta:before?{
  102. position怎么给wordpress增加说说/微博功能absolute;
  103. top怎么给wordpress增加说说/微博功能42px;
  104. bottombottom怎么给wordpress增加说说/微博功能0px;
  105. rightright:?-56px;
  106. background怎么给wordpress增加说说/微博功能#fff;
  107. height怎么给wordpress增加说说/微博功能12px;
  108. width怎么给wordpress增加说说/微博功能12px;
  109. border-radius:?6px;
  110. content怎么给wordpress增加说说/微博功能"";
  111. z-index:2;
  112. box-shadow:?inset?0?0?2px?#0c0;
  113. }
  114. .shuoshuo-meta:after?{
  115. position怎么给wordpress增加说说/微博功能absolute;
  116. top怎么给wordpress增加说说/微博功能44px;
  117. bottombottom怎么给wordpress增加说说/微博功能0px;
  118. rightright:?-54px;
  119. background怎么给wordpress增加说说/微博功能#ccc;
  120. height怎么给wordpress增加说说/微博功能8px;
  121. width怎么给wordpress增加说说/微博功能8px;
  122. z-index:2;
  123. border-radius:?6px;
  124. content怎么给wordpress增加说说/微博功能"";
  125. }
  126. .shuoshuo?li:hover?.shuoshuo-meta:after?{
  127. background怎么给wordpress增加说说/微博功能#0c0;
  128. }
  129. @media?screen?and?(min-width:1080px){
  130. .shuoshuo{width:1060px;margin:50px?auto}
  131. }
  132. @media?screen?and?(max-width怎么给wordpress增加说说/微博功能800px)?{
  133. .shuoshuo-content?{margin:0?60px?0?70px;padding怎么给wordpress增加说说/微博功能10px?10px?5px?10px;font-size:0.9em;}
  134. .shuoshuo?.tt{width:30px;font-weight:bold;margin怎么给wordpress增加说说/微博功能30px?0?0?1px;font-size:0.5em;height怎么给wordpress增加说说/微博功能20px;}
  135. .shuoshuo?li:hover?.tt?{color:#0c0;font-size:0.5em;}
  136. .shuoshuo:before?{left怎么给wordpress增加说说/微博功能50px;}
  137. .shuoshuo-content:before?{left:?-26px;top:30px;}
  138. .shuoshuo-content:after?{left:?-24px;top:32px;}
  140. .shuoshuo:after?{rightright怎么给wordpress增加说说/微博功能27px;}
  141. .shuoshuo-meta:before?{rightright:?-39px;top:33px;}
  142. .shuoshuo-meta:after?{rightright:?-37px;top:35px;}
  144. .shuoshuo?.zhutou{margin怎么给wordpress增加说说/微博功能17px?5px?0?5px;}
  145. .shuoshuo?li?em{float:left;width:39px;height:10px;margin:34px?0?0?-1px;}
  146. }

最后，打开后台 → 页面 → 新建页面，标题处输入“我的说说”，页面模板处选择我们的“说说页面”，然后直接点击发布页面。

怎么给wordpress增加说说/微博功能

注：如果不想富媒体说说，单纯地写文字的话，可以把最后一段代码中的<?php the_content(); ?>改成<?php the_title(); ?>，这样以后发表说说只要填写标题就可以了，查找起来也比较方便。如果你用<?php the_content(); ?>，那么你发表说说的时候标题和内容要写成一样，以方便查找，如果你只填写内容，那么你在后台查看说说的时候，显示的列表全是无标题，对于修改比较麻烦。

沃森博客
  • 本文由 发表于 2017年9月12日23:24:47
  • 本文来自互利网收集整理，问题反馈联系邮箱：wosnnet@foxmail.com，转载请务必保留本文链接：https://wosn.net/540.html

发表评论