WORDPRESS KONETA ワードプレスの宝物

CSSを使って文字数制限を行いたい。

システムで文字数を制限するより手軽に対応できる方法です。
ここでは2つの方法をご紹介。
前提の条件として、

①静的なHTMLでの文字数制限(つまりはCSSでの制限)
②wordpressを使用している状態で、システム側での文字数制限

上記２点で進めてまいります。

CSSを使用した文字数制限

こちらは２種類ありまして、
・１行での文字数制限
・複数行での文字数制限
両方ともCSSでの実装となります。

CSSでの1行のみの文字数制限

.txt-one {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上記のみです。

CSSで複数行の文字数制限。

.txt-two {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 任意の行数を指定 */
}

上記で可能です。

※※※注意点！！※※※

実はこのCSSでの文字数制限。
今の主流で問題ないのですが、今のWEBサイトの主流がレスポンシブだからこそ気を付けなければいけません。
例えば下記を実行してみましょう。

適応するHTML

<ul class="mozisu01">
	<li>
		あああああああああああああああ
	</li>
	<li>
		いいいいいいいいいいいいいいいいいい
	</li>
	<li>
		ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう
	</li>
</ul>

次に文字数制限をかけるCSS

.mozisu01 {
	display: block;
	box-sizing: border-box;
	padding: 20px;
	background: #EFEFEF;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
}
.mozisu01 li {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 5px 0;
}

こちらで設定すれば表示のされ方は問題なし。

ただ、下記のように<li>の中にタグが入ると話は別。

<ul class="mozisu01">
	<li>
		<h3>タイトル</h3>
		<p>あああああああああああああああ</p>
	</li>
	<li>
		<h3>タイトル</h3>
		<p>いいいいいいいいいいいいいいいいいい</p></li>
	<li>
		<h3>タイトル</h3>
		<p>ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p>
	</li>
</ul>

text-overflow: ellipsisは親タグに設定されているのに子要素には適応されないのです。

今回は簡単なコードですのですぐ気づくのですが、これがページ全体のコーディングの中では意外と見落とします。
なぜなら現在のコーディングの主流は「親からのネストを主体のコーディング」だからです。
SASSなどが主体の現在では意外とハマる方も多いので、親に適応すれば子も引き継ぐ、という固定観念はすこし疑うべきかとも思います。

では次はwordpressのPHPでの文字数制限ですね。

wordpressでPHPを使用した文字数制限

こちらは非常に簡単です。
一つ気を付けるとしたら「HTMLを取り除いて文字数制限をかけるべき」というくらいでしょう。
あまりサーバサイドに負荷をかけたくは無いので、あくまでCSSでの文字数制限をお勧めしますが、知識として持っておくとご自分の引き出しが増えると思います。

とてもシンプルなPHPでの文字数制限なら下記で十分

<!-- 本文の抜粋（文字数制限なし） -->
<?php the_excerpt(); ?>

<!-- 30文字制限 -->
<?php echo wp_trim_words( get_the_content(), 30, '…' ); ?>

が！これだけでは使い勝手が、、となりますよね！
そうです、特定の文字数を超えれば！という分岐ですね。
というわけで下記

特定の文字数で制限をかける(ここでは30文字)

if(mb_strlen($post->post_title, 'UTF-8')>30){
	$title= mb_substr($post->post_title, 0, 30, 'UTF-8');
	echo $title.'……';
}else{
	echo $post->post_title;
}

これで３０文字を超えれば３点リーダー表示です。

さらに先ほど言った「HTMLタグを除外した文字数制限」です！
それは下記

if(mb_strlen($post->post_content, 'UTF-8')>100){
	$content= mb_substr(strip_tags($post->post_content), 0, 100, 'UTF-8');
	echo $content.'……';
}else{
	echo strip_tags($post->post_content);
}

mb_substr(strip_tags($post->post_content), 0, 100, ‘UTF-8’)こちらのPHPを使用してよけいなHTMLタグを削除しております。
個人的にはなれればPHPのほうが楽なのですが、何分最近はwordpressに多様な機能・プラグインが必要な時代。なるべく不可はへらしたいですのでCSSが良いですかね。

今回のまとめ

いわゆる「ググってみる」。
とても大事とは思うのです。そしてそれを利用していくことは今のWEB制作にとってマストと思います。

ただ、その後でも良いので使用したコードの動きの理解。
余力があれば使用したコードを、別の場所に試してみるなどして、そのコード自体の動きをしっかり理解すると、ググってヒットしなかったものも応用することによって突破出来たりもします。

大事なのはやってきたもの・作ってきたものを一度しっかりと理解することとい思います。