You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WordPress+Divi可视化编辑器:替换博客模块发布日期为自定义字段

Replace Divi Blog Module Date with Custom Future Date & Add Custom Text

Hey there! Let's walk through exactly how to swap out the default post date in Divi's Blog module with your custom future date field, plus add that custom text right where the original date used to be. I'll cover two approaches—one with code (the most reliable method) and a no-code option using Divi's built-in features.

This method uses a filter hook to modify Divi's default blog meta output directly, so you won't have to rebuild your entire blog layout.

Step 1: Create Your Custom Date Field

First, set up the custom field where you'll input your future date:

  • Option A (Using Advanced Custom Fields - ACF): Install and activate ACF, then create a new "Date Picker" field. Name it something like custom_future_date, set the return format to YYYY-MM-DD (for easy parsing), and assign it to your post type.
  • Option B (WordPress Built-In Custom Fields): In your post editor, scroll to the "Custom Fields" section (enable it in Screen Options if it's hidden). Add a new field with the key custom_future_date and value as your future date (use YYYY-MM-DD format for best results).

Step 2: Add Code to Your Child Theme's functions.php

Never edit the parent Divi theme's files—use a child theme instead to avoid losing changes when Divi updates. Paste this code into your child theme's functions.php:

function divi_replace_blog_date_with_custom_field( $post_meta, $post_id ) {
    // Grab the custom date value from your field
    $custom_future_date = get_post_meta( $post_id, 'custom_future_date', true );

    // Only replace the date if the custom field has a value
    if ( ! empty( $custom_future_date ) ) {
        // Format the date to your preferred style (e.g., "December 31, 2024")
        $formatted_date = date( 'F j, Y', strtotime( $custom_future_date ) );
        // Your custom text here—change this to whatever you want
        $custom_label = 'Expected Publish Date:';
        
        // Swap out the default date with your custom text + formatted date
        $post_meta = str_replace(
            et_pb_get_post_meta_date( $post_id ),
            sprintf( '%s %s', $custom_label, $formatted_date ),
            $post_meta
        );
    }

    return $post_meta;
}
add_filter( 'et_pb_post_meta', 'divi_replace_blog_date_with_custom_field', 10, 2 );

Step 3: Adjust to Your Needs

  • Change custom_future_date to match your actual custom field key if you used a different name.
  • Modify the date format ('F j, Y') to fit your design—use WordPress date format codes for options like m/d/Y (12/31/2024) or d/m/Y (31/12/2024).
  • Update $custom_label to your desired text (e.g., "Coming Soon:" or "Launch Date:").

Method 2: No-Code with Divi Loop Module

If you prefer not to write code, use Divi's Loop Module to build a custom blog layout that pulls your custom date and text:

  1. Edit your page with Divi Builder, add a Loop Module to your layout.
  2. In the Loop settings, set the "Content Source" to "Blog Posts" and configure your filters (categories, post count, etc.).
  3. Open the Loop Item editor—this is where you'll build each post's layout.
  4. Add a Text Module where you want the date/text to appear.
  5. In the Text Module content, use Divi's dynamic content:
    • Type your custom text first (e.g., "Expected Publish:").
    • Click the dynamic content icon (⚡), select "Custom Field", and enter your custom field key (custom_future_date).
  6. Style the Text Module to match the original blog meta's font, size, and spacing so it blends in.
  7. Remove any default date elements from the Loop Item if needed.

Testing & Troubleshooting

  • After setting up, refresh your page to check if the custom date and text appear.
  • If nothing shows up: Double-check your custom field key matches what's in the code/dynamic content, ensure you've filled the field with a valid date, and confirm your child theme is active (if using Method 1).
  • If the date is formatted incorrectly: Adjust the date format string in the PHP code or check your ACF field's return settings.

内容的提问来源于stack exchange,提问作者Dale Gribble

火山引擎 最新活动