新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 1 – 「Custom Field GUI Utility」の巻 【ワードプレス】 #wp

      2014/11/09

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

WordPress(ワードプレス)のカスタムフィールドとカスタム投稿(カスタムポスト)の機能を使うと、パターンの決まったあるカテゴリーの記事に関して、項目ごとにフォームに入力して記事を書くことができるようになるようだ。
で、これが「つぶくま」のお店登録に利用できないかと考えた。
つぶくまをブログ化した地点でいろんな人からいろんなお店の情報を登録して欲しいと考えていたのだが、アカウントは作ったもののテンプレートも一切ない状態ではなかなか書きこむことが難しい様子。
したがってこれを簡易化にしてしまえばいいと考えたのだ。

スポンサーリンク
 

まずはカスタムフィールドを使って投稿フォーム(入力フォーム)を作ってみる。
以下のツールが便利だということなので以下のツールを使うことにした。
Custom Field GUI Utility 3.2.4 リリース | かたつむりくんのWWW
ダウンロードしてインストール

こちらのツールを使うと「conf.ini」を編集することでカスタムフィールドを使ったフォームが簡単に作れる。
それぞれ記述については以下のサイトを見ていただくことにして、
□ Custom Field GUI Utility 3.2 – WordPress プラグイン | かたつむりくんのWWW
気を付けなければいけないポイントを数点。

  • 「投稿」と「固定ページ」、また、次回以降で説明する「カスタム投稿」ごとにカスタムフィールドを使い分けるには「class」を使う。
    (投稿の場合は「class = post」、固定ページの場合は「class = page」、両方の場合は「class = post page」)
  • 「投稿」のカテゴリーごとにカスタムフィールドを使い分ける場合は「category」が使えるのだが今回は使わないので割愛。
  • カスタムフィールドで設定した項目を使ったテンプレート(テーマ内)を用意しないと意味がない。
    (現在のシステムではフォームに入力した内容は表示されません。)

ということで、ちゃんと動かないにしろとりあえず第一段階終了。
新規投稿ページに以下のような投稿フォームが付いた。

カスタムフィールド作ってみた

作った「conf.ini」は以下のとおり。

[cfgu_setting]
boxname = 熊谷店舗紹介

[shopname]
fieldname = 店名
type = textfield
class = post
default = 店名を入力してください
size = 35
sample = 記入例)プロット・ファクトリー

[category]
fieldname = ジャンル
type = select
class = post
value = ファッション#アクセサリー#フード#アルコール#サービス#カルチャー
default = ファッション
sample = 最も適切なジャンルを選んでください。

[image]
fieldname = 店舗画像
type = imagefield
class = post
size = 35
sample = 店舗画像があればアップしてください。
must = 1

[address1]
fieldname = 住所1
type = textfield
class = post
default = 住所(番地まで)
size = 35
sample = 記入例)埼玉県熊谷市宮町1-120

[address2]
fieldname = 住所2
type = textfield
class = post
default = 住所(アパート名等)
size = 35
sample = 記入例)プロットマンション801号

[closed]
fieldname = 定休日
type = multi_checkbox
class = post
value = 月#火#水#木#金#土#日
default = 土#日
sample = 定休日にチェックを入れてください。

[opentime]
fieldname = 営業時間
type = radio
class = post
value = 0-9#10-19#20+
default = 10-19
sample = input the caption

[website]
fieldname = ウェブサイト
type = textfield
class = post
default = ウェブサイトのURLを入力してください。
size = 50
sample = 記入例)http://www.plot-factory.com/

次は左側メニューに専用のボタンをつけて、そのボタンを押したときだけ上記投稿フォームが使えるようにする。

 - CMS, WordPress, デザイン, ユーザビリティ , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

ツイッター(Twitter)のUIがリニューアル。ハッシュタグが前面に?

1年以上前の記事です。内容が古い可能性があります。昨日よりツイッターがデザインリ …

WordPress(ワードプレス)のリンク切れチェックに「Broken Link Checker」 #wp

1年以上前の記事です。内容が古い可能性があります。表立っての活躍は見せなくても、 …

WordPress(ワードプレス)でテンプレートにテンプレートを読み込む方法(インクルードタグ) #wp

1年以上前の記事です。内容が古い可能性があります。WordPress(ワードプレ …

no image
Flickr(フリッカー)とFacebook(フェイスブック)を連携させる方法

1年以上前の記事です。内容が古い可能性があります。連携好きの僕が来ましたよ。今回 …

トヨタ純正カーナビ(車載ナビ)で上下が変になった時の対処法

1年以上前の記事です。内容が古い可能性があります。初期設定か何かをいじってしまっ …

やっちゃった!「IE9」、「IE10」でHelvetica(ヘルベチカ)が表示されないバグ

1年以上前の記事です。内容が古い可能性があります。相変わらずIE(インターネット …

「All in one SEO Pack」を入れて最初の設定【WordPressプラグイン】

1年以上前の記事です。内容が古い可能性があります。当ブログ、あまりSEOに関して …

YouTube動画とtwitter(ツイッター)の連動の仕方 (10/26追記)

1年以上前の記事です。内容が古い可能性があります。キースへリング美術館に行ってき …

「いいね」ボタンがなくても「いいね」ができるブックマークレット【Facebook】

1年以上前の記事です。内容が古い可能性があります。Facebook(フェイスブッ …

no image
AddClipsを導入してみた

1年以上前の記事です。内容が古い可能性があります。ソーシャルブックマークを始めて …

血液型オヤジ