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

77生活网
免费教程wordpress知更鸟主题增加说说/微语单页教程已关闭评论4,223阅读模式

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) !important
  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% !important;
  147.         -moz-border-radius: 100% !important;
  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后台新建单页模板选择说说，头像地址在代码里修改，在哪发说说你自己找，发说说不用填标题！！

继续阅读
历史上的今天
10 月
23
我的微信
微信扫一扫
weinxin
我的微信
你领一次红包多一份动力
支付宝搜索7503319领取
weinxin
我的公众号
 
77生活网