WordPressのURLやカテゴリーのスラッグを利用して動的にCSSや画像を変更する ①固定ページのスラッグを利用する

WordpressのURLやカテゴリーのスラッグを利用して動的にCSSや画像を変更する　①固定ページのスラッグを利用する

カスタマイズ

カテゴリーごとに色を変えたい！
このページの時はこの幅にしたい！
など、Wordpressで構築する上で、こういった要望は尽きないと思います。
要素の出し分けなどには”is_page”や”is_home”などの条件分岐タグを使用する方法が思い浮かびますが、
固定ページ作成の際に設定するスラッグを利用してCSSを適用すれば
出し分け以外にも色々応用できますので、固定ページのスラッグを利用した例を紹介したいと思います。

＊条件分岐タグを使用してクラスを出し分けする例はこちらの記事で紹介しています。

まずはスラッグを取得する

1.固定ページの場合

  
    $page = get_page(get_the_ID());
    //スラッグ名の取得
    $slug = $page->post_name; //固定ページからスラッグを取得し、変数$slugに代入する

あとは取得したスラッグを出力するだけです！

具体例

下記のような種類の固定ページがあったとしましょう。

スクリーンショット 2017-01-23 11.45.48

＊それぞれスラッグはタイトル同様 apple,banana,grape,orangeとしてあります。

例えばpage.phpなどのページテンプレートに下記のようなコードが書いてあったとします。

html

  
    </p>
    <div class="content_wrap hogehoge">
    <h3 class="ttl">hogehogeのページの見出し</h3>
    <p>   <img src="example.com/wordpress/wp-content/theme/[テーマの名前]/images/hogehoge.jpg" alt="hogehoge">
    </div>
    <p>

そして、ページごとに下記のようにしたいと想定すると

親要素にページごとに独自のクラスを設定し、h3要素の色をページ毎に変更する
h3のhogehogeのところにページのスラッグ名を出力したい。
画像をページ毎に変更したい。altタグにスラッグ名を入れたい

まずphp側のコードとしては下記のようにすればOKですね

  
    <?php
    //ページ情報の取得
    $page = get_page(get_the_ID());
    //上で取得したページ情報からスラッグ名を取得
    $slug = $page->post_name; //固定ページからスラッグを取得し、変数$slugに代入する<br />
    ?></p>
    <div class="content_wrap <?php echo $slug; ?>"></p>
    <h3 class="ttl"><?php echo $slug; ?>のページの見出し</h3>
    <p>   <img src="example.com/wordpress/wp-content/theme/[テーマの名前]/images/<?php echo $slug; ?>.jpg" alt="<?php echo $slug; ?>">
    </div>
    <p>

画像のパスは適宜書き換えてあげてください。
また上記のコードはループ内に書いてあげましょう。
これでh3の見出しの箇所、画像の出し分け、altタグにスラッグ名が入る形になりました。

実際の表示(固定ページ：orangeの場合)

スクリーンショット 2017-01-23 12.01.29

出力ソース(固定ページ：orangeの場合)

スクリーンショット 2017-01-23 12.03.42

”echo $slug;”とした箇所にスラッグが出力されているのが確認できるかと思います。

CSSを当てて見る

これで親要素のdivにそれぞれapple,banana,grape,orangeのクラスがつくようになったのでこれを利用してh3にCSSを当てて見ましょう

  
    .apple h3{
        background-color:pink;
    }
    .banana h3{
        background-color:yellow;
    }
    .grape h3{
        background-color:purple;
    }
    .orange h3{
        background-color:orange;
    }

スクリーンショット 2017-01-23 12.16.25