GeneratePress テーマのサマリーの長さを変更する

1

WordPress GeneratePress テーマでは、無料版の場合は、ブログ設定にサマリーを表示するかどうかオプションのみがあり、サマリーの長さを設定するオプションは提供されません。 GP Premiumを使用すると、サマリーの長さを変更できます。この記事では GeneratePress テーマで要約文の最大行数をCSSに調整する方法を見てみましょう。

GeneratePress テーマのサマリーの長さを変更する

GeneratePress テーマを使用する場合、 外観 » カスタム » レイアウト » ブログでブログ関連のオプションを設定できますが、無料版では コンテンツタイプのみ表示され、ここから 抜粋（要約文）または 完全なコンテンツを選択することができます。

GeneratePress 無料版ブログオプション

GeneratePress 有料版を使用している場合は、さまざまなブログ関連のオプションがあります。

GeneratePress 有料版ブログオプション

Excerpt word countにブログページの要約文に表示する単語数を入力でき、 Read more label에 プロフィール ボタンに表示するテキストフレーズ（たとえば、さらに読む）を指定できます。

無料版でサマリーの長さを調整したい場合 GeneratePress フォーラムの投稿に記載されているコードを試してみてください。そのコードが実際に動作するかどうかをテストしませんでした。

このブログにはジェネレートプレス有料版 GPプレミアムこれを使用して、サマリーの長さを上の図のように設定した状態です。しかし、ブログページやアーカイブページ（カテゴリページ、タグページなど）で要約文がぎこちなくなり、一部の文では要約文が長くなって画像より長くなって一貫性が落ちるようです。

GeneratePress テーマサマリーの長さを調整する前に

無料版でも有料版でも CSSを使用して要約文の行数を制御できます。

GeneratePress テーマサマリーの長さを調整した後

私はこのブログでPC解像度に対して要約文の長さが5行になるようにしました。 5行を超えると、上の図のように5行で表示され、最後に末尾記号（...）が表示されます。

GeneratePress テーマの要約の長さを最大5行に制限するために、このブログには次のCSSコードが使用されています。

/* PC 전용(≥ 769px): GeneratePress 요약글 5줄 말줄임 */
@media (min-width: 769px) {
    .entry-summary p:not(.read-more-container),
    .line-clamp-5 { /* 재사용 헬퍼 */
        display: -webkit-box;            /* why: 멀티라인 클램프 엔진 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;                    /* 신형 사양 */
        overflow: hidden;
        text-overflow: ellipsis;        /* why: 일부 브라우저 시 안정감 */
        line-height: 1.75;                /* why: 가독성 향상 */
        max-height: calc(1.75em * 5);    /* why: 클램프 미지원 대비 */
        margin: 0;
        overflow-wrap: anywhere;
    }

    /* (선택) 클램프 미지원 브라우저: 끝부분 페이드 */
    @supports not (-webkit-line-clamp: 5) {
        .entry-summary p:not(.read-more-container),
        .line-clamp-5 {
            position: relative;            /* why: 페이드 마스크 적용 */
            mask-image: linear-gradient(to bottom, #000 60%, transparent);
        }
    }

    /* (선택) PC에서만 "더 읽기" 상단 간격 조정 */
    .read-more-container {
        margin-top: 1.2rem;
    }
}

デスクトップ解像度でのみ適用され、モバイルデバイスには適用されないようにCSSメディアクエリを追加しました。

状況に応じて、上記のコードを適切に適用して4行または3行などに調整できます。

GeneratePress 無料版でブログのレイアウトを変更する

GPテーマの無料版では、ブログレイアウトをカスタマイズするオプションは提供されておらず、デフォルトのレイアウトを使用する必要があります。

無料版を使用している場合は、CSSを使用してある程度カスタマイジングを試すことができます。以下は WordPressドットコム（WordPress.com）で GeneratePress 無料テーマをインストールし、CSSでブログページとアーカイブページのレイアウトをカスタマイズした場合を示します。

GeneratePress 無料版でブログのレイアウトを変更

CSSを使用してサマリーの長さを3行に制限しています。

WordPressドットコムで加入して使用する加入型 WordPressはプランに応じて制約がありますが、最近の個人プランやプレミアムプランでもプラグインのインストールが許可され、個人プランでもCSS/JavaScript/PHPを使ってある程度カスタムが可能になり、プラグインを使って AdSense 広告も投稿できます。

最後に、

以上で GeneratePress テーマでは、ブログの要約の長さをCSSを使用して制御する方法について説明しました。状況に応じて適切な長さに制限したい場合はそれを適用できます。

GeneratePress テーマは韓国で特に 収益型ブログに多く利用されています。 GPテーマは、現存するテーマの中で最も速いスピードを出すと評価されるテーマの一つです。 😄

ブログを運営している場合は無料版をインストールして、特別な設定をせずにそのまま使用することも可能です。実際にそのように運営されているブログには時々接することになります。レイアウトを変更したい場合は、有料版を使用するとより簡単に ブログ設定可能です。有料版購入が負担となる場合 例ブログ同様に、CSS/JavaScript/PHPを使用して直接カスタマイズすることも可能です。

参照

1のコメント

コメントを残す

  1. CSSコードを追加するので、Read moreボタンがすべて消えて下の関数コードを追加で適用するので、ボタンはできましたが、要約文の最後に…この奇妙に見えるブラウザがありますね。

    // Read more ボタン

    add_filter( 'get_the_excerpt', function( $excerpt ) {

    //既存のボタンがある場合
    if（preg_match（ '/ ]*class="[^"]*read-more[^"]*"[^>]*>.*?<\/a>/', $excerpt, $matches ) ) {

    //既存のボタンを抽出
    $button = $matches[0];

    // クラス名を read-more 一つに統一
    $button = preg_replace(
    '/class="[^"]*read-more[^"]*"/',
    'class="read-more"',
    $button
    );

    //内部ボタンを取り外す
    $excerpt = preg_replace(
    '/ ]*class="[^"]*read-more[^"]*"[^>]*>.*?<\/a>/',
    ”、
    $excerpt
    );

    //ボタンを段落の後ろに移動
    $excerpt .= ' '。 $button 。 ' ';

    場合} else {
    //ボタンがない場合は、新しく作成
    $read_more_button = sprintf(
    ' %s ',
    get_permalink(),
    __( 'Read more', 'generatepress')
    );

    $excerpt .= '...' 。 $read_more_button;
    }

    return $excerpt;
    }）;

    返信