当我试图将静态HTML页面转换为Wordpress主题时,我遇到了一个问题。检查Google Chrome控制台后,该页面无法正常运行。结果表明,该页面加载的CSS文件路径错误
它加载网站/css/样式。cssand网站/css/style桌面。css
下面是我如何从标题导入样式表的。php
<link rel="stylesheet" href="<?php bloginfo( \'template_directory\' ); ?>/css/skel.css" />
<link rel="stylesheet" href="<?php bloginfo( \'template_directory\' ); ?>/css/style.css" />
<link rel="stylesheet" href="<?php bloginfo( \'template_directory\' ); ?>/css/style-desktop.css" />
<link rel="stylesheet" href="<?php bloginfo( \'template_directory\' ); ?>/css/style-noscript.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo( \'template_directory\' ); ?>/css/ie/v8.css" /><![endif]-->
<!--[if lte IE 8]><script src="<?php bloginfo( \'template_directory\' ); ?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php bloginfo( \'template_directory\' ); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo( \'template_directory\' ); ?>/js/skel.min.js"></script>
<script src="<?php bloginfo( \'template_directory\' ); ?>/js/init.js"></script>
它应该得到网站样式表。com/wp内容/主题/主题名/css/样式。css
我不确定是否有什么我应该写在函数中。php
UPDATE1:
结果是其中一个JS文件直接加载CSS文件,所以我不得不更改CSS文件的路径
CSS看起来不错,但主题中存在一些冲突。
最合适的回答,由SO网友:user3325126 整理而成
如上所述,您应该在函数中这样排列样式表。主题中的php:
function adds_to_the_head() { // Our own unique function called adds_to_the_head
wp_register_style( \'custom-style-css\', get_stylesheet_directory_uri() . \'/css/styles.css\',\'\',\'\', \'screen\' ); // Register style.css
wp_enqueue_style( \'custom-style-css\' ); // Enqueue our stylesheet
}
add_action( \'wp_enqueue_scripts\', \'adds_to_the_head\' );
SO网友:Abdus Salam
你可以用这种方式。它也是标准的
/**
* Enqueue scripts and styles.
*/
function test_name_scripts() {
wp_enqueue_style( \'test-name-style\', get_stylesheet_uri() );
wp_enqueue_script( \'test-name-navigation\', get_template_directory_uri() . \'/js/navigation.js\', array(), \'20151215\', true );
wp_enqueue_script( \'test-name-skip-link-focus-fix\', get_template_directory_uri() . \'/js/skip-link-focus-fix.js\', array(), \'20151215\', true );
if ( is_singular() && comments_open() && get_option( \'thread_comments\' ) ) {
wp_enqueue_script( \'comment-reply\' );
}
}
add_action( \'wp_enqueue_scripts\', \'test_name_scripts\' );
并遵循本教程:
https://developer.wordpress.org/themes/basics/including-css-javascript/