Webデザイナーブログから学ぶホームページ制作

WordPress（ワードプレス）では、デフォルトの機能にカスタムフィールドが用意されています。
カスタムフィールドを利用することで記事内に任意の入力項目を追加できます。カスタムフィールドを用いることで記事内のタイトルや本文以外の項目を自由に作成ができ、固定ページ等のページ作成要素に付け加えることで、お店や施設の情報や商品の細かい情報を表示させるための特定の入力項目を追加できます。
デフォルト機能としてカスタムフィールドが用意されておりますが、WordPress（ワードプレス）では、カスタムフィールドを利用するためのプラグインが沢山あります。その中でもより使い易い「Custom Field Template」というカスタムフィールドプラグインは、見た目も使い易く簡単に設定を行うことができます。

今回は、WordPress（ワードプレス）でカスタムフィールドを設置してページの内容を簡単に入力できるプラグイン「Custom Field Template」の設定方法を解説します。

カスタムフィールドテンプレートは、WordPressサイトにおいてカスタムフィールドを簡単に設置し、ページの内容を柔軟に管理できる仕組みです。
通常、WordPressでは投稿や固定ページの編集画面には標準的なフィールド（タイトル、本文など）が用意されていますが、カスタムフィールドを使うことで、さまざまな追加情報やデータを管理することができます。

具体的には、カスタムフィールドテンプレートを使用すると、追加の入力フィールドを作成し、それに応じてデータを入力できます。

例えば、商品の価格や特徴、イベントの日時や場所、個別のページのSEOタイトルやメタデータなど、特定の情報を設定したい場合に活用できます。

「Custom Field Template」プラグインは、WordPressサイトにカスタムフィールドを簡単に設置し、ページの内容を柔軟に管理するための便利なツールです。柔軟なカスタマイズやSEO対策のための情報管理が可能であり、さまざまな用途に応じたカスタムフィールドの設定が可能です。 以下に、このプラグインの特徴をいくつか紹介します。

【「Custom Field Template」の特徴】
・簡単な設定と利用
・多様なフィールドタイプのサポート
・テンプレートの柔軟性
・SEO対策への活用
・拡張性とカスタマイズ性

「Custom Field Template」は、直感的なインターフェースと使いやすい設定オプションを提供しています。プラグインをインストールし、テンプレートを作成するだけで、カスタムフィールドの設定が可能です。

また、テンプレートの適用先を指定することで、特定の投稿タイプや固定ページにのみカスタムフィールドを表示できます。

このプラグインでは、テキストフィールド、テキストエリア、チェックボックス、ラジオボタン、ドロップダウンリストなど、さまざまなフィールドタイプをサポートしています。これにより、情報の入力や選択肢の設定が柔軟に行えます。

カスタムフィールドテンプレートは、デザインや表示方法も自由度が高いです。CSSやテンプレートファイルを使用して、カスタムフィールドのスタイルや配置を調整することができます。

また、PHPコードを使用してテンプレート内でフィールドの値を表示することも可能です。

カスタムフィールドを使用して、ページごとにSEOタイトル、メタデータ、キーワードなどの情報を設定することができます。これにより、検索エンジン最適化に効果的な情報を柔軟に管理できます。

「Custom Field Template」は、他のプラグインやテーマとも連携しやすく、さまざまな拡張性を持っています。

また、プラグイン自体もカスタマイズ可能であり、特定の要件やニーズに合わせて機能を追加したり変更したりすることができます。

「Custom Field Template」は、柔軟性があり、サイトのカスタマイズや情報管理に役立ちます。
「Custom Field Template」は、テキスト、数値、チェックボックス、ドロップダウンリストなどの様々なフィールドタイプを持つことができ、投稿エディタやカスタムテンプレートファイル内で値を表示することができます。
これにより、WordPressサイトのコンテンツに柔軟性と拡張性を与えることができます。

WordPressプラグインは、直接プラグイン公式サイトからダウンロードし、サーバーにアップロードを行って有効化する方法と管理画面プラグインメニューから追加して有効化する方法があります。
ここでは管理画面から導入する方法を解説いたします。
※「Custom Field Template」プラグインは無料プラグインです。

管理画面プラグインメニュー画面から「Custom Field Template」で検索を行い、「今すぐインストール」ボタンをクリックします。

「Custom Field Template」プラグインを追加したら、プラグインの有効化する為に「有効化」ボタンをクリックします。

プラグインの「有効化」を行うと管理画面「設定」メニュー内に「カスタムフィールドテンプレート」が表示されます。
「カスタムフィールドテンプレート」をクリックして「Custom Field Template」の編集画面へ移動します。
「カスタムフィールドテンプレート」は初期設定で予めサンプルのフィールドが用意されているため、そのまま利用することも可能です。

設定画面を表示すると、「TEMPLATE #0」という形でデフォルトテンプレートが表示されていて、サンプルコードが入力されてます。

[Plan]
type = text
size = 35
label = Where are you going to go?
 
[Plan]
type = textfield
size = 35
hideKey = true
 
[Favorite Fruits]
type = checkbox
value = apple # orange # banana # grape
default = orange # grape
 
[Miles Walked]
type = radio
value = 0-9 # 10-19 # 20+
default = 10-19
clearButton = true
 
[Temper Level]
type = select
value = High # Medium # Low
default = Low
 
[Hidden Thought]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
 
[File Upload]
type = file

「カスタムフィールドテンプレート」の編集画面からカスタムフィールドの追加を行っていきます。
フィールドを追加する前に、カスタムテンプレートの「テンプレートタイトル」から「テンプレートフォーマット」の設定を行います。設定が完了したら最後に「テンプレートコンテンツ」内にフィールドの追加を行います。

カスタムフィールドテンプレートの名前やタイトルを指定します。
このタイトルは管理画面で表示されるため、わかりやすく適切な名前を付けます。

カスタムフィールドテンプレートの使用方法や入力ガイドラインなど、説明やメモ書きとして表示されるインストラクションを指定します。
これにより、このテンプレートが何の情報の入力フォーマットか、自分用にメモとして残しておくことができます。

カスタムフィールドテンプレートを適用する投稿タイプ（例：投稿、固定ページなど）を指定します。
複数の投稿タイプを選択することも可能です。「両方」「投稿」「ページ」のどれかを選択できます。

カスタムフィールドテンプレートを適用するカスタムポストタイプを指定します。
カンマで区切って複数のカスタムポストタイプを選択することができます。 ※例：news,post,page

カスタムフィールドテンプレートを適用する投稿のIDを指定します。
複数の投稿を選択する場合は、カンマで区切って指定します。 ※例：3,5,7

カスタムフィールドテンプレートを適用するカテゴリーのIDを指定します。
複数のカテゴリーを選択する場合は、カンマで区切って指定します。 ※例：3,10

カスタムフィールドテンプレートを適用する特定のページテンプレートのファイル名を指定します。
複数のページテンプレートを選択する場合は、カンマで区切って指定します。 ※例：index.php,company.php

カスタムフィールドテンプレートを適用する特定のユーザーのIDを指定します。
複数のユーザーを選択する場合は、カンマで区切って指定します。

カスタムフィールドテンプレートを適用する特定のユーザーのユーザー名を指定します。
複数のユーザーを選択する場合は、カンマで区切って指定します。

カスタムフィールドテンプレートを適用する特定のユーザー権限を指定します。
複数の権限を選択する場合は、カンマで区切って指定します。

カスタムフィールドテンプレートの表示フォーマットを指定します。
例えば、テキスト、数値、日付などのフォーマットを選択することができます。

カスタムフィールドテンプレートに表示するコンテンツや入力フィールドの内容を指定します。
ここで定義した内容（フィールド）が実際の投稿やページに表示されます。

「カスタムフィールドテンプレート」で新しくフィールドを追加する場合は、一番下の「テンプレートコンテンツ」内にフィールドの追加を行います。
フィールドを追加する場合は、「フィールド名（項目名）」「フィールドタイプ」「フィールドサイズ」「ラベル（管理画面に表示される備考）」の順番に記述する必要があります。

[フィールド名]
type = text
size = 80
label = ※ここに内容を記入してください。

[フィールド名]
type = フィールドタイプ
size = フィールドサイズ
label = ラベル（管理画面に表示される備考）

ユーザーが短いテキスト情報を入力できるフィールドです。
一行のテキスト入力が可能で、例えばタイトルやキーワードなどの情報を入力するのに適しています。

[営業時間]
type = text
size = 80
label = 例：平日11:30～20:30　土日9:30～18:30

ユーザーが複数のオプションから選択できるチェックボックスです。
複数の項目を同時に選択することができ、例えば求人情報ページを作成し、「サービス種類」等の選択に使用できます。

[サービス種類]
type = checkbox
value = 児童発達支援 # 放課後等デイサービス # 保育所等訪問支援
default = 児童発達支援
label = ※サービス内容を選択して下さい。

ユーザーが複数のオプションから1つだけ選択できるラジオボタンです。
互いに排他的な選択肢を表示し、例えば記事の公開状態（公開・下書き）や評価（星の数）などの選択に適しています。

[駐車場]
type = radio
value = 有 # 無
default = 無
label = ※駐車場の有・無を選択して下さい。

ユーザーがドロップダウンメニューから1つのオプションを選択できるフィールドです。
複数の選択肢がある場合に使われ、例えば施設情報ページを作成し、「空き状況」等の選択に使用できます。

[空き状況]
type = select
value = 施設確認 # 〇 # △ # ✕
default = 施設確認
label = ※空き状況を選択して下さい。

複数行のテキスト入力が可能なエリアを提供するフィールドです。
長文の説明や本文などを入力するのに適しています。

[施設からのコメント]
type = textarea
rows = 3
cols = 80
tinyMCE = true
htmlEditor = true
mediaButton = true
label = ※コメントを100文字前後で記入してください。

ユーザーがファイルをアップロードできるフィールドです。
画像やドキュメントファイルのアップロードに使用でき、例えばサムネイル画像や添付ファイルの指定に適しています。

[施設写真]
type = file
label = ※横幅690px以上の写真を参照してください。

「カスタムフィールドテンプレート」編集画面でフィールドの追加が完了したら、設定を行ったページ編集画面に移動するとページ詳細の下部に先ほど追加したフィールドが表示されるようになります。 表示されたフィールド枠に記入・選択を行えばフィールドの表示準備は完了です。 ※フィールドの表示準備だけではページ画面に表示されません。

カスタムフィールドで入力した情報を、実際の固定ページや投稿ページで表示する必要があります。テンプレートファイルやプラグインを使って、カスタムフィールドの値を取得し、任意の場所に表示することができます。 また、CSSやHTMLを利用してデザインをカスタマイズすることも可能です。 カスタムフィールドで入力された値は、各テンプレートファイルのループ内で、カスタムフィールドの値を呼び出すテンプレートタグ「post_custom」を利用し、値を出力します。

<?php if(post_custom('フィールド名')): ?>
<?php echo post_custom('フィールド名'); ?>
<?php endif; ?>

<?php $checkbox = post_custom('フィールド名');
if (is_array($checkbox)) {
foreach($checkbox  as $val){
if ($val === end($checkbox)) {
echo $val;
    }else{
echo $val.", ";
}
}
}else{
echo $checkbox;  
} ?>

<?php if(post_custom('フィールド名')): ?>
<?php echo post_custom('フィールド名'); ?>
<?php endif; ?>

<?php if(post_custom('フィールド名')): ?>
<?php echo post_custom('フィールド名'); ?>
<?php endif; ?>

<?php if(post_custom('フィールド名')): ?>
<?php echo post_custom('フィールド名'); ?>
<?php endif; ?>

<?php if(post_custom('フィールド名')): ?>
<?php echo wp_get_attachment_image(post_custom('フィールド名'),''); ?>
<?php endif; ?>

※フィールドを出力する際に、フィールド内に値が入っていない場合に非表示設定が可能です。非表示設定を行う場合は、「else」を追加し「else」の後に値が入っていない表示内容を記載します。

<?php if(post_custom('フィールド名')): ?>
<?php echo post_custom('フィールド名'); ?>
<?php else : ?>
内容はありません。
<?php endif; ?>

テンプレートファイルのループ内にテンプレートタグ「post_custom」を記述したらWebページを確認します。 Webページの画面を表示してカスタムフィールドに記述した値が表示されていれば完了です。

以上が、「Custom Field Template」プラグインの設定方法です。このプラグインを使用することで、WordPressのページの内容を簡単にカスタマイズできるようになります。カスタムフィールドを活用して、情報の入力や管理を効率化し、サイトの運営をスムーズに行いましょう。 カスタムフィールドの使い方を自由に使いこなすことで、手間を省きながらクオリティの高いコンテンツを提供することが出来るため、このプラグインを活用してみてください。