文章OR页面自定义CSS&JS

简介

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

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

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

效果无了,更新主题后文件记得备份

提升用户体验:通过自定义CSS,你可以调整文字的字体、大小、颜色、间距等属性,使其更符合你的网站或应用的风格和设计。这不仅可以提升用户的阅读体验,还可以增强网站或应用的整体视觉效果。

增强交互性:通过JS,你可以为文字添加各种交互效果,如鼠标悬停效果、点击事件、动态改变内容等。这些交互效果可以增加用户与你的网站或应用的互动,提高用户的参与度和满意度。

提高网站或应用的可访问性:通过CSS和JS,你可以为文字添加辅助功能,如屏幕阅读器支持、键盘导航等,使你的网站或应用更容易被所有人使用,包括残障人士。

提高搜索引擎优化(SEO):通过优化CSS和JS,你可以改善网站或应用在搜索引擎中的排名。例如,你可以使用CSS来隐藏不重要的内容,或者使用JS来生成动态内容,这些都可以提高你的网站或应用在搜索引擎中的可见性。

提高网站或应用的性能:通过优化CSS和JS,你可以减少网站或应用的加载时间,提高其性能。例如,你可以使用CSS压缩和JS压缩来减小文件大小,或者使用CDN来加速文件的加载速度。

更好的维护和扩展性:通过自定义CSS和JS,你可以更容易地维护和扩展你的网站或应用。例如,如果你想要改变网站的颜色方案或者添加新的交互功能,你只需要修改相应的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 /* 定义密集程度,数字越小越密集 */
});
});

这是实现这些的代码,大家都知道很多的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

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

注意

请注意,虽然自定义CSS和JS有很多好处,但是也需要谨慎使用。过度使用或者不当使用可能会导致网站或应用变得难以维护、性能下降或者用户体验变差。

温馨提示:本文最后更新于2024-05-09 15:41:40,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容