WordPress WordPressを使ったホームページ制作の小技をご紹介!

WordPress/add_meta_box カスタムフィールドへ入力チェックを付ける

2015年1月18日
この記事は掲載から1065日経過しています。
情報が古い可能性が有りますのでご了承下さい

発端はWordPressのみで完結する不動産物件が登録出来るテーマを作る実験をしてる最中に、カスタムフィールドにバリデーションを付けるにはどうしようか?というものでした。但し、ここで言うカスタムフィールドはadd_meta_boxで独自に追加したフィールドに対してです。

前置きはさておき、バリデーションにはjQuery-Validation-Engineを使いました。
https://github.com/posabsolute/jQuery-Validation-Engine

jQuery-Validation-Engineをテーマに入れる

dir

管理画面で読み込むようfunction.phpに記述する

jQuery-Validation-Engineをダウンロードすると色々なファイルが入っていますが、使うのはこの3つです。また、バリデーションを有効にするコードも書き加えます。ちなみに、タイトルにも付けようかと思いましたがこれはだめそう。これは別に何か方法があったはずなので、とりあえず保留に。

function.phpへadd_meta_boxを設定する

add_meta_boxの具体的な設定方法は省きますが、だいたいこんな感じでfunction.phpに記述し、jQuery-Validation-Engineの命名規則に則りclassに追加します。

jQuery-Validation-Engine自体はフィールドのclassに加えるだけですので、割と簡単です。

実際に動かした画面はこんな感じです。

wstate

うん、とても良い感じ。

jQuery-Validation-Engine自体はContactForm7とか、その他色々なメールフォーム系のプラグインに応用が可能なので、テーマに入れるのがベスト。

 

そんな事しなくてもAdvanceCustomField使えば自由にフィールドを追加してvalidationも付けられるのですが、今回実験してるのは、テーマのみで完結するWordPress不動産サイトなのです。不動産系は項目がとても多いので、全てをWordPressで登録するには骨が折れます。

ある程度の項目に限定する形にはなると思いますが、固定ページをナビゲーションに自動展開するとかカスタムポストでブログを書けるとか、それのみで不動産会社ホームページが完結出来るようなものを目指そうと考えています。

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

PAGE TOP