テーマ化を進めていく上で、通常のHTML/CSSのコーディング以外で注意が必要なことがあります。静的なサイトは文字数が変わることはあまりありませんが、WordPressは投稿や記事に変更、追加があることが多いです。そのため、例えば、デザインカンプでカテゴリーのレベルがあって、PCサイズでもスマホサイズでもwidthが同じだったため、固定にしていました。このカテゴリは仮ですので、5文字以上になるときもあれば、3文字の時もあります。そのため、テキストの文字数が変更になっても対応できるようにしておかなくてはいけません。また、あまりにも文字数が多い場合は・・・などになるようにしておく必要があります。
ラベルの背景には
width: fit-content;を使います。複数文字の丁度いい幅になります。また、paddingを設定して余白を確保しておく必要があります。
また、タイトルなどを25文字以上の場合に「…」で省略表示するには、テーマのテンプレートファイルを編集して、PHPの文字列関数を使用します。以下はその一例になります。
１
$title = get_the_title();
if (mb_strlen($title) > 25) {
$title = mb_substr($title, 0, 25) . ‘…’;
}
echo $title;
mb_strlen($title) > 25: まず、mb_strlen 関数を使って $title の文字数をカウントします。この条件は $title が25文字より長いかどうかをチェックしています。25文字より長い場合、条件文の内部のコードが実行されます。mb_substr($title, 0, 25): $title の最初の25文字を取り出します。mb_substr 関数は、指定された文字列（ここでは $title）から特定の範囲の文字列を抽出します。この場合、最初（0番目）から25文字を取り出します。. '...': 取り出した文字列の後に「…」を連結します。これは文字列が省略されたことを示すためです。
次回からは元から、文字数の可変を意識したコーディングをしていきたいと思います。
