专注国内外云服务器
分享建站技术教程

WordPress主题为文章内容页添加展开收缩功能教程

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

我们在网站上发布WordPress教程的时候偶尔会发布一些代码,大家又不喜欢代码压缩,反而会让代码格式化显示,但是这样会让文章内容看起来很多,不方便访问,这时候需要添加展开/收缩文章内容的功能,今天就为大家分享一下WordPress主题为文章内容页添加展开收缩功能教程。

教程开始:

1、在header.php中添加下面的代码,或者也可以单独写进一个js文件中然后在header.php中引入也可以。

jQuery(document).ready(function(jQuery) {

jQuery(’.collapseButton’).click(function() {

jQuery(this).parent().parent().find(’.xContent’).slideToggle(’slow’);

});

});

2、在function.php中加入下面的代码:

//展开收缩功能

function xcollapse($atts, $content = null){

extract(shortcode_atts(array(”title”=>””),$atts));

return ‘

’.$title.’

展开/收缩

’.$content.’

’;

}

add_shortcode(’collapse’, ’xcollapse’);

3、可以优化一下代码,因为默认是靠左的,不好看,我们让他往中间一点显示,具体的距离可以自行调整。当然这一步忽略也是可以的。在diy.css中添加以下代码:

.xControl {

padding-left: 32px;

}

4.下面就可以在文章中通过插入短代码

[collapse title=”标题”]需点击展开的内容[/collapse]

来使用此功能了。其中title是指添加一些提示内容,当然也可以省略title不写。

这样一来,一方面可以优化WordPress主题内容页面的加载速度,另一方面可以有效提升用户体验。

文章来源于wordpress教程:WordPress主题为文章内容页添加展开收缩功能教程

相关推荐: WordPress主题开发中主题文件结构详解

WordPress是基于世界上最好的语言”PHP”写的,当然你也要懂一些PHP基本的语法知识,今天分享WordPress主题开发中主题文件结构详解。 下面我们说一下WordPress主题的文件结构,有如下 主页: home.php index.php 文章页:…

赞(0)
未经允许不得转载:吾上云 » WordPress主题为文章内容页添加展开收缩功能教程
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们