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>タグで囲うのを忘れないようにしましょう。
直接記述
<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>
javacriptを直接記述しています。
<script type="text/javascript">
writeHeader();
</script>
ファイル読み込み
もちろんCSS、javascript共に別ファイルを読み込むことも出来ます。それぞれ<link>タグ、<script>タグで記述してください。
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">
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などを打ち込むとそのまま文字列として表示されてしまいます。

