good luck to you

WordPress 添加说说 / 心情页面

最近在自己博客上添加了说说页面。通过查询资料实现了此功能,但过程中在分页方面浪费了时间。这里记录下实现的步骤,供大家参考。

使用版本:5.2.2

涉及文件:

/wp-content/themes/主题/functions.php
/wp-content/themes/主题/page_shuoshuo.php
/wp-content/themes/主题/css/shuoshuo.css

1,在 functions.php 文件内容的最后加入以下代码:

// 说说
function shuoshuo_init()
{ 
    $labels = [ 
        '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 = [ 
        '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); 
}

add_action('init', 'shuoshuo_init');

关于 register_post_type() 函数的使用,你可以查阅这篇文章:https://developer.wordpress.org/reference/functions/register_post_type/

添加代码后,进入后台,即可看到说说模块。

2,创建 page_shuoshuo.php 文件

<?php 

/**
 * Template Name: 说说
 */

get_header(); ?>
<?php get_header('masthead'); ?>
<div id="main" class="container">
    <div class="tags-title">说说</div>
    <link href="/wp-content/themes/duomeng/css/shuoshuo.css" rel="stylesheet">
    <div class="shuoshuo">
        <?php query_posts("post_type=shuoshuo&post_status=publish&paged=".$wp_query->query['paged']);if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="shuoshuo-item">
            <div class="shuoshuo-date"><?php the_time('Y年n月j日 G:i'); ?></div>
            <div class="shuoshuo-content"><?php the_content(); ?></div>

        </div>
        <?php endwhile;endif; ?>
    </div>
    <div class="shuoshuo-page">
            <?php dmeng_paginate(); ?>
    </div>
</div>
<?php get_footer('colophon'); ?>
<?php get_footer(); ?>

3,创建 shuoshuo.css 文件

.shuoshuo {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}
.shuoshuo-item {
    width: 100%;
    padding: 15px 15px;
    display: block;
    box-shadow: 0 0 3px RGBA(0,0,0,.15);
    background-color: #f8f8f8;
    border:1px #eee solid;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #666;
    min-height:60px;
    position: relative;

}
.shuoshuo-item:not(:first-child) {
    margin-top: 20px;
}
.shuoshuo-date {

}
.shuoshuo-content {
    margin: 15px 0 0 0;
}
.shuoshuo-content img {
    max-width: 100%;
    height: auto;
}

4,创建说说

在后台新建一个页面,页面模板选择说说。
在说说模块中添加测试说说。本文说说页面中显示的是内容,当然你也可以修改代码显示标题等。


这里是本站的说说页面:https://blog.lh1010.com/shuoshuo/
可通过修改 shuoshuo.css 文件,来设计不同的说说页面样式。

原文链接:,转发请注明来源!

发表评论

  • 2 Responses to “WordPress 添加说说 / 心情页面”
    • 立秋

      能否添加一个时间轴模式,类似于https://www.7585.net.cn/weiyu.html ,https://www.7585.net.cn/wordpress-weiyu.html 或者这样的,我参照里面的操作怎么也弄不出来

      回复