在wordpress添加自定义文章类型

实现思路

在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 );

刷新前端笔记页面查看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值