ie-excel

エクセル・マクロでie操作

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 -&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,
  ));
}

 

-テーマを作成する