求助：如何将Ultimate Member默认3列成员目录改为4列？

Hey there! I’ve tinkered with Ultimate Member quite a bit, so let me walk you through two ways to make this change—one super simple (no PHP required) and one that edits the template file if you really need to.

Method 1: Use Custom CSS (Recommended) #

This is the safest approach because it doesn’t modify any core plugin files (so your changes won’t get wiped when you update Ultimate Member). Here’s what to do:

• Go to your WordPress dashboard → Appearance → Customize → Additional CSS.
• Paste this code into the CSS box:

/* Set 4 columns for desktop screens */
.um-members .um-member {
    width: 25% !important;
    padding: 0 15px; /* Keep consistent spacing between cards */
}

/* Adjust for tablet screens (switch to 2 columns) */
@media (max-width: 991px) {
    .um-members .um-member {
        width: 50% !important;
    }
}

/* Adjust for mobile screens (switch to 1 column) */
@media (max-width: 575px) {
    .um-members .um-member {
        width: 100% !important;
    }
}

• Click Publish and check your member directory—it should now show 4 columns!

If your theme uses Bootstrap (most do), you can also target the framework’s column classes directly:

.um-members .col-md-4 {
    flex: 0 0 25%;
    max-width: 25%;
}

Method 2: Edit the members-grid.php Template File #

If you want to modify the template directly (note: this will get overwritten if you update Ultimate Member unless you use a child theme), follow these steps:

1. Copy the members-grid.php file from the plugin folder: wp-content/plugins/ultimate-member/templates/members-grid.php
2. Create a new folder in your child theme directory called ultimate-member, then paste the copied file into this folder. This "template overriding" ensures your changes stay intact after plugin updates.
3. Open the copied members-grid.php file in a code editor. Look for a line that looks like this:

<div class="um-member um-role-<?php echo esc_attr( $member['role'] ); ?> <?php echo esc_attr( $member['template'] ); ?> col-md-4 col-sm-6 col-xs-12">

4. Change col-md-4 to col-md-3 (since Bootstrap’s 12-column grid means col-md-3 equals 4 columns total: 12 ÷ 3 = 4).
5. Save the file and refresh your member directory—you should see 4 columns now.

Just a heads up: If your Ultimate Member uses a custom template, the class names might be slightly different, but the core idea is the same—adjust the column width to 25% of the container.

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