creatersnest4

【WordPress】初心者のためのカスタムフィールドの使い方


こんにちは!
今回は、初心者のためのカスタムフィールドの使い方をご紹介します。
カスタムフィールドとは、「タイトル」と「本文」以外に、任意の入力フォームを追加できる機能です。
高度なWebサイトやCMSのサイトを構築する場合に役立ちます。

簡単なカスタムフィールドの使い方

カスタムフィールドが有効になっているか確認する必要があります。
管理画面の右上にある「表示オプション」をクリックして頂き、チェックを入れて下さい。

 

custom01

 

すると、投稿入力する欄から下にいった場所に、下記のような欄が出現します。
こちらを編集していきます。

 

cusutom02

 

「カスタムフィールド」の名前(キー)と値(バリュー)を設定し、
「カスタムフィールドを追加」ボタンを押下します。

ただし、これで表示されるわけではないのでご注意下さい。
表示方法としては、利用中のテーマ・テンプレートファイル(PHP)を、
少しいじってカスタマイズする必要があります。
今回は、初心者の方のためということで、プラグイン「Custom field Template」を利用した方法をご紹介します。

 

プラグインのインストール

下記のURLにてダウンロードするか、
https://wordpress.org/plugins/wp-custom-fields-search/

メニューの中から「プラグイン」→「新規追加」→「Custom field Template」にてインストールして下さい。

 

プラグインのインストール方法は、下記のサイト様が参考になります。

http://design-plus1.com/tcd-w/2010/10/plugin-install.html

 

カスタムフィールドテンプレートの基本設定

設定 → カスタムフィールドテンプレート

 

custom03

 

設定項目が沢山ありますが、最低限「テンプレートタイトル」と「テンプレートコンテンツ」を設定すれば、
カスタムフィールドを使えるようになります。

・「テンプレートタイトル」には、タイトル名を入力します。
・「テンプレートコンテンツ」には、コードを入力することで内容を設定することが出来ます。

 

テンプレートの表示項目は、
・[ID]:カスタムフィールドのID
・type:カスタムフィールドの形状(次項以降で詳細を説明します。)
・label:投稿画面で表示されるテキスト

です。

 

テキストボックスの設定

「type = text」:テキストボックス
「size = 20」:テキストボックスサイズ

 

 

チェックボックスの設定

「type = checkbox」:チェックボックスになります。
「value = 」:チェックボックスの選択肢 。複数の場合は「#」で区切ります。
「default = 」:選択肢のデフォルトする場合指定。複数の場合は「#」で区切ります。

 

 

ラジオボタンの設定

「type = radio」:ラジオボランとなります。
「value = 」:チェックボックスの選択肢 。複数の場合は「#」で区切ります。
「default = 」:選択肢のデフォルトする場合指定。複数の場合は「#」で区切ります。
※ラジオボタンでデフォルト値を複数個指定するとデフォルト値の指定は無視されます。

 

 

セレクトボックス・プルダウンリストの設定

「type = select」:セレクトボックス
「value = 」:チェックボックスの選択肢 。複数の場合は「#」で区切ります。
「default = 」:選択肢のデフォルトする場合指定。複数の場合は「#」で区切ります。
※セレクトボタンでデフォルト値を複数個指定するとデフォルト値の指定は無視されます。

 

 

テキストエリアの設定

「type = textarea」:テキストエリア
「rows = 5」:高さ(行数)
「cols = 40」:幅(文字数)
「tinyMCE = true」:投稿の本文入力フィールドの「ビジュアル」の機能を有効にする設定です。
「htmlEditor = true」:「テキスト」の機能を有効にする設定です。
「mediaButton = true」:「メディア」へのリンクボタンを有効にする設定です。

 

 

ファイルアップローダーの設定

「type = file」:ファイルアップローダー

 

 

以上でカスタムフィールとの設定が完了しました。

 

カスタムフィールドの利用方法

<コンテンツの入力>
記事投稿投稿画面を開くと、「本文」の下にカスタムフィールドの項目が表示されています。ここに、表示項目にそってコンテンツを入力します。

 

<本文中にショートコードを埋め込み>

そして、本文中のカスタムフィールドを挿入したい場所にショートコード[cft format=(数字)]を入力します。
(※=の後の数字が、テンプレートの番号と対応しています)

 

まとめ

いかがでしょうか。
カスタムフィールドの利用は少し初心者では難しいかもしれませんが、
高度なWebサイトやCMSのサイトを構築する場合に役立ちますので、是非ご利用下さい。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスマホのワイヤーフレーム作りに使えるベクター素材まとめ