WordPress建站教程:实现文章缩略图的方法

前端之家收集整理的这篇文章主要介绍了WordPress建站教程:实现文章缩略图的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在使用的过程中,我们经常需要显示文章的缩略图。WordPress 缩略图的实现主要靠两种方式,第一种是来作为缩略图的图源,第二种是读取文章特色图标来作为缩略图的图源。今天我们将这两种方式结合起来实现 wordpress 缩略图

实现原理如下:
一、判断文章是否已经设置特色图片,如果设置了,则获取特色图片来作为文章缩略图的图源。
二、判断文章中是否存在图片(正则表达式),如果存在图片,则获取文章第一张图片来来作为文章缩略图的图源。
三、如果文章中既没有设置特色图片,也不存在图片,则显示一张默认的图片

实现方法如下:

1. 切换到主题目录,打开functions.PHP文件,加入以下代码

Crayon-5c891d2adc09e867661676" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-language">PHP
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-2">2
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-3">3
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-4">4
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-5">5
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-6">6
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-7">7
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-8">8
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-9">9
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-10">10
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-11">11
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-12">12
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-13">13
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-14">14
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-15">15
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-16">16
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-17">17
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-18">18
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-19">19
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-20">20
Crayon-num" data-line="Crayon-5c891d2adc09e867661676-21">21
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2adc09e867661676-22">22
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891d2adc09e867661676-1">Crayon-ta">PHPCrayon-h">
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-2">Crayon-c">//缩略图
Crayon-line" id="Crayon-5c891d2adc09e867661676-3">Crayon-e">add_theme_supportCrayon-sy">(Crayon-h"> Crayon-s">'post-thumbnails'Crayon-h"> Crayon-sy">)Crayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-4">Crayon-t">functionCrayon-h"> Crayon-e">post_thumbnailCrayon-sy">(Crayon-h"> Crayon-v">$widthCrayon-h"> Crayon-o">=Crayon-h"> Crayon-cn">255Crayon-sy">,Crayon-v">$heightCrayon-h"> Crayon-o">=Crayon-h"> Crayon-cn">130Crayon-h"> Crayon-sy">)Crayon-sy">{
Crayon-line" id="Crayon-5c891d2adc09e867661676-5">Crayon-h">Crayon-m">globalCrayon-h"> Crayon-v">$postCrayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-6">Crayon-h">Crayon-st">ifCrayon-sy">(Crayon-h"> Crayon-e">has_post_thumbnailCrayon-sy">(Crayon-sy">)Crayon-h"> Crayon-sy">)Crayon-sy">{
Crayon-line" id="Crayon-5c891d2adc09e867661676-7">Crayon-h">Crayon-v">$timthumb_srcCrayon-h"> Crayon-o">=Crayon-h"> Crayon-e">wp_get_attachment_image_srcCrayon-sy">(Crayon-e">get_post_thumbnail_idCrayon-sy">(Crayon-v">$postCrayon-cn">IDCrayon-sy">)Crayon-sy">,Crayon-s">'full'Crayon-sy">)Crayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-8">Crayon-h">Crayon-v">$post_timthumbCrayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'Crayon-sy">.Crayon-e">get_bloginfoCrayon-sy">(Crayon-s">"template_url"Crayon-sy">)Crayon-sy">.Crayon-s">'/timthumb.PHP?src='Crayon-sy">.Crayon-v">$timthumb_srcCrayon-sy">[Crayon-cn">0Crayon-sy">]Crayon-sy">.Crayon-s">'&h='Crayon-sy">.Crayon-v">$heightCrayon-sy">.Crayon-s">'&w='Crayon-sy">.Crayon-v">$widthCrayon-sy">.Crayon-s">'&zc=1" alt="'Crayon-sy">.Crayon-v">$postCrayon-i">post_titleCrayon-sy">.Crayon-s">'" class="thumb" title="'Crayon-sy">.Crayon-e">get_the_titleCrayon-sy">(Crayon-sy">)Crayon-sy">.Crayon-s">'"/>'Crayon-sy">;
Crayon-line" id="Crayon-5c891d2adc09e867661676-9">Crayon-h">Crayon-k ">echoCrayon-h"> Crayon-v">$post_timthumbCrayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-10">Crayon-h">Crayon-sy">}Crayon-h"> Crayon-st">elseCrayon-h"> Crayon-sy">{Crayon-h">
Crayon-line" id="Crayon-5c891d2adc09e867661676-11">Crayon-h">Crayon-v">$contentCrayon-h"> Crayon-o">=Crayon-h"> Crayon-v">$postCrayon-i">post_contentCrayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-12">Crayon-h">Crayon-v">$defaltthubmnailCrayon-h"> Crayon-o">=Crayon-h"> Crayon-e">sapphireCrayon-sy">(Crayon-s">'default-thumb'Crayon-sy">)Crayon-h"> Crayon-sy">?Crayon-h"> Crayon-e">sapphireCrayon-sy">(Crayon-s">'default-thumb'Crayon-sy">)Crayon-h"> Crayon-o">:Crayon-h"> Crayon-e">get_template_directory_uriCrayon-sy">(Crayon-sy">)Crayon-sy">.Crayon-s">'/img/no-thumb.png'Crayon-sy">;
Crayon-line" id="Crayon-5c891d2adc09e867661676-13">Crayon-h">Crayon-e">preg_match_allCrayon-sy">('Crayon-o">/Crayon-o"><Crayon-i">imgCrayon-sy">.Crayon-o">*Crayon-sy">?Crayon-sy">(Crayon-sy">?Crayon-o">:Crayon-h"> Crayon-o">|Crayon-sy">\Crayon-sy">\Crayon-i">tCrayon-o">|Crayon-sy">\Crayon-sy">\Crayon-i">rCrayon-o">|Crayon-sy">\Crayon-sy">\Crayon-i">nCrayon-sy">)Crayon-sy">?Crayon-i">srcCrayon-o">=Crayon-sy">[Crayon-sy">\'Crayon-s">"]?(.+?)[\'"Crayon-sy">]Crayon-sy">?Crayon-sy">(Crayon-sy">?Crayon-o">:Crayon-sy">(Crayon-sy">?Crayon-o">:Crayon-h"> Crayon-o">|Crayon-sy">\Crayon-sy">\Crayon-i">tCrayon-o">|Crayon-sy">\Crayon-sy">\Crayon-i">rCrayon-o">|Crayon-sy">\Crayon-sy">\Crayon-i">nCrayon-sy">)Crayon-o">+Crayon-sy">.Crayon-o">*Crayon-sy">?Crayon-sy">)Crayon-o">/Crayon-i">simCrayon-s">',PREG_PATTERN_ORDER);
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-14">Crayon-s">$n = count($strResult[1]);
Crayon-line" id="Crayon-5c891d2adc09e867661676-15"> 0){
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-16">Crayon-s">echo 'Crayon-o"><Crayon-e">img Crayon-i">srcCrayon-o">=Crayon-s">"'.get_bloginfo("Crayon-i">template_urlCrayon-s">").'/timthumb.PHP?w='.$width.'&amp;h='.$height.'&amp;src='.$strResult[1][0].'"Crayon-h"> Crayon-i">titleCrayon-o">=Crayon-s">"'.get_the_title().'"Crayon-h"> Crayon-i">altCrayon-o">=Crayon-s">"'.get_the_title().'"Crayon-o">/Crayon-s">';
Crayon-line" id="Crayon-5c891d2adc09e867661676-17">Crayon-s">} else {
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-18">Crayon-s">echo 'Crayon-o"><Crayon-e">img Crayon-i">srcCrayon-o">=Crayon-s">"'.get_bloginfo("Crayon-i">template_urlCrayon-s">").'/timthumb.PHP?w='.$width.'&amp;h='.$height.'&amp;src='.$defaltthubmnail.'"Crayon-h"> Crayon-i">titleCrayon-o">=Crayon-s">"'.get_the_title().'"Crayon-h"> Crayon-i">altCrayon-o">=Crayon-s">"'.get_the_title().'"Crayon-o">/'Crayon-sy">;
Crayon-line" id="Crayon-5c891d2adc09e867661676-19">Crayon-h">Crayon-sy">}
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-20">Crayon-h">Crayon-sy">}
Crayon-line" id="Crayon-5c891d2adc09e867661676-21">Crayon-sy">}
Crayon-line Crayon-striped-line" id="Crayon-5c891d2adc09e867661676-22">

注:此处需要用到一个裁剪缩略图PHP文件,点击下面的链接下载
[dl href=’http://pan.baidu.com/s/1jGgyQ6y’]点击下载[/dl]

2. 在需要显示文章缩略图的地方,添加以下代码

Crayon-5c891d2adc0a9150737020" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891d2adc0a9150737020-1">1
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891d2adc0a9150737020-1">Crayon-ta">PHPCrayon-h"> Crayon-e">post_thumbnailCrayon-sy">(Crayon-cn">145Crayon-sy">,Crayon-cn">145Crayon-sy">)Crayon-h">

猜你在找的wordpress相关文章