2014年11月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

wordpressでカテゴリー一覧ページの「category」というディレクトリ名を取り除きたい

worpressのテンプレートで、
get_the_category_list
などを使って、カテゴリページへのリンクを出力していて、クリックすると、

http://hogehoge.com/category/info

となってしまうことに気づいた。

SEOを考慮すると infoカテゴリーのURLは

http://hogehoge.com/info 

という風にしたい。

どうやってやるのかなーと調べたら、設定画面の「パーマリンク設定」でやるのだそうな。


パーマリンク設定の下の方に「カテゴリーベース」というボックスがある。

そこに「.」をいれる。
ドットをいれるんだ。

そしたらcategoryというディレクトリが消えてくれた。

簡単だね。

22


 

jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする

フォームを作ってると必ず出てくるのが「必須」ってやつ。
必須項目を入力しなかったらエラーになるってやつね。

そこで便利なのが、jquery.validate.jsだ。
落としてくるにはこちら

使い方はいろいろ検索して探してもらうとして、問題はチェックボックス。

チェックボックスを複数並べて、「少なくとも1つはチェックをいれてね」っていうパターンのアンケート式のフォームを作りたいことはよくあると思う。

其の用途では、jquery.validate.jsでは直感的に、そのままでは使えないので、そのやり方を書くよ。


①チェックボックスのnameは配列にするんだよ 


チェックボックスが複数並ぶ場合、nameの中身をそれぞれ別々にしている人もいるかもしれない。(僕はそうだった。)
それを、配列の形にする

<input type="checkbox" name="cat[]" value="日本猫">日本猫
<input type="checkbox" name="cat[]" value="アメショー">アメショー
<input type="checkbox" name="cat[]" value="スコティッシュ">スコティッシュ
<input type="checkbox" name="cat[]" value="ロシアンブルー">ロシアンブルー

こんな風にcat[]とする。catの部分は配列名なのでなんでもいい
そうすると、チェックを入れられるたびに、cat[]の中に入っていく。 


②validateで設定をしていく

validate.jsを使っている時はhtml内にこんな1文のjsを書いているはず。

$("#contactform").validate();
これで<form id="contactform>に対してバリデート機能をつけてるわけだね。

このvalidate()の中にいろいろな設定を追加していくことができる

$("#contactform").validate({
  ここにいろんな設定を書いていける
}) ;

んで、実際に書いていくのはこういうやつ
↓ほぼほほコピペでいける

$(document).ready(function(){
    $("#contactform").validate({
        rules:{
            'cat[]': {required: true} //①
        },
        messages :{
            'cat[]':{required: "猫の種類を選択してください"} //②
        },
        errorPlacement :function(error,element){
            if (element.attr("name") == "cat[]" ) error.insertAfter("#error"); //③
            else (element.attr("name") == "name" ) error.insertAfter(element); 
        }
    });
});

まずは最初のオブジェクトであるrulesに1文いれるのが①
「cat[]は必須やで」ってこと。
cat[]は「'」で囲むのが大事。これだけで、最低1つの要素がcat[]の中に入ってないとエラーを出せる。


次にエラーの時のメッセージを出す為の設定messagesオブジェクトに②を書く。
まぁこれは見れば分かる。

ここまでで機能としてはできてるんだけど、ひとつ大きな問題が起こる
それは、

チェックを入れなかった時のエラーが、最初のチェックボックスの直後に出て、レイアウトが崩れちゃう

ということ。

それを解決するために③が必要になる、errorPlacementというのは、エラーを出す場所を決めるやつ。

③のif文を丁寧に追っていくと、
「要素のname属性がcat[]になってるやつのエラーは#errorのところに出せ」
って意味ね。
<div id="error"></div>でも作っておけば、そこにチェックボックスのエラーを出すことができる。

ここで超注意点があって、エラーをだすための出し先は、#で指定しないと動かない。
<div class="error"></div> にしておいて.errorに指定しても動かないので、スーパー注意だよ!
(僕はこれで30分を失ったよ)

そして最後に、elseで、書かれているように
「それ以外の場合は、フォームの要素の直後にエラーを出してOK」っていうのを書いておしまい。


複数のチェックボックスを置いて、
どれかひとつは必須選択してね、っていうフォームをつくりたいときにコピっとくと便利と思う!


そんじゃ、アメショー!



 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ