您现在的位置是:首页 > 教程 > WordPress教程WordPress教程
WordPress上下篇实现文章链接添加缩略图的方法
元香2023-07-27 23:17:25WordPress教程已有人查阅
导读大部分WordPress主题都会在正文下面添加上下篇文章的链接,可以通过下面的代码给这个链接再加个缩略图,让其更醒目。
大部分WordPress主题都会在正文下面添加上下篇文章的链接,可以通过下面的代码给这个链接再加个缩略图,让其更醒目。将下面代码添加到正文模板文件的适当位置即可。
代码一
默认调用文章100×100的特色图像。
<div id="post-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) ?>
<div class="nav-box previous">
<?php previous_post_link('« « Previous Post:', 'yes'); ?>
<?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 previous_post_link('» » Next Post:', 'yes'); ?>
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
<?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php ?>
</div>
配套样式
#post-nav{clear: both; height: 100px; margin: 0 0 70px;}
#post-nav .nav-box{background: #e9e9e9; padding: 10px;}
#post-nav img{float: left; margin: 0 10px 0 0;}
#post-nav p{margin: 0 10px; font-size: 11px; vertical-align: middle;}
#post-nav .previous{float: left; vertical-align: middle; width: 300px; height: 120px;}
#post-nav .next{float: right; width: 300px; height: 120px;}
代码二
除了调用特色图像,并显示文章发表时间,稍加修改还可以添加更多的文章信息,包括自定义缩略图、文章简要等。
<div id="post-nav">
<?php $prevPost = get_previous_post(true);
if($prevPost) {
$args = array(
'posts_per_page' => 1,
'include' => $prevPost->ID
);
$prevPost = get_posts($args);
foreach ($prevPost as $post) {
setup_postdata($post);
?>
<div class="post-previous">
<a class="previous" href="<?php the_permalink(); ?>">« Previous Story</a>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
< all><?php the_date('F j, Y'); ?></ all>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
$nextPost = get_next_post(true);
if($nextPost) {
$args = array(
'posts_per_page' => 1,
'include' => $nextPost->ID
);
$nextPost = get_posts($args);
foreach ($nextPost as $post) {
setup_postdata($post);
?>
<div class="post-next">
<a class="next" href="<?php the_permalink(); ?>">Next Story »</a>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
< all><?php the_date('F j, Y'); ?></strong>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
?>
</div>
本文标签:
很赞哦! ()
相关文章
随机图文
-
wordPress可以仿站吗,wordPress怎么仿站
目标网站的抓取,使用仿站小工具8.0.2挺好用的,能够尽可能多的将整个网站抓取下来。将文件保存到wp-content/tust。保存的首页default.html和其他的文件目录如下: -
怎么创建自己的网站,创建自己的网页方法
前面讲了一堆创建个人网站的原因,优缺点等,现在来讲一点真正的干货。如何搭建一个属于自己网站,估计很多人(无论技术或非技术)都有这个冲动想去搭建一个属于自己的网络小天地 -
wordpress开启多用户/多站点/多域名模式
刷新网站后台,访问 工具 > 配置网络,根据自己的需要选择“子域名”或者“子目录”模式,设置好网站信息,然后点击“安装” -
WordPress函数wp_nav_menu()的介绍和使用方法
worpdress发展到3.0以后增加了一个自定义菜单函数wp_nav_menu(),使得wordpress能够轻松的制作自己的导航菜单。
留言与评论 (共有 条评论) |