WordPress添加说说/心情页面

很多网站都有一个说说/心情的页面,用来记录自己每日的所思所想,很是不错。自己之前都是将自己的心情记录在添加的一言功能里的,详见>>> 网站新增一言功能——微语录就是这么简单 。这个功能有一个局限,就是每次添加的时候都需要登陆 FTP 下载 TXT 文件,添加完成后再上传,特别的不方便。最后想了想还是决定自己也折腾个说说/心情的页面,从网上搜索了很多相关文章,又根据自己喜好最终折腾出的页面如下:

样式基本上使用的是 jQuery 插件库的垂直时间轴,稍微做了些调整,后面我会分享该文件。话不多说,还是直接进入我们的实现环节。

注册帖子类型

首先,我们需要使用 WordPress 的 register_post_type( ) 函数注册一个新的帖子类型,以方便日后编辑说说。将以下代码直接丢到主题的 functions.php 文件中去即可。

function my_custom_shuoshuo_init() { 
    $labels = array( 
        'name' => '说说',
        'singular_name' => '说说', 
        'all_items' => '所有说说',
        '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); 
}

关于 register_post_type( ) 函数的使用,你可以查阅这篇文章:

https://developer.wordpress.org/reference/functions/register_post_type/

添加说说/心情页面模板文件

添加完上述函数后,我们就可以在后台发现一个“说说”的菜单,通过菜单即可编辑说说,但是我们发现编辑完成后的说说并不能在前端显示出来,这是我们们需要新建一个说说的页面模板控制其前端显示,将以下代码复制并另存为 page_shuoshuo.php ,并上传至主题根目录下。

<?php 
/* Template Name: 说说/心情 */
get_header(); 
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/vertical_timeline.css" />
<section class="container">
<div class="content-wrap">
<div class="content">
    <div style="background: #FFF; padding: 30px; border-radius: 5px;">
        <ul class="cbp_tmtimeline">
        <?php 
        query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
        if ( have_posts() ) { 
        while ( have_posts() ) { 
        the_post(); ?>
            <li>
                <time class="cbp_tmtime"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></time>
                <div class="cbp_tmicon">
                <img src="http://blog.quietguoguo.com/qggblog/wp-content/uploads/2018/01/zibuyulogo.png" class="avatar avatar-48" width="48" height="48">
                </div>
                <div class="cbp_tmlabel" >
                    <span style="font-size:14px;"><?php the_content(); ?></span>
                    <h2><?php the_title(); ?><span><?php echo get_bloginfo('name'); ?> | <?php echo get_bloginfo('description' ); ?></span></h2>
                </div>
            </li>
        <?php }
        } ?>
        </ul>
    </div>
</div> 
</div>
<?php get_sidebar(); ?>
</section>
<?php get_footer();?>

代码中所用 WordPress 函数官方文档如下:

CSS样式美化

将以下代码复制并保存为 vertical_timeline.css 文件,直接丢到主题 css 文件夹下即可。

/** 垂直时间线CSS样式 */

.cbp_tmtimeline {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
} 
/* The line */
.cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #afdcf8;
    left: 20%;
    margin-left: -6px;
}
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
    display: block;
    width: 30%;
    padding-right: 100px;
    position: absolute;
    color: #AAA;
}
.cbp_tmtimeline > li .cbp_tmtime span {
    display: block;
    text-align: right;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
    font-size: 0.9em;
    color: #bdd0db;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 2.9em;
    color: #24a0f0;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
    color: #7878f0;
}
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 15px 25%;
    background: #24a0f0;
    color: #fff;
    padding: 0.8em;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 5px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
    background: #7878f0;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 { 
    border-bottom: 0px;
    border-top:1px dashed #FFF; 
    font-size:16px; 
    height: 24px; 
    padding: 5px 3px 12px; 
    margin:0px;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 > span { 
    font-size: 12px; 
    float: right; 
    text-align: center; 
    line-height: 24px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #24a0f0;
    border-width: 10px;
    top: 10px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: #7878f0;
}
/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
    width: 48px;
    height: 48px;
    font-family: 'ecoico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 48px;
    line-height: 48px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    color: #fff;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #afdcf8;
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px;
}
.cbp_tmtimeline > li .cbp_tmicon >img {
    border-radius: 50%; 
    position: absolute; 
    top: 0px; 
    left: 0px;
}
/* Example Media Queries */
@media screen and (max-width: 65.375em) {
    .cbp_tmtimeline > li .cbp_tmtime span:last-child {
        font-size: 1.5em;
    }
}
@media screen and (max-width: 47.2em) {
    .cbp_tmtimeline:before {
        display: none;
    }
    .cbp_tmtimeline > li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0;
    }
    .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: left;
    }
    .cbp_tmtimeline > li .cbp_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%;
    }
    .cbp_tmtimeline > li .cbp_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #24a0f0;
        top: -20px;
    }
    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: transparent;
        border-bottom-color: #7878f0;
    }
    .cbp_tmtimeline > li .cbp_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0px;
    }
}
样式代码来源于 jQuery 插件库的垂直时间轴,不过我稍微做了些修改。

新建说说页面

代码部署完成后前往后台新建一个页面,页面模板选择“说说/心情”即可。

现在你就可以通过访问页面链接来查看发布的说说了。

蝈蝈下载面板

恭喜,此资源为免费资源,请先
注意:本站资源多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。如非特殊说明,本站所有资源解压密码均为:blog.quietguoguo.com。
未经允许不得转载

文章标题:蝈蝈要安静 » WordPress添加说说/心情页面

原文链接:https://blog.quietguoguo.com/2684.html

发布信息:文章由【蝈蝈要安静】于<2018-06-27>发布于【主题修改】分类下

相关标签:||

相关推荐

评论 ( 14 )

  • 昵称 (必填)
  • 邮箱 (必填)
  • QQ (选填)
  • 网址(选填)
  1. #8

    蝈蝈,突然发现你的funtions.php的追加少了最后的一句:add_action(‘init’, ‘my_custom_shuoshuo_init’);,还有如果说说的固定链接是XX/shuoshuo的话,会无法显示往下的界面,需要修改字母加数字如XXX/a123

    111
    匿名3个月前 (06-18)回复
  2. #7

    博主的说说模板页呢?想参考一下

    111
    MAY网络营销7个月前 (02-15)回复
  3. #6

    博主你好,我也是添加register_post_type( ) 函数有关代码后,菜单并没有多出“说说”。

    111
    花生米's Blog8个月前 (01-22)回复
    • 代码放在functions.php文件里了?有没有什么报错信息?

      111
      蝈蝈要安静8个月前 (01-22)回复
  4. #5

    博主,这个问题出在哪里呢烦请移步http://blog.wy521.xyz/index.php/shuoshuo-2.html/

    111
    wuyun10个月前 (12-06)回复
    • 地址不对吧

      111
      蝈蝈要安静10个月前 (12-06)回复
      • 问题已经解决了,准备继续美化,先美化评论的打字特效吧

        111
        污雲10个月前 (12-06)回复
  5. #4

    你好,我第一步添加register_post_type( ) 函数有关代码后,菜单并没有多出“说说”。不知为何

    111
    ar10个月前 (11-29)回复
  6. #3

    crest

    111
    九命猫11个月前 (10-25)回复
  7. #2

    不错啊。后续也考虑弄一个试试看。

    111
    bokit12个月前 (10-11)回复
  8. #1

    博主,我也使用了这个功能,请问博主这个说说功能有分页功能吗?

    111
    wonder1年前 (2018-09-05)回复