我说,这篇文章记录的是冬天的生活,他需要下雪
我又说,这篇文章的背景太单调了,需要加一个背景
细心的你想必已经发现了这些
那我是如何实现的呢?
/*文章背景图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
内
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_my_VXRAS_css', true).'</style>'; endwhile; endif; rewind_posts(); }}/*添加自定义JS的meta box*/add_action('admin_menu', 'cwp_add_my_VXRAS_JS_meta_box');/*保存自定义JS的内容*/add_action('save_post', 'cwp_save_my_VXRAS_JS');/*将自定义JS添加到特定文章(适用于Wordpress中文章、页面、自定义文章类型等)的头部*/add_action('wp_head','cwp_insert_my_VXRAS_JS');function cwp_add_my_VXRAS_JS_meta_box() { add_meta_box('my_VXRAS_JS', '自定义JS', 'cwp_output_my_VXRAS_JS_input_fields', 'post', 'normal', 'high'); add_meta_box('my_VXRAS_JS', '自定义JS', 'cwp_output_my_VXRAS_JS_input_fields', 'page', 'normal', 'high');}function cwp_output_my_VXRAS_JS_input_fields() { global $post; echo '<input type="hidden" name="my_VXRAS_JS_noncename" id="my_VXRAS_JS_noncename" value="'.wp_create_nonce('VXRAS-JS').'" />'; echo '<textarea name="my_VXRAS_JS" id="my_VXRAS_JS" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_my_VXRAS_JS',true).'</textarea>';}function cwp_save_my_VXRAS_JS($post_id) { if (!wp_verify_nonce($_POST['my_VXRAS_JS_noncename'], 'VXRAS-JS')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $my_VXRAS_JS = $_POST['my_VXRAS_JS']; update_post_meta($post_id, '_my_VXRAS_JS', $my_VXRAS_JS);}function cwp_insert_my_VXRAS_JS() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<script type="text/javascript">'.get_post_meta(get_the_ID(), '_my_VXRAS_JS', true).'</script>'; endwhile; endif; rewind_posts(); }}
如果你对代码感兴趣,可以自行研究一下,也许可以开发出更多实用功能
代码添加后撰写页下方会出现两个区块:
![图片[1]-子比主题美化 – 文章和页面自定义CSS&JS代码-晚笙博客](https://img.picui.cn/free/2024/06/11/6668488d506d8.jpg)
分别是
到这教程就结束了,大家可以自由奔放了
来源:子比论坛
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
WSZYZ.CN
暂无评论内容