为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%29)
移植自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"> </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空间的动态，可以发一些鸡毛蒜皮的小动态
.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%29)
把下边的代码加入到当前主题的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');添加评论可见
.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%29)
把下边的代码加入到当前主题的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 = "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', '评论可见按钮', '[reply]','[/reply]' );
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_reply' );添加go跳转功能
它的作用主要是避免权重的流失，画面也可以很炫酷。现在很多博客都带有此功能。
如何添加设置go跳转页面，可以参阅下边这篇文章
wordpress 设置go跳转页面
自从用了DUX5.2后，文章内的跳转链接变成了go跳转，但之前并不了解这个东西，所以之前文章内的链接打开直接跳404；，…
这里介绍如何给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; }
点击展开 查看go跳转功能 (https://www.zuanmang.net/javascript:void(0%29)
把下边的代码加入到当前主题的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);