特定のページにCSSを効かせるにはカスタムフィールドを利用する

WordPressで特定のページだけとか、個別ページに、という風にページごとにCSSを効かせる方法の一つとして、カスタムフィールドを利用する方法があります。
 
この方法は、こちらの記事で紹介している方法の応用といったところです。


 
投稿する特定のページにのみ効かせるのでCSSファイルに追記するのではなく、ウェブ上に表示されるHTMLページに直接CSSを記述させることになります。
 
つまり、CSSを効かせたいページの投稿画面の、カスタムフィールドに入力したCSSの内容をそのページにphpで表示させ、CSSを適用させるのです。
 
こちらで紹介しているように、外部ファイルから独立させる形になってきます。
 

 
CSSの情報はHTMLページはヘッダーに記載するため、一手間加えることになりますが、header.phpに以下のphpタグを入力し、カスタムフィールドの内容を取得します。
<haed>〜</head>の中の</head>の手前あたりが良いでしょう。

<php? get_post_meta($post->ID , custom_css , true) ?>;

 
 
そして、カスタムフィールドは名前にも「custom_css」と入力し、(例えばなので、わかりやすい名前にして下さい。)値には、追加したいスタイルを入力します。

<style type="text/css">
 p.inline-center {
    text-align: center;
 }
</style>

(ここでは例として文字の中央寄せ)
 
カスタムフィールド css
そして、「カスタムフィールドを追加」のボタンを押します。
 
カスタムフィールドの値に入力されたCSSがヘッダーに引き渡され、投稿したページのスタイルとして効かせることができます。
そんなに難しくないですよね?
 
 
しかし、その都度全てのコードを入力するのは面倒なので<style type="text/css">と</css>の部分を省略してしまいます。
 
カスタムフィールドからデータを持っていくのなら、中身だけを入力して表示されるようにすれば良いですよね。

ということで、ヘッダーにこのように入力します。

<style type="text/css">
<php? get_post_meta($post->ID , custum_css , true) ?>;
</style>

 
カスタムフィールドへの入力はこれでOK。
カスタムフィールド css
 
作業の手間が省けました。
 
あとは特定のページにCSSを追加していくことで、個別ページごとに必要なCSSを効かせることができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です