WordPressダッシュボードでカスタム管理ページを作成する方法

書かれた記事:
  • 特集記事
  • 更新:Jun 30、2013

WordPressが数年前にその標準的なテーマであるKubrickを発表したとき、それはまたエキサイティングな新機能のラップを取りました。 その機能はカスタムテーマ管理パネルで、テーマ固有の“ functions.php”ファイルで機能と設定を定義することで可能になりました。 その後何年もの間、テーマオプションページは多くのテーマデザイナーによって残念に使われていませんでしたが、実際にユーザーに新しいテーマをインストールさせることなく自分のサイトの外観を制御できるようにするための素晴らしい方法です。 テーマの背景画像、列数、フォントの色などのものはすべて、このカスタム管理パネルを使用して変更できます。

管理パネル自体は、テーマの関数ファイルにカスタム値を定義する一連のPHP配列を入れることによって変更されます。 これらの値はテンプレートに含まれ、ユーザーが外観設定を視覚的に定義できる管理パネルで定義されます。 テーマデザイナーがPHPの仕組みと、そのコードを活用してテンプレートファイル内でカスタムプレゼンテーションを可能にする方法を学んだ後は、全体のプロセスは比較的簡単です。

いくつかの段階的なプロセスはすべて、いくつかのサイトワイド変数を設定し、この新しい管理ページでカスタマイズする必要があるものを定義することから始まります。

ステップ1:テーマ固有のFunctions.phpページの作成と編集

あなたがあなた自身のテーマを開発したのであれば、既存のテンプレートファイルと組み合わせるためにfunctions.phpファイルを作成した可能性はかなりありません。 これは比較的高度なオプションであり、ほとんどの設計者は単純にそれをすべてスキップします。 この場合、選択したFTPクライアントを開き、テーマのファイルが存在する次のサーバーURLを指定することが重要です。

/ public_html / wp-content / themes / YOUR-THEME-FOLDER /

このフォルダに入ったら、「functions.php」ファイルがないことを確認してから、テキスト編集プログラムを使用して「functions.php」という名前の新しいファイルを作成します。このファイルは、保存してサーバーにアップロードできます。 FTP サーバー上で直接編集できるため、テキスト編集プログラムは不要です。

“ functions.php”ファイルで有効なテーマオプションパネルを定義するための最初のステップは、文書の先頭に2つの変数を定義することです。 これらの変数は、ダッシュボードを使用してテーマの名前を表示したり、その管理ページ内のフォームや選択要素を識別するために使用されます。 以下のコードをよく見て、 "functions.php"ドキュメントの一番上に置いて、あなたのサイトのニーズに合わせてカスタマイズしてください。

$ longname = "管理パネル開発テーマ";
$ shortcode = "apdt";

これらの変数はさまざまな目的に役立ちます。 $ longname変数は、実際の管理オプションパネルにテーマの名前を表示するために使用されます。 このため、テーマのユーザー間の混乱を避けるために、開発者はテーマの正確な名前をこの変数に割り当てることをお勧めします。 $ shortcode変数は、句読点を含まないすべて小文字である必要があります。これは、コード自体の中でフォーム要素を識別するために使用されるためです。 この例では、テーマのフルネームに基づいて単純な頭字語が使用されています。 これはユーザーの好みに合わせてカスタマイズできます。

ステップ2:PHP配列を使用したカスタマイズ可能な設定の定義

まず、テーマに管理パネルの名前を教えることが重要です。 これはすべての潜在的な設定の上に印刷され、初心者ユーザーに目的の明確さを助長するのに役立ちます。 これは、 "functions.php"ファイル内の$ settingsタグに次の配列を追加することによって行われます。

$ settings = array(
array( "name" => $ longname。 "Appearance Settings"、
"type" => "title")、

次に、オプションがいっぱい入った配列が「開いている」か、ユーザー入力によって変更できることを示します。 これは、ページのタイトルの定義のすぐ下に表示される別の単純な配列を使って行われます。 それはこのように見えます:

array( "type" => "open")、

今度はテーマの外観のオプションを自由に定義し始めることができます。それぞれのオプションは新しい配列として作成されます。 この例では、テーマのフッターに配置されるテキストを定義します。 デフォルトでは、サンプルテーマには、テーマ開発者のWebサイトへのリンクとティームのバージョン管理情報が含まれています。 これは、自分の情報をフッターに入れることを好む多くのWordPressユーザーにとっては望ましくないので、このカスタムコントロールを有効にすると、“ footer.php”ファイルを手動で編集する手間が省けます。 これがそのやり方です。

配列(
"name" => "カスタムテーマフッタテキスト"、
"desc" => "これは、このテーマに含まれるすべてのページの最後に表示されるテキストです。"、
"id" => $ shortcode。 "_ custom_footer"、
"type" => "text"、
"std" => "実験テーマv1.0。 John Doeによって開発されました。 ここでテーマを増やす」)、

上記の配列により、ユーザーはテーマの標準フッターテキストを決定できますが、このプロセスがどのように機能するのか、および配列の各部分が何を定義しているのかを正確に説明するために配列タグを説明する必要があります。

氏名:これは、実際のテキストボックス自体の名前を参照し、ユーザーがテーマの管理オプションページに入るときに表示されません。

DESC:これは、カスタム設定に付随する短い説明であり、これはユーザーに表示されます。

ID:これは、テキストボックスの表示とスタイルの両方を行うために、ショートコードとフォーム名のカスタムメイドIDを使用します。

タイプ:フォーム要素がテキスト行、テキストボックス、ドロップダウンメニュー、ラジオボタン、またはチェックボックスのいずれであるかを定義します。

STD:これは、選択された要素のデフォルト値を決定します。 テキストボックスの場合、入力されるデフォルトのテキストが決まります。 チェックボックス、ラジオボタン、およびドロップダウンボックスでは、デフォルトで選択されているオプションが決まります。

ステップ3:WordPressに新しいオプションページへのアクセスを許可するように伝える

オプションページがテーマのホームフォルダ内の「functions.php」ファイルを使用する目的を与えられていても、それはまだWordPressによって認識されていないか、またはWordPressダッシュボード内の他の多くの設定ページの中に含まれていません。 これは、テーマのオプションページを機能ページで識別し、移動先を指定する必要があるためです(独立したサイドバー要素として、または[設定]グループ内で)。 これは、可能性のあるカスタマイズの配列の下の「functions.php」ファイルに追加される比較的単純な関数を使用して行われます。

関数experimental_theme_save_values(){
グローバル$ロングネーム、$ショートコード、$設定;
if($ _GET ['page'] == basename(__ FILE__)){
if( 'save' == $ _REQUEST ['action'])){
foreach($ settingsとしての$ settings){
update_option($ value ['id']、$ _REQUEST [$ value ['id']]); }
foreach($ settingsとしての$ settings){
if(isset($ _REQUEST [$値['ID']])){update_option($値['ID']、$ _REQUEST [$値['ID']]); } else {delete_option($ value ['id']); }}
header(“ Location:themes.php?page = functions.php&saved = true”);
死にます;
そうでなければ( 'reset' == $ _REQUEST ['action'])){
foreach($ settingsとしての$ settings){
delete_option($ value ['id']); }
header(“ Location:themes.php?page = functions.php&reset = true”);
死にます;
}
}
add_menu_page($ longname。”外観設定”、“”。$ longname。”外観設定”、 'edit_themes'、ベース名(__ FILE__)、 'experimental_theme_save_values');

このコードは2つのことを行います。 まず、テーマの設定を管理オプションパネルで保存することができます。 次に、WordPress Dashboardのサイドバーに独立したボタンを配置して、ユーザーがそれをクリックしてテーマオプションパネルに直接移動できるようにします。 実際のページと同じように、「外観設定」というラベルが付けられています。 テーマの外観をカスタマイズするためにオプションパネルに移動するように特別に指示することなく、混乱を排除し、ユーザーをページに誘導するための一貫性が重要です。

ステップ4:エラーメッセージの追加とPHPファイルのクローズ

テーマオプションパネルのすべての要素を入力する最後のステップは、ユーザーが遭遇する可能性のあるエラーメッセージを定義してから、フォーム要素をオプションページ内のデフォルトのWordPressスタイルで表示できるようにすることです。 エラーメッセージを追加するには、このコードをPHP関数ファイルに貼り付けます。

関数experimental_theme_save_values(){
グローバル$ロングネーム、$ショートコード、$設定;
if($ _REQUEST ['保存'])エコー '
=> $テーマ名。 外観のカスタマイズは正常に保存されました。
';
if($ _REQUEST ['リセット'])エコー '
=> $テーマ名。 外観のカスタマイズが正常にリセットされました。
';

これらの2行のコードの下に、?>終了タグを使用してfunctions.phpファイルのPHPセクションを閉じることができます。 この下に、XHTMLコードが配置され、標準のWordPress Dashboardスタイルシートを使用して要素のスタイルを設定します。

ステップ5:オプションページにスタイルを与える

現在、WordPress Dashboardのユーザーは新しいエラーページを見ることができますが、それほど多くのことはできません。 これは、フォーム要素とスタイルシートが管理インタフェース内で使用するためにまだfunctions.phpファイルに配置されていないためです。 新しいパネルで使用するためのスタイルシートとデフォルトのフォーム要素が含まれているので、これですべて変更しようとしています。

<div class = "wrap">
<h2> <?php echo $ longname; ? >設定</ h2>

<form method = "post" action = "options.php">

<?php break; case 'text':? >

<tr>
<td width =” 20%” rowspan =” 2” valign =” middle”> <strong> <?php echo $ value ['name']; ? > </ strong> </ td>
<td width =” 80%”> <input style =” width:100%;” name =” <?php echo $ value ['id']; ? >” id =” <?php echo $ value ['id']; ? >” type =” <?php echo $ value ['type']; ? > "value =" <?php if(get_settings($ value ['id'])!=“”){echo get_settings($ value ['id']); } else {echo $ value ['std']; ? >” /> </ td>
</ tr>

<tr>
<td> <small> <?php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<?php break;}? >

<input type =” submit” value =” <?php _e( 'テーマ設定の保存')? >” />

このコードはPHP関数ファイルの終了タグの下に貼り付けられ、テーマオプションパネルに含まれる可能性があるフォームの種類ごとにカスタマイズできます。 「case」変数は、「テキスト」からテキストボックス、チェックボックス、選択、タイトルなどに変更できます。 これらのフォームは、テーマで使用されている場合にのみ含め、定義し、スタイル設定する必要があります。 それ以外の場合は、それらを含める必要はなく、テーマの関数ファイルから除外することで、効率性とクリーンなコードが促進されます。

ステップ9:実際のテーマでカスタムオプションを有効にする

テーマのパブリックテンプレートに変更があることを確認できるようにするには、実行する2つの手順があります。 1つ目は、このチュートリアルの前の手順で有効にしたユーザー定義の著作権とバージョン管理のテキストを表示する変数をテーマのフッターに配置することです。 これは、フッターの著作権領域に次のコードを配置することによって行われます。

<?php echo $ apdt_custom_footer; ? >

このテキストは、以前に定義されたフッターテキストのカスタム配列を呼び出し、“ Echo”ステートメントに従って、そのテキストをフッターに印刷します。 このタグは、ユーザーに適したXHTMLタグ内に含めることができますが、サイトのヘッダーにコードを追加しないと表示されません。

ヘッダーでは、WordPress Dashboardで設定されているユーザー定義のオプションを検索するようにテーマを指定する必要があります。また、カスタムの "functions.php"ファイルで定義されている変数を知っていて、ウェブサイトに これは、次のPHP変数をWebサイトのヘッダー(通常は "header.php"ファイル)に配置することによって行われます。

<?php global $ settings;
foreach($ settingsとしての$ settings){
if(get_settings($ value ['id'])=== FALSE){$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings($ value ['id']);} }
}
? >

それだけです。 これで、カスタムfunctions.phpファイルで定義されたすべてのオプションは、指定されたカスタマイズとコンテンツが有効になると想定されているカスタム定義のPHP変数を含めることによって、ページの外観に反映させることができます。

ステップ10:新しい設定とオプションページのテスト

「functions.php」ファイルに配置されたPHPコードのバグ、エラー、および偶発的エラーについて徹底的にテストされるまで、WordPressの開発作業は完全には完了していません。 それは言った、それはテストを受ける時が来た! WordPressダッシュボードにログインし、作業中のテーマが現在選択されていない場合は、サイドバーの[表示]カテゴリに移動して関連するテーマをアクティブにしてください。

そこから、いくつか点検してください:

  1. テーマの設定リンクが、「設定」サイドバーカテゴリの見出しの下にあるサイドバーに独自のエンティティとして表示されていることを確認します。
  2. 指定されたフッターテキストのカスタマイズオプションは、カスタムオプションコントロールパネルでアクセスできることを確認してください。 フッターのデフォルトの内容を変更して設定を保存します。 エラーなしで保存することを確認してください。
  3. 実際の公開ウェブサイトにアクセスして、フッターのコンテンツに関するダッシュボード内の変更が表示されていることを確認します。
  4. すべてが適切に機能する場合は、安堵のため息を吹き込み、最初のWordPressテーマオプションコントロールパネルのページをお楽しみください。

ジェリーローについて

WebHostingSecretRevealed.net(WHSR)の創設者 - 100,000のユーザによって信頼され、使用されているホスティングレビュー。 15年以上のWebホスティング、アフィリエイトマーケティング、およびSEOの経験。 ProBlogger.net、Business.com、SocialMediaToday.comなどへの貢献者。