2015-10-18_111724

以下代码放入functions.php中

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

  1. 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文件中:

  1. <?php
  2. /*
  3.  Template Name: 说说
  4.  author: 秋叶,Sven修改
  5.  */
  6.  get_header(); ?><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:H'); ?></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();?>

美化CSS样式

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

  1. .shuoshuo {
  2. positionrelative;
  3. padding10px 0;
  4. }
  5. .shuoshuo li {
  6. padding8px 0;
  7. displayblock;
  8. }
  9. .shuoshuo-content {
  10. box-shadow: 0 0 3px RGBA(0,0,0,.15);
  11. background-color#f2f2f2;
  12. border:1px #ccc solid;
  13. border-radius: 4px;
  14. font-size: 1.2em;
  15. line-height:1.5em;
  16. margin:0 150px 0 200px;
  17. letter-spacing1px;
  18. padding20px 20px 5px 30px;
  19. color#666;
  20. min-height:60px;
  21. positionrelative;
  22.  whitewhite-spacepre/* CSS 2.0 */
  23.  whitewhite-spacepre-wrap; /* CSS 2.1 */
  24.  whitewhite-spacepre-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-alignrightright;
  35. letter-spacing0px;
  36. margin-top:-10px;
  37. }
  38. /*时间*/
  39. .shuoshuo .tt{margin35px 0 0 15px;float:left;font-size:0.7em;}
  40. .shuoshuo li em{float:left;width:50px;height:10px;margin:42px 0 0 28px;}
  41. .shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
  42. /*头像*/
  43. .shuoshuo .zhutou{border-radius: 50%;margin25px 35px 0 5px;float:rightright;padding2px;border1px #ddd solid;displayblock;transition: .5s;width40px;height40px;overflow:hidden;}
  44. .shuoshuo li:hover .zhutou {
  45. transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color#0c0;}
  46. /*前面的轴*/
  47. .shuoshuo:before {
  48. height: 100%;
  49. width2px;
  50. background#eee;
  51. positionabsolute;
  52. left164px;
  53. content"";
  54. top:0px;
  55. }
  56. .shuoshuo-content:before {
  57. positionabsolute;
  58. top40px;
  59. bottombottom0px;
  60. left: -42px;
  61. background#fff;
  62. height12px;
  63. width12px;
  64. border-radius: 6px;
  65. content"";
  66. box-shadow: inset 0 0 2px #0c0;
  67. }
  68. .shuoshuo-content:after {
  69. positionabsolute;
  70. top42px;
  71. bottombottom0px;
  72. left: -40px;
  73. background#ccc;
  74. height8px;
  75. width8px;
  76. border-radius: 6px;
  77. content"";
  78. }
  79. .shuoshuo li:hover .shuoshuo-content:after {
  80. background#0c0;
  81. -webkit-transform: scale(1.3);
  82. -moz-transform: scale(1.3);
  83. -ms-transform: scale(1.3);
  84. -o-transform: scale(1.3);
  85. }
  86. .shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
  87. -moz-transform: scale(1.3);
  88. -ms-transform: scale(1.3);
  89. -o-transform: scale(1.3);}
  90. /*后面的轴*/
  91. .shuoshuo:after {
  92. height: 100%;
  93. width2px;
  94. background#eee;
  95. positionabsolute;
  96. rightright100px;
  97. content"";
  98. top:0px;
  99. }
  100. .shuoshuo-meta:before {
  101. positionabsolute;
  102. top42px;
  103. bottombottom0px;
  104. rightright: -56px;
  105. background#fff;
  106. height12px;
  107. width12px;
  108. border-radius: 6px;
  109. content"";
  110. z-index:2;
  111. box-shadow: inset 0 0 2px #0c0;
  112. }
  113. .shuoshuo-meta:after {
  114. positionabsolute;
  115. top44px;
  116. bottombottom0px;
  117. rightright: -54px;
  118. background#ccc;
  119. height8px;
  120. width8px;
  121. z-index:2;
  122. border-radius: 6px;
  123. content"";
  124. }
  125. .shuoshuo li:hover .shuoshuo-meta:after {
  126. background#0c0;
  127. }
  128. @media screen and (max-width800px) {
  129. .shuoshuo-content {margin:0 60px 0 70px;padding10px 10px 5px 10px;font-size:0.9em;}
  130. .shuoshuo .tt{width:30px;font-weight:bold;margin30px 0 0 1px;font-size:0.5em;height20px;}
  131. .shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
  132. .shuoshuo:before {left50px;}
  133. .shuoshuo-content:before {left: -26px;top:30px;}
  134. .shuoshuo-content:after {left: -24px;top:32px;}
  135. .shuoshuo:after {rightright27px;}
  136. .shuoshuo-meta:before {rightright: -39px;top:33px;}
  137. .shuoshuo-meta:after {rightright: -37px;top:35px;}
  138. .shuoshuo .zhutou{margin17px 5px 0 5px;}
  139. .shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
  140. }

调用seavia-shuo.css

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

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

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

也可以直接把这些css放在seavia-shuo.php里,用样式包裹起来。