WordPress カスタマイザーをカスタマイズする
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' => '値1', 'value2' => '値2', 'value3' => '値3', ), ));
以下のコードを「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 -&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, )); }