ie-excel

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

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

2018/12/02

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

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

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

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

 

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

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

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

関数を定義する

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

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

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

セクションを追加する

コードの解説

セクションを定義する
「$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」に書き込めば、カスタマイズ項目に新たなテキストを追加できます

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

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

 

 

コントロールを設定する

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

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

 

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

 

 

具体的事例

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

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

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

 

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

 

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

 

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

 

 

 

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

 

固定ページを追加する

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

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

 

 

 

色の選択を追加する

 

 

 

ファイルのアップロード

 

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

 

 

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

 

-テーマを作成する