人気のテーマ「SANGO」テーマ。
有名ブロガー「さるわか」さんがリリースしているテーマです。
https://saruwakakun.design/
機能も多く、使いやすいテーマではあるのですが「あれ？こんなことできないのかな・・」と思う点もあり、カスタマイズすることも多いのでシェアします。
SANGOテーマの記事一覧に「概要」（ディスクリプション）を表示させたい
以下のキャプチャはSANGOテーマの記事一覧なのですが、アイキャッチと記事タイトルが表示されています。
他のブログのテーマが記事の概要（ディスクリプション）も一緒に表示されることが多いのですがSANGOテーマはこれがありません。
記事の概要が入るのがいいか悪いかは別として、掲載したい！という需要はあります。
ブログの機能でぽちっとすれば表示されるものと思っていましたが、そうでもなくカスタマイズが必要でした。
SANGOテーマのサポートサイトにも質問が上がっていまして、実際ここに書かれている手順やこちらのページでリンクされていたブログの方法でもうまくできなかったのでシェアします。
サンゴテーマのサポートサイトで「記事一覧に本文の抜粋を表示させる方法」
https://saruwakakun.com/sango/comments?id=4352
もしかしたらテーマのバージョンアップなどで対応されるかもしれませんが、
まず、SANGOテーマは子テーマを使っていることを前提として、また、元のデータもコピーしてどこかテキストに保存しておいてください。
失敗するとワードプレス自体が真っ白になることもあるのでね。
functions.phpにコードを追加する
「functions.php」に以下のコードを貼り付けて「ファイルを更新」とします。（function.phpはダッシュボードの外観→テーマファイルエディター→functions.php（SANGO Childを使っていることを前提として））
function sng_normal_card()
{
$url = featured_image_src('thumb-520');
$id = get_the_ID();
$date = sng_get_single_date($id, "sng-link-time dfont");
?>
<div class="c_linkto_wrap">
<a class="c_linkto" href="<?php the_permalink()?>">
<span class="c_linkto_img_wrap">
<img src="<?php echo $url ?>" alt="<?php the_title();?>" <?php sng_lazy_attr(); ?> width="520" height="300" />
</span>
<div class="c_linkto_text">
<?php echo $date ?>
<h2><?php the_title();?></h2>
<!--▼追記 記事抜粋-->
<p class="item-text">
<?php echo mb_substr(get_the_excerpt(), 0, 55); ?>...
</p>
<!--▼追記 記事抜粋-->
</div>
</a>
<?php
// カテゴリーを出力
if (!is_archive()) {
output_catogry_link();
}
// newマーク
newmark();
?>
</div>
<?php
}スタイルシートにコードを追加する
見た目を整えるため、スタイルシートに以下のコードを追記します。
今回のスタイルシートは、表示させる本文抜粋を少し小さめの文字にしています。
この辺は絶対ではないので、適宜変更していただいてOKです。
例えば、文字の大きさもpxではなく、0.8emとかね。
スタイルシートの改編方法は２つ
1.テーマファイルの「style.css」に追記（ここではSANGOテーマの子テーマを使っていることを前提として、ダッシュボード→外観→テーマファイルエディター→style.cssです。上記のfunctions.phpと同じ場所）
2.ダッシュボード→外観→カスタマイズ→「追加CSS」
/* ブログカード内・記事抜粋 */
p.item-text {
font-size: 13px;
line-height: 1.5em;
}これは他のテーマでもそうなのですが、1番の方法でスタイルシートを追加すると、反映までにタイムラグがある場合があります。
ブラウザのクッキーのせいなのか、セキュリティプラグインのせいなのかは定かではありませんが、私の場合は急ぎのときは２で対応することが多いです。
お試しくださいませ～！
