在创建主题时,当你将文件主题启用后,你会发现页面中的所有css/js代码加载失败,如下图所示。这是由于wordpress本身加载样式表/js文件有它自己的规则。 下面WP花园洋葱将带领大家使用标准的WordPress方法加载脚本和样式表。

向WordPress添加脚本和样式非常简单。你将创建一个排列所有脚本和样式的函数,当插入脚本或样式表时,WordPress会创建一个路径来找到您的文件和它可能有的依赖项(比如JQuery),然后插入您的脚本和样式表。

 

1. 引入函数

 

wordpress为主题添加脚本和样式的正确方法是将它们放入functions.php文件。如没有该文件,请创建一个functions.php文件。

引入必要的css和js文件的格式为

add_action(‘wp_enqueue_scripts’, ‘wphy_script_style’);

function wphy_script_style()
{

//引入css/js文件路径

}

 

2.加载css样式表 / JS文件

 

一般情况下使用wp_enqueue_script()或wp_enqueue_style()来链接脚本或样式

js

wp_enqueue_script(‘html5‘,get_theme_file_uri(‘/assets/js/html5.js),array(),’3.7.3′);

 

这里的site为js文件的名称

后面为填写js的链接位置

这里的含义为查找名为”html5”的js文件并加载它。

 

css

wp_enqueue_style(‘site‘, get_template_directory_uri() . ‘/css/site.css‘, array() , ‘1.0’);

 

 

这里的site为css文件的名称

后面为填写css的链接位置

这里的含义为查找名为”site”的样式表并加载它。

 

3.引入基本格式

 

引入css文件的基本格式为

 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

 

以下是可选的参数:

  • $handle是样式表的名称
  • $src是它所在的位置。其余参数可选
  • $deps是指这个样式表是否依赖于另一个样式表,这样要先加载其依赖样式表
  • $ver设置版本号
  • $media可以指定加载此样式表的媒体类型

 

引入js文件的基本格式为

 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

 

*推荐使用wp_enqueue_script(),这样有利于加载和缓存,类似于wp_enqueue_style()的语法。

 

  • $handle是样式表的名称
  • $src是它所在的位置。其余参数可选
  • $deps是一个数组,可以处理您的依赖脚本,比如JQuery
  • $ver设置版本号
  • $in_footer是一个布尔参数(true/false),允许您将脚本放置在HTML文档的页脚中,而不是标题中,以免延迟加载

 

 

4.引入案例

 

将所有的脚本和样式表组合成一个函数,然后使用wp_enqueue_scripts调用它们

 

add_action('wp_enqueue_script','wphy_script_style');

function wphy_script_style(){

    wp_enqueue_style('wphy-style',get_stylesheet_uri());

    wp_enqueue_style('wphy',get_template_directory_uri().'/wphy.css',array(),'1.0');

    wp_enqueue_style('alicknav',get_template_directory_uri().'/css/alicknav.min.css',array(),'1.0');

    wp_enqueue_style('owl',get_template_directory_uri().'/css/owl.theme.css',array(),'1.0');

    wp_enqueue_style(carousel',get_template_directory_uri().'/css/owl.carousel.css',array(),'1.0');

    wp_enqueue_script('wphy-min-js',get_template_directory_uri().'/script.min.js',array('jquery'),'1.0.0',true);

}

 

专业网站开发网页设计公司

深度阅读:

WordPress主题制作教程2.4-WordPress主题功能 许多wordpress新手在进行wordpress主题制作时总会遇到这样的问题,什么是WordPress主题功能,怎样去修改它。functions.php文件是您向WordPress主题添加功能的地方。它用于连接WordPress的核心功能,使您的主题更具模块化,扩展性和功能性。如果你想学习...
如何处理wordpress中JavaScript文件冲突问题 在编写WordPress主题中,如果第三方提供的HTML/JS/CSS文章中,包含了很多.js文件,在引入这些JavaScript文件过程中会这样那样的错误,比如什么“$ is not a function”之类的,这时候可以通过以下方式来一一排查。 1.正确在functi...
WordPress主题制作开发实战教程5 – 调试和验证 在主题制作过程中,我们可能会出现许多的错误。所以我们需要反复调试,直到达到我们所满意的效果。本章节我们将学习调试和验证的方法及调试工具。工作流程在文件中添加一些代码 在浏览器上查看是否美观 在不同的浏览器上验证 如果没完成则修改代码直至完成 完成则...
wordpress主题制作开发实战教程3.8 – 新建Header.php文件 新建Header.php文件 1.在主题下创建一个名为Header.php的文件2.打开你的Index.php文件,剪切
标签或
WordPress主题制作教程2.1-WordPress分类目录 WordPress中有很多不同类型的内容,除了默认的Post Types之外,您还可以创建自定义分类目录,所有分类目录存储在同一个地方,在wp_posts数据库表。    默认分类目录  有五种默认的Post Types可供用户使用或或者WordPress安...
WordPress主题制作教程2.3-WordPress 模板标签 主题中使用模板标签从数据库中检索内容,内容可以是博客标题或侧边栏的内容。模板标签是将内容放入主题的首选方法,因为:他们可以打印动态内容; 他们可以用于多个主题文件; 他们可以将主题分为更小,更易理解的部分。    什么是模板标签?  ...
wordpress主题制作开发实战教程3.12 – 创建一个page.php模板页面 创建一个page.php模板页面我们通过复制index.php文件来创建page.php文件,并作出一些调整1.创建一个php文件,命名为page.php2.复制index.php文件的所有php代码至page.php文件中3.在page.php中,找到并删除关于Th...
wordpress的网站设置与插件及主题之间的联系 许多wordpress站长在开发网站的初期会使用多个主题并来回切换,选择其中较好的风格样式锁定主题。但在网站设计开发过程中,突然反悔,临时想换一个主题进行开发,这样的情况并不少见。但一个wordpress站点只能使用一种主题。如果随意切换其他主题是否站点中的设置和数据就都消失了呢,答案是并不尽然。那...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.