WordPress simple three-step implementation of home page article display thumbnails (no plug-ins)

Time:2019-10-6

If you like to modify WordPress theme, you must have encountered such a problem. If you want to display thumbnails in homepage articles, you can implement them with plug-ins, but it’s not convenient for operation and control. After all, the code is written by others. Today, I’d like to share with you how to realize thumbnails of homepage articles without plug-ins and with pure code. The method is very simple, even if you don’t understand the code, step by step. Sudden operation is also possible. Of course, the thumbnail selection is the first picture in the article, if the article does not contain pictures, display the default picture, so you have to set the top of a default image location.

Step into the main topic, start adding home page thumbnails, can be achieved in three simple steps:

Step one:Find the functions. PHP file of the theme template to use and add the following code between <? PHP and?>.

Copy code

The code is as follows:

function thumb_img($soContent){
$soImages = ‘~<img [^\>]*\ />~’;
preg_match_all( $soImages, $soContent, $thePics );
$allPics = count($thePics[0]);
if( $allPics > 0 ){
echo “<span id=’thumb’>”;
echo $thePics[0][0];
echo ‘</span>’;
}
else {
echo “<span id=’thumb’>”;
echo “<img src='”;
echo bloginfo(‘template_url’);
echo “/images/thumb.gif’></span>”;
}
}

This is a way to display thumbnails, automatically retrieve the first picture of the article. If the current theme / images / thumb. GIF is not displayed, you need to prepare the thumb. gif image.~

The second step:Find the index.php file, the home page file, and find the_content(); or add the following code before it:

Copy code

The code is as follows:

thumb_img($post->post_content);

This calls the method just now. In fact, the thumbnail has been completed! But the effect you see must be very unexpected, because the size of the picture is not controlled, it will be ugly. Okay, step three

The third step:Add thumbnail style CSS code:

This is the thumbnail style used by Fuyun Station. You can make it work first and then modify it separately.

Copy code

The code is as follows:

#thumb{margin:5px 15px 5px 5px;width:145px;height:120px;border:3px solid #eee;float:left;overflow:hidden;}
#thumb img{max-height:186px;max-width:186px}

Okay, so the thumbnails will show up! Three steps!

Recommended Today

Vbs script code for network interface utilization monitoring (Windows)

Copy codeThe code is as follows: ‘program name: btlwchk · netinterface.vbs“Program purpose: monitoring the utilization of windows host network interface‘created on: September 1, 2011‘author information: zhangkai‘running environment: vbs‘process parameters MonSubject=”NetInterface” Set Args=WScript.Arguments If (Args.Count<1) Then Wscript.Echo MonSubject & ” -1:command line error” WScript.Quit(3) End If strcid=Args(0) ‘get working directorytmparr=Split(Wscript.ScriptFullName,”\”,-1) g_strworkdir=tmparr(0) narr=UBound(tmparr,1) For i=1 to narr-3 […]