WordPressのトップページを見た時に記事の一部を抜粋表示させ続きを表示させる方法をご紹介します。
さらに抜粋される文字数も調節する設定もしたいと思います。
この設定をしようと思ったのは実際に私がニュースやブログを見る時にユーザー側の目線で見た時にないよりはあった方がいいと思うからです。
一覧画面で記事の抜粋が見れると自分が探している記事が見つけやすいしユーザーにとって親切な作りになりますよね。
トップページからの記事一覧で記事の抜粋がないと記事内容を判断するのはアイキャッチ画像と記事タイトルだけですから。
今回全てプラグインなしで実際に設定してみました。
▼目次
投稿画面から抜粋設定をする方法
moreタグを使い抜粋表示させる
一番簡単ですぐ実行できる方法がmoreタグを使用する方法です。
WordPress管理画面の投稿の編集のテキストエディタで「more」という項目があるので記事中に入れるだけです。
試しにだいたい50～100文字位かの所に入れてみました。
moreタグを入れるとPCでこのように表示されました。
使用しているテーマによって違う表示になかもですが約35文字の一行表示です。スマホではなぜだか抜粋表示になっていません。
theme / STINGER5
このmoreタグですが記事ごとに全て編集しなきゃいけないのかなと思っていましたが、一つの記事にmoreタグを入れるだけでブログ内の全記事に反映されました。
ただ抜粋文字数が希望より少なかった点とスマホでは表示されなかった所が残念ですが。
表示オプションを使い抜粋表示させる
同じく投稿の編集にある「表示オプション」にも抜粋機能があるので使ってみました。
上の「表示オプション」をクリックするとプルダウンされるので「抜粋」にチェックします。
すると編集画面下の方に「抜粋」という項目が出来ているので入力枠に表示させたい抜粋数だけ記事中からコピペします。
こんな表示になりました。
文字数は増えましたがこれの後ろににさらに「続きを読む→」「…続きを読む」のリンクを表示させたいのでカスタムする必要があるようです。
あとスマホだとこれも抜粋表示されないという点と記事ごとに設定しなきゃいけないというのが気になる点でしょうか。
STINGER5で抜粋をカスタムする方法
テーマ環境はSTINGER5です。
抜粋系のカスタムを実際当ブログでもやってみましたのでご紹介します。
「…」の部分を「…続きを読む」に変更する
functions.phpを変更します。
「…続きを読む」は「続きはこちら」「続きをクリック」でも何でもよいです。
// 文末文字を変更する
function custom_excerpt_more($more) {
return ' ...続きを読む ';
抜粋の文字数の設定
functions.phpで抜粋の文字数を設定します。
この記述を探し数字の部分をお好みの記事数に変更して下さい。
// 抜粋の長さを変更する
function custom_excerpt_length( $length ) {
return 70;
サイドバーの新着記事の抜粋記事数を変更する
functions.phpで抜粋の文字数を変更すると、サイドバーの新着記事まで抜粋記事数が連動になります。
このような感じに
サイドバー新着記事の抜粋記事数を変更したい場合はnewpost.phpの
<?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> //を↓のように変更します。 <p><?php echo mb_substr(get_the_excerpt(), 0, 25); ?>...</p>
数字の「25」と「…」はそれぞれサイドバーの抜粋の文字数と抜粋の「続きを読む」の部分なのでお好みで変更して下さい。
スマホ表示でも抜粋記事を表示させる
STINGER5はデフォルトだとスマホで抜粋記事が表示されませんし、上で紹介したカスタマイズだけではPCのみでスマホでは表示されません。
記事一覧の抜粋記事を表示させるためにはitiran.phpを変更します。
<div class="smanone"> <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> </div> //上の記述部分の下の囲っているタグを消す <div class="smanone"> </div>
この部分がスマホ表示をさせないためのタグなのでこの囲んでいるタグを消せばスマホでも抜粋記事が表示されます。
ちなみにitiran.phpを変更するとこのように記事一覧の抜粋が表示されますが
・kanren.php…関連記事のスマホでの抜粋
・newpost.php…新着記事のスマホでの抜粋
を各場所へもスマホ表示させたい場合はそれぞれ同じ編集を加えます。
コメント