WordPressのif文でよく使われる論理演算子。
条件A&&条件B:条件Aと条件Bを両方満たす 条件A||条件B:条件Aと条件B:のどちらかを満たす !条件A:条件Aを満たさない
「条件Aをと条件Bの両方を満たす、もしくは
条件Cを満たすかどうか」
↓
(条件A&&条件B)||条件C
「!is_home」:メインページが表示されていなかったら。
WordPressのif文でよく使われる論理演算子。
条件A&&条件B:条件Aと条件Bを両方満たす 条件A||条件B:条件Aと条件B:のどちらかを満たす !条件A:条件Aを満たさない
「条件Aをと条件Bの両方を満たす、もしくは
条件Cを満たすかどうか」
↓
(条件A&&条件B)||条件C
「!is_home」:メインページが表示されていなかったら。
目的を見失わない為の、
日報と予定の確認なのになぁ。
あはは。笑ってごまかしてしまった。
本日はガーデニングサイトのデータを綺麗にしていた。
来週どうしようかなぁ。
やりたいものは沢山あるけど、スタートダッシュが。
昨日就業終了時間間際に、
jQueryUIでアコーディオン機能追加したものの、
いままで使っていたbootstrapのタブ機能が使えなくなってるのに気づいて凹んだ・・・
結局、
一緒にコピペして使っていたなかにタブのjqueryがあって
それとバッティングしちゃったんだろね。
削除したら治った。
そこまでがほんとに大変でございましたが・・・
WordPressでなんとか機能するようにサイトは作れるようになったものの、
デザインがいまいち。
どうしたらこんな風にできるんだろうか。
と、参考書のサンプルサイトをHTMLに落として、
CSSを見ながら確認していった。
おもしろい。
などなど。
おもしろかった!
やっぱりデザインの方をできるようになりたいな〜って感じたよー。
ずっとやろうと思ってやっていなかった
タクソノミーの一覧をサイドバーに追加
この方法が毎度おなじみの
基礎からのWordPressの本に載っていて、
いつかやりたいと思っていたんだなぁ・・・
jQueryつかってアコーディオンもやってみた。
明日はCSSをやりたいかな。
フォトショも少し勉強したいし。。。
はぁ。
あー。bootstrapのタブが効かなくなってる・・・
明日やろう・・・
(´Д`)ハァ…
この業界ってブラックが当たり前と思っていたけど、
うちの会社ちがう。
今日みたいにとくにこれといった仕事がない時ある(未経験だからってのものある)
というわけで、勉強したよ!
まずは、たまりにたまった本日の予定から
foreach文の記事を書いた
いつものこれですな。
基礎からのWordPress
全然基礎じゃない。って怒ってやらなかった時からもう半年位たったのかしら。
ついに丁寧に読み返す日がやってきた。
the_dateだと同じ日の記事の日付は省略されて get_the_dateだと全部表示するのね。そしてechoを忘れずに。
なんですね。
ぐぐるのも面倒でいーやってなるものも本を読み返すと自然に新たな発見があるのがよい。
一日19/20ぐらい終わった。
が、残りが多分濃いんだろう。
そういえば、ローカル環境でやろうと思って久しぶりにMAMP起動したらApacheが動かない。
Apacheがなんだかもよくわかっていないし、
今日この本読んで書いてあったのにすでに思い出せないんだけど。
それはさておき、何か始めようというときに
いつも設定でつまずくのがプラグラミングというあWEB関連というか。
結局先輩がさくっとググって
コマンド操作数行して解決した。
簡単なようで、ここまで行くのがね。
WordPressのPHPって特殊。
と、先輩が行ってるけど、WordPressしかやっていないので
その辺りがさっぱりわからない。
時間があるときにガッツリPHPやってみたいな。
もしくはJavaScriptあたり。
WordPressばかりやっているので、
なかなかPHPの基礎を勉強する時がない。
今日こそ。
while文:ある条件に当てはまっている間は、指定した処理を繰り返す
例)記事がある間繰り返して!
foreach文:配列の要素の数だけ繰り返す
foreach($a as $b){ 配列$aの要素の数だけ繰り返す処理 }
「配列$aの1つ1つの要素を、変数$bとして扱う」
とのこと。
$がでてきただけでわけわからなかったなー。
例をだすと、
$vegetables という配列がございます。
その一つ一つの要素を$vegetable として扱うとなる。
少しわかった。
配列$vegetables には tomato、basil、eggplantの値が入ってる。
foreach($vegetables as $vegetable){ echo $vegetable; }
とすると、
1回目の$vegetableの値は「tomato」
2回目の$vegetableの値は「basil」
3回目の$vegetableの値は「eggplant」
が表示されて、
4回目には要素がなくなるので、繰り返しが終了される。
確かに便利だな。
これも、{}(ブレース)を使わずに書くことができる。
foreach($a as $b): ここに繰り返す処理 endforeach;
なるほどねぇ。
この2通り書くパターンがあることに混乱したけど、
HTMLを書く時に、これがとても便利ってのはわかるようになりました。
カテゴリーの名前やURLを取得する
利用する関数
get_cat_name:IDからカテゴリーの名前を取得する
get_category_link:カテゴリーのURLを取得する
<?php foreach($ancestors as $ancestor): ?> <li><a href="<?php echo get_category_link($ancestor); ?>"> <?php echo get_cat_name($ancestor); ?></a></li> <li>$gt;</li> <?php endforeach; ?>
パンくずリストを表示させる一部分に利用。
全体を書くと、これまたわけわからないのがでてきたので、
ひとまず
foreachは配列を一つ一つ繰り返し!だけ覚えて今回は終了!
なんだか一日やる気がです・・・
レスポンシブデザインに挑戦してるものの、
既に固定サイズのサイトできてるので、
なんだかやる気にならず。
MAC OSをアップグレードしたり、
その間、会社のドラム叩いたり。
ふぁぁ〜〜
やることピックアップしてるのに何もやらなかったら
意味ないじゃない!!
ごめんなさい!
自分に喝
。。。
やっと動いたよ。
exValidation
1日目→バリデーション?なんじゃそれ。ぐぐってとりあえずこれつかってみよう→動かない。
2日目→やっぱり動かない。先輩に確認してもらう。と、読み込んではいるとのこと
3日目→HTMLから一つひとつ動くか確認。
うおーーーーできた!!!!
WordPress上では動かない事もあるので、やはりデスクトップに落として
簡単HTMLで一つひとつどれが動くか確認していくのがよかった。
詳細はこちらの記事で
exValidationとcontact form7を使ってお問い合わせのバリデーションを実装
細かいコードを書いているわけじゃないのに、
つまづいてるのが悲しいな〜。
WordPressプラグイン Contact Form7を使ってお問い合わせページを実装。
ふぅ。
確認ボタンがないのが気になる。
これまたプラグインContact Form 7 add confirmにて実装。
方法は↓
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン
この辺はスムーズにできて、上司に報告。そのときに
ヴァリデーションてのは入力チェックのことです。
・必須項目が入力されているか
・メールアドレスは適切なメールアドレスの形式か
・数字は半角?全角?
・フリガナに漢字やひらがなが入ってない?
とのこと。ヴァリデーション。ヴァ!
あぁ!見たことありますね。「半角ね」とか「必須よ」とか。あれですね。
そして、上司の話によるとJavaScript(jQuery)でやると簡単とのことだったので、
ぐぐってみた。
ぐぐってみてでてきたのは
exValidation
jquery.validationEngine.js
あたり。
2つ目を使った記事は少し古かったので、一つ目の方に。
やり方はこちらを見て挑戦
どんなフォームにでも使える exValidation の使い方 基本編
本家サイトが消えてしまったらしく、私は本家を見ることができないでいたので、丁寧に書いてあってよかった。
ダウンロードはこちら
※画面右下のDownload zipボタンからダウンロード
https://github.com/5509/exValidation
これはよくありがち、こちらもググって解決。
とにかく順番が大事!jQueryとwp_headを読み込んでからなので、その後に書く。そして/headの前。
それと、WordPressはもともとjQueryが入ってるのでそれを使うようにする(重複させない)
<?php wp_enqueue_script('jquery'); wp_head(); ?> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exvalidation.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exchecker-ja.js"></script> <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/exvalidation.css"/>
参考にした本
これ、最後の数ページにしかjQueryの事載っておらず、初心者の初心者の時はこれでわかるか!
って感じでしたが、今みると、なるほど。という感じ。
先輩に確認してもらう。ちなみに私はJavaScript超初心者。
alertやsizeというのを使って、ちゃんと読み込んでいることを確認してもらった。
<script type="text/javascript"> jQuery(function(){ alert( jQuery("form.wpcf7-form").size() ); var validation = jQuery("form.wpcf7-form").exValidation(); }); </script>
また、ここで困ったのがContact Form7のformタグにidが付けられない事。
参考にしている記事はformタグにIDを指定していたので、
そうしないとできないのかしら?と悩んだ。
結果は、class指定でOK
“form.wpcf7-form” ←formタグのclass名wpcf7-form
どうにもこうにも動かない理由がわからないので、
先輩に助けを求めつつ、デスクトップ上でHTMLをいじりながら一つ一つ確認。
ちなみに、ファイルは先程のサイトで落とせるので、それをカスタマズしながら。
どんなフォームにでも使える exValidation の使い方 基本編
[ text* your-name id:◯◯ ]
こんな感じに作られるショートコードでidをしっかり指定します。
そのidはjsでも定義。既述のサイトを参考にして作っています。
ポイントは$表記だとWordPressでは動かなかった。$→jQueryに全部書き直しましょう(1個でも残っていると動かなかった)
jQuery(function(){ var validation = jQuery("form.wpcf7-form") .exValidation({ // それぞれの項目に「class="chkrequired chkkatakana"」のように記述しているのと同じことをしています。 rules: { name: "chkrequired", name_: "laterCall", kana: "chkrequired chkkatakana", kana_: "laterCall", email: "chkrequired chkemail chkhankaku", email_: "laterCall", }, customListener: "blur", // onBlur時のみにしてみる stepValidation: true, errTipCloseBtn: false, errHoverHide: true, // マウスオーバーで消える scrollToErr: true // }); // チェックボタンで確認する場合 jQuery('input.laterCall').click(function() { validation.laterCall('#' + this.id.replace('_','')); }); }); // エラー削除 function clearErrors() { // 表示されているエラーをフェイドアウト $("div[id*=err_]").fadeOut(); }
やっとこそさ、動き始めた!
と思っても、なぜか色がつかない。
classのつけ忘れかなーと思ってみていると、どうやら、同じexValidationCSSファイル内のstyle.cssに書かれた、テーブルのデザインも必要なのかしらね。
なので、exValidationにもともとのデザインを損なわないように追加で貼った。
ついに動いて、項目をドンドン追加。
すると、動かない。
な、なんで・・・
ということで、ここもまた、
一つ一つ追加しては動作確認していきました。
わかったのはJavaScriptで「,」を私はよく忘れている・・・
もともとの文法がまったくわかっていないので、間違いにも気づきにくいんですよね。
同時進行で先輩に助言をいただいたのですが、
「exValidationのようなものは使わずに自分で実装するのがよいよ」
と。
おぉそういえば、私の職業プログラマだった・・・
とはいえ、無事実装できたのでひとまずこれで!
そのうち簡単なものくらい自分で実装するスキルも身につけなければ・・・
↓既にあるもの
chkrequired: “入力してください” chkselect: “選択してください” chkretype:”入力内容が異なります” chkemail: “正しいメールアドレスの形式を入力してください” chkhankaku: “全角文字は使用できません” chkzenkaku:”全角文字で入力してください” chkhiragana: “ひらがなで入力してください” chkkatakana:”カタカナで入力してください” chkfurigana: “ふりがなはひらがな、全角数字と〜、ー、()が利用できます” chknochar: “英数字で入力してください” chknocaps: “英数字(小文字のみ)で入力してください” chknumonly: “半角数字のみで入力してください” chkmin: “文字以上で入力してください” // chkmin6 で6文字未満NG chkmax: “文字以内で入力してください” // chkmax10 で10文字を超えるとNG chkradio: “選択してください” // ラジオボタンの場合 chkcheckbox: “選択してください” // チェックボックスの場合 chkurl: “正しいURLの形式を入力してください” chktel: “正しい電話番号を入力してください” chkfax: “正しいファックス番号を入力してください” chkfile: “ファイルを選択してください”
おかしい、
おかしい、
なぜかjQueryが動かない。
ほかのjsが邪魔しているのかなんなのか。
初心者の私は、それを突き止めるすべも。。ほげほげ
ひとまず、alertあたりでちゃんと動いてるのは確認したのよ。(先輩が)
<script type="text/javascript"> jQuery(function(){ alert( jQuery("form.wpcf7-form").size() ); var validation = jQuery("form.wpcf7-form").exValidation(); }); </script>
明日は、ひとまずもっとHTML上に簡単にしたもの作って確認してみよかな。
ほぇ。動かないと疲れるわ〜
いままで作ってきたサイトは自分のサイトだったので
特にお問い合わせページが必要なく・・・
なので、1からの勉強によい機会になった。
確認機能は欲しい派だったので、ぐぐってみるとプラグイン発見。
contact-form-7-confirmプラグインにて実装
そして、
指令にあるバリデーションの実装
はて?
バリデーションとは?
ヴァリデーションてのは入力チェックのことです。
・必須項目が入力されているか
・メールアドレスは適切なメールアドレスの形式か
・数字は半角?全角?
・フリガナに漢字やひらがなが入ってない?
なるほど。
jQueryでやると簡単よ。
とのことだったので、ぐぐってみると
どんなフォームにでも使える exValidation の使い方 基本編
がヒット。
やってみるも、どうもうまくいかない。
なので明日、下記リンクみながらやってみる。
入力項目をその場でチェック jQuery-Validation-Engine
簡単にれすぽんしぶる対応する為に、
WordPressのテンプレートやBOOTSTRAP使ってるのに、
ナビゲーションに画像使ってる場合どうすんだよ。ってなった。
そのナビのせいか、
ナビの下にあるコンテンツがサイズが画面の横幅と同じじゃなく
画面より大きく表示されちゃう。
んもぅ。
と、WordPressテンプレートカスタマイズしながら始めたけど、
なかなかうまくいかないし、わけわからなくなる。
一度、HTMLになおして見ようかな。
今日は旦那さんがお迎え行くから大丈夫だろう。
といっても、急がねば。
サイトURLにカスタム投稿タイプのスラッグが勝手についてしまう
現象が起きた。
結局index.php が表示されるんだけど、
怖いので、
前日の状態にサブバージョンで戻ってもらった。
パーマリンク設定を違うものに変えると直って
しばらくするとまたおかしくなるので
明日まで様子見。