WordPressを使っていて急にjQuery周りが不具合を起こしたときのTips

Jquerry

普通に作っていたのに、あるとき気づいてFirebugなどで見てみるとjQueryのエラーが出ていて動かないといったときのTips。

まずは自分で何か変更していないか確認

何かを変更してそれが原因で他にエラーが出たりといったことをまずは考える。必要があればページ毎に読み込むJSファイルを分けたりといった方法で対処もいいと思います。

実はプラグインのアップデートが原因?

自分はこれが原因のときが多々ありました。プラグインがアップデートされ、なぜかjQueryが2種類読み込まれている等、そういったことが原因で動くものがあるのに特定のものだけ動かなかったら李といった事例。Easyingでエラーが出たりするときは書き方がまずいことよりも2度ライブラリファイルを読み込んでいたりといったことの方が多いです。

見た目をjQueryで制御している際は、スクリプトが動かない状態の体裁に気をつける

読み込み時、jQueryが動く前のレイアウト・体裁を考慮して組むと、ユーザーの回線が屋内や地下に移動したりして著しく遅くなったりしても、ある程度見ることが出来る状態で閲覧することが出来るので不具合や離脱を防ぐことが出来ます。地方では結構サクサクみれますが、都会では以外にさくさくとはいかないのがまだまだ現実です。

WordPressで検索エンジン以外のbotを回避するためにやったこと

Wordpress vs bot

最近、ほかのブログなどでアクセス過多が続いてサーバーがハングしかけるようなことがあり、

原因と対処を考えていたところ、悪さをしていたのがbotらしく、
その回避方法をいろいろ模索していたところ下記に落ち着きました。

.htaccessにアクセス制限用の記述を追記。

<Files ~ “^wp-login\.*$”>
SetEnvIf User-Agent “bot-” deny_ua
SetEnvIf User-Agent “/bot” deny_ua
order allow,deny
allow from all
deny from env=deny_ua
</Files>

<Files ~ > ~ </Files>ファイルを指定することで必要最低限の制限にとどめています。

参考: http://www.futomi.com/lecture/htaccess/files.html

botをすべて遮断するとクローラーなども拒否され検索結果に載りにくい状況になってしまうので注意が必要です。

CSSで縦の中央揃えのレイアウトを作る方法

マークアップ/コーディングで簡単そうで簡単でないのが縦中央揃えのレイアウト。

以前であればテーブルを使ってレイアウトしていたものもHTMLの定義・使用上、テーブルが使えないケースがほとんどなので、そういった場合にCSSのdisplay:tableとその中の要素にdisplay:table-cell & vertical-align:middleを使い、中央揃えにする。

左のブロック
右のブロック

  

ソース例(ここだけなのでstyleを使用)
 

<div style=”float: left; display: table; width: 100%;”>
<div style=”display: table-cell; vertical-align: middle; text-align: center; width: 50%; background-color: #fff; padding: 30px 0;”>左のブロック</div>
<div style=”display: table-cell; vertical-align: middle; text-align: center; width: 50%; background-color: #ccc; padding: 30px 0;”>右のブロック</div>
</div>

中の要素をブロック要素にしたい場合はdisplay:inline-blockなどでレイアウトしてみてください。

  • HTML5+%26+CSS3ステップアップブック
  • HTML5+スタンダード・デザインガイド+~Webサイト制作者のためのビジュアル・リファレンス%26セマンティクスによるコンテンツデザインガイド~+(Web+Designing+BOOKS)
  • Dreamweaver%2BHTML5%26CSS3レッスンブック
  • よくわかるHTML5%2BCSS3の教科書
  • スマートフォンサイトのためのHTML5%2BCSS3+(Web+Designing+BOOKS)
  • 10日でおぼえるCSS/CSS3入門教室

linked by blog-tools

cdbk.net CREATIVES. 4年目にはいりました。

おかげさまで本日で4年目を迎えることができました。

この3年でPCのみの案件からスマホ向け中心の案件やjQueryを使った動きのあるものなどに時代の流れとともにゆっくりシフトしている最中ですが、より新しいこれからのWebを担うデザインや技術を取り込み、仕事に反映していく所存でございます。

もうすぐゴールデンウイークですが、悠々と満喫しつつ、仕事も並行して進めていきますので、ご依頼、急ぎの対応が必要なものなどはお早めにご連絡お願いいたします。

[追記]

ここ一か月ぐらい、WordPressのログインページへの不用意かつ大量のアクセスが多いのでWordPressを使われている方は皆さんお気を付けください。Analyticsではわかりませんが、Apacheのログを見ると・・・ 少々ビビります。

WordPressのログインに二次認証を使う方法

Blog

最近CMSなどで不正アクセスが多発している中、WordPressも標的にされているようなので、Gmailなどで使われるGoogle AuthenticatorをWordPressに導入できるプラグインを紹介。

プラグインにてGoogle Authenticatorを検索、インストールしてユーザー一覧から二次認証を使いたいユーザーを「編集」から有効にして、QR CODEなどをGoogle Authenticatorアプリに登録することで使える様になります。

セキュアなところなのでキャプチャーなどは出しませんが、よりセキュリティを高度にできる効果的な方法の一つです。

注意したいところは、そのまま登録してしまうと、もし間違えたときにログインできなくなるため、別途管理者権限のユーザーを取得、ログアウトせずに別のブラウザーからログインをテストするなどしてみるといいと思います。

※この記事を書くのに使っている、MarsEditは二次認証に対応していないので、別途ユーザーを作成する必要がありました。

jQuery toggle() トグルをほかの方法で代用したいとき

Code

jQueryでトグルスイッチを使いたいけれど使えないときなどに代用で使えるソースをメモ。

See the Pen jQuery like a toggle by Kentaro Kitagawa (@cdbk) on CodePen.

 

「ON」にしたいときは動作後、クラスを取る。したくないときは動作後クラスをつける様にして、

判定をhasClassで行うことでトグルと同じような動きを持たせています。

完全に動作をかき分けることが出来るのでモーションなどを加えたいときなどに使えます。

WordPressでアクセスし辛くなるときの対処法

503

自分が2年ぐらいやっているブログがときよりアクセス過多でサーバーに迷惑をかけてしまっていたので、その対処をしたときのTIPSをメモ。

WP Super Cache.

これは常識かもしれませんが、メジャーなWP Super Cache。データをキャッシュさせるのでアクセス毎に生成しないのでアクセス負荷の軽減につなげることが出来ます。

.htaccess

特定のリファラーなど(Bot)からのアクセスを遮断したいときに使える方法。

ショートカットのような記述方法で複数のリファラーを指定します。

実際に使ったものを下記に。

# END WordPress

SetEnvIf User-Agent “リファラーに含まれる文字列など” deny_ua
SetEnvIf User-Agent “リファラーに含まれる文字列など” deny_ua
SetEnvIf User-Agent “リファラーに含まれる文字列など” deny_ua
SetEnvIf User-Agent “リファラーに含まれる文字列など” deny_ua
order allow,deny
allow from all
deny from env=deny_ua

のようなかたちで複数指定することで改善につなげることが出来ます。

GoogleやBIngなどのbotが原因の場合は別途マスターツールなどにsitemap.xmlを読み込ますことで不用意なアクセスをコントロールすることが出来ます。

エイプリルフール限定のトップデザイン

Cap myinstagram

次の4月16日で設立丸3年。その前に本日限定でサイトのトップを少し変えました。

見せかたの1例として今回はInstagramのAPIを使って画像を取得、JavaScriptを使ったモーションで常にアルファ値が変わるようにしています。

明日以降に別ページかもしくは個人用のブログにコンテンツとしてInstagramに掲載している写真を公開する予定です。

 
My Instagram from lastest 25 images.として公開しました。