在WordPress中正确排列脚本和样式

在WordPress中正确排列脚本和样式,wordpress,Wordpress,这是一项简单的任务,但我失败了:( 在HTML模板中,我将在head部分执行以下操作: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

这是一项简单的任务,但我失败了:(

在HTML模板中,我将在head部分执行以下操作:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mdb.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

请尝试下面的代码可能对你有用

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {

  wp_enqueue_style( 'google-styles','https://fonts.googleapis.com/icon?family=Material+Icons' );
  wp_enqueue_style( 'font-awesome-css','https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
  wp_enqueue_style( 'bootstrap-min-css',get_template_directory_uri() . '/css/bootstrap.min.css' );
  wp_enqueue_style( 'mdb-css',get_template_directory_uri() . '/css/mdb.css' );
  wp_enqueue_style( 'style-css',get_template_directory_uri() . '/css/style.css' );
  wp_enqueue_script( 'jquery-script', get_template_directory_uri() . '/js/jquery.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'mdb-script', get_template_directory_uri() . '/js/mdb.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

尝试一下,如果有任何疑问,请告诉我。

请尝试下面的代码,可能对您有用

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {

  wp_enqueue_style( 'google-styles','https://fonts.googleapis.com/icon?family=Material+Icons' );
  wp_enqueue_style( 'font-awesome-css','https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
  wp_enqueue_style( 'bootstrap-min-css',get_template_directory_uri() . '/css/bootstrap.min.css' );
  wp_enqueue_style( 'mdb-css',get_template_directory_uri() . '/css/mdb.css' );
  wp_enqueue_style( 'style-css',get_template_directory_uri() . '/css/style.css' );
  wp_enqueue_script( 'jquery-script', get_template_directory_uri() . '/js/jquery.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'mdb-script', get_template_directory_uri() . '/js/mdb.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

尝试一下,如果有任何查询,请告诉我。

您必须使用
get\u template\u directory\u uri()
编写完整路径。因此您的头代码需要替换为以下代码。然后检查

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" />

<link href="<?php echo get_template_directory_uri(); ?>/css/mdb.css" rel="stylesheet" />

<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" />

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/mdb.js"></script>


您必须使用
get\u template\u directory\u uri()
编写完整路径。因此您的头代码需要替换为以下代码。然后检查

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" />

<link href="<?php echo get_template_directory_uri(); ?>/css/mdb.css" rel="stylesheet" />

<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" />

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/mdb.js"></script>


请编辑您的问题并显示您尝试编写的函数…我使用了默认的WordPress enqueue_样式和enqueue_脚本,这里没有什么要说的。问题是,需要将上述脚本和样式添加到WP functions.php中的确切程度。无论如何,我添加了代码…请编辑您的问题并显示函数你已经试过写了…我使用了默认的WordPress enqueue_样式和enqueue_脚本,这里没有什么要说的。问题是,上面的脚本和样式需要添加到WP functions.php中有多精确。无论如何,我添加了代码。。。