wordpress home.php,WordPress主题通过function.php来加载js和css文件

WordPress主题开发的时候可以直接将需要的js或css写在head标签中，但是现在已经不主张这种加载方式了，现在WordPress主题通过function.php来加载js和css文件。

基本架构

//加载css及js

function wpdie_add_scripts() {

wp_enqueue_style('style', get_template_directory_uri() . '/style.css');

$jq = get_template_directory_uri() . '/js/jquery.min.js';

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', $jq );

wp_enqueue_script( 'jquery' );

//在文章页加载prism.css

if(is_single()){

wp_enqueue_style('prism', get_template_directory_uri() . '/css/prism.css');

}

//在底部加载js，注意true。留空就在头部

wp_register_script( 'aosjs', get_template_directory_uri() . '/js/aos.js', array('jquery'), '' );

wp_enqueue_script( 'aosjs',false,array(),'',true );

wp_enqueue_style('fa', get_template_directory_uri() . '/css/font-awesome/font-awesome.css');

}

add_action('wp_enqueue_scripts', 'wpdie_add_scripts');

有两种常用的 add_action 钩子可以加载脚本和CSS到WordPress：

init：确保始终为您的网站头部加载脚本和CSS(如果使用home.php，index.php或一个模板文件)，以及其他“前端”文章、页面和模板样式。

wp_enqueue_scripts：“适当”的钩子方法，并不总是有效的，根据你的WordPress设置。

注意事项

使用这种方式加载css和js时，你会发现每个文件后面都暴露了你所使用的wordpress程序版本号。讲道理，这个东西为了安全是需要屏蔽掉的。看方法：

function wpdie_remove_cssjs_ver( $src ) {

if( strpos( $src, 'ver=' ) )

$src = remove_query_arg( 'ver', $src );

return $src;

}

add_filter( 'style_loader_src', 'wpdie_remove_cssjs_ver', 999 );

add_filter( 'script_loader_src', 'wpdie_remove_cssjs_ver', 999 );

通过如上代码，不仅将css和js正确加载了。

除此之外，你还需要注意的是，这种方法需要你的head标签里包括<?php wp_head();?>，底部的body尾标签前有 <?php wp_footer(); ?> 这样的函数才可以哦。

wordpress home.php,WordPress主题通过function.php来加载js和css文件相关推荐

wordpress 常见代码文章外链加上nofollow移除多余加载JS和CSS代码等
//文章外链加上nofollow add_filter('the_content','link_jump',999); function link_jump($content){ preg_m ...
正确加载 Javascript 和 CSS 到 WordPress
2019独角兽企业重金招聘Python工程师标准>>> 有两种常用的 add_action 钩子可以加载脚本和CSS到WordPress: init: 确保始终为您的网站头部加载脚 ...
ajax css文件,wordpress 添加JS，css文件，实现AJAX效果
一,我的问题我想在wordpress里面添加一个JS文件,实现在一个ajax效果,我在网上找了一个插件,AJAX wordpress发现在不好用,就没有用了.下面我就以本BLOG里面的,收藏和分享为 ...
Hexo博客Next6.0版本主题配置（背景图片加载、侧边栏社交小图标设置、设置网站图标）
随机背景图片加载原理自动更换背景是修改添加背景的css样式实现图片来源 https://source.unsplash.com/ 修改背景样式修改themes\next\source\css\ ...
wordpress函数手册_WordPress主题开发手册
functions.php文件是您为 WordPress 主题添加功能的唯一位置.您可以在其中把自定义功能挂载到 WordPress 的核心功能上,使您的主题更加模块化.更具扩展性.功能更加丰富. 什 ...
插件合并css,介绍几个JS和CSS压缩合并插件—冠朔wordpress插件
由于添加各种功能的代码和JS 和CSS 压缩合并插件,方便初学者进行优化. Better WordPress Minify Better WordPress Minify 是将Minify引擎集成到w ...
android系统加载主题的流程,详解Android布局加载流程源码
一.首先看布局层次看这么几张图我们会发现DecorView里面包裹的内容可能会随着不同的情况而变化,但是在Decor之前的层次关系都是固定的.即Activity包裹PhoneWindow,Phon ...
一款简约WordPress Qui-Pure博客主题,自媒体模板
主题介绍 Qui-Pure是QUX轻设计/七娃博客开发的第一款主题:纯文本展示博客类型,主旨:简约至上 WordPress Qui-Pure主题主题功能可自定义Logo/顶部图像允许主题自定义主 ...
WordPress一点优化企业主题模板制作教程
2.添加主题版权信息: Theme Name: WP一点优化主题 Theme URI: http://www.seoyh.net Description:这是我们做的第一个企业主题哦 Author: ...

wordpress home.php,WordPress主题通过function.php来加载js和css文件

wordpress home.php,WordPress主题通过function.php来加载js和css文件相关推荐

最新文章

热门文章