ブログ

ページ毎に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】の使い方

投稿画面に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>

【Per page add to head】のまとめ

このように各ページ専用のCSSやjavascriptが簡単に追加できるので、style.cssや追加CSSの肥大化を防ぐことができます。

直接記述を行う場合はタグで囲うことを忘れないように注意してください。HEADタグに直接CSSなどを打ち込むとそのまま文字列として表示されてしまいます。

あわせて読みたい
Rinker カスタマイズ for wordpressテーマ JIN notabo デフォルトこのブログでは広告貼り付け管理にRinkerというプラグインを利用しています。 いくつかRinkerカスタマイズ記事を書きましたが...
導入・使用しているwordpressプラグイン一覧他人のブログを見ている時に、このサイトはどんなプラグインを導入しているのだろう?と思うことがあるので、自分のサイトに使用しているプラグイ...
最大2.5%ポイント還元
Amazonで買い物をするならお得なギフト券チャージを!
  • コンビニ・銀行(ATM・ネットバンキング)でのお支払いで簡単すぐチャージ