实现wordpress引用文章时显示卡片式内链

我们在写wordpres文章时经常会用到引用以前发表过的相关网站,我们通常是编辑栏上的“插入或编辑链接”按钮实现插入。但是这种方式插入的实在是太丑陋了。请看下图↓↓↓,是不是很丑?

对于爱脸面的我怎么能够满足呢,所以我就在度娘上找到了一个非常棒的卡片的引用文章的方法,看下图↓↓↓

咋样,是不是感觉美美哒?

好了,简单、粗暴上代码。

 

方法

在主题的函数模板文件founction.php中插入以下代码:

请注意,有些童鞋照搬代码后出现致命错误,是因为以上代码中有我是用的自定义函数,如第20行中的post_thumbnail_src(),第29行中的post_views。

 

可能会出现的问题的解决方案

如果自己会改那就自己修好,很简单。如果自己不会改,可以按照我下面的方法就行解决。

问题一:第29行代码调整

1.如果你使用wp-PostViews插件实现的文章浏览量统计功能可以将29行post_views改为the_views即可。

2.如果不是使用wp-PostViews插件,而且还出错。那么就直接把这一行删除吧。

问题二:第20行代码调整

你可以自定义一个post_thumbnail_src()函数,请按照这一篇文章实现:
教程 wordpress文章实现自动添加随机特色图 wordpress文章实现自动添加随机特色图 现在很多站长都在使用wordpress为自己搭建博客,通过丰富的主题,每个人都可以快速的打造一个个人博客。 有些同学在写博客的时候嫌麻烦,不喜欢另外找图片设置特色图。而大部分wordpress主题的首... 时间:2020/3/5 人气:97 次浏览 评论:0 阅读全文

将该文章中的主代码(也就是最长的那一段代码,其他的代码用不到)放到本文代码的前面。

注意,请将其主代码的第24行改为:

这样的20行的报错就解决了。

 

样式美化

将以下CSS代码另存为embed-card.css并放入主题根目录的css文件夹中(与35行PHP代码中路径对应)

 

使用方法

在编辑文章时,只需要在文章中插入短代码(多篇文章id用,隔开)即可调用。

在其他非文章页面使用时用一下代码:

到此,本文的功能就实现了。

如果还有问题可以在下方留言。


后续完善

2020-03-13  后台编辑器编辑栏添加简码添加快捷按钮

将以下代码复制到founction.php中

添加后,后台写文章时,文本模式下编辑栏会新增一个“卡片文章引用”按钮,现在写文章时就不用再手动输入简码了。

参与评论

游客评论不支持回复他人评论内容,如需回复他人评论内容请

  • yueer

    有问题可以直接评论。

    1月前 (03-06)
    回复
    回复yueer
  • yueer

    目前发现一个小问题,如果在被引用的卡片里出现了与本文章设置的关键测tag相同的词语,将会使卡片的css失效。
    解决方法,手动删除本文中相对应的关键词即可。
    会解决的大佬可以尝试解决一下哦。

    1月前 (03-05)
    回复
    回复yueer