如何处理多个头标头.php文件的css?

时间:2017-01-03 作者:AlonsoF1

所以,我正在构建一个基于下划线的新主题。到目前为止,我已经设法让ACF Pro从选项页面中的dropdwon选择调用不同的头文件,但现在我面临的任务是确定如何最好地处理每个自定义头文件的css,以及如何根据加载的头文件加载小部件区域。

首先是css位:由于下划线主题有非常少的现成样式规则,我想,根据ACF Pro在选项页面中调用的头文件,包含特定于头的css文件可能不是一个坏主意。例如,我会创建一个名为header slim的头文件。php,并在我的函数文件中,执行某种“if”header=header slim。php,然后加载标题slim。css。这样,我只会为所选的标题加载一个小的css文件,这是一种正常的样式。css文件,然后,对于不同的页脚,一个页脚。css文件(例如:页脚全宽.css)。

如果这是处理多标题布局概念的一种可接受的方式,那么我会在我的函数文件中放什么呢?另一个细节是,如果没有选择标题布局选项,主题将作为默认函数运行正常的get\\u header()。

现在来看header小部件:如果我错了(通常是错的),请更正,但是如果我加载header1。php文件中有3个小部件区域,那么这三个小部件将自动出现在WP Admin的小部件页面上的可用小部件中,对吗?当然,在加载一个头文件后,我需要刷新widgets页面,只要这些widgets区域已经在我的函数文件中注册,只要有一个调用所述注册widgets的头文件,它们就会加载,对吗?

我在这里和网络上做了大量的挖掘工作,但还没有找到任何具体解决我问题的方法。如果这里有什么东西我错过了,请原谅我。

如果你们不介意的话,我想得到一些具体的帮助,帮助我实现我的目标。

非常感谢!射线

更新:这里有一些代码位供您查看。

这是我索引顶部的内容。php文件,以便打印在ACF Pro选项页面中选择的标题:

<?php
$selectHeader = get_field( \'select_header_layout\',\'option\'); 
if($selectHeader == "black"){get_header(\'black\');}
elseif($selectHeader == "gray"){get_header(\'gray\');}
elseif($selectHeader == "red"){get_header(\'red\');}
else {get_header();} 
?>
下面是我在函数中添加的内容。php文件-我将“selected\\u header”编辑为“select\\u header\\u layout”,以匹配索引中的内容。php文件。混乱来了。。。

function my_header_css_scripts () {
switch (get_field (\'select_header_layout\', \'option\')) {
    case \'header-black.php\':
        $appropriateHeader = \'header-black.css\';
        break;
    case \'header-gray.php\':
        $appropriateHeader = \'header-gray.css\';
        break;
    case \'header-red.php\':
        $appropriateHeader = \'header-red.css\';
        break;
    default:
        $appropriateHeader = \'header-default.css\';
        break;
}
wp_enqueue_style (\'my_header_css_scripts\', get_theme_file_uri(\'/wp-content/themes/rm-acf1/hdr-styles/\' . $appropriateHeader)); 
}
add_action (\'wp_enqueue_scripts\', \'my_header_css_scripts\');

Here\'s the code I have in my functions.php file right now (Jan 4, 2016 @ 4:30pm):

function my_header_css_scripts () {
switch (get_field ( \'chosen_header\', \'option\' )) {
    case \'header-black.php\':
        $appropriateHeader = \'header-black.css\';
        break;
    case \'header-gray.php\':
        $appropriateHeader = \'header-gray.css\';
        break;
    case \'header-red.php\':
        $appropriateHeader = \'header-red.css\';
        break;
    default:
        $appropriateHeader = \'header-default.css\';
        break;
}
wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . \'/hdr-styles/\' . $appropriateHeader );
}
add_action (\'wp_enqueue_scripts\', \'my_header_css_scripts\');

3 个回复
最合适的回答,由SO网友:Michael Ecklund 整理而成

你不是这样用的get_theme_file_uri();

您需要指定相对于当前活动主题目录的目录。

例如,如果您当前激活的主题是rm-acf1, 所有自定义头CSS文件都位于子文件夹中hdr-styles.

这是您的主题目录:./wp-content/rm-acf1/ ./wp-content/rm-acf1/hdr-styles/get_theme_file_uri(); 如果没有参数,它应该默认为./wp-content/rm-acf1/.

现在,在您的情况下,您希望以当前激活的主题目录中的子目录中的文件为目标,因此需要指定相对路径。

您可以这样使用它:get_theme_file_uri( \'hdr-styles/\' . $appropriateHeader );

<小时>EDIT in regards to your error: Fatal error: Call to undefined function get_theme_file_uri()

Try the following instead:

wp_enqueue_style( \'my_header_css_scripts\', get_template_directory_uri() . \'/hdr-styles/\' . $appropriateHeader );

实际上,样式句柄应该反映正在加载的样式表。因此,不要对加载的样式表使用“my\\u header\\u css\\u scripts”,可能类似于basename($appropriateHeader)

Example:

wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . \'/hdr-styles/\' . $appropriateHeader );

SO网友:iguanarama

是的,您加载特定于标题的CSS的方法听起来不错。您可以在函数中执行类似的操作。php:

function my_header_css_scripts () {
    switch (get_field (\'chosen_header\', \'option\')) {
        case \'header-slim.php\':
            $appropriateHeader = \'header-slim.css\';
            break;
        case \'header-whatever.php\':
            $appropriateHeader = \'whatever.css\';
            break;
        default:
            $appropriateHeader = \'header.css\';
            break;
    }
    wp_enqueue_style (\'my_header_css\', get_theme_file_uri (\'/themepath/to/css/\' . $appropriateHeader));
}
add_action (\'wp_enqueue_scripts\', \'my_header_css_scripts\');
对于小部件。。。现在还不完全清楚您在问什么,但概括一下:您可以使用the_widget 或在管理区域中使用dynamic_sidebar. 您选择的标题php文件无法更改管理区域中的小部件选择,因为它仅用于输出页面标题。相反,您可以定义多个新的小部件区域,如中所示this post from buckleupstudios.com, 每个标题类型一个,然后每个标题的小部件可以在管理区域中自定义。如果在管理区域中,您只想显示当前选定标题的小部件区域,那么我猜您必须以某种方式连接到管理小部件页面并隐藏其他小部件区域。

SO网友:AlonsoF1

因此,在挠头并尝试了一些事情之后,我很高兴地报告,多亏了@iguanarama和@michaelecklund,有条件地调用样式表的多标题现在已经启动并运行了!)我想感谢你们两位的帮助。。。认真地我已经在我的函数中粘贴了现在正在工作的代码。下面的php文件供大家看看。现在,我必须弄清楚如何在WP admin的widget admin页面中显示相应的widget。我的意思是,当我加载header(比如header-1)时,widget admin页面中唯一可用的header小部件是前端header-1中显示的小部件。

Here\'s the code that\'s working:

function my_header_css_scripts () {
switch (get_field ( \'select_header_layout\', \'option\' )) {
    case \'black\':
        $appropriateHeader = \'header-black.css\';
        break;
    case \'gray\':
        $appropriateHeader = \'header-gray.css\';
        break;
    case \'red\':
        $appropriateHeader = \'header-red.css\';
        break;
    default:
        $appropriateHeader = \'header-default.css\';
        break;
}
wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . \'/hdr-styles/\' . $appropriateHeader ); }
add_action (\'wp_enqueue_scripts\', \'my_header_css_scripts\');

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s