WordPress怎么添加文章卡片样式?嵌入文章卡片形式短代码

暂无留言

WordPress网站内链优化怎么做？

创建带缩略图文章简码&编辑器按钮

网站内部链接优化，在SEO环节中一直非常重要，一个好的链接结构对搜索引擎优化非常有利。

倘若在当前文章和其他文章有关联时，主动在页面内添加链接：

如果更新了一些旧文章，则还可以通过在新文章添加内部链接，来指示搜索引擎蜘蛛重新抓取和收录旧文章的内容更新。

当你阅读陈沩亮博客文章时，你可能经常发现，像这样嵌入文章卡片形式，带有缩略图文章，其中包含文章内容的摘要，例如：

如何申请香港手机号码？香港虚拟手机号接收短信验证码

易博通香港手机号码优惠码：DM6888 哪里能购买到香港手机号码？香港电话卡虚拟运营商推荐 易博通是博元信息集团旗下的虚拟手机号码服务。 博元信息在中国广州和香港，均设置了分支机构，是……

一、添加嵌入文章卡片样式短代码

第 1 步：添加PHP代码

将以下代码添加到你的WP主题的 functions.php 文件中：

/**
* 加入内部文章缩略图 By 陈沩亮
* 文章地址：https://www.chenweiliang.com/cwl-638.html
**/
 function cwl_thumbnail_src() {
 global $post;
 if ( get_post_meta($post->ID, 'thumbnail', true) ) { //如有缩略图，就显示缩略图
 $image = get_post_meta($post->ID, 'thumbnail', true);
 return $image;
 } else {
 if ( has_post_thumbnail() ) { //如有缩略图，就显示缩略图
 $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
 return $img_src[0];
 } else {
 $content = $post->post_content;
 preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
 $n = count($strResult[1]);
 if($n > 0){
 return $strResult[1][0]; //若无缩略图，就调用文中第一张图片作缩略图
 }else {
 $random = mt_rand(1, 20);
 return get_template_directory_uri().'/img/random/'. $random .'.jpg'; //文章中若无图片，就随机读取在 random 文件夹内的图片作缩略图
 }
 }
 }
 }

//加入内部文章链接
 function cwl_insert_posts( $atts, $content = null ){
 extract( shortcode_atts( array(
 'ids' => ''
 ),
 $atts ) );
 global $post;
 $content = '';
 $postids = explode(',', $ids);
 $inset_posts = get_posts(array('post__in'=>$postids));
 foreach ($inset_posts as $key => $post) {
 setup_postdata( $post );
 $content .= '<div class="jiawen"><div class="fl"><a target="_blank" href="'%20.%20get_permalink()%20.%20'" class="fl"><i class="fa fa-link fa-fw"></i>';
 $content .= get_the_title();
 $content .= '</a><p class="note"><a target="_blank" rel="nofollow" href="'%20.%20get_permalink()%20.%20'">';
//$content .= get_the_excerpt(); 
 $content .= mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 180, …… );
 $content .= '</a></p></div><div class="fr"><a target="_blank" rel="nofollow" href="'%20.%20get_permalink()%20.%20'"><img src=';
 $content .= cwl_thumbnail_src();
 $content .= ' class="jiawen-thumb" alt="' . get_the_title() . '" title="' . get_the_title() . '"></a></div></div>';
 }
 wp_reset_postdata();
 return $content;
 }
 add_shortcode('jiawen', 'cwl_insert_posts');

若没有出现超链接图标，需将以上CSS的这个 fa fa-link fa-fw，改为 sui sui-link sui-fw

图片以 1~20 命名：

第 2 步：添加CSS代码

将以下代码添加到你的WP主题的 style.css 文件中：

/*加入内部文章CSS*/
.fl{float:left;}
.fr{float:right;}
.jiawen{margin-bottom:25px;padding:10px;width:100%;height:100%;border:1px solid #e8e8e8;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);cursor:pointer;-webkit-transition:box-shadow 218ms;-moz-transition:box-shadow 218ms;-o-transition:box-shadow 218ms;transition:box-shadow 218ms;overflow:hidden;}
.jiawen:hover{box-shadow:0 1px 8px 1px rgba(0,0,0,.1);}
.jiawen .fl{width:72%;}
.jiawen .fr{padding:10px 5px;width:24%;}
.jiawen .fl a{display:block;margin-right:15px;padding:8px 0;width:100%;height: 100%;color:#8463a9!important;text-decoration:none;font-size:16px;border:none;overflow: hidden;}
.jiawen .fl .note{margin:0 0 5px;padding-left:10px;height:150px;color:#888;font-size:14px;}
.jiawen .jiawen-thumb{width:170px;height:120px;margin-top: 10px;}
@media only screen and (max-width: 700px){.jiawen .jiawen-thumb {width: auto;height: auto;}}

二、调用嵌入文章卡片形式短代码（简码）

可以直接在文章编辑器 “可视化” 或 “文本” 界面中，输入简码 【jiawen ids =postID1,postID2 ...】 的格式调用。

例如，如果我想显示3个内部链接文章，我直接输入简码：

效果如下 ▼

咪蒙公众号是怎么成功 为何这么火?原因有背后推手

咪蒙公众号是怎么成功的？ 为何这么火？原因有背后推手！ 由于咪蒙是从 2012年9月15日 开始写微信公众号，只用2个月，就收获了40万粉丝，瞬间超过了很多人的成绩，让好多人都很好奇，她究竟……

唐僧师徒4人讨论微信好友人脉，孙悟空讲话让我茅塞顿开

唐僧师徒4人讨论微信好友人脉 孙悟空讲话让我茅塞顿开引言西游记我们都看过，你有看过唐三藏、孙悟空、猪八戒、沙悟净，他们在讨论微信好友人脉吗？呵呵，没想到孙悟空讲话让我茅塞顿开……

新媒体时代用户阅读心理特点分析：这7个你都掌握，就赚了

新媒体时代用户阅读心理特点分析：这7个你都掌握，就赚了引言 我们做微信公众号，想要成功就要研究人性，分析用户阅读心理，了解用户的阅读行为，只有这样做了，才能更好的提升我们做微……

若你不是在WordPress编辑器中使用简码，想在别处调用，可以使用如下代码调用它：

do_shortcode（'[neilian ids ids = postID1，postID2]'）

三、添加编辑器按钮

如果需要每次手动输入简码，感觉太麻烦，怎么办呢？

WordPress的强大之处，就是能够让我们实现复杂事简单化 ^_^

1）添加编辑器文本按钮

WordPress默认内置TinyMCE编辑器，我们可以TinyMCE编辑器文本界面，添加快捷方式按钮。

第 3 步：添加快捷按钮代码

//加入内部文章，TinyMCE 编辑器文本按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
 QTags.addButton( 'jw', '加入内部文章', '', '');
 </script>
<?php
}

注意事项

如果你已经添加编辑器自定义快捷按钮的其它代码，就只需在<script type="text/javascript"> 之下，添加如下代码 ▼

QTags.addButton( 'jw', '加入内部文章', '', '');

不然会出错。

2）添加编辑器可视化按钮

我们在编辑WordPress文章时，通常默认界面是可视化（Visual）。

所以，最好也在可视化编辑器中添加一个按钮。

第 4 步：安装启用插件

安装完成后，在左侧菜单栏下方，将出现一个带有齿轮图标的Visual Editor Custom Buttons ▼

第 5 步：点击 Add New

你只需跟着下图设置即可 ▼

第 6 步： Button Content 选项

第 7 步： Before 设置

第 8 步：Display In Editor 设置

第 9 步：Button Icon 选项

第 10 步：测试

  • 最后，当然是由你来亲自测试效果了 ^_^
  • 如果以上步骤都没错，你将会在编辑器可视化界面中，看到如下图的按钮 ▼ 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注