php - WordPress 在主题支持中检索缩略图

Question

我遇到了我有限的能力无法解决的问题。我尝试使用附近的解决方案，但没有按我预期的方式工作。

在 post nav previous link 中，我想检索缩略图图像链接和图像上的文本，并使整个内容可点击并在悬停时放大它。喜欢最后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
========================

*/ 函数 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;

Answer 1

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

<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
 <?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) 
);?>
<?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
</div>

<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); 
} ?>
<?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->

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

#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;}

请随意更改样式以使其与您的主题相匹配。我们的用户通常喜欢对代码进行样式化，这样他们就可以更轻松地调整代码。这只是您应该能够轻松自定义的基本样式。 如果您想更改缩略图大小，只需将数组 (100,100) 更改为您喜欢的任何值即可。

希望对你有用。