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

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

作者: Alextao_0a86 | 来源:发表于2019-07-14 16:39 被阅读0次

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

WordPress内容折叠

WordPress添加说说功能

WordPress添加内容评论可见

WordPress添加go跳转

内容折叠功能

这个对优化文章结构还是很有用的

点击下方按钮查看演示及内容

 点击展开 查看 内容折叠

移植自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中

// 文章页添加展开收缩效果functionxcollapse($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() {?><scripttype="text/javascript">if(typeofQTags!='undefined'){QTags.addButton('collapse','展开/收缩按钮','[collapse title="点击展开 查看更多"]','[/collapse]');}</script><?php}add_action('admin_print_footer_scripts','appthemes_add_collapse');

使用方法

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

添加说说功能

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

 点击展开 说说功能

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

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

//说说功能functionmy_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" => '

get_results($query)) {              return do_shortcode($content);          } else {              return $notice;          }      }    add_shortcode('reply', 'reply_to_read');//添加评论可见快捷标签按钮function appthemes_add_reply() {?><scripttype="text/javascript">if(typeofQTags!='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跳转functionthe_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跳转functionadd_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);

文章源自钻芒博客

原文地址:https://www.zmki.cn/3319.html

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/nsfekctx.html