wordpress中使用bootstrap遇到的第一个问题

css和js文件加载,记录一下,以后备用

  1. 因为你所写的html会经过php的再次渲染,所以直接引用无效,可以使用以下的办法.css引用如下
header.php 文件中加入 也就是你原先写link引入的地方
 <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">  //你可以理解成预占位 也可以理解为 PHP的echo 输出
 之后再styl.css中加入代码
 @import url('bootstrap/dist/css/bootstrap.css'); 
@import url('css/header.css'); //需要引入几个css就写几个

  1. js文件加载如下
header.php 文件中加入 也就是你原先写link引入的地方
   <?php wp_enqueue_script("jquery"); ?> //加载wordpress中原先就有的jquery脚本
    <?php wp_head(); ?>//你可以理解成预占位 也可以理解为 PHP的echo 输出

在index.php 文件的同级 创建 functions.php
在functions.php中写上如下代码

function wpbootstrap_scripts_with_jquery() //这个函数名称是自定义的
{
	// Register the script like this for a theme:
	//wp_register_script  wp提供的注册一个新脚本函数,第一参新脚本名称,
	//第二参,新脚本路径,第三参,依赖于哪个脚本,那么就将在依赖脚本之后加载
    wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/dist/js/bootstrap.js', array( 'jquery' ) );
    wp_register_script( 'zqhead-script', get_template_directory_uri() . '/js/header.js');
    
	// For either a plugin or a theme, you can then enqueue the script:
	//使用 wp_enqueue_scripts 仅仅只会在前台加载脚本和CSS
    wp_enqueue_script( 'custom-script' );
    wp_enqueue_script( 'zqhead-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>
    
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

写前端的红中

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值