Author: jzhou

In WordPress, when using the Query Loop block in the Block Editor, the default behavior is that each item (post) appears on a new line. However, if you want the items to appear inline (following the flow of the previous item instead of starting on a new line), you can achieve this by customizing the layout using CSS.

Solution: Use Custom CSS

1. Select the Query Loop block in the WordPress editor.
2. Inside the Query Loop, choose the inner container (e.g., Post Template).
3. Add a custom class to the “Additional CSS Class” field under the “Advanced” settings.
   • Example: Add a class like inline-query-loop
4. Apply custom CSS to make the posts flow inline.

CSS to Add

You can add this CSS in the Customizer → Additional CSS or in your theme’s CSS file:

.inline-query-loop {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Adjust the space between posts */
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
}

.inline-query-loop .wp-block-post {
    display: inline-block;
    white-space: nowrap; /* Ensures text does not wrap inside */
}

Alternative: Use a Grid Layout

If you want a structured layout rather than pure inline elements:

.inline-query-loop .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust width */
    gap: 20px;
}

This will make the posts appear in a grid format.

Customizing the Query Loop in PHP (If Using a Custom Theme)

If you’re coding a custom Query Loop in a theme, you can modify the WordPress Loop like this:

<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 6
);
$query = new WP_Query($args);
if ($query->have_posts()) :
    echo '<div class="custom-query-loop">';
    while ($query->have_posts()) : $query->the_post();
        echo '<div class="post-item">';
        the_title('<h2>', '</h2>'); 
        the_excerpt();
        echo '</div>';
    endwhile;
    echo '</div>';
    wp_reset_postdata();
endif;
?>

Then, in your CSS:

.custom-query-loop {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.post-item {
    display: inline-block;
    width: auto;
}

Summary

• For Block Editor: Use the “Additional CSS Class” and apply CSS with display: flex or grid.
• For Custom Themes: Modify the WordPress Loop and style with CSS.

Would you like me to help with a specific theme or plugin? 😊

Yes, you can absolutely place an image on top of another image in WordPress. There are several ways to achieve this, depending on your desired effect and level of technical comfort:

1. Using the WordPress Block Editor (Gutenberg):

• Cover Block with an Image Overlay:
  • Insert a “Cover” block.
  • Select your base image as the background for the Cover block.
  • Add an “Image” block within the Cover block. This will place the second image on top of the first.  
  • You can then adjust the size and position of the overlay image within the Cover block.  
• Columns Block:
  • Insert a “Columns” block with a single column.  
  • Place your base image within the column.
  • Add another “Image” block within the same column after the first one.
  • Adjust the margins and relative positioning of the second image, to position it over the first one.
• Group Block:
  • Place a group block.
  • Inside the group block place your base image.
  • Place your second image also inside the group block.
  • Use the block settings, and potentially custom css to correctly position the top image.

先读这个 Post Type – 笔记

To enable the block editor (Gutenberg) for your custom post type “book” (or whatever your post type is), you need to modify the register_post_type arguments within your functions.php file or custom plugin. Specifically, you need to add or modify the supports argument.

Here’s how you can do it:

1. Modify the supports Argument:

In your create_book_post_type() function (or the function where you register your custom post type), locate the supports array.

• If supports doesn’t exist, create it.
• If supports exists, add or ensure that 'editor' is included.

Here’s the modified code snippet:

PHP

function create_book_post_type() {
    // ... (Your labels and other args) ...

    $args = array(
        // ... (Your other arguments) ...
        'supports'            => array( 'title', 'editor', 'thumbnail', 'custom-fields' ), // Ensure 'editor' is present
        // ... (Your other arguments) ...
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'create_book_post_type', 0 );

Explanation:

• The 'editor' element within the supports array tells WordPress to enable the block editor for your custom post type.
• By default, if the 'editor' support is not declared, then WordPress will default to the classic editor.

2. Enable Template Support (Optional but Recommended):

If you want to use block templates (predefined block layouts) for your “book” post type, you can also add 'template' to the supports array:

PHP

$args = array(
    // ...
    'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'template' ),
    // ...
);

3. Create Block Templates (Optional):

If you enabled template support, you can create block templates to define the initial content and layout for new “book” posts. Here’s how:

• Within your theme’s functions.php file or a custom plugin, use the register_block_template function.

PHP

function register_book_template() {
    $post_type_object = get_post_type_object( 'book' );
    $post_type_object->template = array(
        array( 'core/paragraph', array(
            'placeholder' => 'Enter book description here...',
        ) ),
        array( 'core/image', array(
            'align' => 'center',
        )),
        array( 'core/heading', array(
            'placeholder' => 'Additional Information',
            'level' => 3,
        )),
    );
}
add_action( 'init', 'register_book_template' );

• This code defines a template with a paragraph, an image, and a heading. When you create a new “book” post, these blocks will be pre-populated.

Important Notes:

• Clear Cache: After making changes to your functions.php file, clear your website’s cache (if you’re using a caching plugin) to ensure the changes take effect.
• Theme Compatibility: Ensure that your theme is compatible with the block editor. Most modern themes are, but older themes might have issues.
• Plugin Conflicts: If you encounter problems, try disabling other plugins to rule out conflicts.
• Custom Fields and the Block Editor: When working with custom fields, you might need to use plugins like Advanced Custom Fields (ACF) to integrate them seamlessly with the block editor.¹ ACF provides block types that allow you to display your custom field data within the block editor interface.²

By making these changes, you’ll successfully enable the block editor for your “book” custom post type, giving you the flexibility and power of Gutenberg for creating your book content.

The single-{post-type}.php template in WordPress allows you to create a custom layout for individual posts of a specific custom post type. Here’s a step-by-step guide on how to add and use it:

1. Create Your Custom Post Type (If You Haven’t Already):

• If you haven’t already created your custom post type, you’ll need to do that first. You can use plugins like Custom Post Type UI or write code in your theme’s functions.php file or a custom plugin.
• Example (using functions.php):

PHP

function create_book_post_type() {
    $labels = array(
        'name'               => 'Books',
        'singular_name'      => 'Book',
        'menu_name'          => 'Books',
        'add_new'            => 'Add New Book',
        'add_new_item'       => 'Add New Book',
        'edit_item'          => 'Edit Book',
        'new_item'           => 'New Book',
        'view_item'          => 'View Book',
        'search_items'       => 'Search Books',
        'not_found'          => 'No Books found',
        'not_found_in_trash' => 'No Books found in Trash',
    );
    $args = array(
        'label'               => 'Books',
        'description'         => 'Books information pages.',
        'labels'              => $labels,
        'supports'            => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'menu_position'       => 5,
        'show_in_admin_bar'   => true,
        'show_in_nav_menus'   => true,
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
        'rewrite'             => array( 'slug' => 'book' ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'create_book_post_type', 0 );

• In this example, we’ve created a custom post type called “book”.

2. Create the single-{post-type}.php Template File:

• In your theme’s directory, create a new PHP file named single-book.php (replace “book” with your custom post type’s slug).
• This file will define the layout for single posts of your “book” post type.

3. Add Content to Your Template:

• Open single-book.php in a text editor and add the necessary WordPress template tags to display your post’s content.
• Example single-book.php:

PHP

<?php
/**
 * The template for displaying single book posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Your_Theme_Name
 */

get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <?php
        while ( have_posts() ) :
            the_post();
            ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
                </header><div class="entry-content">
                    <?php
                    the_content();

                    // Display custom fields
                    if (get_post_meta( get_the_ID(), 'author', true )){
                        echo "<p>Author: ".get_post_meta( get_the_ID(), 'author', true )."</p>";
                    }
                    if (get_post_meta( get_the_ID(), 'isbn', true )){
                        echo "<p>ISBN: ".get_post_meta( get_the_ID(), 'isbn', true )."</p>";
                    }

                    wp_link_pages(
                        array(
                            'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'your-theme-text-domain' ),
                            'after'  => '</div>',
                        )
                    );
                    ?>
                </div><footer class="entry-footer">
                    <?php
                    edit_post_link(
                        sprintf(
                            wp_kses(
                                /* translators: %s: Name of current post. Only visible to screen readers */
                                __( 'Edit <span class="screen-reader-text">%s</span>', 'your-theme-text-domain' ),
                                array(
                                    'span' => array(
                                        'class' => array(),
                                    ),
                                )
                            ),
                            wp_kses_post( get_the_title() )
                        ),
                        '<span class="edit-link">',
                        '</span>'
                    );
                    ?>
                </footer></article><?php
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile; // End of the loop.
        ?>

    </main></div><?php
get_sidebar();
get_footer();

• Replace “your-theme-text-domain” with your theme’s text domain.
• Replace “Author” and “ISBN” with the names of your custom fields.
• Customize the HTML and CSS to match your desired layout.

4. View Your Custom Post Type Posts:

• Create or edit posts of your custom post type (“book” in this example).
• View a single post, and you should see the layout defined in your single-book.php template.

Template Hierarchy:

• WordPress uses a template hierarchy to determine which template file to use.
• For single posts of a custom post type, it will look for:
  • single-{post-type}.php (e.g., single-book.php)
  • single.php
  • singular.php
  • index.php
• If single-book.php exists, WordPress will use it. If not, it will fall back to the next template in the hierarchy.

Important Considerations:

• Theme Compatibility: Ensure your custom template works well with your theme’s structure and styling.
• Custom Fields: Use custom fields to add specific data to your custom post types and display them in your template.
• CSS Styling: Add CSS rules to your theme’s stylesheet to style the layout of your custom post type posts.
• Child Themes: If you’re modifying a third-party theme, create a child theme to avoid losing your changes when the parent theme is updated.

The number of NVMe disks a PCIe 4.0 slot can support at full speed depends on how many PCIe lanes are available on the slot and how the NVMe SSDs are connected through the adapter.

PCIe 4.0 Bandwidth and Lane Configuration:

• PCIe 4.0 can deliver 16 GT/s (Gigatransfers per second) per lane, and each lane provides a theoretical 2 GB/s of bandwidth in each direction.

• Typically, a single NVMe SSD requires 4 PCIe lanes (x4) to operate at full speed, which provides a maximum theoretical throughput of 8 GB/s (since PCIe 4.0 x4 offers around 8 GB/s in total bandwidth).

Scenarios for Multiple NVMe Drives:

1. Single PCIe 4.0 x16 Slot:

• A PCIe 4.0 x16 slot can provide 16 lanes of bandwidth. If you’re using a PCIe to NVMe adapter that supports multiple drives, the number of NVMe disks it can fully support depends on how it splits the bandwidth across the lanes.

• Example: A PCIe 4.0 x16 slot theoretically supports 4 NVMe drives in a 4×4 configuration (one x4 for each drive), delivering full-speed performance (up to 8 GB/s per SSD).

2. Single PCIe 4.0 x8 Slot:

• A PCIe 4.0 x8 slot provides 8 lanes, so it can support 2 NVMe SSDs at full speed (each getting 4 lanes or x4).

3. Single PCIe 4.0 x4 Slot:

• A PCIe 4.0 x4 slot provides 4 lanes, which means it can support 1 NVMe SSD at full speed.

4. PCIe 4.0 x1 Slot:

• A PCIe 4.0 x1 slot provides just 1 lane, which can support only one NVMe SSD at a much slower speed (lower than the typical x4 configuration for NVMe).

Conclusion:

• A PCIe 4.0 x16 slot can fully support up to 4 NVMe drives at full speed (if the adapter is designed for this).

• A PCIe 4.0 x8 slot can support 2 NVMe drives at full speed.

• A PCIe 4.0 x4 slot can support 1 NVMe drive at full speed.

So, to maximize the number of NVMe SSDs running at full speed, you need to ensure you have a PCIe 4.0 x16 slot and a multi-drive NVMe adapter capable of splitting the lanes correctly.