wordpressのカスタマイザーに項目を追加する方法「画像」

wordpress-logo ワードプレス
wordpress-logo

wordpressのカスタマイザーにオリジナルの項目を追加して、ライブプレビューを確認しながらテーマを編集する方法を解説していきます。

 

追加できる項目は

  • 画像
  • テキスト

がありますが、今回は「画像」を中心に解説いていきます。

 

 

テーマカスタマイザーにオリジナル項目を追加できるようになることで、オリジナルテーマを制作する時にスライドショーやアピールエリアを作り、表示するものを簡単に変更できるようになるので作ることのできる幅が広がります。

 

この記事を読んで、ぜひ、作り方をマスターしてください。

 

FTPを使わずに既存のテーマに追加する方法

既存の使用しているテーマへ実装する方法もオリジナルテーマを作る時もコードの内容は一緒ですので先に既存テーマのどこに記載すればいいのかを説明します。

 

今回行うことは基本2つのphpファイルを変更することでできます。

  • 画像を表示させたいphpファイル
  • function.phpファイル

 

FTPを使用せずに既存テーマをwordpressから変更するには「外観」→「テーマエディタ」から変更することができます。ーーー①

テーマエディタの使い方

 

サイドメニューから「テーマのための関数、function.php」を選択します。ーーーー②

画像を表示させたいphpファイルは③のエリアにある「編集するテーマを選択」から「お使いのテーマ名+child」となっていると思いますので「お使いのテーマ名」を選択し、そこから編集すべきファイルを探して編集してください。

 

カスタマイザーにオリジナル項目を追加する方法

上記を読めばどこにコードを追加捨て場いいかわかったはずですのいよいよ追加するコードの内容に入ります。

 

ここで理解して置くべき概念は4つあります。

  • function 「関数」
  • section 「セクション」
  • setting 「セッティング」
  • control 「コントロール」

function

追加する処理をまとめるものです。

section

カスタマイザーに項目を追加する方法section

カスタマイズを開いてはじめに表示される部分に項目を表示するためのものです。

setting

カスタマイザーにオリジナル項目を追加する方法setting,control

sectionで作った項目にcontrolで作った内容を表示させるためのものです。

control

カスタマイザーにオリジナル項目を追加する方法setting,control

section内に表示させる内容を決める部分です。

 

これらを組み合わせてコードを記載していきます

phpファイル

はじめに処理追加を宣言します。

「customize_name」の部分にお好きな名前を記入してください。

 

function.php

function内に処理を記載します。

function名はcustomize_name部分と同じ名前にしてください。

 

function.php

function内にsectionを作ります。

original_imgの部分をお好きな名前に変更してください。

それぞれの項目はコメントの通りです。

セクションの位置ですが、デフォルトで入っている項目の位置が200以内となっているので末尾に追加したければ200以上とすれば良いです。

 

入っている項目はテーマごとに違いますので、各自テーマのfunctionから調べて任意の位置に入るように調整してください。

数字が大きい方が後ろにきます。

 

function.php

sectionで作った項目にcontrolで作った内容を表示させるためsettingを用意します。

 

imgの部分をお好きな名前に変更してください。

 

 

function.php

section内に表示させる内容を決めるためcontrolを作ります。

「new WP_Customize_Image_Control( $wp_customize, ‘img’, array(」

の部分のimgの部分をsettingでつけた名前に変更してください。

追加するセクションのIDをとはsectionでつけた名前です。

追加する設定項目のIDとはsettingでつけた名前です。

 

 

これでカスタマイザーに項目を追加することができました。

function.phpでの編集作業は終了です。

 

 

画像を表示させたいphpファイルを編集する

カスタマイザーからセットした画像を出力するためのコードを画像を表示させたいphpファイルに追加します。

 

name.php

こちらのコードを画像を表示させたい箇所に追加することで実装できます。

 

imgの部分をsettingでつけた名前に変更してください。

 

これで画像がデスクトップ上で表示されたはずです。

 

複数の項目を追加したい場合

同じsection内に複数の項目をセットしたい場合は単純にsettingとcontrolのコードをセットして名前を変更すれば良いです。

 

function.php

 

 

name.php

 

 

 

 

 

コメント

タイトルとURLをコピーしました