Categories: 免费教程

wordpress知更鸟主题增加说说/微语单页教程

wordpress知更鸟主题增加说说/微语单页教程

前言

本博客是从emlog博客系统转到wordpress系统的，在用emlog时还可以发些说说，转到wordpress后因为没有微语功能又不想单独发一篇文章来写说说。

教程

本教程来自络，首先在主题的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文件放到你正在使用的主题根目录里把下面代码放入shuoshuo.php;

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

然后在wordpress后台新建单页模板选择说说，头像地址在代码里修改，在哪发说说你自己找，发说说不用填标题！！

77生活网

Share
Published by
77生活网
Tags: wordpress教程
7 年 ago

Recent Posts

在一起更出色 长城欧拉牵手50万用户开启多彩用车生活

在人潮涌动，朝气蓬勃的广州，汽…

9 小时 ago

全球50万用户的选择，长城欧拉让经典更出色

作为年度压轴的重磅车展，有着“…

4 天 ago

经典更出色！欧拉好猫周年纪念版上市，售价12.98万元

11月9日，值此欧拉汽车全球用…

2 周 ago

护你暖心入冬 欧拉闪电猫不愧是冬季出行好拍档

深秋的红叶还未落尽，新冬已经翩…

2 周 ago

欧拉好猫厄瓜多尔上市 长城汽车全球化版图再扩张

10月29日，欧拉好猫在厄瓜多…

3 周 ago

最高可享6万元！欧拉闪电猫十月钜惠引燃金秋很给力

金秋十月，正是购车好时节。在全…

1 月 ago