WEBEER – Web制作の覚えがき –

【WordPress】見出しの最初が括弧だった時に左端を揃えたい

WordPress
WordPress 更新日:2020.08.21 公開日:2020.08.13

ブログのタイトルや見出しの最初が【や「で始まる時にテキストの先頭が右にずれるのが気になりますよね。

ブロックエディターでは見出しごとにCSSクラスを追加することができますが、今回は一律でClassを追加したいのでテーマの方でまとめてつけることにします。

スタイルを書く

まずはスタイルシートを書きます。

.has-brackets {
  text-indent: -.4em;
}

括弧の空白は0.4emなのでtext-indentを使って左に寄せる。

これで左に揃うスタイルシートが書けました。

1文字目が括弧の見出しにClassをつける

記事タイトルにCSSクラスをつける

single.phpで記事タイトルを出力する際に、括弧が含まれていたらh1にCSSクラスを追加する部分を書く。

// 括弧が含まれるか判定
if( preg_match("/^(【|(|「|『)/", get_the_title()) ) {
  // 括弧が含まれている
  $title = '<h1 class="has-brackets">' . get_the_title() . '</h1>';
} else {
  // 括弧が含まれていない
  $title = '<h1>' . get_the_title() . '</h1>';
}

// 記事タイトルを表示
echo $title;

preg_matchを使って記事タイトルに括弧が含まれているかの判定をしています。

if( preg_match("/^(【|(|「|『)/", get_the_title()) ) {

preg_match( "パターン", "検索対象の文字列")は検索対象の文字列にパターンが存在するかを調べる正規表現です。

^これで先頭に一致、(【|(|「|『)これで【(「『のどれかに一致の意味になります。

h2とh3にCSSクラスをつける

h2〜h6はthe_content()の中に含まれているので、表示する前に置換してあげる必要があります。

// contentを出力する前に書き換える
function the_lds_content( $content ) {

  // 見出しの1文字目が括弧だった時にClassを追加
  $b = '(【|(|「|『)';
  $content = preg_replace('/<h2>' . $b . '/', '<h2 class="has-brackets">$1', $content);
  $content = preg_replace('/<h3>' . $b . '/', '<h3 class="has-brackets">$1', $content);

  // ショートコードを実行
  $content = apply_filters( 'the_content', $content );

  echo $content;
}
// 出力
if ( have_posts() ) {
  while( have_posts() ) : the_post();
    the_lds_content( $content ); 
  endwhile;
}

preg_replaceで括弧の前の見出しタグにCSSクラスを追加しています。

apply_filtersを通してやらないとショートコードが実行されないので忘れないようにします。

終わりに

先頭の括弧の位置を揃えるとデザインのクオリティがグンと上がるのでこだわっておきたいところです。