ページごとにCSSを追加できるプラグイン|Per page add to head

この記事では、ベージごとにCSS(<head>タグ)を追加できるプラグイン「Per page add to head」を紹介します。

MENくん
ちょっと何言ってるのかわかんない
くま1号
わかりづらいから図で説明するね
メモ
CSSはカスタマイズコードのことだよ。追加CSSや子テーマのstyle.cssに記入するコードです。

追加CSSに記入したカスタマイズコードはすべてのページに適用されます。

一方、投稿画面にあるPer page add to headにカスタマイズコードを記入した場合は、その投稿ページだけにカスタマイズが適用されます。

つまり

その投稿ページだけカスタマイズできるプラグインです。

MENくん
な、なるほどね!

固定ページや特定の投稿ページのデザインだけ変更したかったり、何かを非表示にしたかったりする時にものすごく役に立つプラグインです。

こんな人向けの記事です
  • 特定のページだけデザインを変更したい
  • 特定のページだけアドセンスを非表示にしたい
  • style.cssをすっきりさせたい

ちなみに、このプラグインにCSSコードを記入した後は、キャッシュ削除しなくても普通に更新するだけでカスタマイズが適用されます

プラグインのインストール

STEP 1
プラグインの新規追加をクリック

STEP 2
検索してインストール

検索欄に「Per page add to head」と記入して出てきたら「今すぐインストール」をクリック。

STEP 3
インストール後は有効化

これでインストールは完了です。

細かい設定は一切必要ありませんw

MENくん
インストール後すぐに使えるんだ!

夏だし髪を斬りに行こう!

夏だしどっか行こう!

使ってみる

Per page add to headをインストールすると投稿画面(もしくは固定ページ画面)にBOXが出てきます。

あとはこのボックスの中にカスタマイズコードを記入していくだけです。

1点だけ追加CSSとはコードの書き方が違い、カスタマイズコードを<style>~</style>で囲む必要があります。

実際にコードを記入

記入したコードはこちら

メモ
必ず<style>~</style>でカスタマイズコードを囲いましょう。

このコードは見出しの色を変更するコードになります。

▽ 動かすことができますよ ▽

この画像の様に見出しの色を変えることができました。

めちゃくちゃ簡単ですね。

そしてこの方法でCSSコードを追加すると通常必要な「キャッシュを削除して更新」する必要がありません。

くま1号
この一手間が無いだけでカスタマイズの確認がめちゃんこらくやで

トップページで使ってみる

固定ページをトップページに設定した場合、デザイン変更とかいろいろしたいですよね。

そんなときは「Per page add to head」がマジで役に立ちます。

ぼくのサイトでもトップページ用に作った固定ページでは、このプラグインをガンガン使用しています。

トップページ用に作った固定ページ
toppopotoppopo toppotoppo
MENくん
このプラグインがあれば存分にカスタマイズができてしまう!!

特定のページだけアドセンスを非表示

アドセンスを非表示にしたいページの「Add to headボックス」に以下のコードを追加します。

このdisplay: none;はめちゃくちゃよく使うので、おすすめです。

ほかにもbackground: transparent;は透明になるので使い勝手がいいですよ。

Twitterカードの設定

Twitterでシェアするときに表示されるアイキャッチ画像を手動で設定することができます。

記入するコードはこちらのサイトに詳しく書いてあります。

参考 【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法サルワカ | サルでも分かる図解説明マガジン
くま1号
固定ページをトップページにした際は、しっかりと設定しておきましょう。

入力するコードは<style>の前に記入しましょう。

 

このように「Per page add to head」はカスタマイザーにとって無くてはならないプラグインです。

MENくん
これでまたカスタマイズが加速するぜ!