WordPressテーマSANGOの質問

関連記事 タイトルの文字数制限

アバター
米っ子

こんばんわ。
関連記事の表示について質問です。

長めのタイトルが多いため、タイプCの横長のデザインを選ぶと、
見た目が妙なことになってしまいます。
タイトルの文字数を制限して表示する方法を教えていただけませんか?

entry-functions.phpに// 関連記事の出力という部分があるのですが、
ここに何か書き足すのでしょうか?

よろしくお願いします。

関連記事ショートコードのサムネイル画像を長方形で表示する方法
コメントへの回答
サルワカくん
サルワカくん
2019/08/20

表示するタイトルの文字数の制限はCSSで行うのが良いと思います。
というのもPHP側で「○○文字以上は省略」とすると、デバイスのサイズ次第で行の途中、中途半端な位置で切れてしまう可能性があるからです。

CSSで対応するためにはこちらの記事などが参考になります。
たとえば以下のCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付けると、2行以上のタイトルが省略されるようになります。

.longc_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 3.2em;
}

よろしくおねがいします。

アバター
ゆう
2020/08/20

一覧で記事が表示されているときに、記事タイトルを省略してコンパクトに表示させたいです。2019/08/20に質問されている米っ子さんの質問に近いと思い、回答を見てコードをコピペしてみましたが、一切変化がありませんでした(追加CSSを一度すべて消したり、プラグインを無効化したうえでもダメでした)。なにか原因や対処法は見当つきますでしょうか。よろしくお願いいたします。

サルワカくん
サルワカくん
2020/08/23

記事一覧というのはトップページやカテゴリーページなどに並ぶカード一覧のことでしょうか?
(上記で回答しているのはあくまでも関連記事のカードについてのみの話になります。)

たとえばトップページやカテゴリーページのカード型の記事一覧で2行以上を省略するには、以下のようなCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS] に貼り付ければOKです。

.cardtype h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

よろしくお願いします。

アバター
ゆう
2020/08/23

言葉足らずで申し訳ございません。
上記のコードで解決しました。
ありがとうございます。