WordPressのページスラッグ名を取得し文字として表示する
公開日:
そのページのスラッグを使ってclass名や画像名に応用することはよくあります。
また、ページごとにcssを変えたい時にheader.phpを複数作ったりと手間や管理が大変になります。そういう時でもスラッグ名のcssファイルごとにするだけでheader.phpを1つでできるようになります。
そんな時に使えるよう、この記事にメモをしておきます。
スラッグ名の取得と出力
1 2 |
<?php $page = get_post( get_the_ID() ); $slug = $page->post_name; ?> <div class="<?php echo $slug; ?>"> </div> |
1行目でページのスラッグ名を取得してきています。
次に2行目の<?php echo $slug; ?>で取得したスラッグ名を表示しています。
この記述方法で色々な場面で使うことができます。
いろいろな出力で使い方をご紹介
取得コードは省いてご紹介します。
cssファイルをスラッグ名にした時の出力
1 |
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>css/<?php echo $slug; ?>.css" type="text/css" /> |
id名やclass名にスラッグを出力して表示
1 2 |
<div id="<?php echo $slug; ?>">テキスト</div> <div class="<?php echo $slug; ?>">テキスト</div> |
画像をスラッグ名にして表示
2種類の例を記載しています。
1行目は、画像の名前そのものがスラッグ名で、2行目はスラッグ名+topという画像の名前を付けた時です。
1 2 |
<img src="https://webaby.site/img/<?php echo $slug; ?>.jpg" alt="スラッグ名画像"> <img src="https://webaby.site/img/<?php echo $slug; ?>-top.jpg" alt="スラッグ名画像"> |
フォルダをスラッグ名にして出力
1 |
<img src="https://webaby.site/<?php echo $slug; ?>/sample.jpg" alt="スラッグ名画像"> |
リンク先をスラッグ名にして出力
これは、固定ページで使うことは少ないと思います。私がよく使う方法は、タクソノミーでタームを作成した時の一覧ページを表示したい時などに使います。
1 |
<a href="https://webaby.site/list/<?php echo $slug; ?>">テキスト</a> |
スラッグ名を使ってより楽にサイト管理をしよう
簡単な内容でしたが、いろいろな場面で使うことができます。
こういった細かな設定をするだけで、ファイル数も削減できサイトの管理や修正が簡単にできるようになります。
この記事を参考にしていただけたら幸いです。