読書とプログラミングを中心とした覚書ブログ

読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。

記事一覧に表示する各記事の抜粋を綺麗に整形表示する

 公開日     更新日  2014/11/30

   

ground-409476-2

STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧について、STINGER v3からv5にバージョンアップする際に表示される形式が変更になりました。
本記事ではv5で変更された表示形式のメモと、加えて、STINGER v5を更に綺麗に表示させるための改善について今回やったことを、あわせて整理したいと思います。

STINGER v5における一覧記事の変更点

STINGER v3とv5の記事一覧の表示形式の違いについてですが、ざっくりと表面的な動作と内部の作りについて比較すると次のような変更点となります。

分類項目STINGER v3STINGER v5
表面的な動作表示する原稿記事の抜粋欄の内容
または
本文内容のうち先頭の100文字分
記事の抜粋欄の内容
または
本文内容のうち先頭の110文字分
境界の表現「続きを読む」ボタンを表示最後に[...](角括弧+三点リーダー)を表示 ※
内部の作り原稿取得に使っているWordPress(関数|変数)$post->post_contentthe_excerpt()
表示する文字数の変更呼び元で使っているmb_substr()の第3引数で指定した文字数にてカットadd_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
にて指定した文字数にてカット

※詳細はWordPressマニュアル(the excerpt)を参照。

このへんの変更点はSTINGER公式には明記されていなかったのですが、並べてみるとデザイン上、違いが出る変更がなされている箇所のようです。
影響が出る部分は、続きを読むボタンの廃止、表示文字数を拡張するカスタマイズ方法の変更、の2点。

一覧記事の表示仕様の変更点について個人的な見解

  • 続きを読むボタンの廃止
    見出しをクリックすることでも続きを読むボタン同様に記事ページに移動できるので、個人的にはボタンを設置しなくても良い気がしてます。
    ということで、この変更はインパクトなしと判断しております。
  • 表示文字数を拡張するカスタマイズ方法の変更
    こちらも影響なしと考えてますが、私はどちらかというと文字数指定ではなく、こちらの記事でSTINGER v3に対して改善した「続きを読む」タグまでの表示というカスタマイズをしていたので、同一箇所への変更が重なったために影響があります
    今回v5でも「続きを読む」タグまでの表示をやろうと思った場合、v3用の記事をそのまま適用することができなくなってしまったので、v5での実現方法を考える必要がありそうです。

 改善したいポイント

STINGER v5になってフォントサイズが小さくなったので記事本文が主張しなくなって個人的にはすっきりしたと思ってます。
ただしSTINGERそのままだとv3でもv5でも、WordPressの機能を活用して記事の出力結果を作成してるところから、どうしても以下の点が不満だったりします。

  1. 見出しの行末改行が無視される
    記事ページまで進めば見出しが適切に改行した内容が表示されますが、一覧ページの抜粋側はこの改行がなくなるので非常に読みづらくなります。
  2. 規定文字数になると文章の途中で終わってしまう
    上限に達すると文章の途中で終わってしまうので、一覧ページが読みにくいものになってしまいます。

こちらの記事では2番目のみ改善してましたが、本記事では上記2件をすべて改善する方法をまとめたいと思います。

変更内容

以下のファイルに対する修正をします。

  • itiran.php
    the_excerpt()をget_the_content()に変更。これにより「続きを読む」タグまでの原稿を取得してます。
    さらに、h1~h5タグについて行末に改行を追加。最後に不要なタグ&ショートコードを削除
    詳細は後続のソース抜粋を参照ください。

ソース修正内容の抜粋

itiran.phpファイルに対する変更前後で、★箇所に対比して表示してます。

 変更後の感触

本サイトは主に検索エンジンからの来訪者が中心なので、一覧ページはあまり参照されてないと思います。
そのため、一概に利便性が向上したかどうかと言われれば、あまり主張しない変更なんだと思います(笑)

とは言え、個人的には一覧ページに適切な改行が追加され見やすくなった、とても好印象!
無駄に一覧ページを見に行って出力を確認しだすようになったので、結果として表示結果のテストが捗った副作用があります。

なおWordPress標準機能で、こういうことができていなかったのか、というところにビックリしてます。

変更暦

  • 2014/11/14:初版
  • 2014/11/30:先頭の改行が余計だったので除去する処理を1行追加

レスポンシブ広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

  関連記事

記事一覧に表示する各記事の概要を「続きを読む」タグまでにする

Information この記事はSTINGER v3用のカスタマイズ方法です。 …

パンくずリストをもっとカッコよくする

  STINGERテンプレートは、WordPressサイトのテーマとし …

広告フロートの動きがおかしい問題の回避方法

WordPressテーマSTINGERの サイドバーにある「スクロール広告用」は …

WordPressテーマをSTINGER5にバージョンアップ

STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …

「続きを読む」ボタンのデザインをカスタマイズ

WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。 巷で …

記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる

WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …

CSSファイル数を減らしてページ表示時間を最適化

STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …

記事の幅を広げるカスタマイズ(V3用)

STINGERをインストールした状態だと、記事の幅が550pxになっています。 …

スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)

  WordPressのSTINGERテンプレートに対して、記事タイト …

記事の幅を広げるカスタマイズ(V5用)

以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …

記事一覧に表示する各記事の抜粋を綺麗に整形表示する