WordPressのスラッグで動的にCSSを変更

2018.01.26

WordPressでサイトを制作する上で、特定のカテゴリーに対して違うレイアウトにしたりなど、色々あると思います。
スラッグを利用してCSSを適用すれば固定ページ作成の際に設定する
出し分け以外にも色々応用できます。

スラッグの取得

<?php
$page = get_page(get_the_ID());
$slug = $page->post_name; 
?>
<div class="content_wrap <?php echo $slug; ?>"></p>
<h2 class="tittle"><?php echo $slug; ?></h2>
<p><img src="<?php echo $slug; ?>.jpg" alt="<?php echo $slug; ?>"></p>
</div>

<?php

$page = get_page(get_the_ID());

$slug = $page->post_name;

</div>

上記では、h2のtittleのところにページのスラッグ名が出力され、親要素のclassにスラッグ名が付与されます。

position:fixedで、左端を親要素基準にするポイント

ファイル名一括変換

WordPressのスラッグで動的にCSSを変更

スラッグの取得

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

バリデート付きの条件分岐フォーム作成

CSSだけで吹き出しを作る

flex-directionを指定した時のIE11で表示くずれ

サーバーのお話②

文字を縦書きにする

文字参照