【WordPress】投稿／固定ページのスラッグ名を反映【大文字】

記事内に広告を含みます

パソ君

・WordPressで投稿や固定ページのスラッグ名を反映するには？

こんな疑問にお答えします。

WordPressの投稿や固定ページのタイトルを、スラッグ名を反映させたい場合ありますよね。

例えば「about」というスラッグの時に、「About」「ABOUT」「about」みたいに反映したいかと。

実はそれ簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「投稿／固定ページのスラッグ名を取得・反映」について解説していきます！

この記事でわかること

投稿／固定ページのスラッグ名を取得・反映

【WordPress】投稿／固定ページのスラッグ名を取得・反映【大文字も】
【WordPress】投稿／固定ページのスラッグ名を取得・反映【CSSを使用】
【WordPress】投稿／固定ページのスラッグ名を取得・反映【日本語と英語のタイトル】
【WordPress】投稿／固定ページのスラッグ名を反映【大文字】：まとめ

【WordPress】投稿／固定ページのスラッグ名を取得・反映【大文字も】

今回は例として「about」というスラッグを持った固定ページを想定します。

スラッグ名を取得反映する方法は主にこちら↓

通常の反映
大文字で反映
一文字目だけ大文字

順に解説していきます。

通常の反映

まず投稿／固定ページのスラッグ名を取得して反映するコードがこちら↓

<h1>
  <?php echo esc_html( get_post_field( 'post_name', get_the_ID() ) ); ?>
</h1>

これで「about」というスラッグの記事だと「about」と反映されます。

get_post_field() 関数で引数の記事IDと取得したいフィールドを指定。
'post_name'が記事スラッグのことですね。

コードの意味としては
「現在の記事IDに対応するスラッグを取得して、エスケープ処理して反映」
となります。

2023年3月12日【解説】WordPressのエスケープ処理方法３選【必要・不要な関数】

大文字で反映

スラッグ名を大文字にして反映したいこともありますよね。

そんな時はstrtoupper()関数を使えば反映可能です。
コードがこちら↓

<h1>
  <?php echo esc_html( strtoupper( get_post_field( 'post_name', get_the_ID() ) ) ); ?>
</h1>

これで「about」というスラッグの記事だと「ABOUT」と反映されます。

一文字目だけ大文字

一文字目だけ大文字に反映したい場合があるかと思います。

そんな時はucfirst() 関数を使用すれば反映可能です。
コードがこちら↓

<h1>
  <?php echo ucfirst( esc_html( get_post_field( 'post_name', get_the_ID() ) ) ); ?>
</h1>

これで「about」というスラッグの記事だと「About」と反映されます。

【WordPress】投稿／固定ページのスラッグ名を取得・反映【CSSを使用】

先ほどスラッグ名を大文字にしたいとき、strtoupper()やucfirst()を使う反映方法を紹介しました。

ただ大文字変換に関してはCSSを用いても反映できます。

下記コードでスラッグ名を反映して、そのタグに対して下記CSSを使えば大文字変換ができます。

<h1>
  <?php echo esc_html( get_post_field( 'post_name', get_the_ID() ) ); ?>
</h1>

/*-- 文字先頭を大文字に --*/
h1 {
  text-transform: capitalize;
}

/*-- 文字全てを大文字に --*/
h1 {
  text-transform: uppercase;
}

このCSSに関してはこちらの記事で詳しく解説しているのでどうぞ↓

2023年6月1日【CSS】アルファベット英語を大文字・小文字にする【音声対策】

【WordPress】投稿／固定ページのスラッグ名を取得・反映【日本語と英語のタイトル】

案件でよくあるのが下記のようなデザインですよね↓

ABOUT
〇〇について

日本語と英語を使ったタイトルです。

これはスラッグ名を取得して反映させれば、下記のようなコードで反映可能です。

<div class="c-title">
  <h1 class="c-title__big"><?php echo esc_html( get_post_field( 'post_name', get_the_ID() ) ); ?></h1>
  <span class="c-title__small"><?php the_title(); ?></span>
</div>