作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到了我有限的能力无法解决的问题。我尝试使用附近的解决方案,但没有按我预期的方式工作。
在 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;
最佳答案
您需要做的第一件事是打开主题的 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) 更改为您喜欢的任何值即可。
希望对你有用。
关于php - WordPress 在主题支持中检索缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46542050/
我是一名优秀的程序员,十分优秀!