欢迎您光临爱永设计官网!
电话图标 服务热线/微信:13436537174 QQ咨询:276583799

新闻资讯

news

wordpress第一篇文章显示大图,其余显示小缩略图

发表日期:2013-02-17 文章作者:爱永设计  浏览次数:16965 次

本文引自jinwen say教程系列之“WordPress自定义字段添加日志图片(4)-提高”

让各位久等,现在我们说下如何实现下图效果:首篇日志使用大尺寸图片,其余较前日志采用较少尺寸图片展示。这样的好处是站内文章主次分明,读者易于被最新一篇日志吸引。
smartrcn2 150x150 WordPress自定义字段添加日志图片(4)-提高

这种做法其实本质是把首页分成两部分,第一部分只显示最新一篇文章,并引用大尺寸图片;余下第二部分显示指定篇数日志,并引用小尺寸图片。我在这里贴出示例代码,因为每个主题模板的index.php可能有所不同,但大家参照下列代码,应该不难自行更改。

<?php $top_query = new WP_Query(‘showposts=1′); ?>
<?php while($top_query->have_posts()) : $top_query->the_post(); $first_post = $post->ID; ?>
此处为首篇日志图片调用语句(大图片)
此处为首篇日志的调用(标题,时间,摘要等)区块(一般以div包括)
<?php endwhile; ?>

<?php query_posts(‘showposts=6′); ?>
<?php while(have_posts()) : the_post(); if(!($first_post == $post->ID)) : ?>
此处为首篇日志图片调用语句(小图片)
此处较近的5篇日志(6-1)调用(标题,时间,摘要等)(一般以div包括)
<?php endif; endwhile; ?>

其中红字部分代码按照本系列第三篇讲述,可以写成如下:

<?php if ( get_post_meta($post->ID, 'index_image', true) ) { ?>
<?php $image = get_post_meta($post->ID, 'index_image', true); ?>

<div><img width="495" src="<?php echo $image; ?>" alt="" /></div>
<?php } ?>

而蓝字部分代码同样道理,只是我们把变量名'index_image'改为'small_image',把图片大小从495变成80则可,图片的样式控制由class="indeximg"改为class="smallimg",更改后代码如下:

<?php if ( get_post_meta($post->ID, 'small_image', true) ) { ?>
<?php $image = get_post_meta($post->ID, 'small_image', true); ?>

<div><img width="80" src="<?php echo $image; ?>" alt="" /></div>
<?php } ?>

这样,在撰写文章前我们需要为每篇日志准备两种尺寸图片(根据你的个从设置),然后别忘记在WordPress后台的自定义域分别为两个调用图片变量’index_image’和’small_image’输入对应图片的路径。

将文章分享到..
相关资讯
最新主题模板
随机新闻
最新网站案例
  • 更多 +我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!

Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作