l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress自定义文章类型存档页面中添加置顶帖子

如何在WordPress自定义文章类型存档页面中添加置顶帖子

Bug编译狮

Bug编译狮

要为WordPress的自定义文章类型创建存档页面并将其设置为置顶（即显示最新的帖子），你可以按照以下步骤操作：

步骤 1: 创建自定义文章类型

首先，你需要创建一个新的文章类型。这可以通过编辑wp-includes/post-template.php文件来实现，或者通过使用插件如“Custom Post Type UI”来完成。

使用插件方法：

  1. 安装插件：下载并安装“Custom Post Type UI”插件。
  2. 激活插件：激活该插件。
  3. 创建新文章类型：在“Custom Post Type UI”界面中，选择“Create a new post type”，然后输入新的文章类型名称，例如“Top Stories”。确保勾选“Allow comments and trackbacks”。

步骤 2: 配置文章类型属性

一旦创建了新文章类型，你需要配置其属性以满足你的需求。具体来说，你可能需要调整一些选项来确定哪些文章可以被列为置顶。

示例代码：

// 定义文章类型
function create_top_stories_post_type() {
    $labels = array(
        'name'                => _x( 'Top Stories', 'Post Type General Name', 'text_domain' ),
        'singular_name'       => _x( 'Top Story', 'Post Type Singular Name', 'text_domain' ),
        // 其他标签...
    );

    $args = array(
        'label'               => __( 'Top Stories', 'text_domain' ),
        'description'         => __( 'Posts related to top stories.', 'text_domain' ),
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'menu_position'       => 5,
        'menu_icon'           => 'dashicons-format-aside',
        'rewrite'             => array( 'slug' => 'top-stories' ),
        'capability_type'     => 'post',
        'has_archive'         => true,
        'hierarchical'        => false,
        'supports'            => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments', 'revisions' )
    );
    register_post_type( 'top_stories', $args );
}
add_action( 'init', 'create_top_stories_post_type' );

步骤 3: 添加置顶功能

接下来，你需要在文章类型的具体行中添加置顶功能。这通常通过修改模板文件来实现，特别是single-top-stories.php或类似的文件。

示例代码：

假设你已经成功创建了文章类型，并且它已经被注册为“top_stories”，那么在单个文章类型的模板文件中，你可以在特定的位置添加置顶标志。

<!-- 指定文章类型 -->
<?php if ( is_single( 'top_stories' ) ) : ?>
    <!-- 置顶标志 -->
    <div class="sticky-post">
        <span class="fa fa-star"></span>
        <strong><?php the_title(); ?></strong>
    </div>

    <!-- 标题、正文等常规内容 -->
    <?php the_content(); ?>

    <!-- 评论部分 -->
    <?php wp_list_comments(); ?>

    <!-- 友情链接部分 -->
    <?php echo '<a href="' . get_permalink() . '">Read More</a>'; ?>
<?php endif; ?>

步骤 4: 测试和验证

最后，测试您的网站以确保文章类型按预期工作。检查文章是否正确地显示置顶标志以及是否有其他期望的功能。

效果说明：

当你访问具有自定义文章类型的存档页面时，你会看到最新的帖子作为置顶出现在顶部。此外，所有相关的置顶标记会显示在标题旁边，方便用户快速识别最热门的内容。

注意事项：

  • 确保你的文章类型和模板文件结构与上述示例相符。
  • 如果你在使用插件，请确保更新到最新版本，因为某些功能可能会有改进或修复错误。

通过以上步骤，你应该能够成功地为WordPress自定义文章类型创建一个置顶的存档页面。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

教案大纲

1. 引言

  • WordPress文章类型的概述。
  • 自定义存档页面的基本概念。

2. 前提知识

  • HTML和CSS的基础知识。
  • WordPress的主题和插件使用方法。

3. 添加置顶帖子的方法

  • 使用WordPress主题功能。
  • 使用WordPress插件功能。

4. 示例代码

  • 通过主题功能实现置顶帖子。
  • 通过插件功能实现置顶帖子。

5. 结语

  • 总结知识点。
  • 提供后续学习资源。

6. 演示代码

步骤1：通过主题功能添加置顶帖子

<!-- 主题文件 -->
<?php get_header(); ?>

<!-- 存档页布局 -->
<div class="archive">
    <div class="container">
        <!-- 首页标题 -->
        <h1><?php the_title(); ?></h1>
        <!-- 存档页面正文区域 -->
        <section class="posts">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <!-- 博客文章内容 -->
                <article class="post">
                    <header>
                        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                        <time><?php the_time('F j, Y'); ?></time>
                    </header>
                    <div class="content">
                        <p><?php the_content(); ?></p>
                    </div>
                    <footer>
                        <span class="tags">标签: <?php echo get_the_tags_list(', '); ?></span>
                        <a href="<?php the_permalink() ?>" title="阅读全文" rel="bookmark">阅读全文</a>
                    </footer>
                </article>
            <?php endwhile; else : ?>
                <p><?php _e('没有找到相关的内容', 'your-theme' ); ?></p>
            <?php endif; ?>
        </section>
    </div>
</div>

<!-- 动态生成主题样式 -->
<style>
    .archive {
        padding: 20px;
    }
    .post {
        margin-bottom: 30px;
    }
    .post h2 {
        font-size: 18px;
    }
    .post .content p {
        font-size: 16px;
    }
    .post .tags {
        font-size: 14px;
        color: #777;
    }
    .post a {
        color: #333;
    }
    .post footer {
        text-align: right;
    }
</style>

<!-- 插入动态加载的主题库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 从服务器获取文章列表
    $.get('/wp-admin/admin-ajax.php?action=get-posts&post_type=category', function(data){
        // 将数据渲染到存档页面
        data.forEach(function(post){
            $('#posts').append('<article class="post"><header><h2><a href="' + post.url + '">' + post.title + '</a></h2><time>' + post.date + '</time></header><div class="content">' + post.content + '</div><footer><span class="tags">' + post.tags + '</span><a href="' + post.url + '" title="阅读全文" rel="bookmark">阅读全文</a></footer></article>');
        });
    });

});
</script>

<!-- 获取文章列表 -->
<script type="text/javascript">
    function getPosts() {
        var url = '/wp-admin/admin-ajax.php?action=get-posts&post_type=category';
        jQuery.ajax({
            url: url,
            method: "GET",
            success: function(response) {
                // 根据响应处理数据
                response.forEach(function(post) {
                    // 将数据渲染到存档页面
                    $('#posts').append(
                        '<article class="post"><header><h2><a href="' + post.url + '">' + post.title + '</a></h2><time>' + post.date + '</time></header><div class="content">' + post.content + '</div><footer><span class="tags">' + post.tags + '</span><a href="' + post.url + '" title="阅读全文" rel="bookmark">阅读全文</a></footer></article>'
                    );
                });
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    }
</script>

步骤2：通过插件功能添加置顶帖子

<!-- 系统插件文件 -->
<script src="https://cdn.jsdelivr.net/npm/@wordpress/core-ui-state@latest/dist/core-ui-state.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wordpress/hooks@latest/dist/hooks.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wordpress/icons@latest/dist/icons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wordpress/block-editor@latest/src/plugins/blocks.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wordpress/block-editor@latest/src/plugins/custom-blocks.min.js"></script>

<!-- 自定义文章类型存档插件 -->
<template name="custom-post-type-archive">
    <div class="posttype-archive">
        <header>
            <h1><?php esc_html_e( 'Custom Post Type Archives', 'your-plugin' ); ?></h1>
        </header>
        <div class="posttype-archive-content">
            <ul id="archive-list">
                <li>
                    <a href="<?php echo esc_url(get_category_link(1)); ?>" class="category-title"><?php printf(esc_html__('Category %d', 'your-plugin'), get_category_by_ID(1)->name); ?></a>
                    <ul class="posts">
                        <?php $categories = get_categories(array("orderby"=>"count", "order"=>"desc")); foreach ($categories as $cat): ?>
                            <li>
                                <a href="<?php echo esc_url(get_category_link($cat->term_id)); ?>">
                                    <h2><?php echo esc_html($cat->name); ?></h2>
                                    <span><?php echo esc_html($cat->count); ?></span>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<!-- 在主题目录下创建一个名为“custom-post-type”或类似名称的新文件夹 -->
mkdir wp-content/themes/mytheme/libraries/custom-post-type/

<!-- 创建包含以下代码的新文件 -->
touch wp-content/themes/mytheme/libraries/custom-post-type/templates/custom-post-type-archive.php

最新更新