一淘邀请码:JAG42 手机安装一淘,输入一淘邀请码,领淘宝全场立减8元福利
一淘新用户输入一淘邀请码领取8元立减福利

1. 一淘是阿里巴巴旗下的返利平台,和淘宝天猫通用的,您可以放心参与

2. 不需要绑卡乱七八糟的绑定和认证,只需两步就可以领淘宝8块钱

3. 安装一淘登陆 输入一淘邀请码: 领取新人8元立减福利 查看图文教程

4. 一淘APP购物每笔都有额外的返利,而且还有一淘专享优惠券

5. 点击看详细教程

由 歪迪资源屋 推送

DUX主题文章页相关推荐双栏显示

本文简介 DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目……

DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是DUX主题,作为一个喜欢折腾的站长,对主题的修改优化自然是免不了的,这次我们就来改一下DUX主题默认的相关文章功能,并使其双栏显示。

DUX主题文章页相关推荐双栏显示-歪迪资源屋

上图是主题相关推荐的默认显示样式,采用单栏显示,右边空出好大一块,就我个人感觉不是太美观,而且右侧空间有点浪费,下面就将其修改一下,使其双栏显示。这次对主题的修改需要改变两个文件,分别是:main.css与mo_posts_related.php在修改主题文件前我们最好先备份一下需要修改的文件,如果修改失败,可以直接使用源文件替换掉修改文件来进行恢复。

main.css文件修改

main.css文件是我们这次对DUX主题修改的重中之重,我们就是通过修改它内部的样式文件来实现相关推荐文章双栏显示的,对main.css文件的修改主要包括以下几步:

首先,打开文件后CTRL F搜索.relates ul,在函数后面添加overflow: hidden;语句,修改完成后的代码显示应该是这样的:

.relates ul{
	list-style: disc;
	margin-left: 18px;
	color: #bbb;
	margin-bottom: 30px;
	overflow: hidden;
}

然后,滑动鼠标哦至文件最后,插入如下代码:

/*相关文章推荐使用双栏*/
.relates ul li {
    width: 50%;
    float: left;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

好了,到这一步相关文章双栏显示基本上就结束了,你可以将main.css文件上传到网站原位置,查看效果如下:

DUX主题文章页相关推荐双栏显示-歪迪资源屋

mo_posts_related.php文件修改

修改完成后,相关文章双栏显示了,基本的功能也已经达到了,但是如果只是这么单纯的显示似乎不太美观,接下来我们就用Font Awesome字体图标美化一下。找到主题的mo_posts_related.php文件,在改文件下有两个’.get_the_title().get_the_subtitle().\\'语句,分别在文件的第27行与42行,找到并在前面添加如下代码:

&nbsp&nbsp&nbsp&nbsp&nbsp

修改成功后的代码应该显示如下:

echo \'
\';

注意,这地方的图标可以自己定义,具体使用方法请参考我之前的文章:Font Awesome——为站点添加个性化图标 配置完成后上传文件即可查看显示效果如下:

DUX主题文章页相关推荐双栏显示-歪迪资源屋

2017年12月30日更新:DUX4.0相关文章新增图文模式,新的FontAwesome图标添加位置改为第30行与第48行,添加完成后完整代码如下:

 if( $thumb_s ) echo \'\'._get_post_thumbnail().\'\';
            echo \'&nbsp&nbsp&nbsp&nbsp&nbsp\'.get_the_title().get_the_subtitle().\'\';
            $exclude_id .= \',\' . $post->ID; $i   ;

 

这篇文章如果帮到了你

如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
原创宝塔面板开启防盗链的方法详细教程2020-12-27
为了节省建站成本,大多数站长都会选择一些小服务器,在另加CDN、云存储之类的来减轻服务器的压力,但是这类功能大多收费。 如果自己网站的图片都让别人复制图片链接地址,那么自己CDN流量就跑得贼快,花了钱得不到好处。 所以今天无言讲讲宝塔面板怎...
原创wordpress调用当前用户头像的方法2020-12-05
当前用户就是当前登陆者,当你用户登陆怎么才能自动显示用户设定的头像呢,一句代码即可实现,代码如下 <?php global $current_user;get_currentuserinfo();echo get_avatar( $c...
原创马保国邀视频通话网站源码2020-11-27
上传源码到服务器之后,打开就是马宝国的微信电话,然后就是闪电五连鞭 源码下载地址 http://pan.53431.com/file/339411-473352640
原创Elementor Pro-v3.0.6破解版下载和安装教程2020-11-21
Elementor是wordpress上一款优秀的页面构建器插件,他可以在不写任何代码的情况下,使用可视化的拖曳来做出一款你喜欢的网站页面。Elementor Pro则是他的高级版本,解锁了所有Elementor的收费功能。 Element...
原创Typecho博客主题–joe_theme免费下载2020-11-21
主题开源免费,并且代码里写上了注释,如果需要学习可以直接看源码 基于 BootStrap-gird框,一站响应式,支持大屏,IPad, 手机 (响应式还在开发中) 使用 Pjax 插件,传统页面跳转,不会刷新网站,无感切换页面 使用 smo...
原创修改wordpress博客单篇文章的ID的方法2020-09-04
本文介绍修改wordpress博客单篇文章的ID的方法,在很多时候,某些情况下,我们需要将某篇文章换一个ID来达到我们特殊的需求,比如小胖很早前就将一篇文章删除了,现在发现该文收录良好排名还不错,但点开提示404不存在,真是太浪费这个资源了...
转载WordPress数据库备份管理插件:WP-DBManager 汉化2020-08-16
通过WP-DBManager插件可以管理您的WordPress数据库。 允许您优化数据库、修复数据库、备份数据库、还原数据库、删除备份数据库、删除/清空表以及运行选定的查询。 并可自动备份、优化和修复数据库。 其它有相似功能的插件只能备份数...
原创WordPress付费模板:RiPro7.0无授权破解修复版免费分享2020-07-26
源码介绍 V7.1.0 2020-06-22 最新 重新优化后台设置选项,新增首页幻灯片可以自定义高度选项,主题设置-首页设置----幻灯片模块,自定义高度 默认400 新增友情链接模式选择,可以只在首页显示友情链接,也可以在全站都展示友情...
原创WordPress付费主题 : JustNews v5.7.3免授权破解版免费下载2020-07-26
JustNews主题专为博客、自媒体、资讯类的网站设计开发,自适应兼容手机、平板设备,支持前端用户中心,可以前端发布/投稿文章,同时主题支持专题功能,可以添加文章专题。 主题介绍: JustNews是一款专为博客、自媒体、资讯类的网站设计开...
原创WordPress大前端主题DUX6.4版本主题下载2020-05-30
DUX主题是一款经典的wordpress主题,现在更新又来了一波,更新到了DUX6.4版本,本次更新功能点较多,也着实耗费了一番心力,且个个备受很多用户的期待。 DUX6.4值得一提的功能:百度收录 百度收录功能基本是国内站长必备,且前几天...
原创日主题RiPro v6.6去授权破解版免费分享2020-05-28
全新发布,更加专业,资源,素材,源码站运营首选,支付宝原生/当面付、微信扫码/H5支付、码支付、虎皮椒、PAYJS。QQ/微信/微博一键登录,付费下载、付费查看、支持卡密、会员、推广佣金、作者佣金、前端发布资源等。
原创wordpress给主题调用今日(最近24小时)最新发布文章数量2020-03-08
其实标题中写着调用今日最新发布文章数量是不准确的,因为1天为24小时,调用只能按时刻调用24小时,它的计数方式是以当前时间为准,所以是调用当前时间向前推24才对,不必计较了,因为时间依然在往后推移呀。。。 获取最近24小时发布的文章数 /*...

评论 抢沙发


觉得文章有用就打赏一下文章作者

微信扫一扫打赏