巧用图文模块为文章添加卡片式文章内链功能

  • A+
所属分类:建博笔记

一、前言

以往,我们在后台编辑文章时需要链接到文章中的其他文章时,通常的做法是使用文章编辑器中的【插入或编辑链接】功能,比如这样:《分享几个增强文本小工具实例》。这的确是个方法,也是我们大多数博主常用的方法。但这种方法毕竟有些单调,有时因为种种原因和需求,希望在链接其他文章的同时,可以显示被链接文章的标题、缩略图、摘要等信息,以丰富文章的展示效果。

 

二、引出问题

本来,我想单独为这样的效果制定一个短代码并集成到主题的短代码中去,也上网找过相关的教程。有是有,只是教程中涉及到缩略图部分的代码不是非常适合我的主题 ? 大多调用的特色图像,然而我没启用特色图像,无奈自己也对这些代码一知半解,于是这个想法就给耽搁下来了。

直到前两天,我想发布一篇文章《新海诚作品合集》,按照以往《宫崎骏作品合集》、《NHK 晨间小说连续剧合集》等合集类文章内容的排版惯例,应该是这样的:

巧用图文模块为文章添加卡片式文章内链功能

也就是说,合集类文章内容通常有以下两个特征:

  • 文章内容主要由多个其他文章片段组成
  • 每个文章片段都会涉及到相同的元素,比如:标题、简介、图片、下载链接等

只有这样,才能统一合集类文章内容排版。而在这些特征中,影响排版的最主要元素是图片的尺寸和布局。遗憾的是,我在寻找新海诚的那些作品时,适用于宽图的素材并不多。

看来,想按以往宽图布局的形式是行不通了,于是我想到了使用缩略图来代替宽图。毕竟,每部作品一般都会有他们各自的海报,通常情况下海报也会比较精美,尺寸也相对统一。

但,很快我就发现了新问题,就是长宽比不美观,海报一般都是长>宽,且宽度方向上不能铺满或不能和文章正文宽度协调起来。这样的话,图片左右两侧就会有一大块空白,就像下面这样:

巧用图文模块为文章添加卡片式文章内链功能

想像一下,合集中要添加十多个其他文章片段,而每个文章片段又那么长(基本占满一个可视界面的高度了),这样一来整篇文章就变得更长了,需要多次滚动滚轮才能把文章看完,体验效果也不是很好。因此这个方案就弃用了。

 

三、图文模块分析

后来,我想到了【图文模块】这个功能。这个功能设计之初是作为向正文中添加商品而存在的,就像下面这样:

巧用图文模块为文章添加卡片式文章内链功能

上图中的图片、标题、简介、价格和按钮文字都是可以通过后台设置的。这个效果基本已经可以满足合集类文章内容排版的元素(有标题、图片、简介和链接)和要求(每个文章片段格式可以统一)了,但默认的效果还是存在一些问题:

  • 模块中设置链接地址后,前台会对图片、标题和简介中前面一部分文字自动加上链接,而按钮却没有加上链接(点击按钮是没有反应的,因为按钮不存在链接
  • 按钮和按钮文字样式较丑,如果不设置按钮上的文字的话,前台还是会显示按钮(只是不显示文字罢了,而不设置原价和现价的话,前台是不会显示的
  • 如果简介中存在文章设置的标签(也就是关键字),这些标签的文字样式显示的是灰色的(因为我启用了【文章关键字自动添加链接】功能),和文章正常的标签颜色不一致

于是,我对这个模块进行了改进,最终基本可以满足自己预期的效果,如下(试着将鼠标移动到模块中来):

巧用图文模块为文章添加卡片式文章内链功能
昼颜:工作日下午 3 点的恋人们 昼顔~平日午後 3 時の恋人たち~

《昼颜》(昼颜~平日午後 3 时の恋人たち~)是由西谷弘执导,上户彩、吉濑美智子等主演的日本电视剧,于 2014 年 7 月 17 日起每周四晚上 10 点在富士电视台播出。

该剧主要讲述了平时送丈夫去公司后认真做完家务,却在平日白天和其他男性坠入爱河的主妇的故事。

 

四、图文模块改进

主要改进了以下几个方面:

  • 模块中设置链接地址后,默认对图片和按钮添加链接(新标签页或窗口打开
  • 当不设置按钮文字时,不显示按钮。设置按钮文字时,按钮默认隐藏
  • 鼠标移动到整个模块中的任意位置时,模块显示背景色,同时显示按钮

具体改进如下:

首先:打开【inc/shortcode.php】文件,找到代码段

function wplist_shortcode($atts, $content = '') {
    //这个函数的整个代码段
}

将其替换为

function wplist_shortcode($atts, $content = '') {
	$atts['content'] = $content;
	$out = '<div class="wplist-item">';
	$out.= '<div class="wplist-item-img"><a href="' . $atts['link'] . '" target="_blank" isconvert="1" rel="nofollow" ><img itemprop="image" src="' . $atts['img'] . '" alt="' . $atts['title'] . '" /></a></div>';
	$out.= '<div class="wplist-title">' . $atts['title'] . '</div>';
	$out.= '<p class="wplist-des">' . $atts['content'] . '</p>';
	if (!empty($atts['price'])) {
		$out.= '<div class="wplist-oth"><div class="wplist-res wplist-price">' . $atts['price'] . '</div>';
		if (!empty($atts['oprice'])) {
			$out.= '<div class="wplist-res wplist-old-price"><del>' . $atts['oprice'] . '</del></div>';
		}
		$out.= '</div>';
	}
	if (!empty($atts['btn'])) {
		$out.= '<div class="wplist-btn"><a href="' . $atts['link'] . '" target="_blank" isconvert="1" rel="nofollow" >' . $atts['btn'] . '</a></div><div class="clear"></div>';
	}
	$out.= '<div class="clear"></div></div>';
	return $out;
}

这部分主要用来修改被链接的对象。

然后:打开【js/script.js】文件,在适当位置添加

    $(".wplist-item").mouseover(function() {
        $(this).children(".wplist-btn").show()
    });
    $(".wplist-item").mouseout(function() {
        $(this).children(".wplist-btn").hide()
    });

这段代码用来控制按钮的隐藏与显示。

最后:打开【style.css】文件,找到代码段展开

/** 文章商品 **/
.wplist-item {
    margin: 0 0 -1px 0;
    padding: 10px 10px 15px 10px;
    transition-duration: .5s;
    border: 1px dashed #ddd;
}

.wplist-item a {
    color: #999!important;
}

.wplist-item a:hover,.wplist-item a:visited {
    color: #999;
}

.wplist-title {
    font-size: 16px;
    font-size: 1.6rem;
    color: #666;
    font-weight: bold;
    line-height: 190%;
}

.wplist-item-img {
    position: relative;
    float: left;
    max-width: 200px;
    height: auto;
    clear: both;
    margin: 8px 20px 0 0;
    overflow: hidden;
    transition-duration: .5s;
}

@media screen and (max-width:480px) {
    .wplist-item-img {
        float: inherit;
        max-width: 100%;
        margin: 0 auto 10px;
    }
}

.wplist-item img {
    float: left;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.wplist-res {
    padding: 2px 10px;
    border: 1px solid #ddd;
}

.wplist-price {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #f40;
    font-weight: bold;
    margin: 0 10px 0 0;
}

.wplist-old-price {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #999;
}

.wplist-btn {
    background: #f40;
    float: right;
    color: #fff;
    line-height: 30px;
    margin: 0 5px 5px 0;
    padding: 0 10px;
    border-radius: 2px;
    border: 1px solid #f40;
}

.wplist-btn:hover {
    background: #ff662f;
    color: #fff;
}

将其替换为展开

/** 文章商品 **/
.wplist-item {
    margin: 0 0 -1px 0;
    padding: 10px 10px 15px 10px;
    transition-duration: .5s;
    border: 1px dashed #ddd;
}

/*.wplist-item a {
    color: #999!important;
}*/

.wplist-item:hover {
    background-color: #f8f8f8;

}
.wplist-item a:hover {
    color: #999;
}

.wplist-title {
    font-size: 16px;
    font-size: 1.6rem;
    color: #000;
    font-weight: bold;
    line-height: 190%;
}

.wplist-item-img {
    position: relative;
    float: left;
    max-width: 200px;
    height: auto;
    clear: both;
    margin: 8px 20px 0 0;
    overflow: hidden;
    transition-duration: .5s;
}

@media screen and (max-width:480px) {
    .wplist-item-img {
        float: inherit;
        max-width: 100%;
        margin: 0 auto 10px;
    }
}

.wplist-item img {
    float: left;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.wplist-res {
    padding: 2px 10px;
    border: 1px solid #ddd;
}

.wplist-price {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #f40;
    font-weight: bold;
    margin: 0 10px 0 0;
}

.wplist-old-price {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #999;
}

.wplist-btn {
    background: #3690cf;
    float: right;
    color: #fff;
    line-height: 30px;
    margin: 0 5px 5px 0;
    padding: 0 10px;
    border-radius: 2px;
    border: 1px solid #3690cf;
    display: none;
}

.wplist-btn:hover {
    background: #f00;
    color: #fff;
    border: 1px solid #f00;
}

.wplist-btn a, .wplist-btn a:hover {
    color: #fff;
}

这部分主要用来修改按钮、按钮文字和关键字链接样式。

完成以上操作后,通过对图文模块的合理设置,就可以把图文模块当卡片式文章内链功能使用了。

 

五、一点小遗憾

本来想在改进后的基础上再增加如下几个功能的:

  • 增加隐藏模块边框选项:启用时模块边框将被隐藏
  • 增加是否在新标签页/窗口打开链接(不过,貌似没必要
  • 自定义图文排版方式:左图右文、右图左文、多图并排无文字
  • 自定义整个模块的宽度比例:满足不同文章下的布局需求

无奈水平有限,一直没有如愿以偿,只能以后再看了。

 

六、使用技巧与说明

  • 当图文模块作为卡片式文章内链功能使用时,不要设置原价与现价
  • 通过对模块中简介的长度控制,可以实现类似 word 中的文字环绕效果
  • 卡片式文章内链功能是基于图文模块实现的,因此需要你的主题已有该功能
  • 关于 wordpress 如何添加图文模块功能,请参考文章《给主题编辑器添加图文模块
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: