【文字列変換】日本語と英語を使った見出し、タイトル【WordPress】

// 例
<?php
  global $post;
?>
<h1 data-title="<?php echo esc_attr( $post->post_name ); ?>"><?php the_title(); ?></h1>

「$post->post_name」がスラッグになります｡

// 例
<?php
  $slug = get_query_var("post_type");
  $title = get_post_type_object( $slug )->labels->name;
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php esc_html( $title ); ?></h1>

「$post->post_name」がスラッグになります｡

属性の出力には「esc_attr」でエスケープをします｡

WordPressのエスケープ関数については､こちらの記事で解説しています｡

エスケープ関数（esc_html、esc_urlなど）の使い方を解説【WordPress】

WordPressのエスケープ関数の使い方について知りたいですか？この記事では、WordPressのエスケープ関数の使い方、エスケープがいる関数、エスケープがいらない関数についても紹介しています。ぜひご覧ください。

スラッグは-(ハイフン)で英単語をつなげることが多いです｡

PHPの「 str_replace 」を使って､-(ハイフン)を半角スペースに置換することで､単語ごとにスペースで区切られた一般的な英語の表記にすることができます｡

// 例
str_replace("-", " ", "privacy-policy");

// 出力
privacy policy

これを実際のWordPressテンプレートの書き方にあてはめます｡

// 例
<?php
  global $post;
  $slug = str_replace("-", " ", $post->post_name );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

スラッグに-(ハイフン)が含まれない場合でもエラーがでることがないので､とりあえず書いておいて大丈夫です｡

PHPの「 strtoupper 」を使って､英語を大文字に変換することができます｡

// 例
strtoupper( "faq" );

// 出力
FAQ

これを実際のWordPressテンプレートの書き方にあてはめます｡

// 例
<?php
  global $post;
  $slug = strtoupper( $post->post_name );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

PHPの「 ucfirst 」を使って､英語の先頭文字だけを大文字に変換することができます｡

// 例
ucfirst( "about" );

// 出力
About

これを実際のWordPressテンプレートの書き方にあてはめます｡

// 例
<?php
  global $post;
  $slug = ucfirst( $post->post_name );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

PHPの「 ucwords 」を使って､英語の単語ごとの先頭文字だけを大文字に変換することができます｡

// 例
ucwords( "privacy policy" );

// 出力
Privacy Policy

これを実際のWordPressテンプレートの書き方にあてはめます｡

スラッグの-(ハイフン)を先に半角スペースに置換し､その後､それぞれの単語を大文字に変換します｡

// 例
<?php
  global $post;
  $slug = ucwords( str_replace("-", " ", $post->post_name ) );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

上記のHTMLを「text-transform: uppercase;」で大文字に変換します｡

h1:before{
  content: attr( data-title );
  text-transform: uppercase;
}

// 出力
WORK

上記のHTMLを「text-transform: capitalize;」で先頭だけ大文字に変換します｡

h1:before{
  content: attr( data-title );
  text-transform: capitalize;
}

// 出力
Work