为wordpress加一个说说页面

3年前 (2017-06-14) gtj wordpress, 杂记 0评论 已收录 200℃


  • 参考了两篇wordpress博主写的文档,其实就是我就是小白操作了。
    这里我把内容粘一下:

    1.首先改下模板里的functions-s.php文件,在最后复制以下代码:

    //说说
     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); }
    
    

    2.在模板的当前目录创建一个页面shuoshuo.php

    把代码粘贴进去
    <?php /* Template Name: 说说 author: ainy url: http://www.tang1314.com/shuoshuo */ get_header(); ?>
    <link href="/wp-content/themes/solome/shuoshuo.css" rel="stylesheet">
    
    <div class="shuoshuo">
    
    <ul class="archives-monthlisting">
     <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
     
    <li><span class="tt"><?php the_time('Y年n月j日G:i'); ?></span>
    
    <div class="shuoshuo-content">
    <?php the_title(); ?>
    
    <div class="shuoshuo-meta"><span >—<?php the_author() ?></span></div>
    </div>
    
    <?php endwhile;endif; ?></li>
    
     </ul>
    
    </div>
    
    <?php get_footer();?>
    

    3.创建一个css文件

    把代码粘贴进去

    .shuoshuo {
    position: relative;
    margin: 50px 0;
    }
    .shuoshuo li {
    padding: 8px 0;
    display: block;
    }
    .shuoshuo-content {
    box-shadow: 0 0 3px RGBA(0,0,0,.15);
    background-color: #f8f8f8;
    border:1px #eee solid;
    border-radius: 4px;
    font-size: 1em;
    line-height:2.3em;
    margin:0 150px 0 200px;
    letter-spacing: 1px;
    padding: 20px 20px 5px 30px;
    color: #666;
    min-height:60px;
    position: relative;
     white-space: pre; /* CSS 2.0 */ 
     white-space: pre-wrap; /* CSS 2.1 */ 
     white-space: pre-line; /* CSS 3.0 */ 
     white-space: -pre-wrap; /* Opera 4-6 */ 
     white-space: -o-pre-wrap; /* Opera 7 */ 
     white-space: -moz-pre-wrap; /* Mozilla */ 
     white-space: -hp-pre-wrap; /* HP Printers */ 
     word-wrap: break-word; /* IE 5+, 鏂囨湰琛岀殑浠绘剰瀛楀唴鏂紑 */
    }
    .shuoshuo-content p{margin:0;}
    /*浣滆€?*/
    .shuoshuo-meta {
    text-align: right;
    letter-spacing: 0px;
    margin-top:-85px;
    }
    .toolbar{display:none}
    /*鏃堕棿*/
    /*.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.9em;}*/
    /*.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;}*/
    /*.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;} */
    /*澶村儚*/
    .shuoshuo .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;}
    .shuoshuo li:hover .zhutou {
    transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
    /*鍓嶉潰鐨勮酱*/
    .shuoshuo:before {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    left: 164px;
    content: "";
    top:0px;
    }
    .shuoshuo-content:before {
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: -42px;
    background: #fff;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    content: "";
    box-shadow: inset 0 0 2px #0c0;
    }
    .shuoshuo-content:after {
    position: absolute;
    top: 42px;
    bottom: 0px;
    left: -40px;
    background: #ccc;
    height: 8px;
    width: 8px;
    border-radius: 6px;
    content: "";
    }
    .shuoshuo li:hover .shuoshuo-content:after {
    background: #0c0;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    }
    .shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);}
    /*鍚庨潰鐨勮酱*/
    .shuoshuo:after {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    right: 100px;
    content: "";
    top:0px;
    }
    .shuoshuo-meta:before {
    position: absolute;
    top: 42px;
    bottom: 0px;
    right: -56px;
    background: #fff;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    content: "";
    z-index:2;
    box-shadow: inset 0 0 2px #0c0;
    }
    .shuoshuo-meta:after {
    position: absolute;
    top: 44px;
    bottom: 0px;
    right: -54px;
    background: #ccc;
    height: 8px;
    width: 8px;
    z-index:2;
    border-radius: 6px;
    content: "";
    }
    .shuoshuo li:hover .shuoshuo-meta:after {
    background: #0c0;
    }
    @media screen and (min-width:1080px){
    .shuoshuo{width:1060px; min-height:500px; margin:50px auto}
    }
    @media screen and (max-width: 800px) { 
    .shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
    .shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
    .shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
    .shuoshuo:before {left: 50px;}
    .shuoshuo-content:before {left: -26px;top:30px;}
    .shuoshuo-content:after {left: -24px;top:32px;}
     
    .shuoshuo:after {right: 27px;}
    .shuoshuo-meta:before {right: -39px;top:33px;}
    .shuoshuo-meta:after {right: -37px;top:35px;}
     
    .shuoshuo .zhutou{margin: 17px 5px 0 5px;}
    .shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
    }
    

    这样就可以在wordpress后台添加一个说说页面,模板选择“shuoshuo”,这样就可以开启说说旅程了。
    我的说说如下:https://bk.devopstack.cn/shuoshuo
    ps:代码基本都是别人的,我只是改了点css.

博主

这货来去如风,什么鬼都没留下!!!

相关推荐

嗨、骚年、快来消灭0回复。

×
订阅图标按钮
Less is more!!!