WordPress講座(個別相談)

固定ページと投稿で別々の内容を表示したり、違うスタイルを適用したいこともあります。その場合、CSSやPHPを使って「固定ページだけ」を表現する必要があります。以下、簡単な例を紹介します。

スポンサーリンク

CSSでクラス名を使って「固定ページだけ」を組み立てる

多くのテーマでは、bodyタグにページ固有のクラス名が付いています。固定ページの場合は「page」です。

固定ページには「page」というクラス名が付いている

固定ページには「page」というクラス名が付いている

これを利用して、固定ページのみに適用するCSSを書くことができます。以下の例では固定ページのみ、ページタイトルに背景画像を表示しています。

.page #pageTitBnr {
    background: url(http://…略….jpg);
}
固定ページのページタイトルに背景画像を入れる

固定ページのページタイトルに背景画像を入れる

投稿には適用されません。

投稿にはCSSが適用されない

投稿にはCSSが適用されない

PHPでis_pageを使って「固定ページだけ」の条件分岐を組み立てる

WordPressの条件分岐タグis_pageを使うと、現在表示中のページが投稿なのか固定ページなのか判断することができます。

たとえば、ページ本文の下に広告などを表示する場合、the_contentにフックを設定する方法を思い付きます。次のようなコードです。

/* 本文の下に広告を表示 */
add_filter('the_content', 'my_content_after_post', 1000);
function my_content_after_post($content){
    ob_start();

    $content .= <<<EOM
<img src="http://…略….jpg">
EOM;

    echo $content;

    return ob_get_clean();
}

このコードでは投稿・固定ページを問わずすべてのページの本文下に広告画像が表示されるので、「固定ページのみ」という条件で絞りたいときは次のようにis_pageを使った条件分岐を追加します。

/* 固定ページのみ本文の下に広告を表示 */
add_filter('the_content', 'my_content_after_post', 1000);
function my_content_after_post($content){
    ob_start();

    if (is_page()) {
        $content .= <<<EOM
    <img src="http://localhost/wp-test/test1/wp-content/uploads/2016/03/image1.jpg">
EOM;
    }

    echo $content;

    return ob_get_clean();
}

これにより、固定ページのみ、指定した画像が表示されます。投稿の本文下には表示されません。

固定ページのみ本文下に広告画像を表示する

固定ページのみ本文下に広告画像を表示する

まとめ

このように、投稿と固定ページで別々の処理を行うことができます。要件によってCSSを使えば大丈夫な場合と、PHPで対応した方がスッキリ処理できる場合があります。「page」クラスやis_pageの特徴をつかんで、うまく対処できるようにしましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク