Wordpress外部资源导入

Leonardo-

已于 2024-06-15 12:06:14 修改

阅读量194

点赞数 2

分类专栏： wordpress主题开发文章标签：前端

于 2024-06-14 15:21:31 首次发布

本文链接：https://blog.csdn.net/m0_50638313/article/details/139681892

版权

wordpress主题开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在进行wordpress主题开发时遇到问题。网站拥有多个页面，每个页面是一个单独的文件，而编写网站时需要导入js和css的文件，全都用link和script标签导入费时且不好维护，那么怎么样一次导入全局能用呢？

在header.php文件中导入

因为网站的每个页面都是需要使用header的，所以在header文件中导入可以全局使用，另外可以在function.php中写成函数的形式。

<?php
if(!defined('ASSSET_URL'))define('ASSET_URL',get_template_directory_uri().'/asset');
if(!defined('IMAGE_URL'))define('IMAGE_URL',get_template_directory_uri().'/image');

function init_assets(){
    echo '<link rel="stylesheet" href="'.ASSET_URL.'/lib/css/bootstrap.min.css"></link>
    <script type="text/javascript" src="'.ASSET_URL.'/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="'.ASSET_URL.'/lib/js/bootstrap.min.js"></script>';
}

add_action('wp_head','init_assets');
?>

但是WordPress 不能确定是否在在页面加载了JS，Css文件，如果另一个插件使用相同的JS，Css文件，就无法检查JS，Css文件是否已经被包含在页面中。然后插件第二次加载同一个文件，造成重复的代码，响应速度变慢。

引入WordPress优化解决方案：注册和排队

在wp_register_style函数中注册

wp_register_style(
    'my-bootstrap-extension', // 名称
    get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 样式表的路径
    array( 'bootstrap-main' ), // 依存的其他样式表
    '1.2', // 版本号
    'screen', // CSS 媒体类型
);

或者

<?php
function my_enqueue_scripts() {
if( !is_admin ) { // 前台加载的脚本与样式表
// 去除已注册的 jquery 脚本
wp_deregister_script( 'jquery' );
// 注册 jquery 脚本
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.0', false );
// 提交加载 jquery 脚本
wp_enqueue_script( 'jquery' );
 } 
} 
// 添加回调函数到 init 动作上
add_action( 'init', 'my_enqueue_scripts' );
?>