Wordpress 自定义 categories 样式

最新推荐文章于 2023-12-27 07:50:52 发布

Arya Wang

最新推荐文章于 2023-12-27 07:50:52 发布

阅读量354

点赞数

分类专栏： Wordpress 文章标签： javascript 前端 php

本文链接：https://blog.csdn.net/qq_38865642/article/details/132449403

版权

Wordpress 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Wordpress 网站的 categories 页面样式一般是对应主题的默认样式，想要修改的话一般有下面几种方法：

** 外观选项设置：**通常 PRO 版本设置功能比较丰富，可以手动选择，无代码可操作。但对应安装的插件较多。
**自定义 CSS：**一部分设置可能不能满足所有需求，可以使用自定义的 css 样式来调整外观。但通常只能做些样式的调整，布局和结构更改困难。
**子主题：**更深层次的修改，可以考虑创建子主题。通过子主题，可以覆盖父主题中的模板文件，从而对页面结构和样式更精细的控制。比如可以创建一个自定义的文章循环模板文件，然后再其中使用 Wordpress 的循环函数来显示文章内容。这样你就可以根据需要完全自定义文章列表的外观和功能。
使用插件： 有时，可能会有一些 WordPress 插件可以帮助你更轻松地自定义文章列表的显示方式。这些插件通常提供可视化的界面，让你调整布局、样式和显示选项，而无需编写代码。

无论选择哪种方法，确保在进行修改之前备份网站，以免造成不可逆的更改。最好的做法是在开发环境中进行修改和测试，然后再将修改应用到生产环境中。如果不熟悉 WordPress 主题开发和定制，建议在进行较大的修改之前查阅相关文档或寻求专业开发人员的帮助。

一、子主题安装

针对子主题这个方法来说。首先我的网站使用的是 Astra 的主题，然后在官网下载子主题进行安装。

二、插件安装：Show Current Template

当你不确定当前页面用的是主题文件内的哪个模板时，可以安装这个插件，打开页面，会显示当前页面的模板文件以及路径。
当前模板文件

三、复制模板文件到子主题

将想要修改的模板文件复制一份到子主题下。（注意：复制的位置结构都要和原来一样）
在这里插入图片描述

四、修改模板文件

我们可以看到模板中文件：
在这里插入图片描述
可以通过修改 <?php astra_content_loop(); ?> 这个调用，以适应需求。这个调用实际上是调用了 Astra 主题中的一个自定义函数，用于显示文章或内容循环的部分。

可以创建一个自定义的模板部分文件（例如“content-loop-custom.php”），然后在其中进行所需的自定义。然后你可以在调用astra_content_loop();的地方，更改为 get_template_part( ‘template-parts/content-loop-custom’ );。

1、修改 content-loop-custom.php 文件

在子主题的 template-parts 文件夹（如果没有就创建一个）下新建该文件，content-loop-custom.php 里边如何写呢？比如想循环调用标题、内容和特色图片。可以使用 WordPress 的循环函数来实现。以下是一个简单的示例：

<?php
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        ?>
        <article class="custom-article">
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <h2><?php the_title(); ?></h2>
            <div class="content">
                <?php the_content(); ?>
            </div>
        </article>
        <?php
    endwhile;
else :
    echo 'No posts found.';
endif;
?>

在这个示例中，我们使用了have_posts()来检查是否有文章可供循环，has_post_thumbnail()函数来检查是否有特色图片。如果有，我们在featured-image 容器中显示特色图片，使用 the_post_thumbnail() 函数调用图片。然后使用the_post() 来设置当前文章的上下文。在循环内部，我们使用the_title()来显示文章标题，the_content()函数来显示文章的内容。如果没有文章可供循环，会显示 “No posts found.”。

2、只想显示部分内容，点击后再向下展开其余部分

实现在标题下方显示部分内容，点击后展开全部内容，可以使用 JavaScript 或 jQuery 来实现。以下是一个示例，展示如何使用 jQuery 来实现这个效果：

（1）首先，在 content-loop-custom.php 文件中，你可以将文章内容分为两部分：标题和摘要（前5行文本）。

<?php
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        ?>
        <article class="custom-article">
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <h2><?php the_title(); ?></h2>
            <div class="content-summary">
                <?php echo wp_trim_words( get_the_content(), 50 ); // Display the first 50 words as the summary ?>
            </div>
            <div class="content-full">
                <?php the_content(); // Full content ?>
            </div>
            <a href="#" class="expand-link">Read more</a>
        </article>
        <?php
    endwhile;
else :
    echo 'No posts found.';
endif;
?>

在这个示例中，我们使用了 wp_trim_words() 函数来显示文章内容的前50个单词作为摘要。然后，我们在 content-summary 和 content-full 分别包装了摘要和完整内容，以便在需要时进行切换显示。

（2）接下来，在你的主题中的 JavaScript 文件中，你可以使用 jQuery 来实现点击展开/折叠内容的效果。假设你的主题使用 jQuery，你可以添加以下代码到你的 JavaScript 文件中：

jQuery(document).ready(function($) {
    $('.expand-link').on('click', function(e) {
        e.preventDefault(); // 预防默认事件发生
        var $article = $(this).closest('.custom-article');
        var $contentSummary = $article.find('.content-summary');
        var $contentFull = $article.find('.content-full');
        
        if ($contentSummary.is(':visible')) {
            $contentSummary.hide();
            $contentFull.show();
            $(this).text('Read less');
        } else {
            $contentFull.hide();
            $contentSummary.show();
            $(this).text('Read more');
        }
    });
});

在这个示例中，我们使用了 .closest() 来找到最近的 .custom-article 元素，然后使用 .find() 来查找 .content-summary 和 .content-full 元素。根据当前状态，我们切换这两个元素的显示和隐藏，并根据状态更改链接的文本。

同时，我们在链接上使用了 “Read more” 和 “Read less” 文本，根据不同的展开和收起状态，来提供更好的用户体验。

最后，确保在 content-loop-custom.php 文件中添加适当的 CSS 样式来隐藏完整内容，直到用户点击展开链接。这可以通过设置 .content-full { display: none; } 来实现。

五、指定页面使用

如果我们只想要将自定义的模板应用到特定的页面下，其它默认页面不变，那么我们可以修改模板文件命名。将文件名添加后缀 -页面id号 或者 -页面slug。

更改前查看下面的 wordpress 页面模板结构图，来确定命名：
在这里插入图片描述

Arya Wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Wordpress 自定义 categories 样式

无论选择哪种方法，确保在进行修改之前备份网站，以免造成不可逆的更改。最好的做法是在开发环境中进行修改和测试，然后再将修改应用到生产环境中。如果不熟悉 WordPress 主题开发和定制，建议在进行较大的修改之前查阅相关文档或寻求专业开发人员的帮助。
复制链接

扫一扫