WordPress新手求助:如何将文章列表发布日期移至标题前?
Hey there! I get it, rearranging elements in your WordPress post list can feel tricky when you're just starting out. Let's walk through two reliable ways to move the publish date before the post title—one using built-in settings (if your theme supports it) and another by tweaking your theme's code, step by step.
Most modern WordPress themes let you tweak post list layouts without touching code. Here's how:
- Log into your WordPress dashboard, then go to Appearance → Customize
- In the customizer panel, look for options like Blog Settings, Post List Layout, or Archive Settings (names vary by theme—for example, Astra calls this "Blog", while Twenty Twenty-Four puts it under "Home" or "Archives")
- Once you're in the right section, you should see controls for element order or visibility. Look for "Publish Date" and "Post Title" options, then drag the date to sit above the title
- Click Publish to save your changes, then refresh your front-end post list to check the result
Important note: Before editing theme files, always back up your current theme or use a child theme—this way, your changes won't get overwritten when the parent theme updates. If using a child theme, copy the target file to the child theme's corresponding folder first.
Follow these steps:
- Go to Appearance → Theme File Editor in your dashboard
- On the right-hand file list, find the template that controls your post list. Common files include:
index.php(handles the home page post list)archive.php(handles category, tag, and date archive pages)content.php(many themes use this as a reusable template for post content, loaded by index/archive.php)
- Open the target file, then locate the code that outputs the post title. It usually looks like this:
<h2 class="entry-title"><a href="<?php esc_url( get_permalink() ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> - Next, find the publish date code—this might be
the_date();,the_time();, or wrapped in a container like<div class="entry-date">. For example:<div class="entry-date"><?php the_date( 'F j, Y' ); ?></div> - Cut the entire date code block and paste it before the title code block
- Click Update File to save changes, then refresh your front-end to verify the new order
Quick example of the code swap:
Before:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry-date"><?php the_date( 'F j, Y' ); ?></div> <!-- Other post content --> </article>
After:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-date"><?php the_date( 'F j, Y' ); ?></div> <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <!-- Other post content --> </article>
If you can't find the code in these files, check for template part files like parts/post-meta.php—some themes split post elements into reusable snippets, so you'd adjust the order there instead.
内容的提问来源于stack exchange,提问作者user3069396

