ページ毎にCSSやjavascriptを設定するwordpressプラグイン【Per page add to head】

wordpressでカスタマイズをしているとついついstyle.cssや追加CSSの分量が増えていってしまいます。

特定のページでしか使わないCSSなどをそのページに記載できたらstyle.cssや追加CSSの分量を減らせると思いプラグインを探してみました。

そのプラグインの名前はPer page add to headといいます。

【Per page add to head】のインストール

インストールはwordpress管理画面メニューのプラグインの新規追加ページで【Per page add to head】と検索すると下の画像のプラグインが出てくるのでインストールして有効化してください。

もしくは次のリンクからダウンロードしてお使いください。

プラグインページ

Per page add to head

【Per page add to head】の使い方

投稿画面にAdd to headというウィジェットが追加されているので、そこにCSSやjavascriptを記述していきます。

見当たらない場合は投稿画面上部の表示オプションのAdd to headにチェックを入れてください。

記述したものはそのまま<HEAD>タグ内に書き出されるので、上の画像のように、CSSを直接記述するときは<style>タグで、javascriptを直接記述する場合は<script>タグで囲うのを忘れないようにしましょう。

直接記述

CSS直接記述例

<style type="text/css">
<!--

div.yyi-rinker-contents {
    border: solid 1px #42424230;
    border-radius: 10px;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}

--//>
</style>

javascript直接記述例

javacriptを直接記述しています。

<script type="text/javascript">
	writeHeader();
</script>

ファイル読み込み

もちろんCSS、javascript共に別ファイルを読み込むことも出来ます。それぞれ<link>タグ、<script>タグで記述してください。

CSSファイル読み込み例

CDNからfontawesomeの4.7.0を読み込んでいる例です。

<link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

javascriptファイル読み込み例

jqueryをCDNから読み込んでいます。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>