如何在 wordpress 上设计博客布局

Question

我在一个项目中有点存货，设计并创建了一个 WordPress 主题，使其可安装已经完成了小部件侧边栏和菜单方面，但我的问题是设计博客布局，我的意思是获取 foreach() 参数显示所有博客文章，如果可能的话，使用分页和缩略图，我的引导代码如下所示。

    <div class="pc-version">
    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


                <a href="#">
                    <img class="media-object" src="img/1.jpg" alt="..."></a>
            <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

            </div>
            </div>
        <div class="media-body">
            <h4 class="media-heading">5 marketing strategy that Would "freak you out.</h4>
            <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
                Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
                Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
            </div>
    </div>

    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


                <a href="#">
                    <img class="media-object" src="img/2.jpg" alt="..."></a>
            <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

            </div>
            </div>
        <div class="media-body">
            <h4 class="media-heading">6 resons we all love Califonia</h4>
            <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
                Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
                Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
            </div>
    </div>

    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


                <a href="#">
                    <img class="media-object" src="img/3.jpg" alt="..."></a>
            <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

            </div>
            </div>
        <div class="media-body">
            <h4 class="media-heading">Vacation vs' Home coming :-) </h4>
            <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
                Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
                Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
            </div>
    </div>

    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


                <a href="#">
                    <img class="media-object" src="img/4.jpg" alt="..."></a>
            <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

            </div>
            </div>
        <div class="media-body">
            <h4 class="media-heading">the real way to eat pancakes</h4>
            <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
                Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
                Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
            </div>
    </div>

    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


                <a href="#">
                    <img class="media-object" src="img/5.jpg" alt="..."></a>
            <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

            </div>
            </div>
        <div class="media-body">
            <h4 class="media-heading">Sklic , slim tall and skiny Girls - "my Source of joy" at Miama</h4>
            <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
                Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
                Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
            </div>
    </div>
    </div>

请任何人将缩略图代码和 WordPress 显示所有邮政编码应该在它应该的位置，将非常感激。

Answer 1

要在 wordpress 中获取缩略图，请使用 the_post_thumbnail();

要获取所有帖子，您可以使用 wp_query 或 get_posts()，然后使用带有 have_posts 的循环。

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array('post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged);
    $query = new WP_Query($args);
    if( $query->have_posts() ) :
    while( $query->have_posts() ) : $query->the_post(); ?>
    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


        <a href="#"><?php the_post_thumbnail();?></a>
        <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

    </div>
    </div>
     <div class="media-body">
        <h4 class="media-heading"><?php the_title()?></h4>
        <p class="media-author"><b><?php the_author()?></b> - <?php echo get_the_date(); ?></p>
            <?php the_content();?>
        </div>
    </div>
    <?php endwhile;?>
<!-- pagination -->
<?php next_posts_link(); ?>
<?php previous_posts_link(); ?>
<?php else : ?>
<!-- No posts found -->
<?php endif; ?>