web-dev-qa-db-ja.com

複数ヘッダーheader.phpファイルのCSSを処理する方法

だから、私はアンダースコアに基づいて新しいテーマを構築しています。これまで、[オプション]ページのドロップダウンセクションからACF Proでさまざまなヘッダーファイルを呼び出すことができましたが、今度は、各カスタムヘッダーファイルのCSSの処理方法と方法を決定する作業に直面します。どのヘッダーファイルがロードされたかに基づいてウィジェット領域をロードします。

まずCSSのビット：Underscoresテーマには最小限のスタイルルールが用意されているので、ACF Proによって呼び出されるヘッダーファイルに基づいてヘッダー固有のCSSファイルをオプションに含めることは悪い考えではないと思いました。ページ。たとえば、header-slim.phpという名前のヘッダーファイルを作成し、自分の関数ファイルで何らかの種類の 'if' header = header-slim.phpを実行してから、header-slim.cssを読み込みます。このようにして、私は選択されたヘッダ用の小さなCSSファイル、通常のstyle.cssファイル、そして異なるフッター用のfooter.cssファイル（例：footer-full-width.css）のみをロードします。

これが複数ヘッダーレイアウトの概念を取り入れるための許容できる方法であるならば、正確に、私は私の関数ファイルに何を入れるでしょうか？もう1つの詳細は、ヘッダレイアウトオプションが選択されていない場合、テーマはデフォルトの関数として通常のget_header（）を実行するということです。

今度はヘッダウィジェットのために：私が間違っている（これはよくあることですが）しかし、私がheader1.phpファイルをロードし、その中に3つのウィジェット領域があれば、それらの3つのウィジェットは自動的にWP管理者、そうですか。もちろん、ヘッダを読み込んだ後、ウィジェットページを更新する必要があります。そして、それらのウィジェット領域が自分の関数ファイルに登録されている限り、それらの登録済みウィジェットを呼び出すヘッダファイルがあれば読み込みます。

私はこことWeb全般についてかなり多くのことを調べてきましたが、私の質問に具体的に対処するものはまだ見つかっていません。ここに何かがあってそれを見逃した場合は、ご容赦ください。

皆さんが気にしないのであれば、私が達成しようとしていることについての具体的な支援が大好きです。

どうもありがとう！レイ

更新：これはあなたが見てみるためのいくつかのコードビットです。

これは、ACF Proのオプションページで選択されているヘッダーを印刷するためにindex.phpファイルの一番上に表示されるものです。

<?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();} 
?>

そして、これが私のfunctions.phpファイルに追加したものです - 私はindex.phpファイルにあるものと一致するように 'choose_header'を 'select_header_layout'に編集しました。これが混乱です….

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');

これが私のfunctions.phpファイルにあるコードです（Jan 4、2016 @ 4:30 pm）：

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');
theme-developmentcsstemplatestemplate-hierarchycustom-header
1
AlonsoF1

それはあなたが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：Fatal error: Call to undefined function get_theme_file_uri()

代わりに次のことを試してください。

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

そして実際にはスタイルハンドルはおそらくロードされているスタイルシートを反映しているはずです。そのため、ロードされたスタイルシートに「my_header_css_scripts」を一般的に使用する代わりに、おそらくbasename($appropriateHeader)のようなものにします。

例：

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

2
Michael Ecklund

はい、ヘッダー固有のCSSをロードするというアプローチは問題ありません。 functions.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 を使用してadmin領域で指定されたものを配置できます。選択したヘッダーのphpファイルは管理領域のウィジェットの選択を変更することはできません。ページヘッダーを出力するためだけのものです。代わりに、 この記事の中に示されているように、複数の新しいウィジェット領域を定義することができます 、ヘッダータイプごとに1つ、そして各ヘッダーのウィジェットはadmin領域でカスタマイズ可能です。管理領域に、現在選択されているヘッダのウィジェット領域のみを表示したい場合は、管理ウィジェットページに何らかの方法でフックして他のウィジェット領域を非表示にする必要があると思います。

0
iguanarama

それで、頭をかいていくつかのことを試した後、@iguanaramaと@Michael Ecklundのおかげで、スタイルシートを条件付きで呼び出す複数のヘッダーが起動され実行されていることを報告できてうれしいです。 :)私はあなたの助けに感謝します。真剣に！ご覧になるために、現在機能しているコードを下記のfunctions.phpファイルに貼り付けました。それでは、WP-Adminのウィジェット管理ページに対応するウィジェットを表示する方法を理解する必要があります。私がこれを意味するのは私がheader-1と言うヘッダーをロードするときです。ウィジェット管理ページで利用可能な唯一のheaderウィジェットはフロントエンドのheader-1に表示されるウィジェットです。

これがうまくいっているコードです：

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');
0
AlonsoF1