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(); ?>
然后,建立页面微语菜单,并保存首页导航栏,即可写微语了。