WordPress 主题\插件\后台,引入css/js
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($) {
//这里就可以直接用$符号了。
});