发表日期:2013-02-17 文章作者:爱永设计 浏览次数:16969 次
本文引自jinwen say教程系列之“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’输入对应图片的路径。
日期:2024-03-24 浏览次数:54619 次
日期:2020-03-06 浏览次数:257496 次
日期:2018-07-07 浏览次数:329343 次
日期:2017-08-20 浏览次数:329743 次
日期:2016-09-09 浏览次数:330074 次
开发日期:2021-06-21 浏览次数:682703 次
开发日期:2021-04-21 浏览次数:742497 次
开发日期:2020-05-03 浏览次数:799967 次
开发日期:2019-12-02 浏览次数:778020 次
开发日期:2019-10-02 浏览次数:1037078 次
日期:2020-03-03 浏览次数:32557 次
日期:2014-01-19 浏览次数:13769 次
日期:2018-10-07 浏览次数:8322 次
日期:2012-09-30 浏览次数:17310 次
日期:2012-12-15 浏览次数:28674 次
致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!
Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作