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

2015年6月27日カテゴリー : WordPress コメント : 0

　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」というフォルダを作って、そこに移動します。

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

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

<script type=”text/javascript”></script>

1	<script type=”text/javascript”></script>

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

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

header.php を改造

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

<?php wp_head(); ?>

1	<?php wp_head(); ?>

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

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.3.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/javascript.js"></script>

1 2	<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.3.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/javascript.js"></script>

これで準備は完了。

jQuery の JavaScript を javascript.js に書く

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

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

$(function(){
    $(".widget_archive ul li a").css("color", "red")
});

$(function(){

$(".widget_archive ul li a").css("color", "red")

});

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

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

最後に

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

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

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

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

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

jQueryプラグイン徹底活用プロのデザインアイデアとテクニック

posted with カエレバ

MdN編集部エムディエヌコーポレーション 2012-07-03

Amazon

楽天市場

Tag : jQuery, WordPress