【WordPress修改】利用纯代码修改WordPress文章的页面实现扩展和收缩功能

阿里云2折

在使用WordPress写文章的时候,我们经常遇到这样的问题:为了满足不同用户对文章内容的理解,我们希望文章内容尽可能的详细,但是对于一些有一定知识基础的用户来说,过于详细的内容难免会显得冗长。在这种情况下,我们需要使用 “展开/收缩” 函数来隐藏一些可以说或不说的内容,从而使内容更加简洁和有组织。

将以下代码添加到主题header.php文件中的<body>标记

// 添加文章页展开收缩JS效果
<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
			    function(){
                    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
                }
		    );
        }
    );
</script>

编辑主题functions.php文件

将下面代码添加到你主题的functions.php文件中

// 文章页添加展开收缩效果
function xcollapse($atts, $content = null){
	extract(shortcode_atts(array("title"=>""),$atts));
	return '<div style="margin: 0.5em 0;">
		    <div class="xControl">
			    <span class="xTitle">'.$title.'</span><i class="fa fa-plus-square" aria-hidden="true"></i><a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
			    <div style="clear: both;"></div>
		    </div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');

至此,你就可以通过使用下面的短代码在编辑文章时为文章内容添加“展开/收缩”按钮了。

// 展开/收缩功能短代码
collapse title="说明文字"]需点击展开的内容[/collapse

当然,为了更容易地使用扩展/契约函数,还可以将以下代码添加到主题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' );

最后,大家在添加代码的时候注意上方代码中将中文【】字符修改为[]。

美化展开收缩功能

更改前端“展开/收缩”字符显示样式

如果你想要改变“展开/收缩”字符在前端的显示效果,可以通过添加<span>、<em>、<stong>等标签来实现,例如下面的代码。

<span style="font-size: 18pt; font-family: impact, sans-serif;"><em><strong><span style="color: #ff0000;">展开/收缩</span></strong></em></span>

当然,如果你不知道如何编辑这些标签,一个简单的方法是首先在WordPress文章可视化编辑窗口中编辑字符样式,然后转到代码窗口复制代码。

添加Font Awesome字体图标

如果你的主题支持字体Awesome,你可以在上面的functions.php文件的代码中用字体Awesome图标标签作为“扩展/收缩”图标的前缀,为你的“扩展/收缩”按钮添加一个漂亮的图标。当然,如果主题不支持字体Awesome,你可以安装字体Awesome 4菜单插件来扩展它。有关安装代码,请参阅下面的示例。

<i class="fa fa-plus-square" aria-hidden="true"></i> <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
卓越源码阁版权申明

1、本网站采用BY-NC-SA协议进行授权资源,仅限于学习研究!
2、本站资源多为网络收集,我们不承担任何技术及版权问题,严禁从事商业或者非法活动!
3、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予以删除并致以最深的歉意!
4、侵权删帖/违法举报/投稿等事物联系邮箱:zuoyueyuanma@qq.com!

分享到:
赞(0) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏