sixteen-excerpt5

TwentySixteenのトップページを抜粋一覧表示にカスタマイズ

2016/02/09[公開]

 2016年のWordPressデフォルトテーマ、twenty sixteenのトップページとアーカイブページを抜粋表示に変更する方法です。「最近の投稿記事」が全文ずらずらと表示されているデフォルト状態は、個人的に好みではないのです。ここのサイトはtwentyfifteenですが、twentysixteenにしてみようか、どうしようか現在検討中ですが、これで移行する気持ちが一歩前進です。変更方法は、twentyfifteenでのやり方(過去記事)の応用です。

子テーマに3ファイルコピー

 子テーマディレクトリーに、twentysixteenの親ディレクトリーから、index.phparchive.phpcontent.php の3ファイルをコピーします。注意点は、content.phpファイルだけ、親テーマディレクトリーの下層にあるtemplate-partsディレクトリーの中にある点です。

 子テーマとは何?という方はコチラの記事を参考にしてください。WordPress子テーマの作り方【WP4.2対応】

content.phpをリネーム

 子テーマにコピーしたcontent.phpを、content-○○○.phpにファイル名を変更します。ここでは、content-excerpt.php(例)として説明を続けます。index.phpとarchive.phpはそのまま子テーマにコピーします。

この3ファイルを子テーマに持ってくる
この3ファイルを子テーマに持ってくる

content-excerpt.phpの編集

 子テーマに持ってきた、content-excerpt.phpを編集します。テンプレートタグ the_excerpt()を利用して、抜粋表示に変更します。

 26行目から39行目までをゴッソリ削除して、the_excerpt(); の一行に変更します。

 

index.phpとarchive.phpの編集

 トップページ用のindex.phpと、カテゴリー一覧標示のarchive.phpのファイルを編集します。編集するのはそれぞれ一行だけ、親テーマのtemplate-parts/content.phpの指定を子テーマのcontent-excerpt.phpに変更します。

  • index.phpは39行目
  • archive.phpは43行目

表示確認

 トップページとカテゴリー別一覧ページを開いてみて、本文が抜粋表示になっていれば成功です。

抜粋表示されました。
抜粋表示されました。

おまけ:Borderを付ける

 twentysixteenは、投稿記事どうしの境目がわかりずらいかなと思います。Borderプロパティで簡単に線を入れて区切りを入れてみました。ちょうどいい要素がなかったので、content-excerpt.phpに任意の要素を作って、CSSのborder-bottomで一本線を入れてみました。

content-excerpt.phpを編集

 11行目に適当なclass名を付けて、一行追加します。(例)としてclass名を”border-sample16″にしています。

style.cssに追記

 子テーマのstyle.cssにボーダーラインの記述を追記します。線の太さpxとカラーコードは適当に設定しています。

表示確認

sixteen-excerpt3
投稿記事の区切りがわかりやすくなった気がする

こちらの記事もどうぞ

コメントを残す

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