给wordpress添加说说/短文字功能！

流年
流年
管理员
320
文章
407.8千
浏览
154,358字数 1191阅读3分58秒

一直想用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,
  25. 'supports' => array('editor','author','title', 'custom-fields') );
  26. register_post_type('post',$args);
  27. }

 

如果你想你的说说让人评论的话在以上代码的supports加上这个值'comments'。具体如下
'supports' => array('editor','author','title', 'custom-fields','comments') );
然后后台就出现新建说说的功能了：

然后继续新建一个PHP文件，代码如下：

 

  1. <?php
  2. /* Template Name: 说说 
  3. author: 流年 
  4. url: http://lnaa.top
  5.  */
  6. get_header(); ?>
  7. <div class="post">
  8. <ul class="archives-monthlisting">
  9.  <?php query_posts("post_shuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
  10. <li><img src="http://lnaa.top/wp-content/themes/tinection/images/touxiang.gif" class="zhutou" alt="作者头像"><span class="tt"><?php the_time('Y年n月j日G:H'); ?></span><em></em>
  11. <div class="post-content"><?php the_content(); ?>
  12. <div class="post-meta"><span>—  <?php the_author() ?></span></div>
  13. </div>
  14. <?php endwhile;endif; ?></li>
  15. </ul>
  16. </div>
  17. <?php get_footer();?>

如果你想在说说展示页面加入评论按钮 在以上代码的

  1. <span>—  <?php the_author() ?></span>

的后面添加这段代码

  1. <span> | </span><span><a href="<?php the_permalink(); ?>#comments" title="评论" target="_blank" > 评论</a></span>

然后保存PHP文件把文件名改成page-post.php 然后上传到模板的目录

接着后台新建页面，模板选择 说说 ，然后保存。

然后你就可以在后台发布说说了，然后到你刚才新建的页面去看，是不是出来了？但是问题来了。。现在说说的样式很乱。。需要我们添加css。以下是我在使用的css。需要的自己复制，添加到style.css 里面即可。

  1. /*说样式*/
  2. .post {
  3. position: relative;
  4. padding: 10px 0;
  5. }
  6. .post li {
  7. padding: 8px 0;
  8. display: block;
  9. }
  10. .post-content {
  11. box-shadow: 0 0 3px RGBA(0,0,0,.15);
  12. background-color: #f2f2f2;
  13. border:1px #ccc solid;
  14. border-radius: 4px;
  15. font-size: 1.2em;
  16. line-height:1.5em;
  17. margin:0 150px 0 200px;
  18. letter-spacing: 1px;
  19. padding: 20px 20px 5px 30px;
  20. color: #666;
  21. min-height:60px;
  22. position: relative;
  23.    white-space: pre; /* CSS 2.0 */
  24.    white-space: pre-wrap; /* CSS 2.1 */
  25.    white-space: pre-line; /* CSS 3.0 */
  26.    white-space: -pre-wrap; /* Opera 4-6 */
  27.    white-space: -o-pre-wrap; /* Opera 7 */
  28.    white-space: -moz-pre-wrap; /* Mozilla */
  29.    white-space: -hp-pre-wrap; /* HP Printers */
  30.    word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */
  31. }
  32. .post-content p{margin:0;}
  33. /*作者*/
  34. .post-meta {
  35. text-align: right;
  36. letter-spacing: 0px;
  37. margin-top:-10px;
  38. }
  39. /*时间*/
  40. .post .tt{margin: 35px 0 0 15px;float:left;font-size:0.7em;}
  41. .post li em{float:left;background:url("http://lnaa.top/wp-content/themes/tinection/images/bolangxian.png") no-repeat;width:50px;height:10px;margin:42px 0 0 28px;}
  42. .post li:hover .tt {color:#0c0;font-weight:bold;}
  43. /*头像*/
  44. .post .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;}
  45. .post li:hover .zhutou {
  46. transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
  47. /*前面的轴*/
  48. .post:before {
  49. height: 100%;
  50. width: 2px;
  51. background: #eee;
  52. position: absolute;
  53. left: 164px;
  54. content: "";
  55. top:0px;
  56. }
  57. .post-content:before {
  58. position: absolute;
  59. top: 40px;
  60. bottom: 0px;
  61. left: -42px;
  62. background: #fff;
  63. height: 12px;
  64. width: 12px;
  65. border-radius: 6px;
  66. content: "";
  67. box-shadow: inset 0 0 2px #0c0;
  68. }
  69. .post-content:after {
  70. position: absolute;
  71. top: 42px;
  72. bottom: 0px;
  73. left: -40px;
  74. background: #ccc;
  75. height: 8px;
  76. width: 8px;
  77. border-radius: 6px;
  78. content: "";
  79. }
  80. .post li:hover .post-content:after {
  81. background: #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. .post li:hover .post-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. .post:after {
  93. height: 100%;
  94. width: 2px;
  95. background: #eee;
  96. position: absolute;
  97. right: 100px;
  98. content: "";
  99. top:0px;
  100. }
  101. .post-meta:before {
  102. position: absolute;
  103. top: 42px;
  104. bottom: 0px;
  105. right: -56px;
  106. background: #fff;
  107. height: 12px;
  108. width: 12px;
  109. border-radius: 6px;
  110. content: "";
  111. z-index:2;
  112. box-shadow: inset 0 0 2px #0c0;
  113. }
  114. .post-meta:after {
  115. position: absolute;
  116. top: 44px;
  117. bottom: 0px;
  118. right: -54px;
  119. background: #ccc;
  120. height: 8px;
  121. width: 8px;
  122. z-index:2;
  123. border-radius: 6px;
  124. content: "";
  125. }
  126. .post li:hover .post-meta:after {
  127. background: #0c0;
  128. }
  129. @media screen and (max-width: 800px) {
  130. .post-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
  131. .post .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
  132. .post li:hover .tt {color:#0c0;font-size:0.5em;}
  133. .post:before {left: 50px;}
  134. .post-content:before {left: -26px;top:30px;}
  135. .post-content:after {left: -24px;top:32px;}
  137. .post:after {right: 27px;}
  138. .post-meta:before {right: -39px;top:33px;}
  139. .post-meta:after {right: -37px;top:35px;}
  140. .post .zhutou{margin: 20px 8px 0 5px;}
  141. .post li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
  142. }

点击查看演示：http://lnaa.top/shuo  演示的说说页面经过后期的重新排版css 。。可能可上面的效果不一样。。

好了教程，完毕。

 

如果你遇到分页的问题 请查看这篇文章：解决WordPress自定义页面分页问题

博客最后更新：2015-11-22
流年
  • 本文由 流年 发表于2015年8月14日 10:07:30
  • 除非特殊声明，本站文章均为原创，需要转载，请留言说明！
博客个性化字体

加载中...

评论  15  访客  7  作者  8
    • 手机游戏网
      手机游戏网 1
      香港 7F
      回复

      大佬这个是最新的吗？我也来换上去试试

      • 清风美文
        清风美文 2
        陕西省西安市 6F
        回复

        点击文章下方的说说演示，显示加载失败，检查一下。

        • boke112导航
          boke112导航 4
          广西 5F
          回复

          点击说说演示失败

          • 自由人理财
            自由人理财 0
            北京市 4F
            回复

            这个功能不错。。

            • 流年
              流年
              地球人 3F
              回复

              测试，，

              • boke112导航
                boke112导航 4
                广西 2F
                回复

                博主，你好，boke112导航（博客导航站）特来拜会，发现贵站不错，已将贵站收录到博客导航的生活日记类，如有异议请留言哦！谢谢！PS：由于找不到贵站的留言板，所以就在此留言告知了，如造成困扰可删除本条评论，谢谢！

                • 秦川博客
                  秦川博客 0
                  湖南省湘西州 1F
                  回复

                  抢个沙发支持博主

                匿名

                发表评论

                匿名网友
                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
                确定

                拖动滑块以完成验证