WordPressのテーマをjQuery初心者がカスタマイズしてみる

 WordPress のテーマを自作して運営している当ブログですが、さすがに CSS による装飾だけでは満足できなくなってきたことと、jQuery を使うと CSS の記述を減らすことができたりして、ブログ保守の負担を減らすことができるようなので、jQuery に手をだすことにしました。JavaScript よくわかっていないのですが、なんとかがんばっていきたいと思いますです、はい。

2015年8月8日 追記:

このエントリーの方法はあまりよろしくないことが判明したので、訂正記事を書きました。

WordPressでJavascriptやCSSをどのように読み込むべきか | Naokix.net

[超訂正] WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net

以前、訪れてくれた方には大変ご迷惑おかけしました。申し訳ありません。

jQuery をダウンロード

 公式のダウンロードページからダウンロードしてきます。

Download jQuery | jQuery

ダウンロードページに行くと、

「jQuery 1.x」系と「jQuery 2.x」系があります。

jQuery入門道場 – 【jQueryとは?】

こちらのページに詳しく解説されていますが、古いブラウザもサポートしているということで、jQuery 1.x 系をダウンロードしました。compressed バージョンのほうが読み込みが早いとのことなので圧縮版を使います。

jQuery を設置

 2015年6月27日の段階では「jquery-1.11.3.min.js」という js ファイルがダウンロードできました。使っているテーマのフォルダの中に「js」というフォルダを作って、そこに移動します。

20150627_1_1_2

どこに jQuery の JavaScript を書けばいいのか

 JavaScript のソースコードなので、HTML ファイルの head タグ内に

を置いて、ページに埋め込んでもいいのですが、編集のしやすさを考慮して外部 JavaScript ファイルを作成することにします。テーマのフォルダの中に「javascript.js」というファイルを作成しました。

20150627_1_2_2

文字コードは Shift-JIS、改行コードは LF ONLY です。「wordpress/wp-includes/js」以下の JavaScript ファイルがそのようになっていたので、それにならっておく。

header.php を改造

 テーマのフォルダのheader.php には

が記述してあると思いますが、これより前にでも次の2行を書き足してください。

これで準備は完了。

jQuery の JavaScript を javascript.js に書く

 今回は、当ブログの WordPress ウィジェットの文字の色でも変えてみたいと思います。

20150627_1_3

当ブログのアーカイブは WordPress 標準のものを使っているのですが、このウィジェットの div タグには「widget_archive」という class 属性が割り振られています。これを使うと、

このように書けます。CSS の記述の仕方と似ているので、とても使いやすい。

20150627_1_4

これだけです。思っていたより簡単で嬉しい。

最後に

 「WordPress jQuery」で検索すると、検索上位に「動かない、動かない」という怨嗟の声が満ち溢れていてかなりビビっていたのですが、想像以上に簡単にカスタマイズできてしまいました。2、3年前の古い記事のようで現在の WordPress では問題がないようです。

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

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

最新バージョンの WordPress にも初期状態で jQuery が入っているのですが、むしろこっちの使い方がわからない(-。-;)

 リンク先にあるように、複数の JavaScript ライブラリを導入しようとするとコンフリクトして動作しないトラブルに遭遇するかもしれないので、覚えておくといいのかもしれません。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP