WordPress カスタマイザーをカスタマイズする
2018/12/02
ヘッダーメディアに動画を追加
ヘッダーメディアにのみですが動画をカスタマイザー から挿入できます
以下のコードを「functions.php」に書き込めば、ヘッダーメディアで動画を選択可能になります
|
1 2 3 4 5 6 7 8 9 |
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」に記載すれば動画が再生されます
|
1 |
<?php the_custom_header_markup(); ?> |
なおこの記述をしても、スマホでは動画は再生されず代替の画像が表示されます。
（ネットワーク負荷などを考慮したWordpressのポリシーのようです。）
オリジナルのセクションや項目を追加する
カスタマイザー にオリジナルのセクションや項目を設定するためには、4つのことを「functions.php」に書き込む必要があります。
- 関数を定義
- セクションを定義
- セッティングを定義
- コントロールを定義
関数を定義する
|
1 2 3 4 5 |
function this_theme_customize_register( $wp_customize ) { ・・・・ } add_action( 'customize_register', 'this_theme_customize_register' ); |
実際のtheme_customize_register関数を定義しています。
「・・・」の箇所にセクションの追加や項目の追加を定義すれば、オリジナルのセクションや項目を追加することができます。
セクションを追加する
|
1 2 3 4 5 6 |
$wp_customize->add_section( 'this_theme_original_section', array( 'title' => 'オリジナルの項目', 'priority' => 10, 'description' => '説明文をここに記述します' , 'active_callback' => 'is_front_page', )); |
コードの解説
セクションを定義する
|
1 2 3 4 5 |
$wp_customize->add_section( $id, array( パラメーター )); |
今回は$idに「this_theme_original_section」と名付けています。
パラメータの説明
| パラメーター | 必須 | 内容 |
| title | ○ | カスタマイザーに出力する名称 |
| priority | 出力する優先順 デフォルトの優先順位は、サイト基本情報が「20」、色が「40」といったような20区切りで設定されているため、最上段に出力したい場合は20未満の数字を設定すればいいこととなる |
|
| description | カスタマイザに表示する説明文 | |
| active_callback | 条件と合致した場合のみ当該セクションが表示されるようにする 例示の「is_front_page」であれば、フロントページの時のみに当該セクションが表示される（is_front_pageはwordpressが提供する関数） |
セッティングを設定する
以下のコードを「functions.php」に書き込めば、カスタマイズ項目に新たなテキストを追加できます
|
1 2 3 4 |
$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」に書き込めば、カスタマイズ項目に新たなテキストを追加できます
|
1 2 3 4 5 6 |
$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」を設定 |
|
1 |
<?php echo get_option( 'originText' ); ?> |
具体的事例
テキストの入力項目を作成する
以下のコードを「functions.php」に書き込めば、カスタマイズ項目に新たなテキストを追加できます
|
1 2 3 4 5 6 7 8 9 10 11 |
$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」に記載すればテキストが表示されます
|
1 |
<?php echo get_option( 'this_theme_text' ); ?> |
ラジオボタンの入力項目を作成する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$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」に記載すればテキストが表示されます
|
1 |
<?php echo get_option( 'this_theme_radio' ); ?> |
チェックボックスを作成する
|
1 2 3 4 5 6 7 8 9 10 |
$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', )); |
プルダウン式メニューを作成する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$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」に書き込めば、カスタマイズ項目に新たな固定ページの選択を追加できます
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$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」に記載すれば固定ページの内容が表示されます
|
1 2 3 4 5 |
<?php $page_id = get_option( 'this_theme_page' ); $content = get_page($page_id); echo $content -&gt; post_content; > ?> |
色の選択を追加する
|
1 2 3 4 5 6 7 8 9 |
$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', ))); |
ファイルのアップロード
|
1 2 3 4 5 6 7 8 |
$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', ))); |
イメージデータのアップロード
|
1 2 3 4 5 6 7 8 |
$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', ))); |
固定ページを複数設定する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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, )); } |