如何用PHP和CSS编辑WordPress中的文章页面？

Hey there! Let's walk through how to customize your WordPress post pages (like the /author/wordpress_post example you mentioned) using PHP and CSS, plus clear up which default PHP files you can modify.

First, you need to understand WordPress’s template hierarchy—this is how the system decides which PHP file loads for each page. For your scenario, these are the key files to focus on:

• single.php: The default template for all individual posts. If you don’t have more specific templates, this is what WordPress uses for single post pages.
• author.php: Use this if you want to tweak the author archive page (the page that lists all posts from a specific author).
• single-{post-type}.php: If your post uses a custom post type, WordPress will look for this first (e.g., single-post.php for standard posts, though single.php works perfectly too).
• Template Parts: Many modern themes split pages into smaller components stored in a template-parts folder. For example, if you see get_template_part( 'template-parts/content', 'single' ) in single.php, that means it’s pulling content from content-single.php in the template-parts directory.

Never edit your parent theme’s files directly—when the theme updates, all your changes will get erased. Instead, use a child theme:

• Create a child theme (super simple: make a new folder in /wp-content/themes/, add a style.css with a child theme header, and a functions.php file).
• Copy the template file you want to modify from the parent theme into your child theme (e.g., copy single.php to your child theme folder).
• Now edit the copied file in your child theme—WordPress will prioritize this version over the parent’s.

Example PHP Tweak #

Suppose you want to add the author’s bio right after the post content in single.php:
Find where the_content() is called (that’s where the post content outputs), then add this snippet right after:

<?php if ( get_the_author_meta( 'description' ) ) : ?>
    <div class="author-bio">
        <h3>Meet <?php the_author(); ?></h3>
        <?php echo get_avatar( get_the_author_meta( 'user_email' ), 120 ); ?>
        <p><?php the_author_meta( 'description' ); ?></p>
    </div>
<?php endif; ?>

For CSS changes, use either your child theme’s style.css file or the WordPress Customizer’s Additional CSS section (great for quick, live tweaks without touching theme files).

Example CSS for the Author Bio #

If you added the bio snippet above, style it with this:

.author-bio {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    overflow: hidden; /* Clears the float from the avatar */
}

.author-bio h3 {
    margin-top: 0;
    color: #2d3748;
}

.author-bio img {
    float: left;
    margin-right: 18px;
    border-radius: 50%;
}

If your theme doesn’t have an author.php or single.php, WordPress falls back to index.php (the main template file). You can copy index.php to your child theme and rename it to single.php or author.php to create a custom template for those pages.

Pro Tip #

Use the Query Monitor plugin to see exactly which template file is loading for any page—it’s a huge help for figuring out which file you need to edit.

内容的提问来源于stack exchange，提问作者user7419017