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

之前使用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; }

点击展开查看内容折叠 (https://www.zuanmang.net/javascript:void(0))

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

dux原版风格

钻芒美化

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

代码语言：javascript复制

<script>
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
</script>

二丶将下方代码添加至主题目录下的functions.php中

代码语言：javascript复制

// 文章页添加展开收缩效果
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

代码语言：javascript复制

//添加展开/收缩快捷标签按钮
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空间的动态，可以发一些鸡毛蒜皮的小动态

点击展开说说功能(https://www.zuanmang.net/javascript:void(0))

把下边的代码加入到当前主题的functions.php 中

可能刚加上查看说说界面404，去设置-固定链接更新一下就好了

代码语言：javascript复制

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

添加评论可见

点击展开查看添加评论可见(https://www.zuanmang.net/javascript:void(0))

把下边的代码加入到当前主题的functions.php 中

评论后如果不显示请查看是否开启留言审核，审核通过后即可查看。

代码语言：javascript复制

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('@', '@', $_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跳转功能 (https://www.zuanmang.net/javascript:void(0))

把下边的代码加入到当前主题的functions.php 中

代码语言：javascript复制

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

go php wordpress 网站建设

0 人点赞