WEBサイト制作

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);?>を入れて絶対パスにしないとエラーになってしまうのです。

 

IFTTTの検証結果

困る

 

結果 サービス名
IFTTT 連携サービス
cmcosaka.com WordPress
Facebook SNS
Twitter SNS
Instagram Facebookページと連動で再テスト SNS
はてブ ブックマーク
Blogger ブログ
Linkedln SNS
Pinterest マイボードを作成して再テスト ブックマーク
delicious ブックマーク
Flickr IFTTT側で再調整 ブックマーク
tumblr ブックマーク
pocket ブックマーク
はてなブログ ブログ側で再設定 ブログ
Ameba 本文文字化け ブログ
buffer 連携サービス

UXについて

1 Useful:有用性

ユーザーにとって商品、サービスの価値を高める。

2.Usable:便利さ

便利なものには価値がある。

例)Amazon(色々な商品を色々な角度から選べる)、Yahoo(色々なニュースを紹介)、

3.Findable:迷わず目的地へたどり着ける

ユーザーが今どこに居てるか把握できる、どこにどんなコンテンツがあるか把握できる。

例)パンくず、サイトマップ

4.Credible:信頼できる

ユーザーが安心できるコンテンツを作成しましょう。多くの人が使っている。

例)レビュー、実績、保証等

5.Accessible:わかりやすいサイト

おもてなしのユーザーに気遣いを心がけましょう。

例)整理整頓された階層、テキストかリンクかの色分け、文字を大きく読みやすく

6.Desirable:理想的と思われる・魅力

ユーザーの感性に訴えかけるデザイン、キャッチコピー、コンセプトなど

例)まるで大自然の中に居てるようなデザイン、かっこいい、心に響く言葉

7.Valuable:価値がある

訪れるユーザーに何度も訪れてもらえるようなコンテンツ、満足度が高いサイト

例)知らない事を教えてくれるブログの記事

参考サイト

UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

 

WEBサイトのUIとUXについて

UI=ユーザーインターフェイス

ユーザーとの接点、読みやすいとかデザインが綺麗とか

UX=ユーザーエクスペリエンス

ユーザーがWEBサイトに訪れてから感じること思うことの一連の流れでの体験

WEBサイトのUIとUXについて

カスタマージャーニーマップCJM
ペルソナ
アクティグアウト
プロトコル
モックアップ

UXフロー

機能ナビゲーション
階層型ナビゲーション
パンくずナビゲーション
ダイナミックナビゲーション
ステップナビゲーション

UX設計でターゲットを絞る

UI設計の主な範囲と設計する前の大事な事

ロジック×手法×パターン

UI設計の基礎画面構成

1.何を見せるのか
2.どこで見せるのか
3.どのように見せるのか

サイトスクラクチャー(サイト構造図、サイトマップ)

UI設計はどこで見せるか

UXフロー

https://ferret-plus.com/5167

WPテーマXeoryで初期設定の注意点

screenshot_1

Google Analyticsのタグを入れる

screenshot_1

更新を押したらエラーが、、

ぐぐったら

https://xeory.jp/faq/

サーバー側のセキュリティー問題らしく

使っているレンタルサーバーのWAF設定を無効にして

5分、10分待つことに。

ふーなんとか反映された。

ちなみに「WAF」はWeb Application Firewallの略で、

「ファイアウォール」です。

どうせなら有効にしておきたい感じですが、不具合が出るのを考えると無効にせざるをえないという。