超高速CMS実行環境 KUSANAGI稼働中
本サイト処理速度 0.000
language

企業向けCMSカスタムフィールドテンプレート活用法について

WordPress

【WordPress Express】その他の記事

01.企業向けCMSカスタムフィールドテンプレート活用法

WordPress Express 創刊号 まず記念すべき最初の記事は、
「企業向けCMSカスタムフィールドテンプレート活用法について」から書かせていただきます。

WordPress管理画面での編集は、意外と困難。

経験された方もいるかと思いますが、全くのWordPress初心者の方に管理画面で入力してもらうのは
思っている以上に結構大変!

初心者の方から多く寄せられる苦情

  • マニュアルなんていちいち読まないよ
  • どこに入力すればよいかわからない。
  • レイアウトが崩れてしまったんだけど、どうすればよい。

簡単に更新できるCMSの良さをいかせず、時間がかかってしまうことに…
そんな経験ありませんか?

これでは、WordPressの威力を発揮できていませんよね。そこで、今回はWordPress初心者の方
でも更新しやすいサイト、指定の場所に、データを入力するだけで、サイトの更新ができてしまう
魔法のようなサイトの作り方を書きたいと思います。

顧客満足度が格段に向上する魔法のツール
「カスタムフィールドテンプレート」

初心者の方の悩みを解決するため、以下のように考えました。

  • どこに入力すればよいかわからない。
  • レイアウトが崩れてしまったんだけど、どうすればよい。

解決策

  • 入力箇所を、極力減らし、1画面内に納める。
  • 入力する項目を1対1に対応させ、わかりやすくする。

解決策実現のツールとして、「カスタムフィールドテンプレート」を使用します。

補足:「カスタムフィールドテンプレート」は、初心者の方でも直感的に入力できるよう「カスタムフィールド」の使い
勝手を向上させるプラグインです。

では、当社がサイトリニューアルをさせていただいた「三規庭」様サイト
http://www.mikitei.jp/
を具体例にご説明いたします。

お店毎に情報を管理できるようなサイト構成

横浜市青葉区の東急田園都市線あざみ野駅から徒歩9分ほどにあり高級住宅と少し離れると自然
も多くある立地の中にあるショッピングモール「三規庭」様からサイトリニューアルのご依頼
をいただきました。

今までは、高級感を意識し、意図的にWEBでの展開を控えてきた経緯がありましたが、一転、
今回は積極的にイベントやサービスの最新情報を発信し、サイトを見ることで「行ってみたい」
という状況を作り出したいとのご要望をいただきました。

さらに、将来的には、ショッピングモールの各お店ごとに最新情報を発信し自由にアピールでき
るようにしたいとのニーズもあったため、各お店毎に情報を管理できるようなサイト構成を検討
しました。

直感的でわかりやすく更新しやすいサイトへ

どなたにでも使っていただけないと意味がないので、直感的でわかりやすく更新しやすくするには
どうしたら良いか。導き出した方針が、以下のようなものでした。

WordPressの管理画面は

  • クライアントの入力箇所を、極力減らし、1画面内に納める。
  • 入力する項目を1対1に対応させ、わかりやすくする。

そこで、上記方針の実現のため「カスタムフィールドテンプレート」を活用することになりました。

初心者でも簡単。1画面でたくさんの情報を一括管理

まずは、図-1を見てください。「三規庭様」サイトでは、WordPress管理画面内の(A)~(H)の各項目にクライアント自身が直感的にデータを登録するだけで以下のように複数のページまたがり
(A)~(H)にデータが反映される仕組みになっています。

こうすることで「どこに何を入れて良いかわからない」「レイアウトが崩れてしまう」といった
問題を未然に防ぐことができクライアント自身で難なく運用を行っていただけるサイトになりました。

図1

では次に、「カスタムフィールドテンプレート」をどのように実装してどう使うのか、
さらに細かく見て行きましょう。

1.実際に、インストールしてみましょう。

個人でWordPressをインストールし、管理画面を操作したことがある方なら、簡単です。

  • まず、お使いのWordPress管理画面を開いてください。サイドバーの「プラグイン」を選択して、「新規追加」をクリック。
  • 検索エリアに「Custom Field Template」と入力して、プラグインの検索をクリック。
  • 表示された一覧の中の「Custom Field Template」の「今すぐインストール」テキストをクリックしインストールを行う。その後、「プラグインを有効化」テキストをクリックして下さい。

以上で、「カスタムフィールドテンプレート」が使える状態になりました。

2.カスタムフィールドの値を表示してみよう。

ここからは、カスタムフィールドテンプレートに値を入れてそれを表示させるまでをやってみた
いと思います。

図2

  • テンプレートタイトルに「カスタムフィールドテスト」と入力。サイドバーの「カスタムフィールドテンプレート」をクリック。
    テンプレートタイトルに「カスタムフィールドテンプレート」と入力します。
    すでに、「TEMPLATE #0」がデフォルトではいっているので、これを利用します。※図-2参照
  • 次に、キーを指定して個別のカスタムフィールドを出力します。
    今回は”住所”を表示させたいので、図-2の「住所」がキーの値になります。これを使います。覚えておきましょう。※図-2参照

図3

  • サイドバーの「投稿」の新規追加をクリックし、タイトル「カスタムフィールドテスト」と入力します。
    ※図-3参照

図4

投稿欄下の方を見てください。「カスタムフィールドテンプレート」というメニューが増えているはずです。
この「カスタムフィールドテンプレート」の住所の項目に値を入力し、カスタムフィールドテンプレートの「保存」ボタンを押します。※図-4参照

図5

  • 今回は”住所”を出力したいので、図-4のようにkeyというオプションにカスタムフィールドのキー「住所」を指定したショートコードを投稿欄に入力します。※図-5参照

図6

そして、「公開」ボタンを押し、記事を表示させると図-5のようにカスタムフィールドに入力した
“住所”が表示されているはずです。※図-6参照

今回ご紹介した出力方法は、[cft] というショートコードを使用しました。
この方法の他にも、WordPress関数のget_post_custom()などを使用する方法もありますので色々研究してみてはいかがでしょうか。

まとめ

ざっと駆け足でご紹介させていただきましたが、いかがでしたでしょうか。
「なんだ簡単!カスタムフィールドテンプレートを使ってみよう」と思っていただければ、幸いです。

不景気な今、WEBサイトの更新費用を少しでも抑えたいと考える企業が多いようです。
そうなると自社での更新が行え、運用コストを低く抑えられるWordPressへの関心や要望は益々多くなると考えられます。

参考サイト

WordPress初心者にもとてもわかりやすく書かれているので、ちょくちょく勉強させていただいています。

Webサイトのお悩み解決!個別相談会

WordPress等CMSで構築されたサイトを運用中(もしくはご予定)で、様々な課題をお抱えの企業Webサイトご担当者様、「技術的にはよくわからないけれどマーケティング的にも改善をしたい」等とお考えのマーケティングご担当者様、「お客様のためにWebサイトについて聞きたい」「クラウドを導入したい」等お考えのWeb制作会社様などを対象に「【法人向け】Webサイトのお悩み解決!個別相談会」を開催しています。

お客様の課題を解決するソリューション、
条件に沿ったベネフィットあるご提案を提供いたします。

ご相談・お問い合わせフォーム