图片待添加
图片待添加

WordPress主题开发教程:文章缩略图自动调用文章内容图片

2020-02-16 14:03 分类:WordPress主题开发制作教程 阅读(次阅读) 标签:,

大家用制作WordPress主题的时候都希望文章列表前面有缩略图这个功能.

这样可以让你的文章更有吸引力.

也可以让你的网站更加好看,想想全是文字的网站 还是略显单调了一点.

怎么操作呢?

在WordPress主题的functions.php 粘贴下面的缩略图代码:

//调用缩略图
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = bloginfo('template_url') . "/default.jpg";
};
return $first_img;
}

在你想要调用文章缩略图的列表页加入如下代码. 比如archive.php (WordPress主题的列表页) 与 index.php(WordPress主题的首页)

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(600,268),array('alt'=> trim(strip_tags( $post->post_title ))));} else {?>
<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" width="600" height="268"/>
<?php }?>

上面的 600 与268 代表图片的长与宽,你可以按照自己的需求调整.

你也可以给WordPress主题的图片前面加上你的文章链接,比如:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(600,268),array('alt'=> trim(strip_tags( $post->post_title ))));} else {?>
<a href="<?php the_permalink(); ?>">
   <img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" width="600" height="268"/>
</a>   
<?php }?>

这里只是举例,你需要先把html与css的页面写好.

这样你的WordPress主题才会更吸引人.


本文地址: https://www.wpyi.com/the-post-thumbnail.html