评论可见
前往评论
一般网站会加入一些特效,比如满屏飘雪,这种效果在冬天非常有氛围感,大家都知道很多的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内
如果你对代码感兴趣,可以自行研究一下,也许可以开发出更多实用功能
代码添加后撰写页下方会出现两个区块:
分别是自定义CSS和自定义JS
到这教程就结束了,大家可以自由奔放了
发表评论