求问WordPress怎么引用javascript和 CSS 文件

如题所述

这里不再赘述。
第二种就是使用 wp_head 函数。wp_head 函数用来输出一些自定义或者系统定义的内容,我们有时候会使用下面代码引用文件:代码如下复制代码<?php
add_action('wp_head', 'wpjam_normal_script');
function wpjam_normal_script() {
echo '资源文件的链接';}?将上面代码复制到 functions.php 文件中,即可引用对应的文件。
WordPress的排队引用(Enqueue Scripts)资源机制
在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序的意思。众所周知,WordPress 有很多的插件,几乎每个插件都会引用一些资源文件,难免会有两个插件引用的资源发生冲突等,这样会变得不稳定而且可能会影响效率。
使用这种方式引用,和对应文件以及核心代码分离的,如果用户想要禁用某个资源,直接删除、修改、注释掉即可,而不需要从核心代码中修改。
此外,WordPress 中内置了一些常用的库(例如 jQuery、jQuery UI 等),我们可以使用wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范。内置的已经定义库的列表和标识符(handle)请点击这里查看。
如果使用这个函数来引用自己的 JS 和 CSS 文件,首先需要使用 wp_register_script 这个函数注册一个标识(handle),然后使用 wp_enqueue_script 函数调取这个标志对应的资源。
WordPress 合理引入 JS 和 CSS 的方法
可以使用下面代码为你的插件引入 plugin.css 文件。
代码如下复制代码<?php
function wpjam_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');}
add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );?上面先用 wp_register_script 函数创建了一个标识符为 plugin_stylesheet 的资源,随后将其排队请求添加到 wp_enqueue_scripts action 中。虽然函数名中是 script,但是跟资源文件的类型没有关系,对 CSS 和 JS 都有效。
很显然 wp_register_script 函数没有这么简单,它可以有五个参数:
•$handle:资源标识符,供 wp_enqueue_script 调用。
•$src:资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。•$deps:依赖关系。如果引用的是 jQuery 插件,需要依赖 jQuery 组建,那么就需要填写上 jQuery。注意,以数组的形式传递。
•$ver:资源版本,可选的。
•$in_footer:是否放在底部。一般来说,JS 文件要放在页面的底部,就可以设置这个参数为 True,留空或者 False 会输出到顶部。
下面看一个引用 JavaScript 文件的比较完整的例子:代码如下复制代码<?php
function wpjam_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');}
add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );?在 WordPress 主题开发中使用 wp_enqueue_script 引入资源
上面的例子都是以插件开发引用资源为例,在主题中引用的方法相似,主要的区别就在于使用对应的函数获取主题目录从而得到主题下面的资源文件地址。
温馨提示:内容为网友见解,仅供参考
无其他回答

如何在WordPress上正确加载Javascript和CSS
使用 wp_enqueue_scripts 仅仅只会在前台加载脚本和CSS,不会在后台管理界面加载,所以没必要使用 !is_admin() 判断。 使用is_single() 只在文章加载脚本或CSS 第3 行的 # 替换为文章的ID就可以让脚本和css只加载到那篇文章。当然,如果直接使用 is_single() (不填ID),就会在所有文章加载脚本和CSS。 \/** A...

如何在WordPress指定页面加载指定JavaScript或CSS代码
在WordPress指定页面加载指定JavaScript或CSS代码如下:int strlen(char *p){ int i=0;while(*p++)i++;return i;} include <stdio.h> include <string.h> void main(){ char x[3]={0};x[0]='a';x[1]='b';x[2]='c';int len=strlen(x);printf("%c %d \\r\\n",x[6],len)...

怎么在wordpress的首页插入js代码和友情链接
没必要去改文件,直接去后台的外观-小工具里,把“文本(任意文本或HTML)”拖到右边的sidebar_1里,然后打开它往里边增加代码就行 至于友情链接,WORDPRESS就有,点开链接菜单你就知道操作了

wordpress主题,修改头部代码加入JS
bloginfo('stylesheet_url')会自动输出网站主题文件夹下style.css文件的绝对网址,如http:\/\/localhost\/wordPress\/wp-content\/themes\/goodblog\/style.css 说到这里,顺便修改一下图片路径,在index.php里有张图片路径需要修改,不过现在可改可不改,后期会自动调用文章图片;用文本编辑器打开index.php给这些...

...就是index.html里面,我现在想把它应用到WordPress里面
<!--这里是网页连接外部文件的方式,js,样式表--> ...每个html文档连接外部文件都可以这样用,不过我没有连接过网站,所以我不清楚效果怎么样,不过这种方式是没有错误的

wordpress网站怎样去合并CSS和JS文件,跪求大神指教,详细步骤
网上有很多合并js、css的工具,在线的、服务器上自动合并的,发布项目的时候自动打包合并的,甚至wordpress插件形式的都有。自己ctrl+c、ctrl+v手工也可以合并。我就不明白什么个人博客,小公司网站热衷于合并这个那个,减少那一点点请求有嘛用。多数这种网站一天访问量不会上万。人家淘宝、百度这些那是...

如何在WordPress文章中插入代码
用以描述WordPress中的< code>index.php,< code>sidebar.php及< code>header.php 模板文件。如果你希望在文字周围使用标签以使它们看起来如代码一般,此方法就很有用,但如果你想展示如HTML的标签的话该如何是好呢?在< code>header.php模板文件中, 查找< code>< div class="header"> 部分以修改...

WordPress 自定义分页代码 css样式要放在什么位置?
wordpress的主css代码在主题根目录下的style.css,不过wordpress同时提供了额外css功能,在外观-自定义-额外css,这里输入新的css代码。在这里可以生效,而不用去改style文件,也可以避免因主题升级导致文件被覆盖丢失修改。

Wordpress:如何为特定页面使用特定样式表_建站经验教程
打开你的header.php找到以下的语句:<link rel=stylesheet href=<?php bloginfo(’stylesheet_url’); ? type=text\/css media=screen \/以上语句说明了主题调用主题文件夹中的stlye.css文件。如果想要为特定的一个分类定义一个另一个样式表的话只需要将代码改成:以下为引用的内容:<?

...css、JavaScript等,这样制作的优缺点有哪些?
我是一个多年的职业wordpress开发者,相信给你回答这个问题也有说服力。优点:wordpress的主题文件包含html,css,js,放在themes目录下,是 .php文件组成的 ,模板代码统一放在一个位置,比较好学习缺点:html和php代码没有实现前后端分离,修改起来和如今的前后端分离网站相比较困难。

相似回答