WordPress企业建站-产品展示页面结构分析
2018-09-18

搭建企业网站的目的主要还是宣传企业和自己的产品,其中宣传产品占较大比重,那么,一个产品展示页面是什么结构的呢?

一般产品展示页面都是采用产品图片形式给于用户最直观的展示,因此产品图片将是产品页面必不可少的元素之一,当然仅有图片是不够的,还需要搭配产品名称,这样子用户才能知道是什么产品,当然如果需要也可以用一两句话对该产品进行一个简要的描述。

上面是一个很典型的产品展示页面,现在我们分析一下页面的主体结构,为了便于描述,我在这里采用table表格形式给予表现,在编写代码时建议使用CSS布局。

产品展示页面,从本质来说其实是某一分类目录的所有文章的展示,一共三个元素:元素一是文章图像/产品相关图片,元素二是文章标题/产品名称,元素三是是文章摘要/产品简要描述,然后采用循环方式显示出来。最下面是翻页,强烈推荐使用wp-pagenavi插件。

这里,最重要的是产品图片展示部分,也就是如何提取相关图片或者指定相关图片,下面提供三种方法:

方法一:使用WordPress自带的“特色图像”功能,这个需要主题的支持。

第一步,在你的改款主题的functions.php加入如下代码:

add_theme_support( 'post-thumbnails' );

第二步,在你的首页文件index.php模板内容位置加入:

<?php if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src="<?php bloginfo('template_url'); ?>/images/xxx.jpg" />
<?php } ?>

注:XXX.JPG为你在没有设定特色/产品图片的时候显示的默认图片。

第三步,完毕,在添加文章的时候添加特色图即可显示了。

方法二:使用自定义字段

自己在主题中集成自定义字段,在发布文章时设置自定义字段,参考文章:《为WordPress添加自定义域可视化面板》

方法三:使用WP Thumbnails插件

WP Thumbnails插件可以自动提取文章中的第一张图片,也可以手工在自定义字段中输入图片地址。将

<?php
if ( function_exists('wp_thumbnails_for_homepage') ) {
wp_thumbnails_for_homepage();
}
?>

函数放置到需要的位置即可显示图片。

相关知识