Cocoon カスタムテンプレート 新着記事だけ全文表示

Cocoon

色んなブログ見てると全文表示のものもあって、うちも全文表示したいなーと思ったのですが、Cocoon の投稿一覧はブログカード方式固定で、そういう設定はないんですね…

なら自分で作っちゃおうということで、作成したカスタムテンプレートのご紹介です。

スポンサーリンク

前置き

フロントページにて新着投稿だけ全文表示にするカスタムテンプレートです。

1ページに表示する最大投稿数が5の場合、最新の投稿が全文表示された下に、4件の投稿がブログカードで表示されます。
2ページ目以降は、5件の投稿すべてがブログカードで表示されます。

動作確認 Ver

  • Cocoonバージョン: 2.2.2
  • Cocoon Childバージョン: 1.1.2

注意点

対象外

「ホームページの表示」設定で固定ページをホームページに設定されている場合、このカスタムテンプレートはご利用になれませんので、ご了承ください。

非表示パーツ

フロントページでの全文表示では、以下のものを表示する設定にされていても、表示されないためご注意ください。

  • ページ送りナビ
  • 関連記事
  • 関連記事下の広告
  • 関連記事下のウィジェット
  • コメントフォーム
  • コメントフォーム下ウィジェット

あくまでフロントページで非表示なるだけなので、個別投稿ページでは上記のものも表示されます。

フロントページタイプ

フロントページでの全文表示では、Cocoon 設定のフロントページタイプの設定に関わらず「一覧」表示になります。

カードタイプ

フロントページでの全文表示では、「縦型カード2列」のような複数列表示に未対応のため、レイアウトが著しくくずれてしまいます。
複数列表示にも対応した「Cocoon カスタムテンプレート 新着記事だけ全文表示2」も掲載しましたので、ご検討ください。

パンくずリスト配置

フロントページでの全文表示では、Cocoon 設定のパンくずリスト配置設定の メインカラムトップメインカラムボトムのみ対応しています。
上記以外の設定の場合、パンくずリストが表示されません。

あくまでフロントページで非対応なだけなので、個別投稿ページではいずれの設定でも対応しています。

インストール

テンプレートファイルダウンロード

以下の3つのファイルをダウンロードしてください。

ファイル構造

FTP ソフトなどで、Cocoon の子テーマフォルダの下に「tmp」というフォルダを作成し、ダウンロードしたファイルを下図のように置いてください。

  • <子テーマフォルダ>
    • page-list-index-full.php
    • tmp
      • content-in-home.php
      • breadcrumbs-forced.php

パーミッション設定

フォルダは「755」、php ファイルは「644」でパーミッションを設定してください。

Cocoon 内部ブログカード表示対策

本カスタムテンプレート使用時、内部ブログカードを使用した投稿をフロントページで表示すると、2件目以降の投稿がリスト化されないことがあるので、以下の記事を参考にその対策を併せて実施してください。

設定方法

固定ページ作成

  1. WordPress ダッシュボード「固定ページ」>「新規作成」をクリック
  2. タイトルに「list-index-full」を入力して「公開」をクリック

手順2. で公開後に、設定バーの「文書」>「パーマリンク」の「URL スラッグ」が「list-index-full」となっている(下図参照)ことを確認してください。

もし、違うものが表示される場合は、「URL スラッグ」に「list-index-full」と入力し、「更新」をクリックしてください。

ホームページの表示設定

  1. WordPress ダッシュボード「設定」>「表示設定」をクリック
  2. 「ホームページの表示」で「固定ページ」を選択後、
    「ホームページ」で「list-index-full」を選択して「変更を保存」をクリック

完成!

設定解除方法

ホームページの表示設定

  1. WordPress ダッシュボード「設定」>「表示設定」をクリック
  2. 「ホームページの表示」で「最新の投稿」を選択もしくは、
    「ホームページ」で別の固定ページを選択して「変更を保存」をクリック

最後に

テンプレートをご使用の際は、念のためバックアップを取るなど万が一に備えておくことをおすすめします。

テンプレートを作成した際の備忘録記事もありますので、もし作り方などが気になる方はこちらをご参照ください。

コメント