wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

PHP・mb_substr関数を使って、タイトル文字数を揃える(WPレイアウト調整)

      2020/07/21

こんにちは、管理人@SS_mshpです。

今回はPHP関数を使って、表示の調整をしてみたいと思います

タイトル文字数によって、記事を表示しているボックスの大きさが変わってしまう、といったレイアウト上の課題を解決しました。使う関数は『PHP・mb_substr』。さっそく対応方法を見ていきましょう。

今回解決したい内容→タイトルが長い記事・短い記事で、ボックスのサイズが変わるのを直したい


わたしが以前セットアップした映画レビューのサイトです。記事は友人のライターMGさんが執筆中です。WPのファンクションやPHPあたりはわたしの担当領域です。

WPのMaxwellテーマを利用しており、2カラムレイアウトを使ったときでも、中央の記事一覧部分が二列になります。しかし、『タイトルが短い記事と長い記事が並んだとき、ボックスのサイズがずれる』といったレイアウト上の問題がでたので、これを直してみたわけです。

(※スマホレイアウトで、タイトル大きめフォントにしたとき、文字数が70とか長くなると、スクロール量が増えて大変、といった状態の解決にも使えそうです)

今回使うPHP・mb_substrとはどんな働き?

文字列の操作に関わる関数で、『文字列を抜き出す』という働きをします。パラメーターで指定することによって、『特定の文字列を抜き出す』『○○字目から○○字目を抜き出す・文字数指定する』などができます。

関数名mb_substrの『mb』は『マルチバイト』のことで、日本語を扱うことができます
なお、半角英数字などシングルバイト文字を抜き出すときは『substr』を使います。

■(参考)PHP.net mb_substr について
https://www.php.net/manual/ja/function.mb-substr.php

mb_substrを使って、タイトル文字数をそろえてみた例

表示例


mb_substrで文字数指定してタイトルを出力してみた例です。前述の対応前画像とくらべると、文字数・ボックス長さがそろって、見やすくなったかも。

コードと解説


このテーマでの、一覧に記事表示している部分(template-parts/content.php)を改造。コードはこのようになりました。元のバージョンでは、単純に『the_title();』で出していたので、長いものでも全部取得。

『the_permalink()』をアンカータグ内に入れて、タイトルがリンクになるように。タイトルはechoするんですが、『mb_substr( $post->post_title, 0, 40)』を入れました(0, 40は、最初の0番目の文字から40番目)。

そのあとの『.』は、文字列結合演算子で、三点リーダー『...』(これは引用符'でくくらないとsyntax errorになります)とくっつけてechoしています。

なお、個別記事ページではタイトル全文表示したいため、『一覧ページに表示する部分』だけ対応します。

注意点~マルチバイト・シングルバイト混在

とりあえず、マルチバイト文字数は揃えることができましたが、タイトルに『半角英数字』などが入る場合、レイアウトがずれることがあります。

気になる場合は『タイトルはすべて全角で書く』『mb_convert_kanaを使って揃える』といった対応が考えられます。

あとがき・まとめ

  • mb_substrを使って、文字を抜き出したり、文字数を揃えたりできる
  • WPだと、タイトルや抜粋の文字数指定抜き出しが可能
  • マルチバイト・シングルバイト混在の時は、揃えるか変換

といったところです。タイトルや抜粋文字数などはサイト・ブログなどで使うことも多いので、押さえておいてください

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - PHP・データベースetc
【タグ】 - , ,

  関連記事

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

【WordPress組み込み関数】is_home()とis_front_page()って同じ?→似てますが、厳密には挙動が異なります

今回は、WordPressで条件分岐するときによく使われる組み込 ...

【WordPressユーザー名バレ対策】ユーザー名表示からPHP・preg_matchでリダイレクト(wp-json/wp/v2/usersなど)

今回は、WPログインなどにも使われる情報『ユーザー名』が表示され ...

【PHP etc.プログラム学習サイトコードコピペ】全角引用符・バッククオートが入ってて動かない件に注意

今回は、管理人が学習サイトなどでコードを調べていて、4回くらい遭 ...

WordPressの記事IDで判定して転送~PHP・headerとget_the_IDで対応、the_IDとの挙動の違いも

今回は、前回の『別ディレクトリにWP記事を出す』の続きで、新しい ...

【WP記事取得クエリ・プラグイン無し】お知らせなどに使える、ショートコードで特定カテゴリ記事を表示プログラム

今回は、最近何件か対応した、お客さん提供用の自社開発WPテーマに ...