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

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   ;

 

这篇文章如果帮到了你 打赏
分享到: 更多 (0)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
  • nofollow、noopener和noreferrer标签的区别?
    什么是 noreferrer 标签? 简而言之,noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站,您的分析将不会显示谁提到该链接。相反,它会错误地显示为您的统计流量报告中的直接流量。 这个 nor...
  • wordpress给你的网页添加一个加载动画
    网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
  • 代码实现网站外链自动转换为内链
    实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • PHP输入密码才能访问这个页面的代码
    给任意php页面增加一个密码保护,需要输入正确密码才能访问 <html> <head> <title>title</title </head> <body> 输入密码才能访问...
  • 纯代码实现WordPress文章页展开收缩功能
    网上关于实现文章内容“展开/收缩”效果的方法有很多,但是有很多代码似乎已经不可用,而另一些虽然可用但是前端显示效果不怎么美观,于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
  • 为亮点功能添加快捷按钮
    其实该功能主要是通过 CSS 样式的调整来实现的,实现方式虽然简单但是前端显示效果确实不错,官方给出的调用方式也极其简单,通过下面两行代码调用: <ol class="liangdian"> <li><stro...
  • WordPress 后台文章编辑器添加下拉式短代码选择
    // 后台编辑器添加下拉式按钮 function wzt_select(){ echo ' <select id="short_code_select"> <option value="请选择一个短代码!!!">插入...
  • 怀孕能吃百香果吗?吃它的好处居然这么多
    百香果年轻人们可能比较熟悉,现在非常流行用百香果泡水喝,百香果是一种热带水果,对于多数北方的朋友来说是比较陌生的,那么怀孕的时候可以吃百香果吗?味道这么酸,是不是比较刺激呢?想了解的话就请看下面的内容! 怀孕能吃百香果吗 百香果的味道确实比...
  • 怎样在wordpress使用Font Awesome字体图标
    Font Awesome是一款矢量的图标或可以称为字体图标,他的所有属性都可以通过CSS进行设定,包括:大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题,而且好提供了超过5000+的图标方案。 在wordpress使用...
  • 城通网盘 (CTfile.com) 下载教程
    PortableSoft 分享的很多软件或文件都使用了城通网盘。 城通网盘是一个赚钱网盘,每下载一次我上传的文件,我有些微的提成,但它的页面广告较多,速度可能慢些,但胜在比较稳定,提供的容量也大,小文件永久存储,更关键是不容易删除文件,而百...
  • WordPress 批量删除所有文章的特色图像
    说到 WordPress 的特色图像功能,相信大家都比较熟悉了,今天分享 批量删除所有文章的特色图像 的方法,或许有些朋友会用得上。将下面的代码添加到当前主题的 functions.php : /** * WordPress 批量删除所有文...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏