[英]Wordpress not working after adding style.css
我一直试图找到这一段时间的解决方案现在没有运气......我忙于为WordPress自定义主题按照这篇文章 。 像get_header()这样的html和php钩子工作正常,但是当我尝试添加style.css时,它不起作用,并且“演示主题”卡在loading。卡上。但是,当我删除它时,它可以正常工作,但是css不会加载style.css文件中的文件。 这些是我想加载到页面中的CSS文件。
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/style.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/dark.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/animate.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/responsive.css" type="text/css" />
我如何将所有这些CSS文件正确加载到WordPress页面中。 谢谢! 我目前正在使用以下代码
define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');
// ENQUEUE STYLES
function enqueue_styles() {
/** REGISTER css**/
wp_register_style( 'bootstrap', THEME_DIR . '/css/bootstrap.css', array(), '1', 'all' );
wp_register_style( 'dark', THEME_DIR . '/css/dark.css', array(), '1', 'all' );
wp_register_style( 'font-icons', THEME_DIR . '/css/font-icons.css', array(), '1', 'all' );
wp_register_style( 'animate', THEME_DIR . '/css/animate.css', array(), '1', 'all' );
wp_register_style( 'magnific-popup', THEME_DIR . '/css/magnific-popup.css', array(), '1', 'all' );
wp_register_style( 'responsive', THEME_DIR . '/css/responsive.css', array(), '1', 'all' );
//wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all' );
/** ENQUEUE css**/
wp_enqueue_style( 'bootstrap' );
wp_enqueue_style( 'dark' );
wp_enqueue_style( 'font-icons' );
wp_enqueue_style( 'animate' );
wp_enqueue_style( 'magnific-popup' );
wp_enqueue_style( 'responsive' );
//wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
// ENQUEUE SCRIPTS
function enqueue_scripts() {
wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
但这是行不通的...我还检查了我的头文件中是否存在wp_head(),并且所有的php都在正常工作??? 只要我添加style.css,它就会在加载时卡住
您不应该在WordPress模板中直接包含CSS和JS文件。 相反,您应该通过wp_enqueue_style()
它们正确入队(在functions.php中 wp_enqueue_style()
:
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
通常,最好将唯一的名称用于样式表句柄(请参阅参考资料 )。 我无法重新创建该错误,但是您可以尝试更改
wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all' );
至
wp_register_style( 'unique-name-style', THEME_DIR . '/style.css', array(), '1', 'all' );
和
wp_enqueue_style( 'style' );
至
wp_enqueue_style( 'unique-name-style' );
在默认主题二十一十五中查找functions.php。 可能会想到:
<?php /**
* Enqueue scripts and styles.
*
* @since Twenty Fifteen 1.0
*/
function twentyfifteen_scripts() {
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );
// Add Genericons, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
// Load the Internet Explorer 7 specific stylesheet.
wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );
wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
}
wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
'expand' => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
?>
特别是,如果您有一个使用该样式的文件,请默认连接它:
// Load our main stylesheet.
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
因此,它将连接到您主题的style.css的根目录中
请在主题的functions.php文件中使用此代码
function theme_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('respond', get_template_directory_uri()."/js/custom.js", '', null, true );
wp_enqueue_style ( "theme", get_bloginfo('stylesheet_url'), '', null );
wp_enqueue_style ( "bootstrap", get_template_directory_uri()."/css/custom.css", '', null );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
没有包含style.css
或卡在backgroung背景色上。 使用1.0.0
,否则它将被认为是bool语句。
更改
wp_register_style( 'dark', THEME_DIR . '/css/dark.css', array(), '1', 'all' );
至
wp_register_style( 'dark', THEME_DIR . '/css/dark.css', array(), '1.0.0', 'all' );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.