新模板，css放在哪里？

时间：2016-04-02 作者：Jeff

直到今天我都没用过header.php 和footer.php 因为我的主题有多个模板，我不知道如何或在哪里放置CSS和JS文件。谁能解释一下header.php 和使用get_header(); 但也包括新的CSS文件取决于模板？

Normal Code <以及我的看法

<?php /* Template Name: Contact Template */ ?>
<!-- HERE STARTS HEADER PHP? -->
<!DOCTYPE html>
<html>
<head>
   <title>Website</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   <?php wp_head(); ?>
</head>
<body>
   <header>
       <!-- MENU AND STUFF -->
   </header>
   <main>
   <!-- HERE STOPS HEADER PHP ? -->

      <!-- SOME CONTENT -->

   <!-- HERE STARTS FOOTER PHP? -->
   </main>
   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>
<!-- HERE STOPS FOOTER PHP? -->

如您所见，我将CSS和JS文件放在header.php 或footer.php 因此，我无法根据模板添加更多内容。如果使用多个模板，如何添加CSS文件？

===================================================

Problem is almost solved. Just need to create an if/else statement to check the Template Name:.

2 个回复

最合适的回答,由SO网友:BrandonZ 整理而成

在functions.php.

创建一个空PHP文件，调用它header.php, 是的wp_head() 就在之前</head> 之前没有<body> 标签

<!DOCTYPE html>
<html>
<head>
   <title>Website</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   <?php wp_head(); ?>
</head>

创建一个空PHP文件，调用它footer.php 并将页脚放在此处：

   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>

在中functions.php:

function my_scripts_styles() {

  wp_enqueue_script(\'jquery_flexslider_js\', get_template_directory_uri() . \'/js/jquery.flexslider.min.js\', array(\'jquery\'),\'3.0.0\', true );

  wp_enqueue_style(\'flexslider_css\', get_template_directory_uri() . \'/css/flexslider.css\', false ,\'3.0.0\'); 

}
add_action(\'wp_enqueue_scripts\', \'my_scripts_styles\');

使用wp_enqueue_script() 添加JavaScript，最后一个参数true 意味着它将被放置在底部。您需要给它一个唯一的名称，例如。flexslider_js_my. 根据需要包括尽可能多的js文件。

具有wp_enqueue_style() 添加CSS文件。最后一个参数false 表示它将放置在标题中。给它一个唯一的名称，包括你需要的尽可能多的名称。

其余代码保留在index.php. header.php, footer.php, functions.php 它们都在主目录中index.php 是

index.php:

<?php get_header(); ?>
<body>
   <header>
       <!-- MENU AND STUFF -->
   </header>
   <main>
   <!-- HERE STOPS HEADER PHP ? -->

      <!-- SOME CONTENT -->

   <!-- HERE STARTS FOOTER PHP? -->
   </main>
   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
<?php get_footer(); ?>

顺便说一句，在你的情况下，你不需要包括<?php /* Template Name: Contact Template */ ?> 在顶部。你可以像我的例子一样。

更新，模板名称：

就我而言get_page_template() 将输出整个模板路径，例如：

/主页/133/htdocs/dd/myheme/wp-content/themes/authentic/page。php

其中“authentic”是我的模板名。因此，要包含在functions.php:

$url = get_page_template();
$parts = explode(\'/\', $url);
$name = $parts[count($parts) - 2];

if(\'authentic\' == $name) { 

  wp_enqueue_style(\'homeCSS\', get_template_directory_uri() . \'/css/home.css\', false ,\'3.0.0\'); 

}

SO网友:Max Yudin

不要手动包含CSS和JavaScript，有专门用于此目的的函数。修改此代码以满足您的要求，并将其置于functions.php 你的主题。

<?php
$template_file_name = basename( get_page_template() ); // get template file name

if(\'my_template.php\' == $template_file_name) { // check  file name
    wp_enqueue_style(
        \'my_style_name\',
        \'/path/to/style.css\',
        array(), // dependencies
        NULL, // version
        all // media
    );
    enqueue_script(
        \'my_script_name\',
        \'/path/to/script.js\',
        array(), // dependencies
        NULL, // version
        true // in footer
    );
}

最小值header.php

<html>
<head>
</head>
<?php wp_head(); // this function will place your CSS here ?>
<body>

最小值footer.php

<?php wp_footer(); // this function will place your JavaScript here?>
</body>
<html>

最小值my_template.php

<?php
/*
Template Name: Contact Template
*/
get_header();
// your content goes here
get_footer();

有关更多信息，请参阅：

wp_enqueue_style()

enqueue_script()

Theme Development

小码农CODE

新模板，css放在哪里？

相关推荐

Updating modified templates