首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

> 将上面代码复制到 functions.php 文件中,即可引用对应的文件。...WordPress 的排队引用(Enqueue Scripts)资源机制 在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序的意思...此外,WordPress 中内置了一些常用的库(例如 jQuery、jQuery UI 等),我们可以使用 wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范。...> 上面先用 wp_register_script 函数创建了一个标识符为 plugin_stylesheet 的资源,随后将其排队请求添加到 wp_enqueue_scripts action 中。...如果引用的是 jQuery 插件,需要依赖 jQuery 组建,那么就需要填写上 jQuery。注意,以数组的形式传递。 $ver:资源版本,可选的。 $in_footer:是否放在底部。

1.3K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WordPress主题开发基础:Body 类指南

    php body_class($class); ?>> WordPress根据显示的页面类型自动添加适当的类。 例如,如果您在存档页面上,WordPress将自动将存档类添加到body元素。...使用WordPress插件添加Body类 如果您不在客户项目上并且不想编写代码,那么此方法对您来说会更容易。 您需要做的第一件事是安装并激活Custom Body Class插件。...现在,在这种情况下,您可以将条件标记与一些自定义代码一起使用,以将自定义类动态添加到body类。 为此,您需要将以下代码添加到主题的functions.php文件中。...将页面别名添加到body类 将以下代码粘贴到主题的functions.php文件中,可以将页面的slug别名添加到body类: //Page Slug Body Class function add_slug_body_class...好在WordPress在加载时自动检测到浏览器,然后将这些信息临时存储为全局变量。您只需要检查WordPress是否检测到特定的浏览器,然后将其添加为自定义CSS类即可。

    2.1K20

    WordPress 通过模板文件和自带的函数引入 cssjs 的两种方法

    如果您不希望使用一个版本号,将其设置为null。默认为false,这使得WordPress的添加自己的版本号。...该参数只在WordPress不了解脚本情况时使用。默认值:None $deps(数组)(可选)脚本所依靠的句柄组成的数组;加载该脚本前需要加载的其它脚本。若没有依赖关系,返回false。...很显然,我只需要在这唯一一个页面使用这部分代码,所以将这段代码直接放在这个页面模板中是最好的做法。...wp_print_scripts() 则直接在你使用此方法的位置输出需要的 JavaScript 文件,而不是加入到 WordPress 的处理任务中。 如果我们在页面的中间使用 告诉 WordPress 需要加载 jquery.js,WordPress 在 wp_footer() 中处理的时候也会先检查前面是不是已经有了,如果有了就不会再重新加载一次。

    1.8K30

    WordPress 5.6 发布,新的 2021 主题和古腾堡编辑器大更新

    WordPress 5.6 发布,这个版本发布了新的默认主题 2021,然后给古腾堡增加大量的模块,让你更加方便插入图片,声音和视频。...虽然 WordPress Core 的自动更新功能已在 WordPress 中存在多年,但是 WP 5.6 首次引入了新的用户界面,以使用户对自动更新的操作更加容易。...支持 PHP 8 WordPress 5.6 标志着 WordPress 核心支持 PHP 8 迈出了第一步,WordPress 建议主题和插件作者要让自己的产品和 PHP 8 兼容,就是在正常使用情况下...jQuery 更新 WordPress 会在三个版本:5.5、5.6 和 5.7 来更新 jQuery 到最新版,2020 年 8 月发布的 5.5 删除了 jQuery Migrate 脚本,5.6...版本则将 jQuery 升级到最新版并添加了 jQuery Migrate 3.3.2,5.7 将移除 jQuery Migrate 3.3.2。

    85940

    腾讯云服务器搭建WordPress博客

    本指南将介绍通过腾讯云云服务器 CVM(以下简称 CVM)上安装的 WordPress 镜像来启动并运行一个网站。...部分设置完了,我们退出 MySQL 环境: exit 把上述的 DB 配置同步到 WordPress 的配置文件中,可参考下面的配置: 示例代码:/etc/wordpress/wp-config.php...将页面添加到菜单 如果您希望将新页面链接到导航栏: 点击“更新”,保存对页面所做的任何更改。 点击WordPress仪表盘中的外观->菜单。...找到您创建的页面,单击旁边的复选框,单击“添加到菜单”,将其添加到列表中。 添加和编辑帖子 如果您要在网站上搭建博客,那么您可能需要添加“帖子”的功能。您可以使用不同的类别来分组帖子。...如果你想关闭侧边栏或编辑你不需要的项目,请按照如下指南进行操作: 到WordPress仪表板中的“外观 - >窗口小部件”。 您可以使用拖放操作向侧边栏添加不同的“框”,或删除不需要的项目。

    4.3K50

    腾讯云服务器搭建WordPress博客

    本指南将介绍通过腾讯云云服务器 CVM(以下简称 CVM)上安装的 WordPress 镜像来启动并运行一个网站。...部分设置完了,我们退出 MySQL 环境: exit 把上述的 DB 配置同步到 WordPress 的配置文件中,可参考下面的配置: 示例代码:/etc/wordpress/wp-config.php...将页面添加到菜单 如果您希望将新页面链接到导航栏: 点击“更新”,保存对页面所做的任何更改。 点击WordPress仪表盘中的外观->菜单。...找到您创建的页面,单击旁边的复选框,单击“添加到菜单”,将其添加到列表中。 添加和编辑帖子 如果您要在网站上搭建博客,那么您可能需要添加“帖子”的功能。您可以使用不同的类别来分组帖子。...如果你想关闭侧边栏或编辑你不需要的项目,请按照如下指南进行操作: 到WordPress仪表板中的“外观 - >窗口小部件”。 您可以使用拖放操作向侧边栏添加不同的“框”,或删除不需要的项目。

    4.8K40

    如何搭建 WordPress 博客

    还没有云服务器的同学可以到腾讯云官网点击产品中的云服务器,进行购买。您也可以到这里免费领取一台腾讯云服务器。 安装WordPress 安装WordPress有两种方法。 1....部分设置完了,我们退出 MySQL 环境: exit 把上述的 DB 配置同步到 WordPress 的配置文件中,可参考下面的配置: 示例代码:/etc/wordpress/wp-config.php...将页面添加到菜单 如果您希望将新页面链接到导航栏: 点击“更新”,保存对页面所做的任何更改。 点击WordPress仪表盘中的外观->菜单。...找到您创建的页面,单击旁边的复选框,单击“添加到菜单”,将其添加到列表中。 添加和编辑帖子 如果您要在网站上搭建博客,那么您可能需要添加“帖子”的功能。您可以使用不同的类别来分组帖子。...如果你想关闭侧边栏或编辑你不需要的项目,请按照如下指南进行操作: 到WordPress仪表板中的“外观 - >窗口小部件”。 您可以使用拖放操作向侧边栏添加不同的“框”,或删除不需要的项目。

    7.5K3330

    如何搭建 WordPress 博客

    本指南将介绍通过腾讯云云服务器 CVM(以下简称 CVM)上安装的 WordPress 镜像来启动并运行一个网站。...部分设置完了,我们退出 MySQL 环境: exit 把上述的 DB 配置同步到 WordPress 的配置文件中,可参考下面的配置: 示例代码:/etc/wordpress/wp-config.php...将页面添加到菜单 如果您希望将新页面链接到导航栏: 点击“更新”,保存对页面所做的任何更改。 点击WordPress仪表盘中的外观->菜单。...找到您创建的页面,单击旁边的复选框,单击“添加到菜单”,将其添加到列表中。 添加和编辑帖子 如果您要在网站上搭建博客,那么您可能需要添加“帖子”的功能。您可以使用不同的类别来分组帖子。...如果你想关闭侧边栏或编辑你不需要的项目,请按照如下指南进行操作: 到WordPress仪表板中的“外观 - >窗口小部件”。 您可以使用拖放操作向侧边栏添加不同的“框”,或删除不需要的项目。

    1.8K40

    删除或失效WordPress文章中的图像大小属性

    认情况下,WordPress会将图像元素width和height属性添加到图像元素中。...从媒体库插入的图像中删除图像大小属性 删除图像大小属性可完全控制 CSS 属性,可将以下代码添加到主题 functions.php 文件中: /*** 移除图片高度和宽度属性从文章内容中的图片上*/ function...add_filter( 'post_thumbnail_html', 'salong_remove_image_size_attributes' ); // 从添加到WordPress文章的图像中删除图像大小属性...,此代码将从图像中去除图像大小属性,再添加图像到文章中。...通过 jQuery 删除width和height属性 对于已经添加到文章的图像,必须手动删除width和height属性,或者也可以使用一些jQuery代码来解决问题,以下代码添加到主题 js 文件中:

    2.5K40

    WordPress开发人员犯的12个最严重的错误

    我看到WordPress主题和插件,他们的资产目录中已经有WordPress核心文件(例如,jQuery或Color Picker))中的文件。...即使错误不直接影响功能,也会迫使您编写更好的代码并开发出更好的编码习惯。这发生在我身上 这也将确保您开发的插件或主题在任何WordPress安装中都不会生成PHP错误。...Git创建了改变的记录,并允许开发人员在同一个WordPress项目上一起工作,或者当网站出现问题时,轻松地恢复到以前的版本。...主题设置中设置了颜色,字体大小和元素间距等内容,然后将其保存在数据库中。...当然,该文件可以在浏览器中运行(虽然我确定打印时,甚至不会缩进或漂亮),但是如果您有本地的项目副本并浏览主题的代码,并且需要找到一个CSS或JavaScript语法(在使用script.php的情况下)

    2.9K10

    使WordPress达到最佳运行状态的13个技巧

    [转]使WordPress达到最佳运行状态的13个技巧 作者:matrix 被围观: 1,094 次 发布时间:2011-10-03 分类:Wordpress 兼容并蓄 | 无评论 » 这是一个创建于...升级到WordPress发布的最新版本 WordPress 2.7在运行方面比以往有了很大进步。 升级wordpress到最新版本之后你就可以体验到这一点了。 2....从PHPMyAdmin中修复并优化数据库 你可以一个星期登录一次PHPMyAdmin,优化自己的数据库。 定位你的WordPress数据库表,在复选框中选中所有表,选择“优化数据库表”选项进行修复。...插件还可以检查style.css文件并放入@import文件。 你还可以设置缓存过期时间。 你也可以在指定页面或文章中添加CSS文件,然后将所有CSS文件放进同一个文件。...12.显示页面加载次数和查询次数 将下面的代码添加到你的模板上就可以显示加载你的页面需要的时间和执行的sql查询次数了。 这个方法可以快速了解你的WordPress博客优化程度。

    1K30

    幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)

    今天介绍一个图片滑动幻灯片jQuery 插件,名字叫 Orbit,自定义功能很强大却是轻量级(仅仅4kb 左右)。接下来介绍一下并提供个添加到WordPress 主题的教程。 Orbit 简介 ?...插件官方主页:点击访问 演示页面:点击查看 幻灯片jQuery插件Orbit 集成到WordPress 主题教程 看官方,Orbit最新的版本(1.3.0)貌似集成到某个框架去了,我们可以使用旧版本(...下载所需要的文件:官方下载 百度网盘 下载解压后,将这个文件夹重命名为orbit,放到WordPress 主题目录下(当然,你可以自定义路径,以下以此为准)。...一、确保你的WordPress 主题已经加载jQuery 库,注意是要1.5.1 版本以上的。...幻灯片一般都是在首页加载的,对于WordPress 主题,可以通过if 语气判断是否在首页来写入html。 php if ( is_home() ){ ?

    2.4K100

    图片时载入的渐显特效JQuery

    图片时载入的渐显特效JQuery 作者:matrix 被围观: 4,685 次 发布时间:2011-10-01 分类:Wordpress 兼容并蓄 | 2 条评论 » 这是一个创建于 3987...Jquery.js 原理: 这个特效是少有的即华丽又加速的效果,因为它能判断访客是不是在查看当前图片,若非则加载预留的填充图片 grey.gif ,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载...shareid=1087994774&uk=3238236832 将压缩包内两文件,放到WordPress的某个目录,或者你直接在外站调用。...在当前主题的 header.php(或者在网站根目录的index.php中加载代码,我就是这样。...不知道是什么原因,在主题的header.php中无法加载) 中适当位置添加下面 JS调用代码: 【http://hhtjim.com/jquery.lazyload.js部分请自定义地址】 【("img

    16.7K20

    为 WordPress 增加按分类搜索功能并自定义外观

    如果用 WordPress 做一个小型门户网站,那么可能搜索增加需要“按分类搜索”的功能,这样可以快速搜索到指定分类的文章资讯。同时,我们还要进行外观的修饰,适应我们网站的整体风格。...那么思路比较明确,我们在评论模块表单中,增加一个 select 下拉选项,然后输出网站的分类目录让用户可以选择,之后提交给 index.php 就可以了。...这个地方用 jQuery 获取对应的 select 的内容也是可以实现的,但是直接用 php 感觉比较好一点,用 jQuery 操作,在没有加载完 js 的时候是不会生效的。...当我们点击下拉列表中的项目,jQuery 获取这个项目对应的列表 id ,然后让 select 选中这个 option,这样点击搜索之后,就把 select 的内容直接提交了。...//省略其他代码 var currentitem = $(this).attr('id'); $('#cat').val(currentitem); }); 此外,模拟下拉菜单还应该有类似:点击某项目自动添加到上面然后下拉框消失

    1.4K10

    WordPress 2.6 简体中文版发布

    本文由 WordPress 中文团队的 Leo 撰写。 WordPress 2.6 发布了。...WordPress 2.6 的主要改进有: 日志版本修订 tumblelog 样式的“快速发布”按钮 通过 Gears 缓存静态文件来加速后台的载入 一个全新改进的图片编辑对话框,能够提供对日志中图片进行大部分控制...键进行多选 升级到 TinyMCE 3.1.0.1 并修正了很多 bug 升级到 jQuery 1.2.6,使得性能上有很大的提升 jQuery UI 1.5 最后很多 bug 修正和性能提升...备份你修改过的文件,并上传新版本文件直接覆盖掉旧版本文件; 上传所有新文件; 在浏览器中打开 http://您博客地址/wp-admin/upgrade.php; 升级完成。...WordPress 中文团队再次感谢您的支持,希望您能继续反馈给我们中文包的建议和错误,让我们一起将 WordPress 中文做得更好!

    45030

    WordPress 函数:wp_enqueue_script() 安全引入 JS

    ​WordPress 主题最佳引用 js 文件的方法是使用 WordPress 内置的 wp_enqueue_script() 函数,通过该函数可以安全地将javascript 代码加入到 WordPress...创建的页面中,不仅可以最大限度地保证兼容性,还是提高 WordPress 性能效率的一个方法。...(WP模板路径相关的函数中,通常带有template的是指parent theme,带有stylesheet的指向child theme) $deps – 依赖关系,加载的js文件所依存的其它js的标识字串数组...(array:string),即需要在本代码之前加载的代码的名称 (如js脚本依赖jquery库,那么这里要用数组的形式写上jquery),非必需。...'/js/jquery.min.js' ); } add_action('admin_head', 'admin_jscss'); ?>

    84820
    领券