WordPress添加说说微语

1、首先我们把以下代码,添加到主题根目录中的functions.php文件中。下面两步代码安装完成后,在后台页面,建立微语页面,在设置菜单,保存首页导航栏即可。纯代码微语添加微语,不影响百度谷歌搜录和数据备份恢复。

function register_suiyu_post_type() {
    $args = array(
        'labels' => array(
            'name'               => '碎语',              // 自定义文章类型的名称
            'singular_name'      => '碎语',              // 单数名称
            'add_new'            => '添加碎语',           // 新增按钮文案
            'add_new_item'       => '添加新碎语',         // 新增碎语文案
            'edit_item'          => '编辑碎语',           // 编辑碎语
            'new_item'           => '新碎语',             // 新碎语文案
            'view_item'          => '查看碎语',           // 查看碎语文案
            'search_items'       => '搜索碎语',           // 搜索碎语文案
            'not_found'          => '未找到碎语',         // 如果没有找到碎语
            'not_found_in_trash' => '回收站中没有碎语',   // 如果回收站没有碎语
            'menu_name'          => '碎语',              // 菜单名称
        ),
        'public'        => true,          // 是否公开可见
        'has_archive'   => true,          // 是否支持归档页面
        'show_in_rest'  => true,          // 启用Gutenberg编辑器
        'supports'      => array('title', 'editor', 'author', 'thumbnail', 'excerpt'), // 支持字段
        'rewrite'       => array('slug' => 'suiyu'), // 文章别名,设置成 'suiyu'
        'menu_position' => 5,             // 菜单中的位置
        'show_ui'       => true,          // 显示UI界面
        'show_in_menu'  => true,          // 在后台菜单中显示
    );
    register_post_type('suiyu', $args);
}
add_action('init', 'register_suiyu_post_type');

 

2、然后添加模板文件,在模板主题根目录新建一个名为page-suiyu.php的文件,并将以下代码添加在其中

<?php
/**
 * Template Name: 碎语/说说
 */

get_header(); ?>

<style>
/* 样式修改,确保头像和图片不会变形 */
.suiyu_author_img {
    margin-right: 15px; /* 头像与文本之间的间距 */
}

.suiyu_author_img img {
    border: 1px solid #ddd;
    padding: 2px;
    border-radius: 50%;
    height: 50px;
    width: 50px; /* 保证头像是圆形且不变形 */
}

.cbp_tmtimeline {
    list-style: none;
    padding: 0;
}

.cbp_tmtimeline > li {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #FFFFF9;
    border-left: 5px solid #FFE1D2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.cbp_tmtimeline > li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cbp_tmlabel {
    flex: 1;
}

.suiyu_time {
    font-size: 0.9em;
    color: #777;
    margin-top: 10px;
    margin-bottom: 5px;
}
/* 分页样式 */
.pagination {
    text-align: center;  /* 使分页按钮水平居中 */
    margin-top: 20px;
    margin-bottom: 20px;
}

.pagination a, .pagination span {
    padding: 8px 16px;
    margin: 0 4px;
    background-color: #FE8040;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.pagination a:hover, .pagination span:hover {
    background-color: #FFE1D2;
}

/* 确保分页容器在父容器中居中 */
.pagination {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
}
    
</style>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <div class="cbp_suiyu">
            <?php
            // 获取当前分页页码
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

            // 自定义查询参数
            $args = array(
                'post_type'      => 'suiyu', 
                'post_status'    => 'publish',
                'posts_per_page' => 16, // 每页显示的条数
                'paged'          => $paged, // 当前页
            );

            // 使用 WP_Query
            $query = new WP_Query($args);

            if ($query->have_posts()) : ?>
                <ul class="cbp_tmtimeline">
                    <?php
                    while ($query->have_posts()) : $query->the_post(); ?>
                        <li>
                            <span class="suiyu_author_img">
                                <img src="<?php echo esc_url(get_avatar_url(get_the_author_meta('ID'))); ?>" class="avatar avatar-48" width="48" height="48">
                            </span>
                            <a class="cbp_tmlabel" href="javascript:void(0)">
                                <p><?php the_content(); ?></p>
                                <p class="suiyu_time">
                                    <i class="fa fa-clock-o"></i> <?php echo get_the_time('Y年n月j日G:i'); ?>
                                </p>
                            </a>
                        </li>
                    <?php endwhile; ?>
                </ul>

                <!-- 分页 -->
                <div class="pagination">
                    <?php
                    echo paginate_links(array(
                        'total'   => $query->max_num_pages,
                        'current' => $paged,
                        'format'  => '?paged=%#%',
                        'prev_text' => __('« 上一页'),
                        'next_text' => __('下一页 »'),
                    ));
                    ?>
                </div>

                <?php wp_reset_postdata(); // 重置查询 ?>
            <?php else : ?>
                <h3 style="text-align: center;">你还没有发表碎语噢!</h3>
                <p style="text-align: center;">赶快去发表你的第一条碎语心情吧!</p>
            <?php endif; ?>
        </div>
    </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer(); ?>

 

然后,建立页面微语菜单,并保存首页导航栏,即可写微语了。

20320cookie-checkWordPress添加说说微语

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注