如何在WordPress的the_content()中将文本拆分为两列？

Got it, let's get that two-column split working for your content. Since shortcodes are off the table and existing tutorials haven't stuck, let's go with two reliable, straightforward approaches that play nice with the_content().

Method 1: Manual HTML + Custom CSS (Quick & Control-Friendly) #

This is the easiest way if you don't mind editing your post content directly—it gives you full control over where the split happens.

Step 1: Edit Your Post in Text/Code Mode #

Switch your WordPress post editor to the Text tab (or use the "Custom HTML" block if you're on Gutenberg), then wrap your content in this structure:

<div class="two-column-content">
  <div class="column">
    <!-- Paste your first half of content here -->
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="column">
    <!-- Paste your second half of content here -->
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Step 2: Add Custom CSS #

Head to Appearance > Customize > Additional CSS and paste this code to style the columns:

/* Two-column layout */
.two-column-content {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Equal-width columns */
  gap: 2rem; /* Space between columns - adjust as needed */
  margin: 1.5rem 0; /* Space above/below the column block */
}

/* Make it responsive for mobile */
@media (max-width: 768px) {
  .two-column-content {
    grid-template-columns: 1fr; /* Revert to single column on small screens */
  }
}

Hit "Publish" on the customizer, and your content should split into two columns immediately.

Method 2: Auto-Split with a Content Filter (No Manual HTML) #

If you want to avoid wrapping content in HTML every time, use a WordPress filter to automatically split content at a custom marker.

Step 1: Add the Filter to Your Theme's functions.php #

(Pro tip: Use a child theme for this so your code doesn't get wiped when the parent theme updates.)

Go to Appearance > Theme File Editor, open functions.php (for your child theme), and add this code at the bottom:

function split_content_into_columns($content) {
  // Split content at the <!-- split --> comment
  if (strpos($content, '<!-- split -->') !== false) {
    list($first_col, $second_col) = explode('<!-- split -->', $content, 2);
    // Wrap columns in our grid container (wpautop keeps paragraph formatting)
    $content = '
      <div class="two-column-content">
        <div class="column">' . wpautop($first_col) . '</div>
        <div class="column">' . wpautop($second_col) . '</div>
      </div>
    ';
  }
  return $content;
}
add_filter('the_content', 'split_content_into_columns');

Step 2: Mark the Split in Your Post #

In your post editor (Text mode or Custom HTML block), insert <!-- split --> exactly where you want the columns to break. For example:

First half of your content goes here.

<!-- split -->

Second half of your content goes here.

Step 3: Add the Same CSS as Method 1 #

Don't forget to add the grid CSS from Method 1 to your Additional CSS section—this is what makes the columns actually display side-by-side.

Why Your Previous Attempts Might Have Failed #

• Theme CSS Overrides: Some themes have strong default styles that overwrite custom column rules. Using modern layout methods like grid is more resistant to this than old float tricks.
• Incorrect Shortcode Setup: If you tried shortcodes, your theme might have disabled them for post content, or the shortcode function wasn't properly registered.
• Missing Responsive Rules: Many tutorials skip mobile optimization, which can make columns look broken on small screens (our CSS fixes that).

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