web-dev-qa-db-ja.com

テーマオプション：いくつかの定義済みヘッダの中から選択する機能を持つ

私は最初のテーマを作成中で、Quarkをスターターテーマとして使用しています。

テーマにはさまざまなオプションがありますが、その1つはヘッダーの選択です。 （5つの異なるヘッダーを言いましょう - 選択されると、ヘッダーはサイト全体に表示されます。）

Codepenで入手可能なコードを持つさまざまなヘッダーも実装したいのですが、私が苦労しているのはユーザーが自分の好きなヘッダーを選択できるようにすることです。

最初にこのメニューを実装したいとしましょう： http://codepen.io/WhiteWolfWizard/pen/CJLeu 。

私はgetx関数のためのCodexを読みました、そしてまた私はこれを見ました：

<?php
if ( is_home() ) :
    get_header( 'home' );
elseif ( is_404() ) :
    get_header( '404' );
else :
    get_header();
endif;
?>

それは私がやろうとしていることには適していません、なぜならそれはページごとにヘッダーを表示するからです。

だから私は疑問に思っていました：異なるヘッダのためのコードはどこにあるべきですか、そしてどのように私はユーザにヘッダを選択する能力を与えることができますか？ （オプションツリー、カスタマイザAPI、またはもしあればより良い解決策を使用して）

ありがとう

シモンズ：私はこれで初心者です。

theme-optionsheaderstheme-customizer
2
Tryna Code

だから最初にカスタマイザオプションが必要です。これをcustomizer.phpに入れてそのファイルをfunctions.phpに含めることも、単にfunctions.phpに直接入れることもできます。

add_action('customize_register', 'mytheme_customize_register');

function mytheme_customize_register( $wp_customize ) {

    /**
    ------------------------------------------------------------
    SECTION: Header
    ------------------------------------------------------------
    **/
    $wp_customize->add_section('section_header', array(
        'title'          => esc_html__('Header', 'mytheme'),
        'description'    => esc_attr__( 'Choose one of three different Header Styles', 'mytheme' ),
        'priority'       => 1,
    ));

        /**
        Header Styles
        **/
        $wp_customize->add_setting( 'header_styles', array(
            'default'    => '',
        ));
        $wp_customize->add_control( 'header_styles', array(
            'label'      => esc_html__( 'Header Styles', 'mytheme' ),
            'section'    => 'section_header',
            'type'       => 'select',
            'choices'    => array(
                'style_1'    => esc_html__('Header 1', 'mytheme'),
                'style_2'    => esc_html__('Header 2', 'mytheme'),
                'style_3'    => esc_html__('Header 3', 'mytheme'),
            ),
        ));

}

これにより、カスタマイザでドロップダウン設定ができます。

enter image description here

それを使えば、あなたのヘッダ要素タグ<header>がどこにあるかに関わらず、どんなスタイルでも追加することができ、あるいは必要ならば別のファイルを含めることさえできます。

あなたのヘッダがpartialsフォルダにあるheader_style_1.phpというファイルにあり、それがheader.phpファイルに含まれているとしましょう。

get_template_part('partials/header_style_1);

あなたはheader_style_2.phpとheader_style_3.phpファイルを追加することができます、そしてあなたのheader.phpにちょうど追加してください：

$header_style = get_theme_mod('header_styles', 'style_1');

get_template_part('partials/header_'.$header_layout);

これはあなたがあなたのヘッダ用に作成したそのテンプレートのいずれかを取得します。

お役に立てれば。

1
dingo_d

Option Treeでは、このように使うことができます。

5つの異なるヘッダーデザインを提供するとしましょう。 5つのヘッダファイルを作成します。

  1. header.php
  2. header-two.php
  3. header-three.php
  4. header-four.php
  5. header-five.php

これで、以下のように確認できます。

if (ot_get_option('your_header_selection_key') == 'one'){
    get_header();
} elseif (ot_get_option('your_header_selection_key') == 'two'){
    get_header('two');
} elseif (ot_get_option('your_header_selection_key') == 'three'){
    get_header('three');
} elseif (ot_get_option('your_header_selection_key') == 'four'){
    get_header('four');
} elseif (ot_get_option('your_header_selection_key') == 'five'){
    get_header('five');
}

これらのコードをfunctions.php内の関数にラップしてページテンプレートから呼び出すことができます。代わりに、すべてのテンプレートファイルにそれらを記述します。

これは単なるアイデアです。オプションツリーを使用しない場合は、これと同じ考え方で カスタマイザAPI を使用できます。

0
тнє Sufi