HOMEブログWordPressWordpressのテーマ(テンプレート)に付いてくる、オプション機能を改造して基本的な設定をテーマに表示させる。

Wordpressのテーマ(テンプレート)に付いてくる、オプション機能を改造して基本的な設定をテーマに表示させる。

投稿日:2013年12月26日

Wordpressのテーマには、オプション機能としてそのテーマのコントロールパネルが付属する場合があります。 このコントロールパネルに任意の項目を追加して、テーマ(テンプレート)に反映させる方法です。

※ご注意

この内容はサイト製作初心者の方が行なう場合は、必ずオリジナルファイルのバックアップ(複製)をした上で作業をしてください。
適切な変更が出来ない場合、表示エラー等が起きサイトが表示されない場合があります。
こう言ったテーマの改造をする場合は、必ずオリジナルファイルのバックアップ(複製)をする癖をつけましょう。

Wordpressのテーマ(テンプレート)に付いてくる、オプション機能を改造して基本的な設定をテーマに表示させる。

webriti社のテーマをイジル!

webriti社のテーマは、無料のモノでもデザインや機能がよく出来ているので、使っている方も多いかと思います。

webriti社は現在3種類の有料テーマを販売中。
各テーマ無料版も用意されています。

このテーマを適用すると、Option Panel(オプションパネル)と言う入力支援の為のページがテーマに追加されます。このオプションパネルに必要な項目を入力するだけで、Wordpressやサイト製作の初心者でもデザイン性の高いテーマを使う事が出来ます。

しかし、このオプションパネルも万能ではありません。
無料のテーマでは入力出来る項目がある程度限定されているようで、微妙にカユイ所に手が届かない……
おそらく、有料のテーマ($45)を購入すれば、そう言った事も無くなるのでしょうが、確かな確証も無いのでここはひとつ、このオプションパネルを改造して任意の項目を追加する事にしましょう。

管理画面

管理画面

改造手順

改造は意外と簡単です。

  1. 入力フォームの変更
  2. 表示箇所の変更

この2点のみ。
一般的な改造と変りません。

では、作業に入ります。

ファイル構成

ファイル構成

変更するファイルは、【functions】 → 【theme_options】 フォルダ内にあります。

ファイルはタブ毎に管理されているので、項目を追加したいファイルを選択してください。

ファイル

theme_home_page.php HOMEページで表示する各種項目
home_page_project.php プロジェクト項目
home_page_testimonials.php Testimonials(お客様の声)各種項目

上記の3ファイルのいずれかに追加します。
今回はtheme_home_page.phpへの追加をします。

作業時は文字コードを UTF-8 の状態で作業してください。S-JIS(シフトJIS)で編集すると、文字化けの原因になるので注意が必要です。

無料版で表示する機能が無いモノとして、コピーライトの変更項目がありませんでした。
そこで今回は、コピーライト編集機能の追加をします。

theme_home_page.phpを開くと、最初に各入力項目の変数設定が17~48行まであります。
ここに下記のコードを追加します。

$current_options['slider_copyright'] = sanitize_text_field($_POST['slider_copyright']);

コピーライト変数をここで定義します。
コピーライトの追加と言う事で、変数名を slider_copyright としました。

次に、入力欄を追加します。

追加する場所は101行目以降の場所であれば、何処でもOKですが、149行と150行の間に、下記のコードを挿入します。
(149行で入力リストが一度完了しているので、150行目移行に挿入します。基本的にリストタグが終了している場所に以下のコードを挿入してください)

<div class="postbox" id="Basic_setting_2">
<div title="Click to toggle" class="handlediv"><br></div>
<h3 class="hndle"><span><?php _e('コピーライト','busi_prof');?><span class="postbox-title-action">
</h3>
<div class="inside">
<p><h4 class="heading"><?php _e('コピーライト','busi_prof');?></h4>
<input type="text" class="inputwidth" name="slider_copyright" id="slider_copyright" value="<?php if($current_options['slider_copyright']!='') { echo esc_attr($current_options['slider_copyright']); } ?>"/>
<span class="icon help">
<span class="tooltip"><?php _e('コピーライト','busi_prof');?></span>
</span>
</p>
</div>
</div>

特に内容の説明はしませんが、上記のコードで新しい入力欄が挿入されます。
※表示項目にコピーライトと言う日本語を使用していますが、copyrightと英文でもOKです。

オプションパネルへの追加作業は上記で完了です。
比較的簡単に作業が終了します。

表示部の修正

次は、オプションパネルで入力した値を表示させます。
今回はコピーライトなので、フッター部への変更です。

footer.php を開きます。

上部にコメントアウトしてある、シグネチャの下、PHPの終タグ ?> の直前に下記のコードを追加します。

get_header();
$current_options=get_option('busiprof_theme_options');

これは、オプションパネルで入力した値(データ)を呼び出す為のコードです。
このコードが無いと、データはブランクで表示されませんのでご注意ください。

呼び出した値を表示させます。

63行目 <div class="span8"> の次に以下のコードを挿入。

<?php if($current_options['slider_copyright']!='') {?>
  <?php echo $current_options['slider_copyright'] ?>
  <?php } ?>

簡単に説明すると。
slider_copyright の変数にデータ(値)があれば、そのデータを表示しなさい。
と言う内容です。
つまり、先のファイルヘッダに、データベースを参照するphpを書いたので、指定された変数にデータが入っているか参照します。そしてデータが入ってい(値がある)れば、その値を表示しなさい。という命令です。

上記で追加作業は完了です

これで、オプションパネルから入力した値が表示されます。

まとめ

変更手順は次の通り

1.オプションパネルの変更
 1-1.変数追加
 1-2.入力欄追加
2.表示変更
 2-1.データ取得(読み出し)コード追加
 2-2.データ表示部追加

既存のシステムを利用しているので、わざわざ面倒なデータ取得の為のプログラムやソースを書かずにすむので、非常に楽です。理屈が解れば作業時間は30分も掛かりません。

また応用範囲が広いので他の箇所でも利用が可能です。

Wordpressのテーマはかなり複雑な構造をしているので、一見すると何が書いてあるか解りませんが、一つ一つ丁寧に見てゆけば必ず答えはあります。

こう言った小さ追加変更や修正がWordpressのテーマを使いやすくして行きます。

今回はソースに関して細かい説明は省略しましたが、こう言った追加変更はまず【コピペ】が基本です。
そしてコピペしたあと動作確認でイメージ通りに動く事が解れば、次の段階としてそのソースの意味を考えましょう。
最初からPHPを勉強していたのでは、いつになっても完成しないかもしれません。
まずはイメージ通りに、動く・表示する の確認をしましょう。

今回の内容についてのご質問は下記のFacebookコメント欄かお問い合わせからお願いします。

またWordpressのテーマカスタマイズも行なっております。
今回の様に部分的なカスタマイズから、テーマの新規製作まで、幅広く行なっています。
Wordpressのテーマカスタマイズに関するご相談ははお気軽にどうぞ。

お問い合わせはお気軽に

この記事が面白いと思ったら、下のボタンをお願いします。

御社にとってのホームページとは何ですか。

横浜でホームページ製作を始めて、10年以上が経ちます。ホームページ制作会社は、横浜にも数多くありますので、私の様な個人で仕事をしている者へのお仕事依頼はなかなかありませんが、ご相談頂ければ、フットワークの良さと、フレンドリーで身近にお役にたつようなお仕事を心がけております。

ホームページ製作はもちろんのこと、DM製作やパンフレット等の紙媒体の製作も行なっております。

最近は、CMS(主にWordPress・modx)によるホームページ制作を主に行なっております。

直接お話をお伺い出来るエリアは、横浜市内および、横浜近郊の神奈川県。東京都23区の一部とさせて頂いておりますが、エリア外でも対応が可能ですので、まずは、お気軽にご連絡ください。