カテゴリー
Wordpress

MV WP FORMのDayPickerが動かない時はjquery-uiを疑え!

WordPressのフォームプラグイン「MV WP FORM」をクライアントからの依頼で導入。Contactform7と異なり、確認画面と完了画面が出せるらしい。
とりあえず入れてみたが、初実装のため全然わからず、tipsサイトを見ながらやって何とかこうにか動くように。
ただ、カレンダー形式で日付が選べるDaypickerがどうしても動かない。
調べたところ 「wp_headとwp_footerをjqueryの前に書け」と大体書かれているのだが、それをしてもカレンダーは表示せずテキストボックスのまま。
うんうん唸りながら開発者ツールのコンソールを見てみたら、エラーでnot found というものが出ている。
おやややや?と思って調べてみたら、「jQuery カレンダーから日付を入力するサンプル(Datepicker)
というページにて、jquery-ui.min.jsとjquery-ui.cssいうファイルの存在が。
これは匂うと思い、cdnから https://code.jquery.com/ui/1.12.1/jquery-ui.jsと//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.cssをリンクしたら、出やがった。プラグインにもWPにもパッケージングされてないんかーい!

カテゴリー
EC-CUBE

【EC】サイトは生きてるのにサーバーステータス500を返す謎現象を解決

EC-cube 2.13.1で起こってた謎現象で、先ほど解決してどっと肩の荷が下りた。

Ec-cubeをトップにして、WP-POSTプラグインのためにWordpressを入れているクライアントから連絡があり。
「サイトが検索に一切引っかからない」とのこと。
調べてみると、確かに掘っても掘っても出てこない。でもサイト自体はちゃんと稼働している。
htaccessとかいろいろ調べてみたけど特におかしいところがない。

GoogeleのSearch Consoleで確認したら、
・Fetch as Googleで取得したら「アクセスできません」ステータスになる(※「一時的に~」ではない)
・robots.txtも同様。
・テストレンダリングもアクセスしてもらえず。
・そもそもsitemap.xmlを生成するsitemap.xml Editorでもアクセスが弾かれる
・sitemap.xmlを置いて送信したらできたが、ステータスは「保留」

こりゃ何かおかしいぞと、
ECとWPのhtaccessを再度チェックしてみたり、
Wordpressのプラグインを未使用設定にしたり、
robots.txtを更新して置いてみたり、
sitemap.xmlを置いて送信したり、
などとしてみるともまったく動かず。

そもそも「アクセスできません」ステータスを改めて調べてみたら、サーバー500エラー。
たしかにステータスチェッカーを使うと500を返す。
つまりサーバー側におかしい状況があるという事なので、さらに頭を抱えることに。
サイトは生きてる。でもサーバーは死んでる。
ゾンビみたいな状態なサイトを目の前に、頭を抱えるさ羽目に。

で、泣きそうになりながら調べていくと、
ECのプラグインのコードに「function destroy()」というのが入っていると、
それが500のステータスを引き起こす現象があるというのを確認。
この記事「EC-CUBEサイトがgoogle検索にかからない!!!(2/13追記)」を参考に
プラグインを落とし、指定されてるサクラエディタを落とし、「function destroy」をキーワードにGrep(システムの人から時々聞いていた言葉をよくわからず羽目に。つまりテキスト検索ってことか?)したところ、21ファイルが検索に引っかかる。
そのファイルにある

function destroy() {
     parent::destroy();
}

をコメントアウト。

/*
function destroy() {
     parent::destroy();
}
*/

そしてそのファイルをバックアップ回避させながらアップロード。
そして、ステータスチェッカーで再チェック。
すると・・・


200!

無事解決!(涙)
Fetch as Googleもインデックス申請もsitemap.xml Editorもすべて稼働を確認。
ほっとしたああああああ。

▼EC-CUBEサイトがgoogle検索にかからない!!!(2/13追記)
http://webbeco.webcrow.jp/blog/website/201501211015/

▼HTTPステータスコードチェッカー β3
http://st-code.itland.ezic.info/

▼サクラエディタ
https://sakura-editor.github.io/download.html

▼サイトマップを作成-自動生成ツール「sitemap.xml Editor」
http://www.sitemapxml.jp/

カテゴリー
Java script

class付与をtoggleClassで自在にする

ボタンをクリックしたらボックスが表示←→非表示、とかいう動きを、とりあえずclassを付けたらとりあえず何とかなる、という発想で解決した手法。

基本形。「.btnというclassが付いたボタンをクリックしたら、.openが付いてるdivに.activeというclassを追加する」という仕組み。

▼HTML



ボックス
▼JS




▼CSS

.open{display:none;}

.open.active{display:block;}

ポイントはCSSでopenはdisplay:noneで非表示にさせておいた上で、.activeが付いたらdisplay:blockにする点。
あと、classに向けて付与させるためのものか、反映させる要素にclass設定が入ってないとダメっぽい?(この場合.openのこと。#openにしてJSの指定を#openにしてもclass付与されない)

さらに、これに「.btnも色が変わる」とボタン自体にもクラスを付けた場合はこのようになる。





classの指定でもいいが、発動起点となるクリックした要素事態だからthisという指定でもOKらしい。その際は”は使わない。


    $(this).toggleClass('active');


これが「3つのボタン&3つのboxの開閉」となったらclassを変えて設置する。(HTMLとCSSの内容は書くのが面倒なので各自対応で)





ただ、上記の内容だとbtn01をクリックしbtn02をクリックすると、box1とbox2が同じ画面にあることになる。これはtoggleClassはclassを付け外しする命令のため、もう一度ボタンを押さないとクラスが外れないため。そこでクラスを付ける・外すだけの命令もある。

toggleClass・・・クリックするたびにクラスを付ける・外すを繰り返す
addClass・・・クラスを付ける
removeClass・・・クラスを外す

addClassでクラスを付けたらクラスはそのままになるので、クラスを消す処理が必要な場合はremoveClassで確実に外す処理が必要となる。
「画面には1つのboxだけが表示されて出し入れされる」というサンプルは以下の通りとなる。





めんどくさっ!
toggleClassではなくaddClassとremoveClassを組み合わせて、一つのボタンをクリックしたら他の要素からremoveClassでactiveを外す、という命令にすると対応可能、というわけ。
もっとスクリプトで高度なやり方がありそうだが、手持ちの武器でできる簡単な実装はこんな感じとなる。

ここまでは「クリックしたら」だったが、発動処理を「マウスオーバーしたら」にすることも可能。





あとおまけ。display:block、noneだとパッと開いちゃうので、これを少々アニメっぽく動く縦の拡縮にすることもできる。


.box{
 max-height: 0;
 overflow-y: hidden;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}

.box.active{
 max-height:1000px;
 -webkit-transition: all 0.8s;
 -moz-transition: all 0.8s;
 -ms-transition: all 0.8s;
 -o-transition: all 0.8s;
 transition: all 0.8s;
}


つまり、max-heightの高さに加えてtransitionでアニメっぽく見せている処理にしちゃうわけですな。
これも気を付けないといけないのは、.boxに上下のpaddingとか使っちゃうとそのスペース分だけ画面に残ってしまうので、.boxの内部要素で上下のスペースを取る工夫あり。
横の拡縮とかも出来そうなので、そこは各自工夫で。

カテゴリー
Work Tips

ページ読み込み時、時間差で要素を表示させるスクリプト記述

ページ読み込み時、という限定ではあるが、ファーストビューが読み込まれて●秒後に表示させたい、とかいう時のスクリプト。

基本形。「ページ読み込みがあったら、div id=”block01″ の要素を3秒後にフェードインさせる」。いろいろ試してとりあえずコレで。
setTimeoutが時間を管理する命令で、最後の3000が秒数となる。最初にopacityの値を0で表示させないでおくのがポイントで、3秒後にopacityを1にして表示させる仕組み、らしい。




で、これに「ページ読み込み後、3秒目でにフェードインして、10秒目でフェードアウトする」となると以下の通りとなる。
setTimeoutでopacityの加減命令を並べて書いて秒数を変えて時間差をつけているだけなのだが、間違えてはいけないのは秒数は読み込みからの時間であり、最初の命令からの時間ではない点。




さらに、これに「ページ読み込み後、#block01をフェードイン→フェードアウトした後、#block02をフェードインさせる」となると少し複雑になると以下の感じ。





宣言にhideを増やす。これはdisplay:block、noneと同等の動きらしい。この処理を加えた理由だが、opacityだと画面に見えないが要素が残っており、リンクなんか張った要素だと空白地なのにリンクが押せちゃうので要素自体を消す必要があるため。つまり宣言では、透明にしたうえで非表示という2段階の処理を加えている。
そしてsetTimeoutが来たら、showで要素を表示させ、opacityを1にして透明から非透明にして要素を登場させる、という処理を同タイミングで行わせている。

参考:
「~秒後に、指定した要素をフェードアウトさせる」
「jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法」

カテゴリー
SSH

SSHのコマンド一覧

SSHで処理した方が楽な作業が多くなってきたので(バックアップとか)、コマンドをまとめておく事にする。よく使うコマンドだけなので追々追加。

▼基本


ls ・・・ ディレクトリ内の確認

cd «対象ディレクトリ» ・・・ ディレクトリ移動

▼フォルダを丸ごと圧縮


$ zip -r «ZIPファイル名» «対象ディレクトリ»

$ unzip «ZIPファイル名»

カテゴリー
EC-CUBE

EC-Cube(2系)でプラグインをインストールできない場合

さくらビジネスに移管したEc-Cube 2.12.2でプラグインを入れようとしたところ、
赤文字で「※解凍に失敗しました」の文字。

という事で調べてみると、Archive/Tar.phpというファイルの最新版を取ってきて入れ直してみると動く模様。PHP5.5上で動かないファイルがあり(下記の通り)、どうもこのファイルがその元凶らしい。

・オーナーズストア>モジュール管理
・オーナーズストア>プラグイン管理
・システム設定>バックアップ管理
・デザイン管理>テンプレート追加
・コンテンツ管理>ファイル管理

入れたらさくっと動きました。

カテゴリー
.htaccess Wordpress

サーバー引っ越しをしドメイン移管をした際のWPに入っているhtaccessの設定に注意

へテムル→さくらビジネスのケースだけじゃないと思うが、サーバー移管でWordpressを移管する際の注意点。
特にhtaccess。マルチサイトを切っている場合は特に気をつけておく点をメモメモ。

【1】旧サーバーで使っていたhtaccessは合わない可能性が高いので、基本一緒に移管しない。
一緒にアップロードせずにとりあえずhtaccessなしでとりあえず動かす(もしくは、デフォルトのhtaccessを入れておく)
じゃないとおそらく画面は「Internal Server Error」が表示される可能性あり。

【2】マルチサイトを使ってる場合は、最初はhtaccessは持ってかない。なぜなら設定が変わってる可能性があるため。
管理画面のネットワーク管理画面にある「設置」→「ネットワーク設置」にあるhtaccess情報をコピーしてサーバーにhtaccess初アップ。
これで、一応マルチサイトの末端ページは見る事が出来るはず。見る事はね。

【3】上記の設定だと、マルチサイトの管理画面に入れない、マルチサイトでアップした画像やファイルが閲覧できない可能性がある。
これは上記の「ネットワーク設置」にある情報では動かないため、らしい。htaccessの中にインストール先ドメインが入ってるかと思うので


RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) ●ドメイン●$2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ ●ドメイン●$2 [L]

これを削除してアップすると、マルチサイトが動き出す。


RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]

カテゴリー
Server

ドメイン移管処理後、できるだけ早くチェックしたい場合の設定

ドメイン移管処理を行った際、同サーバー内でのDNS切り替えなら比較的すぐに反映するけど、別サーバーにDNSを切り替える場合だとネットワークドメイン浸透に時間が掛かってしまい、ちゃんと移管できたのか分からないのでどきどきする・・・という事がある。特にショッピングサイトだったりとか、でかいクライアントのサイトだったりとか。メンテナンスの看板を出しておくというのも手だけど、すばやく確認できるようにしたい場合は、ネットワークのDNSをGoogle Public DNSにしてあげると反映後のサイトを見るスピードを速める事ができる。

いわゆるTCP/IP設定のDNSサーバーに、「8.8.8.8」と「8.8.4.4」を設定するだけでOK。

カテゴリー
Wordpress

[WP]WordPressでと同じ動きをするコメントアウトを使う

WordPressとMovableTypeのどちらも使っていると、「こっちのこのシステムがあれば便利なのに」と思ったりするもの。
その中の一つにMTにある「mt:Ignore」というMTタグがある。このタグで囲ったらその中のソースはソース上にも表示されないという代物。WPではそういう専用タグがないので困っていたのだが、phpの構文でできる模様。テストしたら消えたのでぜひぜひ。


<?php if(0) { ?>
この部分は出力しない
<?php } ?>

カテゴリー
CSS

[CSS]疑似クラスまとめ

一部なかなか覚えられないのでまとめておく

▼最初&最後だけに反映



プロパティ:first-child{~};

プロパティ:last-child{~};


▼奇数&偶数だけに反映



プロパティ:nth-child(odd){~};

プロパティ:nth-child(even){~};


▼指定の倍数だけに反映(例は2の倍数)


プロパティ:nth-child(2n) {~};


▼順番を指定して反映(例は2番目に反映)


プロパティ:nth-child(2) {~};


▼下からの順番を指定して反映(例は下から2番目に反映)


プロパティ:nth-last-child(2){~};


▼1~3番目の指定を繰り返して反映


プロパティ:nth-child(3n+1){~};

プロパティ:nth-child(3n+2){~};

プロパティ:nth-child(3n+3){~};