如何在WordPress后台让客户手动添加/编辑指定结构的产品模块？

Hey there! Let's walk through exactly how to set this up with Advanced Custom Fields (ACF) so your client can add and edit those product blocks straight from the WordPress admin—no code changes required.

First, we'll build a flexible, repeatable field set that maps directly to your product structure:

• Head to the ACF dashboard in your WP admin and click Add New to create a new Field Group. Name it something like "Product List" for clarity.
• Set up Location Rules to tell ACF where to show these fields. For example, if you want this on a specific page, pick "Page" → "Equals" → "[Your Product Page Name]".
• Add a Repeater field (this is the key for letting your client add multiple product blocks). Name it "Products" and set the field name to products (stick to lowercase underscores for ACF best practices).
• Inside this Repeater field, add 3 child fields that match your product structure:
  • Text Field: Label "Product Title", Field Name product_title (maps to the <h2>)
  • Text Area or Text Field: Label "Product Description", Field Name product_description (maps to the description <span>—use Text Area if descriptions might be longer)
  • Number or Text Field: Label "Product Price", Field Name product_price (maps to the price <span>—Number is great for enforcing numeric values)

Next, we'll add a small snippet of PHP to your theme's template file to pull in the ACF data and output it in your desired HTML structure.

Note: You'll want to add this to the template file that corresponds to your product page (e.g., page-product.php if you're using a custom page template, or page.php if it's a standard page).

Here's the code you need:

<?php 
// Check if the repeater field has rows of data
if( have_rows('products') ): ?>
  <div class="products-list">
    <?php 
    // Loop through each row of the repeater
    while( have_rows('products') ): the_row(); 
      // Get each subfield value
      $title = get_sub_field('product_title');
      $description = get_sub_field('product_description');
      $price = get_sub_field('product_price');
    ?>
      <div class="product">
        <h2><?php echo esc_html($title); ?></h2>
        <span><?php echo esc_html($description); ?></span>
        <span><?php echo esc_html($price); ?></span>
        <button>Buy</button>
      </div>
    <?php endwhile; ?>
  </div>
<?php endif; ?>

I added esc_html() here to sanitize the output—always a good practice to keep your site secure.

Now your client can handle everything from the WP admin without touching code:

• Log into the WordPress dashboard and open the page where you set up the ACF fields.
• Scroll down to the "Products" section (it'll be where you set the field group's position—usually below the main content editor).
• Click Add Row to create a new product block.
• Fill in the title, description, and price for each product, then click Update to save the page.
• The frontend will automatically update with the new product blocks in your desired structure.

Bonus: If your client prefers using the Gutenberg block editor, ACF lets you turn this repeater into a custom Gutenberg block. That way they can drag-and-drop product blocks directly into the editor—just look for the "ACF Blocks" option when creating a new field group.

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