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

 

Google Search Console(グーグルサーチコンソル)

Google

googleが提供するサイトの最適化に必須解析ツールのグーグルサーチコンソル

GSCとかサチコの言い方されていますね。

SEO対策への解析、分析にはすごく使えるツールで、googleAnalyticsはもうメジャーですが、まだまだ知らない人の為に解説します。

SEO対策って?

自分、自社のWEBサイトに訪れる人は大きく分けて

1.オーガニック検索google・Yahoo!からの検索結果から訪れるユーザー

2.広告から訪れるユーザーPPC広告・ディスプレイ広告・リマーケティング広告等

3.SNSから訪れるユーザー

4.お気に入り、URL直打ち、メルマガ

高島屋、伊勢丹のデパートに行ってからお店を探すようなイメージでそれぞれプラットホームに付いているユーザーを呼びこめるかが

訪れる人を増やすポイントになります。

そのプラットホームの中でオーガニック検索と言うデパートに付いているユーザーを呼び込む為の手段としてSEO対策があります。

SEO対策って何をすればいいの

google・Yahoo!から優良店と太鼓判を押して貰うようにすれば目立つ場所にWEBサイトを移動出来ます。

その為にまずは「WEBサイトの現状分析」です。

「WEBサイト(お店)は今何階にあるのか」

「WEBサイト(お店)は訪れて欲しいユーザーが居てるエリアはどこか」

「お店の看板は適切なキャッチコピーで誘導出来ているか」

これらを調べて、適正にするためにデパートの管理者(google・Yahoo!)のルールに基づきWEBサイトを変更しなければ行けません。

デパートの管理者はお客様第一主義で、管理者のルールに従うことでユーザーがWEBサイトへの満足度を上げることも出来ます。

例えば、お店の電球は切れていないかとか人が通る導線を塞いでないかなどなどです。

一つ一つ改善することで管理者から評価され目立つ場所に行くことが出来ます。

そのほかに、お店への口コミが1番大事だったりします。笑特に有名人(評価が高いお店から)

グーグルサーチコンソルの使い方

前置きがものすごく長くなってしまいましたが、使い方として

WEBサイトがどこのエリアの何階にあるかを確認して現状分析をしましょう。

screenshot_1

アクセスがないのがバレる、、笑

その後は管理者からの指摘のWEBサイトの悪い所を直しましょう。

グーグルサーチコンソルとはgoogle(管理者)のルールから見たWEBサイトを教えてくれるツールです。

日本には4つの大きなデパートがあり1番大きいデパートの中での集客を整えるために便利なツールである

グーグルサーチコンソルを使いましょうと言うことです。

参考になった記事

ウェブマスターツール(Search Console)使い方・機能とは | 100%使用マニュアル保存版

Facebookランキングサイトに登録

Facebookページをランキングサイトへ登録する事で「いいね」を増や露出を高めることが出来ます。

Facebookページランキングサイトへの登録の紹介

Facebook navi フェイスブックナビ

http://f-navigation.jp/contact/

申請し審査後登録されるようです。

フェイスナビ

http://facebook.boo.jp/

フェイスブックページのURLを送信するだけで登録が出来る。簡単!

FBランク

http://fbrank.main.jp/

こちらもURLを送信するだけで登録が出来ます。

IFTTTの検証結果

困る

 

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

WordPressからSNS、ブログ、WEBサービスへの連携

IFTTTを使ってcmcosaka.comからの投稿を

下記のサイトへ自動反映

Facebookページ

Twitter
Instagram(Facebookページとインスタ連携設定しているので反映されるかテスト)
Blogger
Linkedln
Pinterest
delicious
Flickr
tumblr
pocket

AmebaとはてなブログはRSSからGmail経由に

google+はbufferを使ってGmail経由で

反映が遅いみたいなので、trigger@recipe.ifttt.comへ

催促空メールも送りまーす。

上手く行くかなー

UXについて

1 Useful:有用性

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

2.Usable:便利さ

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

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

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

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

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

4.Credible:信頼できる

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

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

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

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

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

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

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

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

7.Valuable:価値がある

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

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

参考サイト

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

 

GoogleChrome便利ショートカット

パソコン操作を楽ちんにおすすめGoogleChromeの便利ショートカット

ショートカットキーの内容 Windows Mac
新規ウィンドウを開く Ctrl + N Command + N
今のウィンドウを閉じる Alt + F4 Command + Shift + W
新規タブを開く Ctrl + T Command + T
タブを閉じる Ctrl + W Command + W
現在のタブから右に移動 Ctrl + Tab Ctrl + Tab
現在のタブから左に移動 Ctrl + Shift + Tab Ctrl + Shift + Tab
指定したタブへ移動 Ctrl+ 数字(0~9) Command + 数字(0~9)
Chromeウィンドウをすべて閉じる なし? Command + Q
アドレスバーにカーソルを移動 Ctrl + L
Ctrl キーを押しながらリンクをクリックする 新しいタブでリンクを開く
Ctrl+H [履歴] ページを表示する
Ctrl+Shift+O ブックマーク マネージャを表示する
Ctrl+0 通常のテキスト サイズに戻す