WordPress+Divi可视化编辑器:替换博客模块发布日期为自定义字段
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.
Method 1: Use PHP Hooks (Recommended for Stability)
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 toYYYY-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_dateand value as your future date (useYYYY-MM-DDformat 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_dateto 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 likem/d/Y(12/31/2024) ord/m/Y(31/12/2024). - Update
$custom_labelto 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:
- Edit your page with Divi Builder, add a Loop Module to your layout.
- In the Loop settings, set the "Content Source" to "Blog Posts" and configure your filters (categories, post count, etc.).
- Open the Loop Item editor—this is where you'll build each post's layout.
- Add a Text Module where you want the date/text to appear.
- 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).
- Style the Text Module to match the original blog meta's font, size, and spacing so it blends in.
- 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




