如何在Functions.php中链接style.css

时间:2019-03-12 作者:Mehraj Khan

我是WordPress的新手;我刚开始学习WordPress。我想把风格联系起来。函数中的css。php,但我无法解决这里可能存在的问题。谁能给我指出正确的方向吗?

指数php

<?php
get_header();
?>


<?php
    if ( have_posts() ) {

        while ( have_posts() ) {
            the_post();
            echo \'Posts are foound\';
       }
    } else {
    echo \'No Posts are found\';
    }
?>
<div class="inner">
    <?php bloginfo(\'title\'); ?><br>
    <?php bloginfo(\'description\'); ?>
    <?php echo "<h1>Hello world</h1>"; ?>
</div>

<?php
    get_footer();
功能。php

   function mortal_theme() {
  wp_enqueue_style( \'style\', get_template_directory_uri() . \'/style.css\' );
  }
   add_action( \'wp_enqueue_scripts\', \'mortal_theme\' );
样式。css

 h1 {
   background-color: red;
   color: yellow;
   font-size: 28px;
   font-weight: 700;
 }
.inner {
   width: 1100px;
   margin: 0 auto;

}
标题。php

<html>
<head>
   <?php wp_head(); ?>
</head>
   <header class="site-header">
      <?php bloginfo(\'title\'); ?>
   </header>
页脚。php

     <footer>
        <p><?php bloginfo(\'title\');?> - &copy; <?php echo date(\'Y\');?></p>
     </footer>
  <?php wp_footer(); ?>
  </body>
  </html>

4 个回复
最合适的回答,由SO网友:jsmod 整理而成

要使其正常工作,请执行以下操作:

<?php get_header(); ?>
 并以以下内容结束:

<?php get_footer(); ?>

(2) Your header.php file should have the following right before the closing </head> tag:

<?php wp_head(); ?>
注:header.php 还有其他东西,但我假设你已经设置好了。

(3) Your footer.php file should have the following right before the closing </body> tag:

<?php wp_footer(); ?> 

(4) In your functions.php, modify your the second line of your wp_enqueue_style so that it looks like this:

wp_enqueue_style( \'style\', get_stylesheet_uri() );
最终整个功能应如下所示:

function mortal_theme() {
    wp_enqueue_style( \'style\', get_template_directory_uri() );
  }
add_action( \'wp_enqueue_scripts\', \'mortal_theme\' );
这是因为style.css 主题文件夹中有主题的主样式表,因此您无需告诉WordPress查找style.css, 它将知道要寻找什么。

Update:

我已经在本地WordPress安装上使用您的代码重新创建了您的主题以进行测试,下面是我访问页面时看到的屏幕截图:

enter image description here

主题文件夹包含以下文件:

  1. style.css
  2. index.php
  3. header.php
  4. functions.php
  5. footer.phpexact 原始问题中每个文件的代码,有一个例外:用于functions.php 我添加了起始<?php 标记,使我的最终代码如下所示:

    <?php
       function mortal_theme() {
          wp_enqueue_style( \'style\', get_template_directory_uri() . \'/style.css);
       }
       add_action( \'wp_enqueue_scripts\', \'mortal_theme\' );
    
    根据上面的屏幕截图,一切似乎都正常工作。

    但是,如果我删除<?php 我添加了(使我的代码与您问题中的代码100%匹配),这是我在查看页面时看到的内容:

    enter image description here

    What do you see when you view your page? 如果您在第二个屏幕截图中得到这样的结果,那是因为您没有开始<?php 在您的functions.php 文件加上这些,你就可以走了,安拉。

SO网友:Shihab

请检查wp_enqueue_stylewp_enqueue_scripts.首先,创建一个具有您喜欢的任何名称的函数ei:my\\u函数,并包含您的css文件,然后使用wp_enqueue_scripts. 我的意思是:

function my_function() {
    // This will load your default style.css
    wp_enqueue_style(\'main_style\', get_stylesheet_uri());
}
add_action(\'wp_enqueue_scripts\', \'my_function\');
但是如果你想加载另一个不是你的WP风格的CSS文件。css那么你必须提到正确的路径。EI:

function my_function() {
    // This will load your default style.css
    wp_enqueue_style(\'main_style\', get_stylesheet_uri());

    // This will load custom.css located in the css folder
    wp_enqueue_style(\'main_style\', get_theme_file_uri(\'css/custom.css\'));
}
add_action(\'wp_enqueue_scripts\', \'my_function\');

SO网友:semperlabs

如果是子主题,则从子主题目录加载样式表,如下所示:

wp_enqueue_style(\'child-theme-styling\', get_stylesheet_directory_uri() .\'/style.css\');

SO网友:Salman.kodeforest

我想你是在复制和粘贴那里的确切函数。

function mortal_theme() {
   wp_enqueue_style( \'style\', get_template_directory_uri() . \'/style.css);
}    
   add_action( \'wp_enqueue_scripts\', \'mortal_theme\');
只有在代码末尾添加end标记时,此代码才有效。应该是这样的。

尝试在代码“”的末尾添加一个结束标记>;\'希望这对你有用。

相关推荐