2016年 12月 の投稿一覧

WordPressでjQueryを使う一番シンプルな方法

WordPressを使ってサイト構築するとき、jQueryを使ってカスタマイズすることが多いと思います。

このサイトでもAjax+pushStateなどの技術を使うためにjQueryを多用しています。

WordPressでjQueryを使う

じつはWordPressにはjQueryもパッケージされているので、自分のサーバーにjQueryを置いたりGoogleなどのCDNを読みこまなくても、header.phpに<?php wp_head(); ?>と書けば必要に応じて勝手に読み込まれます。

しかし問題があります

WordPressにパッケージされているjQueryは、WordPressの独自仕様になっていて、ちょっと使いづらいんです。

具体的には、jQuery.noConflict();という関数が実行されていて(参考記事)、要はjQueryと似たような記法のjQuery以外のJavaScriptフレームワークとケンカしないようになっているのですが、故にjQueryを使うときの記法を変えないといけないし、jQueryプラグインがうまく動作しないこともあります。厄介ですね。

かと言って、自前でjQueyを読み込むと、WordPressプラグインが勝手にWordPress内のjQueryも読み込んでしまって、二重読み込みでエラーが出ます。

解決するには

もう、WordPressの独自仕様によるjQueryを「読み込ませない」設定にするのが一番早くて確実な解法かと思います。

次のコードをWordPressテーマのheader.phpの<head></head>の中に入れます。

header.php

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

これで、WordPress独自仕様によるjQueryの読み込みをやめて、Googleが配信してくれているjQueryだけを読み込むことができます。もちろん自前でサーバーに設置しても良いですし、WordPressテーマの中にjQueryを置いても良いです。

ちなみにWordPressテーマの中にjQueryを置く場合は、上記と同じ場所を次のような書き方にします。

header.php

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->
<script type="text/javascript" src="<?php bloginfo(template_url);?>/js/jquery.js"></script>

<?php bloginfo(template_url);?>を入れて絶対パスにしないとエラーになってしまうのです。

 

ユーザー心理その1

分析麻痺、洗濯麻痺

選択肢が多すぎとユーザーへのストレスとなり、思考停止になり意思決定が出来なくなる。

情報アーキテクチャ

情報の組織化、整理整頓してまとめる。

ユーザーが理解しやすく役に立ち、共感を呼び込み易くする

特にファーストビュが大事で余計、余分な選択肢を与えない。

認知負荷理論

WEBサイトを観覧したユーザーの心理的負荷

https://ferret-plus.com/5160

http://liskul.com/wm_bpsychology28-3342

https://ferret-plus.com/432

https://matome.naver.jp/odai/2141733425643389601