如何在wordpress上设计博客布局


How to design blog layout on wordpress

我在一个项目中有点库存,设计并创建了一个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显示所有的邮政编码应该在哪里,将非常感激。

使用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; ?>