web-dev-qa-db-ja.com

現在の高度なカスタムフィールドオプションに基づくダッシュボードでのウィジェットの表示/非表示

そこで、私の新しいプロジェクトを前進させるために、オプションページでACF Pro経由でどのヘッダファイルをロードするかに応じて、ウィジェット領域を登録および登録解除する方法を探しています。

みんなのスピードを上げるためのちょっとした情報：私はACF Pro（Advanced Custom Fields Pro）を使ってヘッダのレイアウトを選択して呼び出す。例：ドロップダウンで "Black"を選択するとheader-black.phpが呼び出され、選択を保存するとサイトのヘッダーとしてグローバルに適用されます。

私が今理解しようとしているのは、選択されたヘッダー専用のウィジェット（ "Black"など）を登録し、ヘッダー "Black"ウィジェットを唯一の使用可能なヘッダーウィジェットとしてウィジェット管理ページに表示する方法です。

例：2つのウィジェット領域（Header Black Widget RightとHeader Black Widget Left）があるヘッダースタイル "Black"を選択すると、それらがウィジェット管理ページで使用できる唯一の2つの使用可能なヘッダーウィジェットになります。

たとえば、次のようなシナリオです。最初の例では、ヘッダースタイル "Black"を選択したので、今度は "Slim"という別のヘッダーレイアウトに変更します。ここでは、3つのウィジェット領域（ヘッダースリムウィジェット1、ヘッダースリムウィジェット2、ヘッダースリムウィジェット3）を持つヘッダースタイル "Slim"を選択し、ヘッダーの選択を保存すると、 "Black"ヘッダースタイルの2つのウィジェットが表示されます。離れて、ヘッダースタイル "Slim's"の3つのウィジェット領域に置き換えられます。

私は2、3時間掘り下げて、私が達成したいことについての一種の接触というもう一つの質問をここで見つけました、しかし私はまだ与えられた答えが編集/更新されて、私の混乱.

これは私がここで見つけた他のスレッドへのリンクです： テーマオプション/設定に基づいてメニューとウィジェットを条件付きで登録する方法は？

皆さんが私がこの取引を計画する手助けをしてくれることを願っています。

明けましておめでとうございます！レイ

functionstheme-developmentwidgetsadvanced-custom-fieldsconditional-content
3
AlonsoF1

あなたは運がいいです私は実際に私のプロジェクトの1つでこれをする言い訳を探していました。私はついに私のテーマの一つにこのアイデアを追加するために時間をかけました。 :)

あなたはこの考えを取り、それを実行することができます。これは非常に基本的で基本的な例ですが、やりたいことを実行します。

これはテーマのオプションをカバーしていません。これは、あなたがすでにあなたのテーマ設定を何らかの方法で管理していると仮定しています（それはあなたがしているように聞こえます）。

ステップ1 - あなたのテーマでサポートされている "Widget Areas"についてWordPressに教えてください。

if ( ! function_exists( 'mbe_theme_register_widget_areas' ) ) {

    /**
     * This function tells WordPress that your theme supports up to 4 Widget Areas:
     * 1.) Header Column 1
     * 2.) Header Column 2
     * 3.) Header Column 3
     * 4.) Header Column 4
     *
     * Allows Widgets to be placed in various places within the theme header.
     *
     * @author Michael Ecklund
     * @author_url http://www.michaelbrentecklund.com/
     *
     * @return bool
     */
    function mbe_theme_register_widget_areas() {

        $widget_areas = array();

        $widget_areas[] = array(
            'name' => 'Header Column 1',
            'id'   => 'mbe-theme-widget-area-header-column-1'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 2',
            'id'   => 'mbe-theme-widget-area-header-column-2'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 3',
            'id'   => 'mbe-theme-widget-area-header-column-3'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 4',
            'id'   => 'mbe-theme-widget-area-header-column-4'
        );

        foreach ( $widget_areas as $widget_area ) {

            $default_args = array(
                'before_widget' => '<div id="%1$s" class="widget mbe-theme-widget %2$s">',
                'after_widget'  => '</div><!-- end .mbe-theme-widget -->',
                'before_title'  => '<div class="mbe-theme-widget-title">',
                'after_title'   => '</div><!-- end .mbe-theme-widget-title -->'
            );

            $args = wp_parse_args( $widget_area, $default_args );

            register_sidebar( $args );

        }

        return true;

    }

    add_action( 'widgets_init', 'mbe_theme_register_widget_areas' );

}

上記のコードは、現在アクティブなWordPressテーマのfunctions.phpファイルに貼り付ける必要があります。

ステップ2 - ヘッダーの種類ごとにテンプレートファイルを作成します。

この例では、現在アクティブなWordPressテーマのルートディレクトリに4つの新しいテンプレートファイルを作成します。

  1. header-column-1.php
  2. header-column-2.php
  3. header-column-3.php
  4. header-column-4.php

ステップ3 - それぞれの新しいヘッダーテンプレートファイルウィジェットを準備します。

この例では、4列のヘッダーテンプレート（header-column-4.php）を紹介します。

<?php


# BoF Header Column 1
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-1' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-1' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #1' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 1


# BoF Header Column 2
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-2' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-2' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #2' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 2


# BoF Header Column 3
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-3' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-3' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #3' . PHP_EOL;

}
echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 3


# BoF Header Column 4
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-4' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-4' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #4' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 4


echo '<div class="clearfix"></div>' . PHP_EOL;

?>

ステップ4 - 現在アクティブなテーマのheader.phpを編集して動的ヘッダー出力を有効にします。

<?php

echo '<section class="container">' . PHP_EOL;
echo '<section class="row">' . PHP_EOL;

$header_template = get_option( 'mbe-theme-header-template' ); // Retrieve theme option configured by user.

if ( ! $header_template ) {
    $header_template = 'column-3'; // Fallback: Set a default header template.
}

get_template_part( 'header', $header_template );// Load the header template.

echo '</section><!-- end .row -->' . PHP_EOL;
echo '</section><!-- end .container -->' . PHP_EOL;

?>
5
Michael Ecklund