文章OR页面自定义CSS&JS

今天给大家带来一篇Wordpress通用教程吧,如何单独的给某篇文章或者页面添加CSS&JS呢?

我说,这篇文章记录的是冬天的生活,他需要下雪

我又说,这篇文章的背景太单调了,需要加一个背景

x

细心的你想必已经发现了这些

🤔️那我是如何实现的呢?

/*文章背景图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  /* 定义密集程度,数字越小越密集 */  
    });  
 }); 

这是实现这些的代码,大家都知道很多的Wordpress主题是不支持文章页内是不支持自定义CSS、JS的包括我目前正在使用的子比主题

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

🆒教程开始

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

/*添加自定义CSS的meta box*/
add_action('admin_menu', 'cwp_add_my_VXRAS_css_meta_box');
/*保存自定义CSS的内容*/
add_action('save_post', 'cwp_save_my_VXRAS_css');
/*将自定义CSS添加到特定文章(适用于Wordpress中文章、页面、自定义文章类型等)的头部*/
add_action('wp_head','cwp_insert_my_VXRAS_css');
function cwp_add_my_VXRAS_css_meta_box() {
	add_meta_box('my_VXRAS_css', '自定义CSS', 'cwp_output_my_VXRAS_css_input_fields', 'post', 'normal', 'high');
	add_meta_box('my_VXRAS_css', '自定义CSS', 'cwp_output_my_VXRAS_css_input_fields', 'page', 'normal', 'high');
}
function cwp_output_my_VXRAS_css_input_fields() {
	global $post;
	echo '<input type="hidden" name="my_VXRAS_css_noncename" id="my_VXRAS_css_noncename" value="'.wp_create_nonce('VXRAS-css').'" />';
	echo '<textarea name="my_VXRAS_css" id="my_VXRAS_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_my_VXRAS_css',true).'</textarea>';
}
function cwp_save_my_VXRAS_css($post_id) {
	if (!wp_verify_nonce($_POST['my_VXRAS_css_noncename'], 'VXRAS-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$my_VXRAS_css = $_POST['my_VXRAS_css'];
	update_post_meta($post_id, '_my_VXRAS_css', $my_VXRAS_css);
}
function cwp_insert_my_VXRAS_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		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]-文章OR页面自定义CSS&JS-初一小盏

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

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

© 版权声明
THE END
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容