首页
学习
活动
专区
圈层
工具
发布

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

在开发 WordPress 插件或者是制作 WordPress 主题的时候,都会引用一些 JavaScript 和 CSS 脚本资源。...显然,使用 WordPress 内置的方法引用,更专业更具有可扩展性一些。 有缺陷的引用方法 下面是两种常见的引用方法,并没有错,只是说不完善或者不合理。...WordPress 的排队引用(Enqueue Scripts)资源机制 在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序的意思...此外,WordPress 中内置了一些常用的库(例如 jQuery、jQuery UI 等),我们可以使用 wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范。...可以使用 get_template_directory_uri 这个函数来获取当前主题的目录,如果你使用的是子主题,那么需要使用 get_stylesheet_directory_uri 这个函数来获取父主题的目录从而得到对应资源

1.7K40

get_template_part()调用自定义模板|wordpress函数

我们在用wordpress开发主题的时候,可能需要调用一段固定的代码比如左侧菜单,这段代码会在主页、栏目页、文章页用到,如果直接写入每个页面模板是没有问题,但是如果要改左侧菜单一个链接那就要改三次,...可以的,我们知道php可以用include和require引入,在wordpress中已经有定义了get_template_part()函数,具有相同的作用。...php get_template_part( 'partials/content', 'page' ); ?>   5、(1的延伸)使用 loop.php 在子主题里面。...> php 的require()函数将按下面优先级包含文件 1. wp-content/themes/twentytenchild/loop-index.php 2. wp-content/themes...参考资料:http://codex.wordpress.org/Function_Reference/get_template_part

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

    在WordPress中添加简书风格的连载目录和文章导航

    需求 自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。...具体针对我的需求,我只想在符合特定条件的情况下才显示前后页链接,所以还需要做一些条件判断,具体后面再说。...目录弹出框其实就是个很常见的modal(模态)框: 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。...我仔细看了下Genesis Sample的demo示例中貌似是没有自带这个效果的,所以这个需要自己实现一下。方法挺多,用纯CSS也可以,用jQuery也可以,用Vue.js也可以。...纯CSS太难为我了,CSS对我来说都是黑魔法,想想就是一件很痛苦的事,放弃。用Vue.js也是可以的,但本次还是决定使用WordPress自带的jQuery。

    2.3K20

    WordPress主题推荐

    作为网站的基础,WordPress主题对网站加载速度具有重要影响。一个设计不好,代码杂乱的WordPress主题会严重影响网站加载速度,进而影响网站排名。...考虑到谷歌使用移动优先算法来确定其结果的优先级,移动设计尤其重要。另外,请记住评估主题开发人员提供的支持级别。毕竟,在构建网站时遇到任何问题时,支持至关重要。...Astra的主要特点Google页面加载时间快,仅为0.4秒页面大小仅为50KB无需jQuery,仅使用纯JavaScript自托管Google字体优化的WordPress代码Astra主题的主要关注点是性能...它之所以成为市场上最快的主题之一,是因为它独立于jQuery等外部依赖项。其代码专门优化用于WordPress,因此它是启动网站的强大引擎,速度快如闪电。...如果你希望使用其中任何一个主题,只需在WordPress中打开主题区域,然后点击上传主题即可轻松安装。

    49900

    WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度

    博客 支持一键将文章中图片下载到 WordPress 媒体库 搜索优化 支持限制和关闭搜索的 WordPress 插件 编辑器优化 优化 WordPress 传统的 TinyMCE 编辑器 添加下划线等按钮...,支持截屏贴图等 标题设置 一键设置 WordPress 所有页面的页面标题 登录优化 一键优化 WordPress 登录注册界面,并支持第三方账号登录和绑定 内容模板 通过短代码在内容中插入一段共用的内容模板...图片分类限制为二级 3. 取消图片编辑入口 4. 附件页面直接图片链接。 配置器 全自动 WordPress 配置器,不用一行代码就可以开发。...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论中的外部链接加上安全提示的中间页。...格式文章 在 WordPress 实现真正的文章格式 草稿分享 一键生成草稿临时分享链接 并可设置分享链接的有效期 文章专题 设置文章专题,并在文章末尾显示一个文章专题列表。

    7.5K30

    php基础(一)

    global 关键字,引用全局变量,wordpress中大量用到,如面向过程开发。...static 静态方法,是类的成员方法,但不需要实例化类可直接使用 $GLOBAL 在函数内使用具有全局作用域的变量,如$GLOBAL['a'] 2.子类重写父类的 protected 方法有什么限制?...用例子说明,以 Laravel 框架中的控制器作为说明 ①final修饰的类方法不可被子类重写 ②PHP是否重写父类方法只会根据方法名是否一致判断(5.3以后重写父类方法参数个数必须一致) ③重写时访问级别只可以等于或者宽松于父类...第一种慢的原因:在于 jQuery 内部使用各种选择器链条的选择顺序是从右到左,所以这条语句是先选.abc,然后再一个个过滤出父元素#content,这导致它慢很多。...$(this) 和 this 关键字在 jQuery 中有何不同? 一个是jquery对象,一个是js的属性 5.jsonp 和 iframe 跨域访问原理是什么?

    2.6K20

    WordPress主题制作:开始前的准备

    ,特别是在父主题更新之后,所以开始想着从头开始,自己制作一款主题吧。...在初步阅读了WordPress主题制作相关文档之后,我就开始了我的主题制作旅程,在这里,我将记录下我的制作过程,希望对后来者有所帮助。...申明 本次主题制作会参考各大主题的部分实现方法和样式设计(最终产出一款适合我自己的主题),本次制作的主题暂时不考虑引入前端框架,但会引入一些插件,因为插件的引入可能导致页面请求数增加,我会在主题选项中尽可能的提供配置开关来让您可以选择性的开启一些功能...如果您想跟着我一起制作一款适合自己的主题,那么您需要先掌握以下技能 熟悉HTML、CSS、JS或Jquery 熟悉PHP(嗯,这个是必须的,毕竟WP是基于PHP的博客系统呢) 开始制作主题之前,您必须准备好以下工具...注意:在 WordPress,page(页面)和 Page(静态页面)是两种不同的东西。

    93230

    新鲜出炉! Web开发人员必备资源

    其中包括一个着陆页设计资源、两种降低屏幕刺眼程度的方法、一个用来实现拖曳网页布局的插件、一个用于整理date-picker的jQuery插件,以及许多为开发人员提供帮助的JavaScript库。 ?...其中包括一个着陆页设计资源、两种降低屏幕刺眼程度的方法、一个用来实现拖曳网页布局的插件、一个用于整理date-picker的jQuery插件,以及许多为开发人员提供帮助的JavaScript库。...文章还包含了一些HTTP2、排版术语、开发具有辅助特性网站的资源,以及一个用来查询变成语言句法的搜索引擎。...ButterBean ButterBean是一个新出现的精密插件,它可以让你在WordPress中建立Meta Box。...它在开发过程中遵循了现在的WordPress Customizer API架构。它能让WordPress admin UI的开发变得更优雅。 ?

    1.2K80

    续:WordPress 文章图片部署真正的懒加载(Lazy Load)

    几天前分享了《WordPress 中部署真正的懒加载(Lazy Load)》一文,教会了大家在WordPress 中的两个地方部署懒加载:缩略图、头像图片。...今天则深入一点,是对在文章页的图片部署懒加载(Lazy Load)。 文章页的图片部署懒加载,手动修改代码?...="img/example.jpg" width="640" heigh="480"> 对于文章页的图片,我们在编辑的时候常常是在可视化编辑器中插入图片的,按照传统的方法,要部署懒加载,必须切换到html...我们可以利用正则表达式+WordPress 强大的过滤器机制,自动替换img 标签的代码。 解放双手,真正的懒加载来也!...(虽然是英文,但很简单),在此不累赘~ 相应的,懒加载(Lazy Load)的激活代码最好修改为以下: jQuery("img").lazyload({ .............

    1.4K80

    WordPress 评论显示IP归属地

    很不幸的是我目前使用的主体,在comments文件中很难定位评论生成的位置,我又不想去找各种回调在修改。于是就想着用偷懒的办法。...现在就可以正常的显示归属地信息: 4. 浏览器信息,操作系统信息在WP-UserAgent插件的设置功能中修改即可,后台也可以显示归属地等相关信息。...PS:建议修改之前先备份插件,修改过程中如果出错可以直接恢复。...其他的一些相关资源: Wordpress 分词搜索,去掉Buddy Press侧边栏,404页面支持显示关联主题 https://github.com/obaby/baby-word-press...---- 分享文章: 相关文章: WordPress 中文分词搜索 WordPress 优化404页面 WordPress jQuery隐藏侧边栏 WordPress 开启Gzip压缩 WordPress

    72620

    WordPress Ajax 异步加载 自定义评论表情

    注意: 在开始本教程前请确保你已经看过《WordPress中添加自定义评论表情包的方法(附三套表情包下载)》原文并在你的主题上实现该功能,要求下载的smilies[devework.com].zip文件在这里有用...WordPress Ajax 异步加载 自定义评论表情教程: 一、删除你主题上来自于《WordPress中添加自定义评论表情包的方法(附三套表情包下载)》一文的所有代码(重要!)...; 二、确保你的主题已经加载了jquery.js文件(具体都应该懂的吧,不懂留言~)。...(sresponse).html(data); } }); return false; }); }) 在主题的footer.php的前加入以下代码,使主题在单页时候加载: 在主题的 functions.php文件中包括进去该文件: include(TEMPLATEPATH .'

    1.9K91

    WordPress 5.7 新增的文章相关函数

    WordPress 5.7 增加几个文章相关的函数,可能对于主题和插件开发可能会使用比较高,所以下面统一介绍一下: 文章父级相关的模板函数 WordPress 5.7 新增了两个和文章父级相关的函数,一个是判断当前文章是否有父级...get_post_parent get_post_parent 函数用来获取文章父级的对象,只支持一个参数,文章 ID 或者 WP_Post 对象,默认情况不传递则为全局的 $post ,返回父级的对象...has_post_parent has_post_parent 函数用来判断当前文章是否有父级,的参数和 get_post_parent() 一样,它返回 true 如果存在,否则 false。...下面是一个使用文章父级模板函数的例子: get_the_ID() ) ) : ?> 父级页面:'. get_the_title( get_post_parent( get_the_ID() ) ) ); ?> <?

    44710

    最近在 WPJAM Basic 中定义的几个函数,大家也可以用用

    今天总结一下最近在 WPJAM Basic 中定义的几个函数,如果你有相似的需求,那么在安装 WPJAM Basic 之后就可以直接使用: function_alias 在 PHP 中自定义 function_alias...WordPress 中实现 PHP 版本的 wrap 函数 jQuery 有个 wrap 函数,可以使用指定的 HTML 元素来包裹每个被选元素,这个是 PHP 版本。...}); } } wpjam_ob_get_contents WordPress 中一行代码即可控制函数的输出并存到变量中 这是一个高阶函数,只要传递函数名和参数,程序就会自动获取输出的值,不用再写...如何在回调函数中获取 WordPress 接口的当前优先级 用于如何获取 Hook 优先级,一般情况下这个函数用不到,但是一些很特殊的情况下需要用到,如果用到了,就对你有很大的帮助。...wpjam_call_method 没想到吧,PHP 中在类的外部也可以调用私有方法! 通过获取 class 私有方法的反射,然后获取其闭包,最后使用回调的方式来调用。 ----

    50130

    用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

    需求 昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。...方法还是有挺多的,很多JavaScript的库都可以实现这个功能,但是因为WordPress里已经自动加载了jQuery了,所以就不想再引入其他库了,而且这个需求也很简单,用jQuery就足够了。...第一步 原作者一共写了15篇,这是定死了的, 只需要获取到我已经在丘壑博客上翻译了几篇就可以了,除以总数15篇就得到了百分比。...写CSS是我的弱项,所以我就选择了Bootstrap,完整版的太臃肿了,包含了太多不需要的东西,完整引入也有可能会把现有主题搞乱,所以在 Bootstrap官网上定制化下载了一个最简版的,只包含alert...); }; genesis(); 最终效果在这里 神级 WordPress 主题框架 Genesis 从入门到精通 结语 不知不觉都已经翻译一大半了,60%了才想起来做个进度表?

    1.9K40

    wordpress 学习笔记 (二)

    the_xxx 可以直接输出, get_the_xxx 不能直接输出 WordPress的函数中,the开头的基本都是直接输出内容,get开头是获取内容。...() 16.获取文章所属的分类目录信息(the_category) wp模板标签the_category用于在文章页或归档页的文章列表中输出当前文章所属分类, 即使有多个分类也会一并输出。...② $parents 字符串值,默认为空 指定父分类的显示方式,可选值如下: 空值:不输出父分类; multiple:父分类和子分类都是单独的链接,但处于同一个li元素中; single:不输出父分类链接...,但父分类的名称会出现在子分类链接锚文本中; ③ $post_id 整数型,默认值:false 文章的ID,默认使用当前文章ID。...获取文章所属的标签信息(tags) wp模板标签the_tags用于在文章页输出标签链接 函数参数 ① $before 字符串值,默认值:null 在标签链接 前 显示的文本。

    1.3K20
    领券