css,.categorylist {, display: flex;, flexwrap: wrap;,},,.categorylist li {, width: 50%;, boxsizing: borderbox;,},
``,,这段代码将分类目录列表设置为弹性布局,并设置每行显示两个分类项。请根据实际情况调整CSS选择器和样式规则。要实现WordPress分类目录双列显示,可以通过修改主题的sidebar.php文件和style.css文件来实现,具体步骤如下:
1、在sidebar.php文件中添加分类目录代码:
打开你的主题文件夹,找到sidebar.php
文件。
在需要显示分类目录的地方(通常是侧边栏),添加以下代码:
```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.php
和style.css
文件的更改。
刷新你的WordPress网站页面,你应该能看到分类目录以双列的形式显示了。
通过以上步骤,你可以实现WordPress分类目录的双列显示,既美观又节约空间。
WordPress 分类目录双列显示实现步骤
1. 准备工作
确保您的WordPress主题支持自定义模板文件。
如果主题不支持,可能需要修改主题的CSS或PHP文件。
2. 创建或修改模板文件
在您的WordPress主题文件夹中找到或创建一个用于显示分类目录的模板文件,例如category.php
或archivecategory.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中实现分类目录的双列显示。