为WordPress文章添加额外功能[移植自DUX主题]

之前使用dux的时候有很多方便的功能，现在换主题了，之前有功能没有了，那么我们就手动加上吧

• WordPress内容折叠
• WordPress添加说说功能
• WordPress添加内容评论可见
• WordPress添加go跳转

内容折叠功能

这个对优化文章结构还是很有用的，点击下方按钮查看演示及内容
[collaps title=”点击展开 查看 内容折叠 “]

移植自dux，但是缺少js，就去网上找了一下，解决，顺便美化了一下外观。

dux原版风格

钻芒美化

2020年1月5日更新–

• 修复之前未引入jquery库站点无法使用的问题。下边的代码已引入jquery.js
• 修复小图标倾斜的问题，加入hover鼠标浮动颜色

一、引用js，将以下代码加入至主题目录下的footer.php中

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
jQuery(post).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;}
.xControl a:hover {
	text-decoration: none;
    display: block;
    color:red;
}
.xControl i{font-style:normal;}
</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');

三丶给后台添加展开/收缩快捷标签按钮

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
    <script type="text/javascript">
      if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'collapse', '展开/收缩按钮', '



  点击展开 查看更多


','
' );
        } 
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

文章编辑器中选择文本，单击展开/收缩按钮，输入要折叠的内容，然后再次点击展开/收缩按钮。会自动添加折叠结束标签。

[/collaps]

添加说说功能

类似于qq空间的动态，可以发一些鸡毛蒜皮的小动态

[collaps title=”点击展开 说说功能”]

//说说功能
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');

[/collaps]

添加评论可见

[collaps title=”点击展开 查看添加评论可见”]

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 = "cpol@qq.com"; //博主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', '评论可见按钮', '

  此处内容已隐藏，请评论后刷新页面查看.

' );
        } 
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_reply' );

[/collaps]

添加go跳转功能

• 它的作用主要是避免权重的流失，画面也可以很炫酷。现在很多博客都带有此功能。
• 设置go跳转页面样式，可以参阅下边这篇文章
• https://www.zuanmang.net/2526.html

这里介绍如何给wordpress添加go跳转功能
[collaps title=”点击展开 查看go跳转功能 “]

//文章内外链添加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);

[/collaps]