推荐设备MORE

自己做动画的手机app—小程序

自己做动画的手机app—小程序

行业新闻

运用WordPress短编码给文章内容加上卡牌式内部链

日期:2021-04-07
我要分享

利用WordPress短代码给文章添加卡片式内链

可是在具体应用中,飞鸟觉得这一作用不太好用。除开款式上单一外,大家查询源代码发觉它会以js的方式来輸出一个iframe架构,这对SEO十分不太好;次之从具体的载入实际效果上看,这一“卡牌”载入的十分不顺畅,感受很差!因此飞鸟立即在主题风格里禁止使用了 Post Embed 作用。

WordPress 禁用WordPress的Embed功能 移除加载wp-embed.min.js文件
禁止使用WordPress的Embed作用 清除载入wp-embed.min.js文档 WordPress在升級至4.4宣布版后,提升了Embed作用,针对绝大部分网站来说,都用不上这一Embed作用,今日就教大伙儿怎样禁止使用WordPress的Embed作用 清除载入wp-embed.mi... 時间:2017/8/5 人气值:28558 评价:3 阅读文章全篇 WordPress 禁用WordPress的Embed功能 移除加载wp-embed.min.js文件
禁止使用WordPress的Embed作用 清除载入wp-embed.min.js文档 WordPress在升級至4.4宣布版后,提升了Embed作用,针对绝大部分网站来说,都用不上这一Embed作用,今日就教大伙儿怎样禁止使用WordPress的Embed作用 清除载入wp-embed.mi... 時间:2017/8/5 人气值:28558 评价:3 阅读文章全篇
$inset_posts = get_posts(array('post__in'= $postids)); $category = get_the_category($ids); foreach ($inset_posts as $key = $post) { setup_postdata( $post ); $content .= ' span a target="_blank" href="'.get_category_link($category[0]- term_id ).'" span '. $category[0]- cat_name .' /span /a span a target="_blank" href="' . get_permalink() . '" img alt="'. get_the_title() . '" src="'. post_thumbnail_src() .'" /a /span span a target="_blank" href="' . get_permalink() . '" span '. get_the_title() . ' /span span '.wp_trim_words( get_the_excerpt(), 100, '...' ).' /span span span i 時间: /i '. get_the_time('Y/n/j') .' /span span i 人气值: /i '. post_views(false, '', '', false) .' /span span i 评价: /i '. ments_number() .' /span a target="_blank" href="' . get_permalink() . '" span 阅读文章全篇 /span /a /span /span /span link rel="stylesheet" href="'. get_template_directory_uri() .'/css/embed-card.css"/ wp_reset_postdata(); return $content; add_shortcode('yx_embed_post', 'yx_embed_posts');

留意:所述编码中飞鸟有启用自定的涵数(如阅读文章量,缩列图等),假如阅读者应用得话必须依据具体状况开展改动,因为大伙儿的主题风格不统一,飞鸟沒有方法逐一叙述。

并得出雅兮网再用的CSS编码,提议另存为embed-card.css并放进主题风格网站根目录的css文档夹中(与所述PHP编码西路径相匹配)

.embed-card,span.embed-card {
 display: block;
 position: relative;
 width: 620px;
 padding: 9px;
 margin: 30px auto;
 border: 1px dashed #d4d4d4;
 overflow: hidden;
 max-width: 90%;
.embed-card:hover,span.embed-card:hover {
 box-shadow: 1px 1px 8px #eee;
.embed-card a,span.embed-card a {
 padding-right: 0;
 text-decoration: none;
 color: #313131;
.embed-card span,span.embed-card span {
 display: block;
 padding-right: 0;
.embed-card-category {
 display: inline-block;
 height: 20px;
 line-height: 20px;
 padding: 0 5px;
 font-size: 12px;
.embed-card-category {
 background-color: #6a99d8;
 background-color: rgba(43,110,200,0.8);
 color: #fff;
.embed-card-category:hover {
 background-color: #d5e2f4;
 background-color: rgba(43,110,200,1);
.embed-card .embed-card-category {
 position: absolute;
 top: 9px;
 left: 0;
 padding-right: 5px;
.embed-card-img {
 float: left;
 margin-right: 14px;
.embed-card-img img {
 width: 180px;
 height: 150px;
. {
 padding-right: 4px;
 overflow: hidden;
. .card-name {
 font-size: 16px;
 height: 44px;
 line-height: 22px;
 margin-bottom: 10px;
 margin-top: 7px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: normal;
 font-weight: bold;
. .card-tags {
 height: 20px;
 overflow: hidden;
. .card-tags span {
 display: inline-block;
 padding: 0 7px;
 margin-right: 8px;
 height: 16px;
 border: 1px solid #eee;
 line-height: 16px;
 color: #999;
 font-size: 12px;
. .card-tags span.tag-noborder {
 border: 0;
. .card-abstract {
 height: 36px;
 line-height: 18px;
 margin: 5px 0;
 font-size: 12px;
 color: #666;
 overflow: hidden;
 margin-bottom: 20px;
. .card-controls {
 overflow: hidden;
 line-height: 28px;
. .card-controls .group-data {
 float: left;
 margin-right: 10px;
 color: #999;
 font-size: 12px;
. .card-controls .group-data i {
 margin-right: 5px;
 font-style: normal!important;
. .card-btn-deep {
 float: right;
 width: 68px;
 height: 28px;
 margin-left: 10px;
 line-height: 28px;
 text-align: center;
 font-size: 12px;
 background-color: #ff5e5c;
 color: #fff;
. .card-btn-deep:hover {
 opacity: .9;
@media only screen and (max-width:700px) {
 span.embed-card {
 width: 95%;
 padding-left: 0;
 padding-right: 0;
 .embed-card .embed-card-img {
 width: 24.27184%;
 margin-left: 9px;
 .embed-card .embed-card-img img {
 width: 100%;
 height: auto;
 .embed-card . {
 overflow: visible;
 padding: 0 9px;
 .embed-card . .card-name {
 margin-top: 1%;
 margin-bottom: 1.5%;
}
[yx_embed_post ids=123,245]
do_shortcode('[yx_embed_post ids=123,245]')

@才才: 刚刚测了 沒有难题,能够显示信息七个的,你好几个连到应用的情况下 还记得换行 别紧挨着,假如还不好,将会跟主题风格款式相关吧


@记挂: 留意原文中编码有自定涵数,如阅读文章量,缩列图等,假如你的主题风格沒有界定这种涵数,毫无疑问是会错误的。


@佛系手机软件: 你常说的挤压成型 就是指 照片占比形变了吧?那就是一切正常的,由于这一作用里设定了特定的照片宽高,假如照片原占比与此不一样,必定会出現挤压成型。能够用php剪裁照片来处理


@飞鸟: 自身处理了,根据改动主要参数能够处理这一难题:$category = get_the_category($ids);


@yds: 是不是你早已升級到全新WordPress版本号了?假如是那将会便是新版本本对短编码的不兼容了吧,由于我这里还没有有升級系统软件,因此暂未法帮你解释。


@飞鸟: 试了,我是全新版的,能够适用了,可是不知道是主题风格缘故還是新版本难题,a href="' . get_permalink() . '" rel="nofollow">

@yds: 这一难题原文中提及了“留意:所述编码中飞鸟有启用自定的涵数(如阅读文章量,缩列图等),假如阅读者应用得话必须依据具体状况开展改动,因为大伙儿的主题风格不统一,飞鸟沒有方法逐一叙述。”由于前文编码中读取照片缩列图就是我主题风格自写的涵数,因此别的主题风格将会不兼容,依据自身主题风格开展改动。


@Kratos: post_thumbnail_src() 这一自定涵数,你的主题风格沒有配备。
“留意:所述编码中飞鸟有启用自定的涵数(如阅读文章量,缩列图等),假如阅读者应用得话必须依据具体状况开展改动,因为大伙儿的主题风格不统一,飞鸟沒有方法逐一叙述。”


高新科技迷、外设控、WordPress喜好者,高新科技更改日常生活,用力中的键鼠将IT的快乐共享给大量的人!