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

• 2 二、調(diào)用嵌入文章卡片形式短代碼（簡碼）
• 3 三、添加編輯器按鈕
  • 3.1 1）添加編輯器文本按鈕
  • 3.2 2）添加編輯器可視化按鈕

 

網(wǎng)站內(nèi)部鏈接優(yōu)化，在SEO環(huán)節(jié)中一直非常重要，一個(gè)好的鏈接結(jié)構(gòu)對(duì)搜索引擎優(yōu)化非常有利。

倘若在當(dāng)前文章和其他文章有關(guān)聯(lián)時(shí)，主動(dòng)在頁面內(nèi)添加鏈接：

• 會(huì)大大增加搜索引擎蜘蛛抓取的數(shù)量和深度，
• 有助增加收錄數(shù)量，
• 以及錨文本關(guān)鍵字的權(quán)重。

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

• 內(nèi)部鏈接的常見形式是文本鏈接，其結(jié)構(gòu)是 <a href=”…”>錨文本</a>。
• 但為了增強(qiáng)用戶體驗(yàn)，我們可以使內(nèi)頁的文章鏈接進(jìn)一步優(yōu)化。

 

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

第 1 步：添加PHP代碼

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

/**
* 加入內(nèi)部文章縮略圖 By 我們
* 文章地址：https://www.wordpressx.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]; //若無縮略圖，就調(diào)用文中第一張圖片作縮略圖
 }else {
 $random = mt_rand(1, 20);
 return get_template_directory_uri().'/img/random/'. $random .'.jpg'; //文章中若無圖片，就隨機(jī)讀取在 random 文件夾內(nèi)的圖片作縮略圖
 }
 }
 }
 }

//加入內(nèi)部文章鏈接
 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="fa fa-link fa-fw"></i>';
 $content .= get_the_title();
 $content .= '</a><p class="note"><a target="_blank" rel="nofollow" href="' . get_permalink() . '">';
//$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="' . 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');

• 請(qǐng)注意查看你的WP主題，是否有 /img/random/?文件夾？
• （如果沒有，請(qǐng)創(chuàng)建）
• 然后在?random?文件里，添加 20張 jpg 圖片。

圖片以 1~20 命名：

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

第 2 步：添加CSS代碼

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

/*加入內(nèi)部文章CSS*/
.fl{float:left;}
.fr{float:right;}
.jiawen{margin-bottom:25px;padding:10px;width:95%;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;}}

二、調(diào)用嵌入文章卡片形式短代碼（簡碼）

可以直接在文章編輯器 “可視化” 或 “文本”?界面中，輸入簡碼 【jiawen ids =postID1,postID2 ...】 的格式調(diào)用。

例如，如果我想顯示3個(gè)內(nèi)部鏈接文章，我直接輸入簡碼：

• 【jiawen ids=526,380,411】
• 如果輸入超過5個(gè)文章id，最大只顯示5篇文章
• 本文為避免簡碼被轉(zhuǎn)義才用【】
• 實(shí)際使用簡碼時(shí)，請(qǐng)將【】改成 []

 

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

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

三、添加編輯器按鈕

如果需要每次手動(dòng)輸入簡碼，感覺太麻煩，怎么辦呢？

WordPress的強(qiáng)大之處，就是能夠讓我們實(shí)現(xiàn)復(fù)雜事簡單化 ^_^

1）添加編輯器文本按鈕

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

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

• 請(qǐng)直接在 functions.php 文件中添加代碼?▼

//加入內(nèi)部文章，TinyMCE 編輯器文本按鈕
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
 QTags.addButton( 'jw', '加入內(nèi)部文章', '', '');
 </script>
<?php
}

注意事項(xiàng)

如果你已經(jīng)添加編輯器自定義快捷按鈕的其它代碼，就只需在<script type="text/javascript"> 之下，添加如下代碼?▼

QTags.addButton( 'jw', '加入內(nèi)部文章', '', '');

不然會(huì)出錯(cuò)。

2）添加編輯器可視化按鈕

我們?cè)诰庉媁ordPress文章時(shí)，通常默認(rèn)界面是可視化（Visual）。

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

• 雖然此功能可以用代碼來實(shí)現(xiàn)，但對(duì)于很多新手來說有點(diǎn)復(fù)雜。
• 對(duì)于高手覺得麻煩，因?yàn)橐谥黝}加入JS代碼，若換主題又要重新添加，感覺步驟特別繁瑣。

第 4 步：安裝啟用插件

• 我們建議使用插件：Visual Editor Custom Buttons

安裝完成后，在左側(cè)菜單欄下方，將出現(xiàn)一個(gè)帶有齒輪圖標(biāo)的Visual Editor Custom Buttons?▼

第 5 步：點(diǎn)擊 Add New

• 創(chuàng)建一個(gè)自定義按鈕，任何名稱。
• 例如：加入內(nèi)部文章

你只需跟著下圖設(shè)置即可?▼

第 6 步：?Button Content?選項(xiàng)

• 選擇 Wrap Selection。

第 7 步：?Before?設(shè)置

• 填入短代碼

第 8?步：Display In Editor 設(shè)置

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

第 9?步：Button Icon?選項(xiàng)

• 在下拉選項(xiàng)菜單中，選擇 Framed?圖標(biāo)。

第 10?步：測試

• 最后，當(dāng)然是由你來親自測試效果了 ^_^
• 如果以上步驟都沒錯(cuò)，你將會(huì)在編輯器可視化界面中，看到如下圖的按鈕?▼

希望我們網(wǎng)站（ http://news.qtyiliao.cn/ ） 分享的《WordPress怎么添加文章卡片樣式?嵌入文章卡片形式短代碼》，對(duì)您有幫助。