ワードプレスのプラグインCustom Field Suiteの使い方

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方 , ,

Custom Field Suiteを入れたもののどうやって使うんだろうって人向けの細かい使い方をご紹介いたします。

はじめに

ワードプレスのカスタムフィールドを簡単に使う事が出来るプラグインCustom Field Suiteの詳しい使い方をご紹介いたします。インストールと簡単な使い方に関しては前回の簡単にカスタムフィールドが使えるCustom Field Suiteを見て下さい。

注意事項

Custom Field Suiteはチェックボックスが使えません。

各機能の使い方

共通内容について

cfs1

デフォルト値
デフォルト値を入力していないと、もともと空白になり、情報を入力すると予め表示されるようになります。
バリデーション
入力必須フィールドにチェックを入れると入力しないと公開できなくなります。
概要
カスタムフィールドの入力画面に説明を入れる事が出来ます。

以上の情報をCustom Field Suiteで入力すると

cfs2

このように表示されます。

単一行テキスト

単一行テキストは、短い文章を使う時に利用します。

cfs3

テキストエリア

テキストエリアは単一行テキストと比較してもう少し長い文章が入るケースに使用します。

cfs4

フォーマットの「改行を<br />に変換」を選択すると文字を改行すると反映されるようになります。

リッチエディタ

リッチエディタはワードプレスの投稿と同じエディタを使って入力する事が出来ます。

cfs5

単一行テキストやテキストエリアよりも長い文章を入力する場合はこちらを利用しましょう。

ハイパーリンク

ハイパーリンクはリンクを登録する際に入力します。

cfs6

Link Targetは「None」「_blank」「_self」「_top」の4っつからお選び頂けます。

日付フォーマット

任意の日付を入力する事が出来ます。

cfs7

ちなみにカレンダーのアイコンをクリックすると

cfs8

このようなカレンダーが表示されます。

カラーピッカー

カラーピッカーは色の指定をする事が出来ます。

cfs9

枠内をクリックすると

cfs10

このように好きな色を指定する事が出来ます。これはcssと組み合わせて使う事の方が多いかもしれませんね。

簡易チェックボックス

簡易チェックボックスは本当に簡易なチェックボックスでチェックを入れるか入れないかでしか使う事が出ません。

cfs11

これはPHPを利用する事で面白い使い方をする事が出来るでしょう。

セレクト

セレクトは選択肢がいくつかある場合に利用します。

cfs12

選択肢の枠内にはこのように改行する事で選択肢を多数入力する事が出来ます。

cfs13

ドロップダウンで好きな項目を選択します。

複数選択にチェックを入れると

cfs14

このように全体が表示されるのでキーボードのCtrlを押しながらクリックすると複数を選択する事が出来ます。

関連ポスト選択

関連ポスト選択は、関連している記事を任意で入力する事が出来ます。

cfs15

設定画面の投稿タイプでは、post、page、attachmentなど投稿タイプが表示されます。カスタム投稿を作成していケースもこちに表示されると思います。

cfs16

実際の投稿画面ではこのように選択すると右側の表示されます。また検索枠を利用する事で「予約投稿」の記事にも関連ポストを利用する事が出来ます。

ユーザー

ユーザーでは、登録しているユーザーを選択する事が出来ます。

cfs17

使い方は関連ポスト選択と同じです。

ファイルのアップロード

ファイルのアップロードでは、画像などのファイルを管理画面上から簡単にアップロードする事が出来ます。

cfs18

返り値は基本的にファイルURLで問題ないと思います。

ループの使い方

ループと言うのはこの機能だけで使うのではなく、他の機能と組み合わせる事で発揮します。

ループの設定

まずはループを作り、ループさせたい項目をその下に持っていきます。

cfs19

 

そして、一度更新ボタンをクリックします。

cfs20

するとこのようにループの下に青いラインが出来ています。

名称未設定-1

次はファイルのアップロードをドラッグしてループの下に持っていくとループの下にオレンジ色のラインが表示されます。

cfs21

そしてドロップするとこのようにループの下にファイルのアップロードがくっつきました。この状態で再度更新ボタンをクリックします。

ループの入力

設定が完了したので次はループを入力してみます。

cfs22

このように表示されているので追加ボタンをクリックします。

cfs23

するとこのようにファイルのアップロードが表示されました。そして、さらに追加ボタンをクリックすると

cfs24

 

このようにもう一つファイルのアップロードを入力する事が出来ます。

タブの使い方

タブもループと同様でタブ機能だけでは利用出来ません。

タブの設定

cfs25

タブの下に任意のカスタムフィールドを入れ、ていく形になります。

例えばタブの下にファイルのアップロード、タブ2の下に単一行テキスト、タブ3にテキストエリアを設置してみました。

タブの入力画面

cfs26

 

このようにタブが三つ横に並び、最初のタブの中にはファイルのアップロードのみが表示されています。

cfs27

タブ2を選択すると単一行テキストが表示されています。

タブの注意点

タブを使うと、タブより下には他のカスタムフィールドを通常通りに表示できなくなってしまいます。

cfs28

例えば、このようにタブ3の下に3っつのカスタムフィールドを並べてみました。

cfs29

するとこのように全てタブ3の中に入ってしまいました。

以上がカスタムフィールの使い方と入力方法です。

配置ルール

Custom Field Suiteでは各カスタムフィールドに配置ルールを付ける事が出来ます。

cfs30

投稿タイプ

例えば、固定ページの入力画面にはカスタムフィールドを表示させたいが投稿ページの入力画面には表示させたくない場合は、投稿タイプを等しいにしpageを設定します。

cfs31

また、カスタム投稿を作成している場合はこちらにも表示されます。

ユーザー権限グループ

カスタムフィールドは管理者だけが利用出来て、それ以外の人は利用できないと言う設定にしたい場合は等しいにし、administratorを選択して下さい。

cfs32

 

投稿

特定の固定ページ内のみにカスタムフィールドを表示させたい場合にこちらの機能を使います。

cfs33

先日のカスタムフィールドCustom Field Suiteの導入方法について書いた記事にカスタムフィールドを利用する場合は検索機能を利用すると選択が出来ます。

分類

分類は主にカテゴリごとにこのカスタムフィールドを使用するかどうかを設定出来ます。

cfs34

副業で稼ぐ仕組みの作り方と言うカテゴリを入力すると、このカテゴリを選択している記事だけにカスタムフィールドの入力が表示されるようになります。

固定ページテンプレート

固定ページテンプレートは個別に固定ページのデザインを作っている場合に選択する事が出来ます。

カスタムフィールドを利用する場合、結局テーマファイルも表示用である程度いじらないといけないので、この配置ルールを使う事が多いです。

以上でードプレスのプラグインCustom Field Suiteの使い方の説明を終了致します。次回はCustom Field Suiteを使った分岐などを紹介していきます。

カスタムフィールドは必ず使う

私と同じようにブログを使って稼げる副業をしている人は、必ず使う事になるのがカスタムフィールドです。

最初はブログだけでちょくちょく更新しようと考えるが、やればやるほど色々とやりたい事やアイデアが必ず出てくると思います。その時に役立つのがこのCustom Field Suiteと言うワードプレスのプラグインです。

初めて使ったのが2年前ですが、使い方や工夫を覚えた事でメインの仕事にも役立つようになりました。いやー、勉強すればするほど面白いアイデアも沢山出てきますしコツコツが大切なんだなと最近特に思うようになりました笑

関連記事

投稿のビジュアルにcssを反映させる

ビジュアルと実際のデザインが違うんだが・・・・ はじめに 自作のテーマを使った場合、ワードプレス

記事を読む

no image

オリジナルドメインを使おう

オリジナルのドメインについては取得するだけだと意味がありません。オリジナルのドメインは設定しないと使

記事を読む

カスタムフィールドを使って計算 WordPress

ワードプレスのカスタムフィールドと言う機能を使って計算する方法をご紹介いたします。 はじめに 最

記事を読む

no image

記事や固定ページにパスワードを設定する

ワードプレスの記事や固定ページにパスワードを設定する方法をご紹介いたします。 はじめに

記事を読む

Gmailとサクラのメールの連携する方法

Gmailとさくらサーバのメールを連携させる方法のご紹介です。 はじめに 普段からGma

記事を読む

フォトショップで文字や人物が簡単に消せたったwww

フォトショップを使えば人物を消す事がこんなにも簡単に出来るとは思ってもみませんでした

記事を読む

ワードプレスの管理画面でチェックできるアクセス解析

今まで使っていたアクセス解析がデータが蓄積されていくタイプなので、少し重いなと感じるようになりました

記事を読む

画像を特定のサイズで表示させる方法WordPress

カスタムフィールドで登録した画像を指定のサイズで表示させる方法をご紹介いたします。 はじめに

記事を読む

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている際の反映されるまでの時間を調べ

記事を読む

記事の投稿方法【ワードプレス】

ワードプレスをインストールし、ブログを書く事が出来るになりました。ただ、通常のブログと違いますので記

記事を読む

Message

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

現在の総記事数: 323件

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ はじめに

EC-CUBE特定の商品ステータスのみを特定の箇所に表示させる

代引きが出来ない商品やメール便が対応できない商品を目立たせたい時などに

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

→もっと見る

PAGE TOP ↑