Wordpress在主题支持中检索缩略图

时间:2017-10-03 10:05:32

标签: php html css wordpress

我遇到了这个我的有限能力无法处理的问题。我尝试使用near解决方案,但是没有按照我预期的方式工作。

在post nav previous链接中,我想检索图像上的缩略图图像链接和文本,并使整个内容可以点击并在悬停时放大。就像http://swordandscale.com/sword-and-scale-episode-100/的结尾一样。但我只是设法得到文本。这是我的功能,

get_header(); ?>

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

        <div class="container">
            <div class="row">

                <div class="col-xs-12 col-md-10 col-lg-8 col-lg-offset-2 col-md-offset-1">

                    <?php 

                        if( have_posts() ):

                            while( have_posts() ): the_post();

                                sidekick_save_post_views( get_the_ID() );

                                get_template_part( 'template-parts/single', get_post_format() );





                                echo sidekick_post_navigation();



                                if ( comments_open() ):
                                    comments_template();
                                endif;

                            endwhile;

                        endif;

                    ?>


                </div><!-- .col-xs-12 -->

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


    </main>
</div><!-- #primary -->
/*
========================
    SINGLE POST CUSTOM FUNCTIONS
========================

* / function sidekick_post_navigation(){

$nav = '<div class="row">';

$prev = get_previous_post_link( '<div class="post-link-nav">%link</div>', '%title' );
$nav .= '<div class="col-xs-12 text-center">' . $prev . '</div>';

$next = get_next_post_link( '<div class="post-link-nav">%link</div>', '%title' );
$nav .= '<div class="col-xs-12 text-center">' . $next . '</div>';

$nav .= '</div>';

return $nav;

}

1 个答案:

答案 0 :(得分:0)

您需要做的第一件事是打开主题的single.php文件,并在the_content()区域之后的循环内添加以下代码:

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; 
height: 100px;}
#cooler-nav .next{float: right; width: 250px;}

您需要做的下一件事是打开style.css文件并添加以下样式:

io.function()

随意更改样式以使其与主题相匹配。我们的用户通常喜欢为代码设置样式,因此可以让他们更轻松地调整代码。这只是您应该能够轻松自定义的基本样式。 如果要更改缩略图大小,只需将数组(100,100)更改为您喜欢的任何内容。

希望对你有用。