WordPress怎麼添加文章卡片樣式?嵌入文章卡片形式短代碼

WordPress網站內鏈優化怎麼做？

創建帶縮略圖文章簡碼&編輯器按鈕

網站內部鏈接優化，在SEO環節中一直非常重要，一個好的鏈接結構對搜索引擎優化非常有利。

倘若在當前文章和其他文章有關聯時，主動在頁面內添加鏈接：

• 會大大增加搜索引擎蜘蛛抓取的數量和深度，
• 有助增加收錄數量，
• 以及錨文本關鍵字的權重。

如果更新了一些舊文章，則還可以通過在新文章添加內部鏈接，來指示搜索引擎蜘蛛重新抓取和收錄舊文章的內容更新。

• 內部鏈接的常見形式是文本鏈接，其結構是錨文本。
• 但為了增強用戶體驗，我們可以使內頁的文章鏈接進一步優化。

當你閱讀陳溈亮博客文章時，你可能經常發現，像這樣嵌入文章卡片形式，帶有縮略圖文章，其中包含文章內容的摘要，例如：

如何申請香港手機號碼？香港虛擬手機號接收短信驗證碼

易博通香港手機號碼優惠碼：DM6888 哪裡買到香港手機號碼？香港電話卡虛擬業者推薦易博通是博元資訊集團旗下的虛擬手機號碼服務。 博元資訊在中國廣州和香港，均設置了分支機構，...

一、添加嵌入文章卡片樣式短代碼

第1步：添加PHP代碼

將以下代碼添加到你的WP主題的functions.php 文件中：

/**
* 加入内部文章缩略图 By 陈沩亮
* 文章地址：https://www.chenweiliang.com/cwl-638.html
**/
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="' . get_permalink() . '" class="fl"><i class="sui sui-link sui-fw"></i>';
$content .= get_the_title();
$content .= '</a><p class="note"><a target="_blank" rel="nofollow" href="' . get_permalink() . '">';
$content .= mb_strimwidth(strip_tags(apply_filters('post_content', $post->post_content)), 0, 180, '...');
$content .= '</a></p></div><div class="fr"><a target="_blank" rel="nofollow" href="' . get_permalink() . '"><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');

// 加入内部文章缩略图
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 文件夹内的图片作缩略图
}
}
}
}

若沒有出現超鏈接圖標，需將以上的CSS的這個 fa fa-link fa-fw，改為 sui sui-link sui-fw

• 請注意查看你的WP主題，是否有/img/random/ 文件夾？
• （如果沒有，請創建）
• 然後在 random 文件裡，添加20張jpg 圖片。

圖片以1~20 命名：

• 1.jpg
• 2.jpg
• ……（以此類推）
• 20.jpg

第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個內部鏈接文章，我直接輸入簡碼：

• 【jiawen ids=526,380,411】
• 如果輸入超過5個文章id，最大隻顯示5篇文章
• 本文為避免簡碼被轉義才用【】
• 實際使用簡碼時，請將【】改成[]

效果如下 ▼

咪蒙公眾號是怎麼成功為何這麼火?原因有背後推手

咪蒙公眾號是怎麼成功的？ 為何這麼​​火？原因有背後推手！ 由於咪蒙是從2012年9月15日開始寫微信公眾號，只用2個月，就收穫了40萬粉絲，瞬間超過了很多人的成績，讓好多人都很好奇，她究...

唐僧師徒4人討論微信好友人脈，孫悟空講話讓我茅塞頓開

唐僧師徒4人討論微信好友人脈孫悟空講話讓我茅塞頓開引言西遊記我們都看過，你有看過唐三藏、孫悟空、豬八戒、沙悟淨，他們在討論微信好友人脈嗎？呵呵，沒想到孫悟空講話讓我茅塞頓...

新媒體時代用戶閱讀心理特點分析：這7個你都掌握，就賺了

新媒體時代用戶閱讀心理特質分析：這7個你都掌握，就賺了引言我們做微信公眾號，想要成功就要研究人性，分析用戶閱讀心理，了解用戶的閱讀行為，只有這樣做了，才能更好的提升我們做...

若你不是在WordPress編輯器中使用簡碼，想在別處調用，可以使用如下代碼調用它：

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

三、添加編輯器按鈕

如果需要每次手動輸入簡碼，感覺太麻煩，怎麼辦呢？

WordPress的強大之處，就是能夠讓我們實現複雜事簡單化^_^

1）添加編輯器文本按鈕

WordPress默認內置TinyMCE編輯器，我們可以TinyMCE編輯器文本界面，添加快捷方式按鈕。

第3 步：添加快捷按鈕代碼

• 請直接在functions.php 文件中添加代碼 ▼

//加入内部文章，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）。

所以，最好也在可視化編輯器中添加一個按鈕。

• 雖然此功能可以用代碼來實現，但對於很多新手來說有點複雜。
• 對於高手覺得麻煩，因為要在主題加入JS代碼，若換主題又要重新添加，感覺步驟特別繁瑣。

第4步：安裝啟用插件

• 陳溈亮建議使用插件：Visual Editor Custom Buttons

安裝完成後，在左側菜單欄下方，將出現一個帶有齒輪圖標的Visual Editor Custom Buttons ▼

第5步：點擊Add New

• 創建一個自定義按鈕，任何名稱。
• 例如：加入內部文章 

你只需跟著下圖設置即可 ▼

第6步： Button Content 選項

• 選擇Wrap Selection。

第7步： Before 設置

• 填入短代碼

第8 步：Display In Editor 設置

• 你可以勾選Visual Editor 或Text Editor 顯示按鈕。
• 注意如果勾選了Text Editor（文本編輯器），則可跳過上面的“添加快捷按鈕代碼” ，否則會重複出現。

第9 步：Button Icon 選項

• 在下拉選項菜單中，選擇Framed 圖標。

第10 步：測試

• 最後，當然是由你來親自測試效果了^_^
• 如果以上步驟都沒錯，你將會在編輯器可視化界面中，看到如下圖的按鈕 ▼