l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中创建可筛选的作品集

如何在 WordPress 中创建可筛选的作品集

Bug编译狮

Bug编译狮

要在WordPress中创建可筛选的作品集，你需要遵循以下步骤：

  1. 登录到您的WordPress后台：首先，您需要通过浏览器访问您的网站并登录到WordPress管理界面。

  2. 导航到作品集页面：点击“写作”菜单中的“作品集”，这将打开作品集编辑器。

  3. 添加作品集：

    • 在左侧的导航栏中，选择“添加作品集”。
    • 输入作品集的标题和描述。
    • 为作品集设置分类（例如，“个人作品”、“项目”等）。
    • 添加第一个作品：点击“添加作品”按钮，然后上传图片或从相册中选择一张图片作为作品集封面。
    • 确保所有必要字段都已填写完整，如作品名称、描述、链接等。

  4. 启用筛选功能：

    • 在作品集编辑器的顶部，找到“过滤器”部分。
    • 启用筛选选项。通常，这个选项会自动开启，但如果您希望完全控制，可以手动勾选它。
    • 设置筛选条件：您可以根据时间范围、类别或其他标准来筛选作品。

  5. 保存并发布作品集：

    • 完成所有编辑后，点击“保存更改”以保存作品集。
    • 如果需要，您可以点击“发布”按钮使作品集可见于整个站点。

  6. 测试筛选功能：最后，尝试使用不同的筛选条件来查看是否能够正确显示符合要求的作品。

示例代码

假设我们想要创建一个名为“我的设计作品”的作品集，并且只显示过去一年内发布的作品。我们可以这样编写HTML代码来展示这些作品：

<!-- 假设这是我们的作品集模板 -->
<div class="work-set">
    <h2>我的设计作品</h2>
    <div id="filter-container"></div>

    <!-- 这里将动态加载我们的作品列表 -->
    <script type="text/javascript">
        // 动态加载作品集数据
        var workData = [
            {
                title: "网页设计",
                description: "这是一个网页设计作品。",
                date: "2023-01-01"
            },
            {
                title: "App界面设计",
                description: "这个App界面的设计非常出色。",
                date: "2022-12-15"
            }
        ];

        // 根据日期筛选
        function filterWorksByDate(date) {
            return workData.filter(function(work) {
                return new Date(work.date).getTime() >= new Date(date).getTime();
            });
        }

        // 创建筛选器
        document.getElementById('filter-container').innerHTML += '<button onclick="filter(1)">最新</button>';
        document.getElementById('filter-container').innerHTML += '<button onclick="filter(-1)">最旧</button>';

        // 执行筛选
        function filter(direction) {
            var filteredWorks = direction === 1 ? filterWorksByDate(new Date().toISOString().split("T")[0]) : filterWorksByDate(new Date().toISOString().split("T")[0] + "-01");
            displayFilteredWorks(filteredWorks);
        }

        // 显示筛选后的作品
        function displayFilteredWorks(works) {
            for (var i = 0; i < works.length; i++) {
                document.write('<article><h3>' + works[i].title + '</h3><p>' + works[i].description + '</p></article>');
            }
        }

        // 首次加载时显示全部作品
        displayFilteredWorks(workData);
    </script>

这段代码展示了如何根据日期对作品集进行筛选，并在用户单击筛选按钮时更新筛选结果。请注意，实际操作中可能需要根据您的具体需求调整JavaScript逻辑，以确保与WordPress插件或主题兼容。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中创建一个可筛选的作品集通常需要以下几个步骤：

  1. 创建作品集页面
  2. 添加作品集项目
  3. 设置作品集过滤器

步骤 1: 创建作品集页面

首先，你需要在WordPress网站上创建一个新的作品集页面。你可以通过以下方法之一来完成这个任务：

  • 使用模板文件：在wp-content/themes/your-theme/wp-includes/widgets目录下找到single.php文件并编辑它。将其中的内容替换为你想要展示的作品集信息。
  • 使用自定义功能：在functions.php文件中添加自定义函数以创建新的作品集页面。

步骤 2: 添加作品集项目

一旦你有了作品集页面，接下来就是添加作品集项目了。在single.php或custom-post-type.php文件中，添加以下代码以显示作品集项目：

<?php get_header(); ?>

<div class="page-header">
    <h1><?php echo esc_html(get_the_title()); ?></h1>
</div>

<div class="post-list">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <!-- 假设你的作品集项目包含以下结构 -->
        <article class="post-item">
            <header>
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
                </a>
            </header>
            <section class="post-info">
                <time datetime="<?php the_time('Y-m-dTH:i:s'); ?>"><?php the_date(); ?></time>
                <h4><?php the_title(); ?></h4>
                <span><?php the_excerpt(); ?></span>
            </section>
        </article>
    <?php endwhile; endif; wp_reset_query(); ?>
</div>

<?php get_footer(); ?>

这里展示了如何添加标题、图片和简短描述到每个作品集项目。

步骤 3: 设置作品集过滤器

为了使用户能够根据不同的条件（如时间范围、类别等）对作品集进行筛选，你需要设置一个作品集过滤器。这是一个简单的例子，假设我们想让用户按日期排序作品集：

add_filter( 'posts_order', 'my_custom_posts_order' );
function my_custom_posts_order( $order ) {
    // 如果不是最新，那么按照发布日期排序
    if ( ! is_2017_05_29() ) {
        return $order;
    }

    // 按照发布日期升序排列
    sort( $order, array_reverse( $order ) );

    return $order;
}

这将在archive.php或其他显示特定分类作品集的文章页面中应用这个过滤器。

以上就是在WordPress中创建可筛选的作品集的基本流程。通过上述示例代码，你应该可以开始构建自己的作品集功能。

,

最新更新