WordPress で Web サイト構築試行錯誤: ページごとに特定の CSS や JavaScript を使いたい

自坊の Web サイトを数カ月前に立ち上げたのですが、構築途中ですでに数ヶ月放置してしまっていました。ここ数日少しだけ作業を進めたのですが、迷うことが多くありなかなか思うようにデザインできないこともあります。次に再度迷わないようにここにいくつかメモしておきます。

まず、コンテンツ管理システム (CMS) には WordPress を利用することにしました。情報も豊富でサポートも充実、無料 (オープンソース) で拡張性も高い、などなどが選んだ理由です。導入手順やカスタマイズなどもそれほど複雑ではなく、かつ情報がたくさん Web 上から得られます。

さてまずはテーマですが、標準の Twenty Eleven をもとに作成することにしました。

この書籍を購入して、勉強しながら設定しています。

ところが、いくつかページを作成するなかで、この記事のタイトルの通り、ある固定ページにだけ特定の CSS や JavaScript を適用したくなってきました。いくつか方法があるようですが、管理画面からプラグインの検索を実行してみると CSS & JavaScript Toolbox というプラグインが見つかりましたので、導入してみました。

プラグインを有効にすると「設定」に「CSS & JavaScript Toolbox」の項目が出てくるので、ここから設定します。

まずは、適応したい CSS や JavaScript を記述します。

css_js_toolbox_01.png

次にその右側にある「Add this CSS/JS code to ?」で適応したいページにチェックを入れます。

css_js_toolbox_02.png

最後に「Save All Changes」をクリックします。以上で完了です。

もとの Twenty Eleven のテーマは次のようなデザイン。

css_js_toolbox_03.png

特定のページに独自の CSS を適用したもの。今はサイトタイトルとヘッダの画像を非表示にしただけなのですが、今後いろいろ応用が効くと思います。

css_js_toolbox_04.png

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください