实现思路
在Once主题中,有文章,页面等编辑的文案类型,文章类型主要做文案输出,而页面类型主要做一些界面菜单的操作。参考文章类型,使用自定义页面模板,实现一个自定义文章类型,例如**笔记(node)**类型,用来记录一些简短的内容。
实现方法
添加笔记菜单
在主题的 function.php 中添加笔记菜单的修改
// 添加笔记菜单
function register_note_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' => '回收站中没有笔记',
'all_items' => '所有笔记',
'menu_name' => '笔记',
'name_admin_bar' => '笔记'
),
'public' => true,
'has_archive' => true, // 允许归档
'show_ui' => true,
'show_in_menu' => true, // 在后台菜单中显示
'rewrite' => array( 'slug' => 'notes' ), // URL的别名
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'comments', 'revisions' ),
'taxonomies' => array( 'category', 'post_tag' ), // 可以使用文章的分类和标签
'show_in_rest' => true, // 启用Gutenberg编辑器
);
register_post_type( 'note', $args );
}
add_action( 'init', 'register_note_post_type' );
保存后刷新后台编辑页面,就会出现名为笔记 的新菜单,包括新建笔记和所有笔记等子菜单。
添加笔记首页信息
在主题的根目录添加文件 archive-node.php ,并添加如下内容
<?php get_header(); ?>
<div class="note-archive-container">
<h1>所有笔记</h1>
<?php if ( have_posts() ) : ?>
<div class="note-list">
<?php while ( have_posts() ) : the_post(); ?>
<div class="note-item">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="note-excerpt">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="pagination">
<?php
// 分页
the_posts_pagination( array(
'prev_text' => '上一页',
'next_text' => '下一页',
) );
?>
</div>
<?php else : ?>
<p>没有找到笔记。</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
然后再 styles.css 文件添加首页样式
/* 目录首页样式 */
.note-archive-container {max-width: 900px;margin: 0 auto;padding: 20px;}
.note-list {display: flex;flex-direction: column;gap: 20px;}
.note-item h2 a {font-size: 1.5em;text-decoration: none;color: #333;}
.note-item h2 a:hover {color: #0073aa;}
.note-excerpt {font-size: 1em;color: #555;}
.pagination {margin-top: 20px;text-align: center;}
添加笔记归档模板
在主题的根目录添加文件 template-note-home.php 文件作为笔记的归档模板,模板名称笔记
<?php
/*
Template Name: 笔记
*/
get_header(); ?>
<section class="node_area">
<div class="container">
<div class="row g-3">
<div class="col-lg-9">
<div class="post_box">
<?php
// 查询 "笔记" 类型的文章并显示
$args = array(
'post_type' => 'note',
'posts_per_page' => 10, // 修改为您需要显示的笔记数量
'paged' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1
);
$note_query = new WP_Query( $args );
if( $note_query->have_posts() ):
while( $note_query->have_posts() ): $note_query->the_post();
// 引入自定义的 "excerpt.php" 来展示每篇笔记的摘要
include('excerpt.php');
endwhile;
endif;
wp_reset_postdata();
?>
</div>
<?php
// 分页
the_posts_pagination();
?>
</div>
<?php get_sidebar() ?>
</div>
</div>
</section>
<section class="links mobile_none">
<div class="container">
<span>友情链接:</span>
<?php wp_list_bookmarks( 'title_li=&categorize=0&before=&after=' ); ?>
</div>
</section>
<?php get_footer(); ?>
创建笔记首页
在wordpress的后台管理页面,通过页面新建页面,然后再新建页面右侧的页面属性中,选择模板为新建的笔记,然后保存发布。然后在 外观 -> 菜单 选项中,将页面中的笔记添加到菜单。保存后刷新,在wordpress的前端渲染就会有笔记的菜单,所有新建的笔记内容都会显示在这里。
异常处理
如果所有的笔记单页无法渲染markdown的格式,测手动添加markdown渲染功能。
下载Parsedown.php ,并放在主题的inc 目录下,然后再function.php中添加
// 加载 Parsedown
if ( ! class_exists( 'Parsedown' ) ) {
require_once get_template_directory() . '/inc/Parsedown.php'; // 修改为你的 Parsedown 路径
}
// 渲染 Markdown 内容
function render_markdown_for_notes( $content ) {
if ( get_post_type() === 'note' ) {
// 移除可能的冲突过滤器
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_content', 'wptexturize' );
if ( class_exists( 'Parsedown' ) ) {
$parsedown = new Parsedown();
$parsedown->setSafeMode(true);
return $parsedown->text( $content );
}
}
return $content;
}
add_filter( 'the_content', 'render_markdown_for_notes', 20 );
刷新前端笔记页面查看。