phpcms首页图文模块修改优化

你是不是用phpcms做网站，首页默认的图文模块越看越闹心？

想多放几条产品图，找不到改数量的地方。

图片大小乱七八糟，有的大有的小，把整个首页布局都撑歪了。

改了半天，清完刷新啥变化都没有，白折腾一下午。

很多人干脆直接花钱找开发改，其实这些改动根本不用求人。

你自己10分钟就能搞定，今天这篇全是可落地的步骤。

从改内容到调样式再做优化，一步一步照着来就行。

1. 先调基础内容：改数量和排序

1.1 改首页图文的显示条数

很多新手刚用的时候，默认只显示5条图文。

想多放几条产品或者资讯，直接去后台改就行。

具体步骤超简单：

• 登录网站后台，找到模块-首页模块管理
• 找到你正在用的那个图文模块，点“修改”
• 找到页面里的“调用数量”输入框，改成你要的数字
• 保存之后，去生成-更新首页缓存

避坑提醒：90%的人改完不更缓存，白忙活一场。

我刚学phpcms的时候，就踩过这个坑，改完愣了半小时。

1.2 改图文的排序规则

默认图文是按发布时间倒序排的，很多时候不满足需求。

比如你做旅游站，想把热门线路放最前面，怎么办？

还是在刚才的修改模块页面，找到“排序设置”。

把默认的排序参数改成listorder desc,inputtime desc就行。

改完之后，你去后台给文章改排序值，数值越小排越靠前。

想推哪篇就改哪篇的排序，不用挪来挪去改发布时间。

2. 再改外观样式：解决歪歪扭扭的问题

2.1 统一所有图文的图片尺寸

默认图文调用原图，用户上传的图片大小不一。

有的图几百K，有的几M，排版直接乱套。

解决方法很简单，用phpcms自带的裁图功能就行。

原来调用图片的代码一般是：

``` ```

你把它改成：

``` ```

这里的280和180，你换成你需要的宽高就行。

避坑提醒：宽高比例一定要和布局格子一致，不然会变形。

2.2 固定文字长度，不撑乱布局

图文标题太长，会自动换行超出盒子，把下一行挤歪。

只要加几行CSS代码，就能解决这个问题。

打开你网站的样式文件，找到图文模块的类，加上：

``` .index-graph .title { height: 40px; line-height: 20px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; } ```

这样超过两行的标题，会自动变成省略号，不会乱布局。

做博客站、企业站都能用，看起来非常清爽。

3. 最后做优化：打开更快收录更好

3.1 给图片加懒加载，提升打开速度

如果你的图文模块一次显示10张图，全部一次性加载。

会拖慢整个首页的打开速度，用户不等就走了。

加懒加载很简单，只要改一点img标签代码。

把原来的src改成data-src，再加个lazy类就行：

``` ```

如果你网站用了jquery，直接引入个懒加载js就行。

滚动到图文区域才加载图片，打开速度快一倍。

3.2 加SEO细节，让文章更容易收录

很多人做模板的时候，图文标题直接用p标签。

其实改个标签，就能帮搜索引擎识别内容权重。

你把每个图文的标题，从p标签改成h3标签就行。

避坑提醒：别全改成h1，一个页面只能有一个h1。

一般首页h1是你的网站名称，图文标题用h3就刚好。

其实phpcms的图文模块修改，都是些小细节。

没有啥复杂的代码，都是改参数加几行代码的事。

不用花大几百找开发，你自己对着步骤改就行。

现在就打开你的网站后台，从改显示条数开始动手。

改完清个缓存，看看效果，不对再微调两下就好。

调完你会发现，首页一下子清爽整齐多了。