WordPress カスタマイザーをカスタマイズする

2018/10/21 2018/12/02

ヘッダーメディアに動画を追加

ヘッダーメディアにのみですが動画をカスタマイザーから挿入できます
以下のコードを「functions.php」に書き込めば、ヘッダーメディアで動画を選択可能になります

add_theme_support( 'custom-header', array(
	'width'         => 2000,
	'height'        => 700,
	'flex-width'    => true,
	'flex-height'   => true,
	'header-text'   => true,
	'video'         => true, 
	'default-image' => get_template_directory_uri() . '/images/custom-header.jpg'
) );

実際に動画を再生させるには以下のコードを「index.php」や「header.php」に記載すれば動画が再生されます

<?php the_custom_header_markup(); ?>

なおこの記述をしても、スマホでは動画は再生されず代替の画像が表示されます。
（ネットワーク負荷などを考慮したWordpressのポリシーのようです。）

オリジナルのセクションや項目を追加する

カスタマイザーにオリジナルのセクションや項目を設定するためには、4つのことを「functions.php」に書き込む必要があります。

関数を定義
セクションを定義
セッティングを定義
コントロールを定義

関数を定義する

function this_theme_customize_register( $wp_customize ) {
 　　・・・・
}

add_action( 'customize_register', 'this_theme_customize_register' );

「customize_register」をフックして、theme_customize_registerという関数を呼び出しています。

実際のtheme_customize_register関数を定義しています。

「・・・」の箇所にセクションの追加や項目の追加を定義すれば、オリジナルのセクションや項目を追加することができます。

セクションを追加する

$wp_customize->add_section( 'this_theme_original_section', array(
  'title' => 'オリジナルの項目',
  'priority' => 10, 
  'description' => '説明文をここに記述します' ,
  'active_callback' => 'is_front_page',
));

コードの解説

セクションを定義する

$wp_customize->add_section( $id, array(

　パラメーター

));

「$id」にはWordpress内で重複しないような名前をつけることが必要。
今回は$idに「this_theme_original_section」と名付けています。

パラメータの説明

パラメーター	必須	内容
title	○	カスタマイザーに出力する名称
priority		出力する優先順デフォルトの優先順位は、サイト基本情報が「20」、色が「40」といったような20区切りで設定されているため、最上段に出力したい場合は20未満の数字を設定すればいいこととなる
description		カスタマイザに表示する説明文
active_callback		条件と合致した場合のみ当該セクションが表示されるようにする例示の「is_front_page」であれば、フロントページの時のみに当該セクションが表示される（is_front_pageはwordpressが提供する関数）

セッティングを設定する

以下のコードを「functions.php」に書き込めば、カスタマイズ項目に新たなテキストを追加できます

$wp_customize->add_setting( 'this_theme_text' ,  array(
 'default' => '',
 'type' => 'option',
 ));

以下のコードを「index.php」や「header.php」に記載すればテキストが表示されます

主なパラメーター

パラメーター	必須	内容
default	○	当該項目の初期値
type		親テーマの内容を引き継ぐかどうかを設定する項目のようだデフォルトは「theme_mod」のため親テーマの設定が引き継がれますが、引き継がれないように設定するには「option」を設定します。
capability		権限の設定デフォルトは「edit_theme_options」となっており、当該項目の権限を変更したい場合は、この値を設定することとなる。
transport		入力値がライブですぐに反映させるかを設定するパラメーターデフォルトは「refresh」 refreshの場合は、入力値がプレビューですぐに反映されます「postMessage」を指定することで、Java Scriptを活用した任意の方法によるプレビュー反映が可能となります。
sanitize_callback		サニタライズする関数を定義公式サイトを狙うのであれば、サニタライズはしっかりと定義する必要があります

コントロールを設定する

以下のコードを「functions.php」に書き込めば、カスタマイズ項目に新たなテキストを追加できます

$wp_customize->add_control( 'this_theme_text_control',array(
 'settings' => 'this_theme_text',
 'label' => 'テキスト入力',
 'section' => 'this_theme_origin_section',
 'type' => 'text',
));

以下のコードを「index.php」や「header.php」に記載すればテキストが表示されます

主なパラメーター

パラメーター	必須	内容
label		カスタマイザーへの出力項目
description		カスタマイザーへ出力する説明文
section	○	当該パラメーターを表示させるセクションを設定セクションの設定をした際の「$id」を設定
priority		出力される順番を数字で定義
type	○	主な設定可能タイプ text：テキスト checkbox：チェックボックス radio：ラジオボタン select：プルダウン textarea：テキストエリア dropdown-pages：固定ページの選択 email：メールアドレス url：URL number：番号
settings		当該パラメータを出力させるセッティングを設定セッティングで設定した際の「$id」を設定

<?php echo get_option( 'originText' ); ?>

具体的事例

テキストの入力項目を作成する

以下のコードを「functions.php」に書き込めば、カスタマイズ項目に新たなテキストを追加できます

$wp_customize->add_setting( 'this_theme_text' ,  array(
 'default' => '',
 'type' => 'option',
 ));

$wp_customize->add_control( 'this_theme_text_control',array(
 'settings' => 'this_theme_text',
 'label' => 'テキスト入力',
 'section' => 'this_theme_original_section',
 'type' => 'text',
));

以下のコードを「index.php」や「header.php」に記載すればテキストが表示されます

<?php echo get_option( 'this_theme_text' ); ?>

ラジオボタンの入力項目を作成する

    $wp_customize->add_setting('this_theme_radio', array(
        'default'        => 'value2',
        'type'           => 'option',
    ));
    $wp_customize->add_control('this_theme_radio_control', array(
        'label'      => 'ラジオボタンの選択',
        'section'    => 'this_theme_original_section',
        'settings'   => 'this_theme_radio',
        'type'       => 'radio',
        'choices'    => array(
            'value1' => '値１',
            'value2' => '値２',
            'value3' => '値３',
        ),
    ));

以下のコードを「index.php」や「header.php」に記載すればテキストが表示されます

<?php echo get_option( 'this_theme_radio' ); ?>

チェックボックスを作成する

    $wp_customize->add_setting('this_theme_checkbox', array(
      'default'    => false ,
      'type'       => 'option',
    ));
    $wp_customize->add_control('this_theme_checkbox_control', array(
        'label'      => 'チェックボックスの選択',
        'section'    => 'this_theme_original_section',
        'settings'   => 'this_theme_checkbox',
        'type'     => 'checkbox',
    ));

プルダウン式メニューを作成する

     $wp_customize->add_setting('this_theme_select]', array(
        'default'        => 'value2',
        'type'           => 'option',
    ));
    $wp_customize->add_control( 'this_theme_select_control', array(
        'label'      => 'プルダウンメニュー',
        'section'    => 'this_theme_original_section',
        'settings'   => 'this_theme_select',
        'type'    => 'select',
        'choices'    => array(
            'value1' => '値 1',
            'value2' => '値 2',
            'value3' => '値 3',
        ),
    ));

固定ページを追加する

以下のコードを「function.php」に書き込めば、カスタマイズ項目に新たな固定ページの選択を追加できます

$wp_customize->add_setting('this_theme_page', array(
 'capability' => 'edit_theme_options',
 'type' => 'option',
 ));

$wp_customize->add_control('this_theme_page_control', array(
        'label'      => '固定ページの選択',
        'section'    => 'this_theme_original_section',
        'settings'   => 'this_theme_page',
        'type' => 'dropdown-pages',
        'allow_addition' => true,
 ));

以下のコードを「index.php」や「header.php」に記載すれば固定ページの内容が表示されます

<?php
  $page_id = get_option( 'this_theme_page' ); 
  $content = get_page($page_id); 
  echo $content -&amp;gt; post_content; >
?>

色の選択を追加する

    $wp_customize->add_setting('this_theme_color', array(
        'default'       => '000',
        'type'          => 'option',
    ));
    $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'this_theme_color_control', array(
        'label'    => '色の選択' ,
        'section'  => 'this_theme_original_section',
        'settings' => 'this_theme_color',
    )));

ファイルのアップロード

    $wp_customize->add_setting('this_theme_upload]', array(
        'type'           => 'option',
    ));
    $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'this_theme_upload_control', array(
        'label'    => 'ファイルのアップロード',
        'section'  => 'this_theme_original_section',
        'settings' => 'this_theme_upload',
    )));

イメージデータのアップロード

   $wp_customize->add_setting('this_theme_image', array(
        'type'           => 'option',
    ));
    $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'this_theme_image_control', array(
        'label'    => 'イメージのアップロード',
        'section'  => 'this_theme_original_section',
        'settings' => 'this_theme_image',
    )));

固定ページを複数設定する

for ($i = 1; $i <= 5; $i++) {
  $wp_customize->add_setting('this_theme_page' .$i, array( 
    'capability' => 'edit_theme_options',
    'type' => 'option',
  ));

  $wp_customize->add_control('this_theme_page_control' .$i, array(
    'label'      => '固定ページの選択',
    'section'    => 'this_theme_original_section',
    'settings'   => 'this_theme_page' .$i ,
    'type' => 'dropdown-pages',
    'allow_addition' => true,
  ));
}

-テーマを作成する

Message コメントをキャンセル

: WordPress テーマを作成する

WordPressでいくつものサイトを立ち上げてきたが、いつも既存のテーマを使用 ...

: WordPress ヘッダーを作る

</head>まで header.phpの内容 <!DOCTY ...

PREV: 「AirHelp」で飛行機遅延やキャンセルのお金を取り戻す
NEXT: Wordpress テーマを作成する