当前位置: 首页 » 笔记 » WordPress 主题\插件\后台,引入css/js

WordPress 主题\插件\后台,引入css/js

零分笔记1,9052024-02-29 18:32

wordpress 主题\插件\后台引入CSS/JS,其实归根结底就2种方式,怎么方便怎么来。

1、直接引入。

直接在需要的地方引入,比如主题模板,直接在header.php中引入。

2、使用官方函数导入wp_enqueue_scripts/wp_enqueue_style加载文件,从函数就可以看出wp_enqueue_scripts是加载JS文件,wp_enqueue_style是加载CSS文件。

第一种方法就很简单了,知道一点html都知道,直接引入JS/CSS文件的代码。

引入JS,你可以这样写:

<script type='text/javascript' src='js.js'></script>

引入CSS,你可以这样写:

<link rel="stylesheet" type="text/css" href="css.css">

大多情况都是直接这样写,在wordpress中,主题目录的函数是:bloginfo(‘template_url’)、bloginfo(‘template_directory’),或者get_template_directory_uri(),都是主题目录,比如你的JS/CSS放在了主题目录img文件夹下,就可以这样写。

JS:
<script type='text/javascript' src='<?php echo bloginfo('template_directory')?>/img/js.js'></script>
CSS:
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_directory')?>/img/css.css">

一般wordpress主题的样式文件是:style.css,放在主题目录下。所以是这样的

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>style.css">

主题CSS如果想要放在function里,首先需要主题放上钩子wp_head()。

然后在function.php中添加action,wordpress会添加上设置文件,其实还是第一种方式。

function addcss(){
  echo '<link rel="stylesheet" type="text/css" href="css.css">';
  echo '';
  //.....可以设置多个
}
add_action( 'wp_head', 'addcss' );

​这种,只要有钩子,就会添加,不会去判断是否已经存在什么的。有可能会出现重复加载这种情况..

接下来就是第二种,WordPress提供的函数加载文件。

1、注册函数wp_register_style(),

wp_register_style( string $handle, string|bool $src, array $deps = array(),string|bool|null $ver = false, string $media = 'all' )

$handle:字符串(必填)。样式名称,必须是唯一值。

$src:字符串或布尔值(必填)。完整的样式文件路径或基于WordPress根目录的相对路径。如果资源为false,则样式为基于其他样式的别名。

$deps:数组(可选)。样式将在该数组所包含的其他样式之后引入。

$ver:字符串、布尔值或空值(可选)。指定样式版本号,将其作为查询字符串添加到 URL 中以清除缓存。 如果设置为 false ,则自动设置当前安装的 WordPress 版本为版本号。 如果设置为 null ,则不添加任何版本。

$media:布尔值(可选)。该样式表针对何种媒体设备使用,支持“all”、’print’ 以及 ‘screen’ ,或者 ‘(orientation: portrait)’ 与 ‘(max-width: 640px)’等。

该函数返回布尔值( true 或 false),用以判定样式是否注册。

如​:

function addcss(){
  wp_register_style('mycss','css.css','1.0.0','all');
}
add_action('wp_enqueue_scripts', 'addcss');

注释:

wp_enqueue_scripts:前台加载JS/CSS

admin_enqueue_scripts:后台加载JS/CSS

login_enqueue_scripts​:登录页加载JS/CSS

加载JS和加载CSS一样,用wp_enqueue_script();

另外​:JQ可以直接用wordpress自带的JQ库。​引入方法:

<?php wp_enqueue_script("jquery");?>

​JQ写法:

jQuery(document).ready(function($) {
//这里就可以直接用$符号了。
});
END
零分站龄17年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
2517
文章
13
分类
3818
标签
3
友链
onlinelovesky317355746vipsever@vip.qq.com