アストラ（Astra）テーマは、無料版でもブログページのレイアウトを指定するカスタムオプションを提供します。また、ブログ/アーカイブページに表示するポストメタアイテムを詳細に指定できます。サマリーを表示すると、デフォルトの長さに設定され、サマリーの長さを変更するオプションは提供されません。
この記事では、Astraテーマのブログ/アーカイブページに表示されるサマリーの長さを調整する方法について説明します。
WordPress アストラテーマサマリーの長さを調整する
アストラテーマを使用する場合 外観 » カスタム » 投稿の種類 » ブログ/投稿でブログ（最新の記事ページ）のレイアウトを設定できます。
無料版では、4つのレイアウトから選択できます。
アストラプロでは、より多くのレイアウトと機能を提供します。
ポスト要素から 代表画像、タイトル、ポストメタ、サマリー、カテゴリ、タグ、もっと読む などの要素を表示または非表示にできます。
要約文を表示すると WordPressのデフォルトのサマリーの長さ（おそらく55語）が表示され、長さを変更するオプションは無料版では提供されていません。
サムネイル（代表画像）の場合、いくつかのオプションが提供されていますが、サムネイルの割合などを変更しても（無料版でテストしているのかもしれませんが）、サムネイルの割合が正しく変わらないようです。
そして '続きを読む'要素を表示すると、[もっと読む"]や[投稿を読む"]のようにぎこちなく表示されます。 （設置型 WordPressでは「もっと読む」（Read More）が、 加入型 WordPressでは「投稿を読む」（Read Post）が表示されますね。インストール型、加入型の問題なのか、カスタマイズで設定が違っているのかわかりません。）
[続きを読む"]や[投稿を読む"]のように表示されるのは、テーマファイルの翻訳が間違っているためです。 Loco Translateプラグインをインストールして、テーマやプラグインUIの翻訳を変更できます。
要約文の長さと末尾の記号を変更する方法を見てみましょう。
PHPコードを使用して変更する
子テーマの関数ファイルに次のコードを追加して、サマリーの長さとサマリーの末尾の記号を変更できます。
add_filter(
'excerpt_length',
function ( $length ) {
// Number of words to display in the excerpt.
return 20;
},
500
);
function wpdocs_excerpt_more( $more ) {
return ' ...';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );FTPにアクセスしてアストラテーマの チャイルドテーマの関数ファイル（functions.php）の下部に上記のコードを追加することでテストできます。
場合によってはうまく動作しないことがあります。
CSSを使用して調整する
簡単に CSSを使って調整することも可能です。たとえば、要約文の長さを3行に制限したい場合は、次のCSSコードを 外観 » カスタム » 追加 CSSに追加することができます。
/* 3줄 말줄임(권장) */
.ast-excerpt-container p,
.line-clamp-3 { /* 재사용용 헬퍼 클래스 */
display: -webkit-box; /* why: 다중행 클램프 엔진 */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3; /* 신형 사양 브라우저 */
overflow: hidden;
text-overflow: ellipsis; /* 단일행용이지만 무해 */
line-height: 1.6; /* 가독성 */
max-height: calc(1.6em * 3); /* 클램프 비지원시 안전선 */
margin: 0; /* 불필요한 여백 제거 */
overflow-wrap: anywhere; /* 긴 URL/단어 대응 */
}
/* (선택) 클램프 미지원 브라우저 시 끝부분 페이드 처리 */
@supports not (-webkit-line-clamp: 3) {
.ast-excerpt-container p,
.line-clamp-3 {
/* 완전한 … 대체는 불가, 시각적 페이드로 대체 */
position: relative;
mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
}2行で表示したい場合は、次のコードでテストできます。
/* 2줄 말줄임 */
.ast-excerpt-container p,
.line-clamp-3 { /* 필요하면 클래스명을 line-clamp-2로 변경해도 됨 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
max-height: calc(1.6em * 2);
margin: 0;
overflow-wrap: anywhere;
}
@supports not (-webkit-line-clamp: 2) {
.ast-excerpt-container p,
.line-clamp-3 {
position: relative;
/* 2줄 기준 페이드: 필요에 따라 45~55%로 미세 조정 */
mask-image: linear-gradient(to bottom, #000 50%, transparent);
}
}また、 プロフィール 部分をボタンで表示したい場合は、次のコードを利用できます。
/* Read More 컨테이너 스타일 */
.ast-read-more-container {
margin: 2rem 0;
text-align: left;
}
/* Read More 버튼 스타일 */
.ast-read-more-container a {
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
color: #333;
background-color: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
letter-spacing: 0.3px;
}
/* 호버 효과 */
.ast-read-more-container a:hover {
color: #000;
background-color: #f9f9f9;
border-color: #333;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* 클릭 효과 */
.ast-read-more-container a:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 스크린 리더 텍스트 숨김 */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}これにより、下図のようにサマリーの長さが調整され、[もっと見る]リンクもボタンスタイルで表示されます。
無料版をお使いの場合、カスタムできる部分がプロ版に比べて制限的であるしかありません。 CSSとPHPコードを使用して、ある程度必要に応じてサイトを飾ることができます。
最後に、
ブログを運営する場合は、アストラのテーマを1つのオプションとして考えることができます。アストラドもスピードが速いテーマで評価されており、より速いスピードが欲しいなら GeneratePress テーマを選択することができます。
アストラプロ特にショッピングモールを作るときによく使われます。エレメントと組み合わせて使用すると、複雑なサイトを簡単に作成できます。ただし、エレメントはページデザインの作業を容易にし、時間を短縮しますが、サイトの速度に影響を与える可能性があります。上級ユーザーの場合 GeneratePress + GenerateBlocksなどの組み合わせを使用すると、高速で複雑なサイトを作成できます（参照).
コメントを残す