如何让WordPress分类目录以双列布局呈现?

avatar
作者
筋斗云
阅读量:0
要实现WordPress分类目录双列显示,可以通过修改主题的CSS样式来实现。在主题的CSS文件中,找到控制分类目录列表的样式规则,然后添加以下代码:,,``css,.categorylist {, display: flex;, flexwrap: wrap;,},,.categorylist li {, width: 50%;, boxsizing: borderbox;,},``,,这段代码将分类目录列表设置为弹性布局,并设置每行显示两个分类项。请根据实际情况调整CSS选择器和样式规则。

要实现WordPress分类目录双列显示,可以通过修改主题的sidebar.php文件和style.css文件来实现,具体步骤如下:

1、在sidebar.php文件中添加分类目录代码

打开你的主题文件夹,找到sidebar.php文件。

如何让WordPress分类目录以双列布局呈现?

在需要显示分类目录的地方(通常是侧边栏),添加以下代码:

```html

<h3>分类目录</h3>

<div id="sidecategories" class="categories">

<ul>

<?php wp_list_cats('sort_column=ID&sort_order=asc&optioncount=1&depth=2&hierarchical=0&exclude=1'); ?>

</ul>

</div>

```

exclude=1部分是隐藏分类ID为1的类目,如果有些分类目录不希望让别人看到,可以使用这个隐藏功能。

2、在style.css文件中添加CSS样式代码

打开你的主题文件夹,找到style.css文件。

在文件末尾添加以下CSS代码:

```css

#sidecategories {

position: relative;

width: 200px;

overflow: hidden;

margin: 8px auto 0;

}

.widget {

margin: 0px 0px 8px 0px;

border: 1px solid #e7e7e7;

width: 280px;

padding: 10px;

textindent: 12px;

background: #FFF;

}

#side .categories{

lineheight: 20px;

}

#sidecategories ul {

display: block;

overflow: auto;

}

#sidecategories li {

width: 100px;

float: left;

}

```

这段CSS代码定义了分类目录的布局,将其设置为双列显示。

3、保存并刷新页面

保存对sidebar.phpstyle.css文件的更改。

刷新你的WordPress网站页面,你应该能看到分类目录以双列的形式显示了。

通过以上步骤,你可以实现WordPress分类目录的双列显示,既美观又节约空间。


WordPress 分类目录双列显示实现步骤

1. 准备工作

确保您的WordPress主题支持自定义模板文件。

如果主题不支持,可能需要修改主题的CSS或PHP文件。

2. 创建或修改模板文件

在您的WordPress主题文件夹中找到或创建一个用于显示分类目录的模板文件,例如category.phparchivecategory.php

3. 修改模板文件内容

以下是一个基本的模板修改示例,实现分类目录的双列显示:

 <?php /**  * The template for displaying archive pages  *  * @link https://developer.wordpress.org/themes/basics/templatehierarchy/  *  * @package YourThemeName  */ get_header(); ?> <div id="primary" class="contentarea">     <main id="main" class="sitemain">         <?php if ( have_posts() ) : ?>             <header class="archiveheader">                 <?php                 the_archive_title( '<h1 class="archivetitle">', '</h1>' );                 the_archive_description( '<div class="archivedescription">', '</div>' );                 ?>             </header><!.archiveheader >             <div class="categorygrid">                 <?php /* Start the Loop */ ?>                 <?php while ( have_posts() ) : the_post(); ?>                     <div class="categorycolumn">                         <article id="post<?php the_ID(); ?>" <?php post_class(); ?>>                             <header class="entryheader">                                 <?php the_title( '<h2 class="entrytitle"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>                             </header><!.entryheader >                             <?php if ( 'post' === get_post_type() ) : ?>                                 <div class="entrymeta">                                     <?php yourtheme_entry_meta(); ?>                                 </div><!.entrymeta >                             <?php endif; ?>                             <div class="entrycontent">                                 <?php                                 if ( has_post_thumbnail() ) {                                     the_post_thumbnail( 'large' );                                 }                                 ?>                                 <?php the_excerpt(); ?>                             </div><!.entrycontent >                             <footer class="entryfooter">                                 <?php yourtheme_entry_footer(); ?>                             </footer><!.entryfooter >                         </article>                     </div>                 <?php endwhile; ?>             </div>             <?php the_posts_navigation(); ?>         <?php else : ?>             <div class="noresults notfound">                 <header class="pageheader">                     <h1 class="pagetitle"><?php esc_html_e( 'Nothing Found', 'yourtheme' ); ?></h1>                 </header>                 <div class="pagecontent">                     <?php get_template_part( 'templateparts/content', 'none' ); ?>                 </div>             </div>         <?php endif; ?>     </main> </div> <?php get_sidebar(); get_footer(); ?>

4. 调整CSS样式

在主题的style.css 文件中添加以下CSS样式以实现双列布局:

 .categorygrid {     display: grid;     gridtemplatecolumns: repeat(2, 1fr);     gap: 20px; } .categorycolumn {     width: calc(50% 20px); /* Adjust gap between columns */ } @media (maxwidth: 768px) {     .categorygrid {         gridtemplatecolumns: 1fr;     } }

5. 测试和调整

保存所有修改,并访问您的分类目录页面来测试双列布局。

根据需要调整CSS样式或模板代码,直到达到满意的效果。

注意事项

以上代码仅供参考,具体实现可能需要根据您的主题和需求进行调整。

确保在修改主题文件之前备份原始文件,以防万一需要恢复。

希望这些步骤能帮助您在WordPress中实现分类目录的双列显示。