Wordpress如何在文章或页面中添加自定义CSS&JS代码

Jaysun

1.webp.jpg


一般网站会加入一些特效,比如满屏飘雪,这种效果在冬天非常有氛围感,大家都知道很多的wordpress主题是不支持文章页内是不支持自定义CSS、JS的包括我目前正在使用的子比主题

这就需要我们对主题添加一些代码

文章添加背景代码:

/*文章背景图CSS*/
.article {
    background-image: url(https://www.vxras.com/wp-content/uploads/2023/09/shading_red.png);
}

满屏飘雪代码:

//雪花飘落JS
 (function($){  
    $.fn.snow = function(options){  
     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px', 'cursor': 'pointer'}).html('❄'),  
     documentHeight  = $(document).height(),  
     documentWidth   = $(document).width(),  
     defaults = {  
         minSize     : 10,  
         maxSize     : 20,  
         newOn       : 1000,  
         flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */  
     },  
     options = $.extend({}, defaults, options);  
     var interval= setInterval( function(){  
     var startPositionLeft = Math.random() * documentWidth - 100,  
     startOpacity = 0.5 + Math.random(),  
     sizeFlake = options.minSize + Math.random() * options.maxSize,  
     endPositionTop = documentHeight - 200,  
     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,  
     durationFall = documentHeight * 10 + Math.random() * 5000;  
     $flake.clone().appendTo('body').css({  
         left: startPositionLeft,  
         opacity: startOpacity,  
         'font-size': sizeFlake,  
         color: options.flakeColor  
     }).animate({  
         top: endPositionTop,  
        left: endPositionLeft,  
         opacity: 0.2  
     },durationFall,'linear',function(){  
        $(this).remove()  
     });  
     }, options.newOn);  
     };  
 })(jquery);  
 $(function(){  
     $.fn.snow({   
         minSize: 5, /* 定义雪花最小尺寸 */  
       maxSize: 50,/* 定义雪花最大尺寸 */  
         newOn: 300  /* 定义密集程度,数字越小越密集 */  
    });  
 });

教程开始

如果你是子比主题没有添加代码修改过主题文件,请自行创建一个func.php文件来添加代码,如果你是别的主题可以直接添加在functions.php内

隐藏内容
评论可见
前往评论

如果你对代码感兴趣,可以自行研究一下,也许可以开发出更多实用功能

代码添加后撰写页下方会出现两个区块:

1.png

分别是自定义CSS和自定义JS

到这教程就结束了,大家可以自由奔放了


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (有 1 条评论,504人围观)
网友昵称:whoareyou1
whoareyou1 V 普通用户 Google Chrome 119.0.6045.160 Windows 10 x64 沙发
01-12 来自江苏 回复
感谢分享!!

目录[+]

取消
微信二维码
微信二维码
支付宝二维码