Php 显示wordpress循环外的第一篇文章

我刚刚开始wordpress，所以我的问题对你们中的一些人来说可能听起来有点简单，但我找不到如何让它工作

我正在wordpress上建立一个博客页面，我想以不同的方式显示第一篇文章，然后显示一些静态文本，然后从第二篇文章开始继续文章循环

我的第二个问题是，我需要将缩略图放置在div内部的绝对位置（现在，当我调整浏览器大小时，缩略图会奇怪地收缩）。在我的引导原型中，我将图像放在一个div中，并使用background属性导入图像。使用wordpress替换这种行为的最佳方法是什么

我为这个做了一个速写：

我搜索了stackoverflow并尝试了一些代码片段，但我无法使它们都正常工作

顺便说一句，我正在使用UNDERSTRAP主题作为样板

以下是我的index.php代码：

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package understrap
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header();

$container = get_theme_mod( 'understrap_container_type' );
?>

<?php if ( is_front_page() && is_home() ) : ?>
    <?php get_template_part( 'global-templates/hero' ); ?>
<?php endif; ?>

<main>
    <div class="position-relative" id="index-wrapper">

    <section class="row no-gutters section section-hero d-flex justify-content-center align-items-end overflow-hidden pb-0 position-relative">
        <div class="section-hero-image">
            <?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
        </div>
        <div class="col-10 pt-sm pb-md pl-sm bg-default">
            <div class="row no-gutters d-flex flex-column">
                <h1 class="col-8 text-white h2">
                    <?php 
                        /* strip_tags removes <a> to make categories unclickable */
                        $categories_list = strip_tags( get_the_category_list( esc_html__( ', ', 'understrap' ) ) );

                        if ( $categories_list && understrap_categorized_blog() ) {
                            /* translators: %s: Categories of current post */
                            printf( '<h4 class="text-dark d-block w-100">' . esc_html__( '%s', 'understrap' ) . '</h4>', $categories_list ); // WPCS: XSS OK.
                        }
                    ?>
                </h1>
                <h1 class="col-8 text-white h2">
                    <?php
                        the_title(
                            sprintf( '<h4 class="entry-title mb-4"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
                            '</a></h4>'
                        );
                    ?>
                </h1>
                <div class="col-4 mt-md">

                </div>
            </div>
        </div>
    </section>


        <section class="section p-0" id="content" tabindex="-1">

            <div class="row content-container no-gutters py-lg">
              <div class="col-6 px-5">
                <h4>Lorem ipsum dolor sit amet</h4>
              </div>
              <div class="col-6 px-5">
                <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>

            <div class="row no-gutters">

                <!-- Do the left sidebar check and opens the primary div -->
                <?php get_template_part( 'global-templates/left-sidebar-check' ); ?>

                <div class="site-main" id="main">
                    <div class="row no-gutters">
                    <?php if ( have_posts() ) : ?>

                        <?php /* Start the Loop */ ?>

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

                            <?php

                            /*
                            * Include the Post-Format-specific template for the content.
                            * If you want to override this in a child theme, then include a file
                            * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                            */
                            get_template_part( 'loop-templates/content', get_post_format() );
                            ?>

                        <?php endwhile; ?>

                    <?php else : ?>

                        <?php get_template_part( 'loop-templates/content', 'none' ); ?>

                    <?php endif; ?>

                    </div>

                </div><!-- #main -->

                <!-- The pagination component -->
                <?php understrap_pagination(); ?>

                <!-- Do the right sidebar check -->
                <?php get_template_part( 'global-templates/right-sidebar-check' ); ?>

            </div><!-- .row -->

    </section><!-- #content -->

    </div><!-- #index-wrapper -->   

</main>

<?php get_footer(); ?>

---

您需要忘记默认的WordPress循环。 使用WP_查询类来查询您的帖子

$query = new WP_Query([
   ‘post_type’ => ‘post’,
   ‘posts_per_page => -1,
]);

 // Get the first post
$firstElement = array_shift($query->posts);

 // Get the other posts exect first element
$otherPosts = $query->posts;

---

现在，您需要在模板内循环以创建帖子网格。

此过程是将标签类别更改为全宽度。有很多方法可以做到这一点，但我发现这有点简单。 首先，从content.php中取出标记并将其放在index.php中。这是为了检查和更改项目标记内的类

<div class="site-main" id="main">
<div class="row no-gutters">
<?php if ( have_posts() ) : ?>

    <?php /* Start the Loop */ ?>


    <?php 
    // Required variables
    $post = $posts[0]; $c=0; ?>

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


        <article class="col p-0 <?php $c++; if($c == 1) { echo 'col-12'; }else{ echo 'col-4'; } ?>" <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 

            <?php

            /*
            * Include the Post-Format-specific template for the content.
            * If you want to override this in a child theme, then include a file
            * called content-___.php (where ___ is the Post Format name) and that will be used instead.
            */
            get_template_part( 'loop-templates/content', get_post_format() );
            ?>

        </article>


    <?php endwhile; ?>

<?php else : ?>

    <?php get_template_part( 'loop-templates/content', 'none' ); ?>

<?php endif; ?>

</div>

为此，您需要使用WordPress自定义查询。基本上，它允许您以与WP循环默认方式不同的方式显示帖子/帖子相关内容。
你可以在这里的法典中找到一个很好的例子：

我最近还使用自定义查询处理了一个主题，最终的设计与您正在寻找的有点类似。这是我用过的一段代码

<div class="site-main" id="main">
<div class="row no-gutters">
<?php if ( have_posts() ) : ?>

    <?php /* Start the Loop */ ?>


    <?php 
    // Required variables
    $post = $posts[0]; $c=0; ?>

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


        <article class="col p-0 <?php $c++; if($c == 1) { echo 'col-12'; }else{ echo 'col-4'; } ?>" <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 

            <?php

            /*
            * Include the Post-Format-specific template for the content.
            * If you want to override this in a child theme, then include a file
            * called content-___.php (where ___ is the Post Format name) and that will be used instead.
            */
            get_template_part( 'loop-templates/content', get_post_format() );
            ?>

        </article>


    <?php endwhile; ?>

<?php else : ?>

    <?php get_template_part( 'loop-templates/content', 'none' ); ?>

<?php endif; ?>

</div>