欢迎来到个人简历网!永久域名:gerenjianli.cn (个人简历全拼+cn)
当前位置:首页 > 范文大全 > 实用文>Wordpress主题修改:使用文章缩略图功能

Wordpress主题修改:使用文章缩略图功能

2023-07-16 09:09:57 收藏本文 下载本文

“烟否”通过精心收集,向本站投稿了9篇Wordpress主题修改:使用文章缩略图功能,以下是小编帮大家整理后的Wordpress主题修改:使用文章缩略图功能,仅供参考,大家一起来看看吧。

Wordpress主题修改:使用文章缩略图功能

篇1:Wordpress主题修改:使用文章缩略图功能

今天笔者说的这个缩略图功能,其实网上已经传烂了,不知道大家有没有看过,今儿拿出来原因是,感觉网上说的不是很具体,一些设置没有提到,所以先给大家提前说一下。

首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图:

如果没有说明你还没有激活这功能。我们需要在你主题functions.php里面加一段代码。

add_theme_support( 'post-thumbnails' ); //激活文章和页面的缩略图功能。

//如果你想分别激活它们,可以使用下面的代码:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 激活文章缩略图功能

add_theme_support( 'post-thumbnails', array( 'page' ) ); // 激活页面缩略图功能

?>

这样你的缩略图功能就激活了,然后我们添加图片或者直接点击设置特色图片的时候,你会发现多了一个设置如图。

我们单击作为特色图像,这样你就可以将这个图片作为特色图片显示了。

做好之后我们就要对它进行调用然后在前台显示出来,代码是:

the_post_thumbnail;

//需要将这段代码放在你的主循环中比如:

?>

这样缩略图就可以显示了。这个基本的方法掌握好之后,下面是一些它的其他使用方法。

1.自定义缩略图的大小(放在主题functions.php里面add_theme_support()的下面)

//$width 是图片的宽度,可以直接填数字

//$height 是图片的高度,也可以直接填数字

//$crop 是否进行裁剪,默认是false不裁剪,如果填写true 你的图片将会裁剪成你设置的大小。

不过set_post_thumbnail_size()笔者在用的时候不起作用,不知道大家有没有试过。试过后如果可以使用的记得和笔者说下哈。

我这边使用的是直接规定缩略图大小(直接在主循环里面输出)

the_post_thumbnail('thumbnail');       // 缩略图(最大默认 宽150px高150px)

the_post_thumbnail('medium');          // 中等大小(最大默认 宽300px 高300px)

the_post_thumbnail('large');           // 大图 (最后默认宽1024px高1024px)

the_post_thumbnail('full');            // 原图

the_post_thumbnail( array(100,100) );  // 自己定义宽高

?>

这里需要多讲一下,设置默认缩略图大小是在wordpress后台 设置->媒体 里面,

2.判断文章是否含有缩略图

has_post_thumbnail();

//用法是,通过if如果进行判断

if ( has_post_thumbnail() )

{

//显示缩略图

}

else

{

//没有缩略图( 这里可以放一张默认的图片 )

}

?>

3.创建新的缩略图大小(放在主题functions.php文件add_theme_support()下面)

我们看到上面设置的图片大小都是等比例缩小的。不管你怎么设置它都是按比列来进行缩小的。如果想设置宽高不等的。便可以使用下面这个函数。

add_image_size( $name, $width, $height, $crop );

//这里的第一个参数$name是新创建缩略图的名称,其他的参数和上面说的是一样的

//使用方法

add_image_size('home-thumb','200','120');

?>

然后我们在显示的时候只需要在填上新的缩略图名称如:the_post_thumbnail('home-thumb');这样就可以显示了。

4.获取缩略图ID号

以上便是今天主要讲的内容,大家如果以后有需要的可以来看看。

篇2:wordpress日志缩略图功能深度剖析

对于一个有深度有内涵的网站而言,精彩的内容永远都是要放在第一位的,但这并不意味着我们可以忽视网站的外观设计,设想一下网站上到处都是大段的纯文字,那么即使字字玑珠,也会引起读者的视觉疲劳,在这样一种情境下,为wordpress的日志正文搭配相关的插图、网站首页搭配日志缩略图就变得十分必要。

日志正文搭配插图,这个没有什么技巧,直接通过wordpress的媒体库添加图片到编辑区就可以,因此本文将重点放在剖析日志缩略图的设置方法上,接下来的内容,我会给大家将目前设置缩略图的各种方法逐一进行梳理,并整合成一个多层次的判断语句。

首先给大家展示一下,目前设置缩略图的四种方法(详见下图),我按照自己的理解将其排列成如下顺序,并且在图中列出了各种实现缩略图的方法的图片来源,通过自定义字段可以调用外链图片,而后面三种方法仅能使用本地图片。

下面我通过分层条件判断语句的方式,将上述四种缩略图调用方式整合到一起,并设置成四个顺序执行的环节,只有当上面的条件不满足的时候,才会顺次对下面的条件进行判断,并执行相应的语句。(详见下图)

下面就到了见证奇迹的时刻,请看缩略图实现代码。

“ title=”

“ alt=”

“ width=”225“ height=”136“ alt=”

/images/random/

上述代码中,设定的自定义字段的名字是image,如果你希望通过外链图片作为缩略图,请在编辑文章的时候添加一个名字为image的自定义字段,字段值为外链图片的链接即可,

另外需要提请注意的是,本文设置的缩略图大小为(225,136),你可以通过修改代码中的相应数字任意调整缩略图大小,以便更好的适应你的主题布局。

为了使上述代码能够流畅的运行,还有几件事情需要做;

第一件事情是确保当前所用wordpress主题支持特色图像功能,查看一下主题的function文件中是否有add_theme_support('post-thumbnails')这一语句,没有的话请添加上;

第二件事情是为了实现抓取正文中第一张图片做缩略图的功能,需要在当前主题的function文件中添加如下函数:

function catch_that_image(){

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('//i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img =“0”;

}

return $first_img;

};

第三件事是在当前主题文件夹的images文件夹中新建一个名为random的文件夹,在里面放上若干jpg格式的图片即可,根据图片的数目相应修改rand函数后面的数字即可。

over。累死老汉,技术文章,大家多多支持。

篇3:巧用WordPress缩略图

WordPress 不仅是博客, 很多时候 WordPress 还被用作为 CMS (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpThumb 等工具生成缩略图.

2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150x150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量,

Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

12345678910111213141516171819

<?php$args=array(“post_parent”=>$post->ID,“post_type”=>“attachment”,“post_mime_type”=>“image”);$images=&get_children(“post_type=attachment&post_mime_type=image&post_parent=”.$post->ID);$imageUrl=“”;if($images){$image=array_pop($images);$imageSrc=wp_get_attachment_image_src($image->ID);$imageUrl=$imageSrc[0];}else{$imageUrl=get_bloginfo(“template_url”).“/img/default.gif”;}?>“>” alt=“<?phpthe_title;?>” width=“150” height=“150” />

这段代码会去找第一个上传的图片缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推...), 如果找不到任何上传图片则使用默认图片. 代码中用到 get_children 和 wp_get_attachment_image_src 两个方法, 可以参考下面两个文章.

WordPress Codex - get children

WordPress Codex - wp get attachment image src

然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.

1

<?phpinclude(“thumb.php”);the_content(“Read More...”);?>

这段代码是把图片放在文章内容前面, 图片如何摆放需要用 CSS 调整一下布局, 这里就不多说了.

最后我两留两个问题给同学们.

1. 如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 提示: 可以用 CSS 实现, 类似方法可以在 Elegant Box 主题中找到.

2. 在文章列表中, 我们只希望看到缩略图, 而屏蔽其他所有图片, 除了使用文章摘要去除所有标签样式, 是否有其他方法可以做到?

本文来自:www.neoease.com/wordpress-thumb-trick/

篇4:Wordpress技巧:日志缩略图功能深度剖析

对于一个有深度有内涵的网站而言,精彩的内容永远都是要放在第一位的,但这并不意味着我们可以忽视网站的外观设计,设想一下网站上到处都是大段的纯 文字,那么即使字字玑珠,也会引起读者的视觉疲劳,在这样一种情境下,为wordpress的日志正文搭配相关的插图、网站首页搭配日志缩略图就变得十分 必要。

日志正文搭配插图,这个没有什么技巧,直接通过wordpress的媒体库添加图片到编辑区就可以,因此本文将重点放在剖析日志缩略图的设置方法上,接下来的内容,我会给大家将目前设置缩略图的各种方法逐一进行梳理,并整合成一个多层次的判断语句。

首先给大家展示一下,目前设置缩略图的四种方法(详见下图),我按照自己的理解将其排列成如下顺序,并且在图中列出了各种实现缩略图的方法的图片来源,通过自定义字段可以调用外链图片,而后面三种方法仅能使用本地图片。

下面我通过分层条件判断语句的方式,将上述四种缩略图调用方式整合到一起,并设置成四个顺序执行的环节,只有当上面的条件不满足的时候,才会顺次对下面的条件进行判断,并执行相应的语句。(详见下图)

下面就到了见证奇迹的时刻,请看缩略图实现代码。

“ title=”

“ alt=”

“ width=”225“ height=”136“ alt=”

/images/random/

上述代码中,设定的自定义字段的名字是image,如果你希望通过外链图片作为缩略图,请在编辑文章的时候添加一个名字为image的自定义字段, 字段值为外链图片的链接即可,

另外需要提请注意的是,本文设置的缩略图大小为(225,136),你可以通过修改代码中的相应数字任意调整缩略图大小,以 便更好的适应你的主题布局。

为了使上述代码能够流畅的运行,还有几件事情需要做;

第一件事情是确保当前所用wordpress主题支持特色图像功能,查看一下主题的function文件中是否有add_theme_support('post-thumbnails')这一语句,没有的话请添加上;

第二件事情是为了实现抓取正文中第一张图片做缩略图的功能,需要在当前主题的function文件中添加如下函数:

function catch_that_image(){

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('//i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img =“0”;

}

return $first_img;

};

第三件事是在当前主题文件夹的images文件夹中新建一个名为random的文件夹,在里面放上若干jpg格式的图片即可,根据图片的数目相应修改rand函数后面的数字即可。

over。累死老汉,技术文章,大家多多支持。

篇5:WordPress MU编辑主题功能

WordPress有一个很有用的功能,就是在线编辑主题功能,在多人博客WordPress MU中,这一功能因为安全性问题而被禁用,这里有一个方法,可以变相开通这一功能,而又不至于影响整个系统的安全性,

具体的方法是,在最新的WordPress MU 2.8.4版本中,打开wp-adminincludemu.php文件,搜索unset( $submenu[“themes.php”][10] );一行,将其注释掉。

接着,搜索if ( strpos( $_SERVER[“PHP_SELF”], $page ) ) {一行,将这一行代码修改为if ( strpos( $_SERVER[“PHP_SELF”], $page ) && !is_site_admin ) {,保存退出,

经过这样的修改,WordPress MU就可以使用在线编辑主题功能了,并且只有WPMU的管理员可以使用,其他普通用户没有权限使用,他们打开theme-editor.php时会提示“页面已被管理员禁用”,从而保证了整个系统的安全性。

本文自月光博客 [ www.williamlong.info/ ]

篇6:Wordpress 三步自动显示缩略图

喜欢折腾修改Wordpress主题的朋友,肯定遇到过这样的问题,想在首页文章中显示缩略图,有插件可以实现,不过不方便操作和控制,毕竟代码是人家写的,今天HZ与大家分享一下,无插件,纯代码是怎么实现首页文章缩略图的,方法非常简单,就算你不懂代码,按步骤操作也是可以的,当然缩略图选择的是文章中的第一张图片,如果文章不包含图片,显示默认图片,所以你要置顶一个默认的图片位置。

步入正题,开始添加首页缩略图,分简单3步即可实现:

第一步:找到使用的主题模板的functions.php文件在之间添加如下代码

function thumb_img($soContent){

$soImages = '~]* />~';

preg_match_all( $soImages, $soContent, $thePics );

$allPics = count($thePics[0]);

if( $allPics >0 ){

echo “”;

echo $thePics[0][0];

echo '';

}

else {

echo “”;

echo “echo bloginfo('template_url');

echo ”/images/thumb.gif'>“;

}

}

这是一个显示缩略图的方法,自动检索文章的第一张图片,如果没有显示当前主题/images/thumb.gif 所以你要把这个thumb.gif图片准备好,

第二步:找到index.php文件即首页文件,找到the_content();或相似的代码在它之前添加如下代码:

thumb_img($post->post_content);

这样就调用了刚才的方法,实际上缩略图已经完成了。但是你看到的效果一定很意外,应为图片的大小没有控制,会很难看。好了,第三步

第三步:添加缩略图样式CSS代码:

这是浮云站使用的的缩略图样式,你可以先凑合着用,再另行修改

#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}

好了,这样缩略图就有模有样的显示出来啦。三步搞定!

篇7:WordPress实现相关文章功能代码方法

WordPress有很多实现相关文章功能的插件,插件的优点是配置简单,但是可能会对网站的速度造成一些小的影响,所以很多人还是比较喜欢用代码实现需要的功能,但是话又说回来了,代码实现也有缺点,就是配置复杂,不懂代码的人完全摸不着头脑或者只能照搬别人的代码,还不如用插件,

* 文章标题1

* 文章标题2

......

方法一:标签相关

首先获取文章的所有标签,接着获取这些标签下的 n 篇文章,那么这 n 篇文章就是与该文章相关的文章了。现在可以见到的WordPress相关文章插件都是使用的这个方法。下面是实现的代码:

$post_tags = wp_get_post_tags($post->ID);

if ($post_tags) {

foreach ($post_tags as $tag)

{

// 获取标签列表

$tag_list[] .= $tag->term_id;

}

// 随机获取标签列表中的一个标签

$post_tag = $tag_list[ mt_rand(0, count($tag_list) - 1) ];

// 该方法使用 query_posts 函数来调用相关文章,以下是参数列表

$args = array(

'tag__in' =>array($post_tag),

'category__not_in' =>array(NULL),      // 不包括的分类ID

'post__not_in' =>array($post->ID),

'showposts' =>6,               // 显示相关文章数量

'caller_get_posts' =>1

);

query_posts($args);

if (have_posts()) :

while (have_posts()) : the_post(); update_post_caches($posts); ?>

* ” rel=“bookmark” title=“

* 暂无相关文章

使用说明:”不包括的分类ID” 指的是相关文章不显示该分类下的文章,将同行的 NULL 改成文章分类的ID即可,多个ID就用半角逗号隔开。因为这里限制只显示6篇相关文章,所以不管给 query_posts() 的参数 tag__in 赋多少个值,都是只显示一个标签下的 6 篇文章,除非第一个标签有1篇,第二个标签有2篇,第三个有3篇。。。。。。所以如果这篇文章有多个标签,那么我们采取的做法是随机获取一个标签的id,赋值给 tag__in 这个参数,获取该标签下的6篇文章。

方法二:分类相关

本方法是通过获取该文章的分类id,然后获取该分类下的文章,来达到获取相关文章的目的。

$cats = wp_get_post_categories($post->ID);

if ($cats) {

$cat = get_category( $cats[0] );

$first_cat = $cat->cat_ID;

$args = array(

'category__in' =>array($first_cat),

'post__not_in' =>array($post->ID),

'showposts' =>6,

'caller_get_posts' =>1);

query_posts($args);

if (have_posts()) :

while (have_posts()) : the_post(); update_post_caches($posts); ?>

* ” rel=“bookmark” title=“

?>”>

* 暂无相关文章

方法三:标签相关,SQL获取

获取相关文章的原理与方法一相似,不过在获取文章的时候是以SQL语句来直接读取数据库,从而随机获取6篇相关文章记录,而不是WordPress的函数query_posts().

$post_tags = wp_get_post_tags($post->ID);

if ($post_tags) {

foreach ($post_tags as $tag)

{

// 获取标签列表

$tag_list[] .= $tag->term_id;

}

// 随机获取标签列表中的一个标签

$post_tag = $tag_list[ mt_rand(0, count($tag_list) - 1) ];

$related = $wpdb->get_results(“

SELECT {$wpdb->prefix}posts.post_title, {$wpdb->prefix}posts.guid

FROM {$wpdb->prefix}posts, {$wpdb->prefix}term_relationships, {$wpdb->prefix}term_taxonomy

WHERE {$wpdb->prefix}posts.ID = {$wpdb->prefix}term_relationships.object_id

AND {$wpdb->prefix}term_taxonomy.taxonomy = 'post_tag'

AND {$wpdb->prefix}term_taxonomy.term_taxonomy_id = {$wpdb->prefix}

term_relationships.term_taxonomy_id

AND {$wpdb->prefix}posts.post_status = 'publish'

AND {$wpdb->prefix}posts.post_type = 'post'

AND {$wpdb->prefix}term_taxonomy.term_id = '” . $post_tag . “'

AND {$wpdb->prefix}posts.ID != '” . $post->ID . “'

ORDER BY RAND( )

LIMIT 6”);

// 以上代码中的 6 为限制只获取6篇相关文章

// 通过修改数字 6,可修改你想要的文章数量

if ( $related ) {

foreach ($related as $related_post) {

?>

* guid; ?>“ rel=”bookmark“

title=”

* 暂无相关文章

方法四:分类相关,SQL获取

获取相关文章的原理与方法二相似,不过在获取文章的时候是以SQL语句来直接读取数据库,从而随机获取6篇相关文章记录,而不是WordPress的函数query_posts().

$cats = wp_get_post_categories($post->ID);

if ($cats) {

$cat = get_category( $cats[0] );

$first_cat = $cat->cat_ID;

$related = $wpdb->get_results(“

SELECT wp_posts.post_title, wp_posts.guid

FROM wp_posts, wp_term_relationships, wp_term_taxonomy

WHERE wp_posts.ID = wp_term_relationships.object_id

AND {$wpdb->prefix}term_taxonomy.taxonomy = 'category'

AND {$wpdb->prefix}term_taxonomy.term_taxonomy_id = {$wpdb->prefix}term_relationships.term_taxonomy_id

AND {$wpdb->prefix}posts.post_status = 'publish'

AND {$wpdb->prefix}posts.post_type = 'post'

AND {$wpdb->prefix}term_taxonomy.term_id = '” . $first_cat . “'

AND {$wpdb->prefix}posts.ID != '” . $post->ID . “'

ORDER BY RAND( )

LIMIT 6”);

if ( $related ) {

foreach ($related as $related_post) {

?>

* guid; ?>“ rel=”bookmark“

title=”

* 暂无相关文章

方法五:作者相关

该方法是获取该文章作者的其他文章来充当相关文章,代码如下:

$post_author = get_the_author_meta( 'user_login' );

$args = array(

'author_name' =>$post_author,

'post__not_in' =>array($post->ID),

'showposts' =>6,               // 显示相关文章数量

'orderby' =>date,          // 按时间排序

'caller_get_posts' =>1

);

query_posts($args);

if (have_posts()) :

while (have_posts()) : the_post(); update_post_caches($posts); ?>

* “ rel=”bookmark“

title=”

* 暂无相关文章

时间效率对比

我们将用之前的一个php代码对以上各个相关文章代码执行时间进行测算,以便对以上各个的方法进行效率,给你的选择提供参考,

以下是在同一篇文章中获取6篇相关文章,以上各方法最终测算的时间如下:

方法一:0.18067908287048 秒

方法二:0.057158946990967 秒

方法三:0.037126064300537 秒

方法四:0.045628070831299 秒

方法五:0.023991823196411 秒

篇8:WordPress为主题添加前台删除文章及评论功能

一般情况下我们都是登录wordpress后台进行文章及评论管理,如能前台实现管理文章,特别是前台删除垃圾留言,是不是很方便,实现方法很简单,把下面两段代码加到主题模版的适当位置即可。

前台删除文章

运行原代码后,发现点击“Delete post”只会转到一个警告页面,并且不会删除日志,稍微改动了一下。

修改后的:

<?php $url = get_bloginfo('url'); if (current_user_can('edit_post', $post->ID)){ echo 'ID);echo '“>Delete post'; } ?>

前台删除评论

原代码需手动修改博客URL地址,并需要确认后方可删除评论,修改后的:

<?php if ( is_user_logged_in() ) { $url = get_bloginfo('url'); echo 'comment_ID .'” href=“' . wp_nonce_url(”$url/wp-admin/comment.php?action=deletecomment&p=“ . $comment->comment_post_ID . '&c=' . $comment->comment_ID, 'delete-comment_' . $comment->comment_ID) . '”“ >Delete'; } ?>

HotNews主题将上述代码加到functions.php模版:

class=”datetime“>

这句代码下面适当位置

这段代码我只在HotNews主题中试过,评论模版采用标准评论函数的主题未尝试过,

感觉第一段前台删除文章的代码用处不是很大,而前台删除评论功能却很实用,看到一个垃圾删一个,爽!

篇9:修改WordPress文章编辑页面的文章数

WordPress可以让我们批量编辑文章属性,但每页只显示15条,某些时候,可能觉得不够,想要增多一些,方法是:

1. 打开wp-admin/includes/post.php

2. 找到下面这一句

wp(”post_type=post&what_to_show=posts$post_status_q&posts_per_page=15&order=$order&orderby=$orderby");

把15改成你想输出的文章数即可,

注意: 具体文章数得根据你的主机情况量力而行,一般50至100条也就差不多了

本文转载自 修改WordPress文章编辑页面的文章数 | 帕兰映像

【Wordpress主题修改:使用文章缩略图功能】相关文章:

1.酷我音乐盒功能使用技巧

2.修改PowerPoint最近使用的文档数目

3.360安全卫士电脑门诊功能的使用

4.pycharm 使用心得(七)一些功能介绍

5.WordPress: 自定义页面输出所有文章列表(表格模式)

6.YY歪歪修改昵称、签名及密码使用

7.chkdsk工具修复怎么用 chkdsk工具修复功能使用教程

8.帝国cms调用wordpress博客或随机文章的方法

9.dedecms5.7文章二次开发实现阅读全文功能的方法

10.语文名言名句以及使用主题解释

下载word文档
《Wordpress主题修改:使用文章缩略图功能.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度: 评级1星 评级2星 评级3星 评级4星 评级5星
点击下载文档

文档为doc格式

最新推荐
猜你喜欢
  • 返回顶部