為wordpress文章添加額外功能[移植自DUX主題]

2019 年 12 月 13 日
筆記

之前使用dux的時候有很多方便的功能，現在換主題了，之前有功能沒有了，那麼我們就手動加上吧

WordPress內容摺疊
WordPress添加說說功能
WordPress添加內容評論可見
WordPress添加go跳轉

內容摺疊功能

這個對優化文章結構還是很有用的點擊下方按鈕查看演示及內容

.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 陰影 */ background-color: #FFFFFF;/* 背景顏色 */ border-bottom: 2px solid #e74c3c;/* 邊 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }

點擊展開查看內容摺疊

移植自dux，但是缺少js，就去網上找了一下，解決，順便美化了一下外觀。

dux原版風格

鑽芒美化

一、引用js，將以下程式碼加入至主題目錄下的footer.php中

<script>  /* 為wordpress主題添加「內容展開/收縮」功能開始 */  jQuery(document).ready(  function(jQuery){  jQuery('.collapseButton').click(function(){  jQuery(this).parent().parent().find('.xContent').slideToggle('slow');  });  });  /* 為wordpress主題添加「內容展開/收縮」功能開始 */  </script>

二丶將下方程式碼添加至主題目錄下的functions.php中

// 文章頁添加展開收縮效果  function xcollapse($atts, $content = null){  	extract(shortcode_atts(array("title"=>""),$atts));  	return '      <style>.xControl {      font-size: 15px;      font-weight: bold;      padding: 5px 0;      box-shadow:0 0 20px #d0d0d0;/* 陰影 */      background-color: #FFFFFF;/* 背景顏色 */      border-bottom: 2px solid #e74c3c;/* 邊 */      transition: all 0.1s linear;      text-align: center;      border-radius: 0 0 5% 5%;      border-radius:4px;  }  .xControl a{  	text-decoration: none;      display: block;  }</style>  <div style="margin: 0.5em 0;">  		    <div class="xControl">  			    <a href="javascript:void(0)" class="collapseButton xButton"> <i class="fa fa-toggle-on" aria-hidden="true">&nbsp;</i><span class="xTitle">'.$title.'</span></a>  			    <div style="clear: both;"></div>  		    </div>  		<div class="xContent" style="display: none;">'.$content.'</div>  	</div>';  }  add_shortcode('collapse', 'xcollapse');

三丶給後台添加展開/收縮快捷標籤按鈕

添加至主題目錄下的functions.php

//添加展開/收縮快捷標籤按鈕  function appthemes_add_collapse() {  ?>      <script type="text/javascript">        if ( typeof QTags != 'undefined' ) {              QTags.addButton( 'collapse', '展開/收縮按鈕', '[collapse title="點擊展開 查看更多"]','[/collapse]' );          }      </script>  <?php  }  add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

使用方法

文章編輯器中選擇文本，單擊展開/收縮按鈕，輸入要摺疊的內容，然後再次點擊展開/收縮按鈕。會自動添加摺疊結束標籤。

添加說說功能

類似於qq空間的動態，可以發一些雞毛蒜皮的小動態

點擊展開說說功能

把下邊的程式碼加入到當前主題的functions.php 中可能剛加上查看說說介面404，去設置-固定鏈接更新一下就好了

//說說功能  function my_custom_shuoshuo_init() {  	$labels = array(  	'name' => '說說',  	'singular_name' => '說說',  	'all_items' => '所有說說',  	'add_new' => '發表說說',  	'add_new_item' => '撰寫新說說',  	'edit_item' => '編輯說說',  	'new_item' => '新說說',  	'view_item' => '查看說說',  	'search_items' => '搜索說說',  	'not_found' => '暫無說說',  	'not_found_in_trash' => '沒有已遺棄的說說',  	'parent_item_colon' => '',  	'menu_name' => '說說'  	);  	$args = array(  	'labels' => $labels,  	'public' => true,  	'publicly_queryable' => true,  	'show_ui' => true,  	'show_in_menu' => true,  	'query_var' => true,  	'rewrite' => true,  	'capability_type' => 'post',  	'has_archive' => true,  	'hierarchical' => false,  	'menu_position' => null,  	'supports' => array('title','editor','author')  	);  	register_post_type('shuoshuo',$args);  }  add_action('init', 'my_custom_shuoshuo_init');

添加評論可見

點擊展開查看添加評論可見

把下邊的程式碼加入到當前主題的functions.php 中評論後如果不顯示請查看是否開啟留言審核，審核通過後即可查看。

function reply_to_read($atts, $content=null) {          extract(shortcode_atts(array("notice" => '<div style="text-align:center;border:1px dashed #FF9A9A;padding:8px;margin:10px auto;color:#FF6666;>  <span class="reply-to-read">溫馨提示: 此處內容需要 <a href="#respond" title="評論本文">評論本文</a> 後 <a href="javascript:window.location.reload();" target="_self">刷新本頁</a> 才能查看！</span></div>'), $atts));          $email = null;          $user_ID = (int) wp_get_current_user()->ID;          if ($user_ID > 0) {              $email = get_userdata($user_ID)->user_email;              //對部落客直接顯示內容              $admin_email = "[email protected]"; //部落客Email              if ($email == $admin_email) {                  return $content;              }          } else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {              $email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);          } else {              return $notice;          }          if (empty($email)) {              return $notice;          }          global $wpdb;          $post_id = get_the_ID();          $query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";          if ($wpdb->get_results($query)) {              return do_shortcode($content);          } else {              return $notice;          }      }    add_shortcode('reply', 'reply_to_read');    //添加評論可見快捷標籤按鈕  function appthemes_add_reply() {  ?>      <script type="text/javascript">          if ( typeof QTags != 'undefined' ) {              QTags.addButton( 'reply', '評論可見按鈕', '[reply]','[/reply]' );          }      </script>  <?php  }  add_action('admin_print_footer_scripts', 'appthemes_add_reply' );

添加go跳轉功能

它的作用主要是避免權重的流失，畫面也可以很炫酷。現在很多部落格都帶有此功能。

如何添加設置go跳轉頁面，可以參閱下邊這篇文章

wordpress 設置go跳轉頁面

自從用了DUX5.2後，文章內的跳轉鏈接變成了go跳轉，但之前並不了解這個東西，所以之前文章內的鏈接打開直接跳404；，…

這裡介紹如何給wordpress添加go跳轉功能>

點擊展開查看go跳轉功能

把下邊的程式碼加入到當前主題的functions.php 中

//文章內外鏈添加go跳轉  function the_content_nofollow($content){      preg_match_all('/<a(.*?)href="(.*?)"(.*?)>/',$content,$matches);      if($matches){          foreach($matches[2] as $val){              if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){                  $content=str_replace("href="$val"", "href="".home_url()."/go/?url=$val" ",$content);              }          }      }   return $content;  }  add_filter('the_content','the_content_nofollow',999);      //評論者鏈接添加go跳轉  function add_redirect_comment_link($text = ''){      $text=str_replace('href="', 'href="'.get_option('home').'/go/?url=', $text);      return $text;  }  add_filter('get_comment_author_link', 'add_redirect_comment_link', 5);  add_filter('comment_text', 'add_redirect_comment_link', 99);

Tags: