logo标签列表

如何在WordPress的header.php文件中正确链接CSS？

phphtmlcsswordpress
10

我一直在尝试创建一个WordPress主题，但在header.php中链接style.css似乎不起作用，标题栏就是没有出现。我试了超过30个代码，包括WordPress和其他人提供的相似错误的解决方案，但似乎这些解决方案都已经过时。

<link href="<?php bloginfo('stylesheet_url'); ?>" rel = "stylesheet">

这是我的 PHP 脚本。
<!DOCTYPE html>
<html>

<head>
    <title>Welcome</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
</head>

<body>
    <div class="navbar navbar-default navbar-static-top">
        <div class="container"> <a href="#" class="navbar-brand">Logo</a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#">Contact</a>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media<b class = "caret"></b></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Facebook</a>
                            </li>
                            <li><a href="#">Instagram</a>
                            </li>
                            <li><a href="#">Twitter</a>
                            </li>
                            <li><a href="#">Google Plus</a>
                            </li>
                        </ul>
                    </li>   <a href="http://www.adds.com" class="navbar-btn btn-success btn pull-right">Add</a>

                </ul>
            </div>
        </div>
    </div>
    <div class="container">
你的CSS文件在哪里？ - Khushboo
9个回答
18

WordPress默认通过wp_head()函数来包含您的主题style.css。在结束头部标记之前，请添加此函数。

<?php wp_head(); ?>

如果您想要添加额外的样式表，那么请在您的functions.php文件中使用此函数。

function additional_custom_styles() {

    /*Enqueue The Styles*/
    wp_enqueue_style( 'uniquestylesheetid', get_template_directory_uri() . '/css/custom.css' ); 
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
1
将 <?php wp_footer() ?> 添加到其中，它将显示WordPress工具栏。 - s.lenders
默认情况下，我的样式表（Style.css）没有被包含在内，我不得不手动添加它。 - Josh
结果发现我没有包含wp-head。在评论之前应该更仔细地阅读。 - Josh
12

你尝试过了吗：

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">

并且将该文件（我通常将其放在header.php文件中）放置在与style.css文件相同的目录中？

这是我的做法。

我的源代码是一个基于WordPress主题的，我几乎每天都在使用它，是从头开始构建的。你确定你的网站在那个主题页面上真正运行了PHP吗？在“链接href =？”中，你在源代码视图中看到了什么？ - user321531
一次性答案，谢谢。 - Naved Khan
4
对我来说这很好用：
<link rel="stylesheet" type="text/css" href="<?php bloginfo("template_directory"); ?>/style.css" />
你的style.css文件放在哪里？前端的href=""是什么样子的？ - Nico Martin
<?php bloginfo("template_directory"); ?> 应该会给你模板目录的路径。这个行得通吗？ - Nico Martin
3
你可以尝试这个。
 <?php echo get_stylesheet_uri(); ?>

改为这样

<?php bloginfo('stylesheet_url'); ?>

来源 这里

确保你的style.css文件在主题目录中。

1
请参考https://wordpress.stackexchange.com/a/220719，通过WordPress仪表板>外观>主题编辑器更新function.php文件，主题文件在右侧列出。
将以下内容添加到您的function.php文件中： wp_enqueue_style('style-name', get_template_directory_uri().'/mystylefile.css'); 刷新您的WordPress缓存并确保您将文件FTP上传到主题的根目录。
0
将以下内容放置在 wp_head(); 标签内部：
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
0

您可以按照以下方式在header.php文件中包含CSS：

<link rel="stylesheet" href="<?php echo bloginfo('template_url').'/custom.css'; ?>">
0
请使用以下代码。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />

希望这有所帮助。
WordPress的版本是多少？你的样式表（Stylesheet）在哪里？ - s.lenders
文件叫什么名字？ - s.lenders
那应该没问题。如果你查看你的网站源代码，HTML 的结果是什么？ - s.lenders
-2

只需将此内容包含在头文件中，不要将style.css放在这里

<?php wp_enqueue_style( 'style', get_stylesheet_uri() ); ?>

如果您正在添加Bootstrap CDN，则可以像这样使用它。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接