トップページに最新記事を表示

トップページ（ホームページ）を固定ページで表示する方法

⇒トップページ（ホームページ）を固定ページで表示する方法【WordPress（ワードプレス）】

トップページに最新記事を表示する必要性

そもそも、トップページに最新記事を表示する必要性はあるのだろうか？

トップページに最新記事を表示する？表示しない？

これに関しては、サイトのコンテンツにもよるが、ブログ型サイトであれば、新着記事の表示は基本だと考える。

さらに、表示する場合、何件表示するのか？
これに関してはレイアウトとのバランスになるのではないか？
他にコンテンツが無ければ、多めに表示。

トップページに最新記事を表示する方法

⇒トップページに最新記事を表示する方法

サイドバーに最新記事を表示するのか、しないのか？

では、サイドバーの場合はどうだろうか？
子に関してもトップページと同じ考え方だ。

トップページに最新記事を表示する場合の問題点

固定ページで作成したトップページに最新記事を表示する場合、問題がある。
それは、1ページに表示する記事数を増やすと見にくいということ。

例えば、記事が100個あるとしよう。
100個のバックナンバーを閲覧する場合、トップページに100個も記事タイトルが並んでいても見にくいだけだ。

そこで、1ページに表示する記事数を例えば10個と設定する。
すると、100個の記事は10ページに分割され、最新記事を遡りたい場合、ページを遡るとどんどん過去の記事を閲覧できる。

デフォルトのトップページの場合、トップページの最新記事の一番下に「以前の記事」というリンクがあり、これをクリックすると、どんどん古い記事に遡れる。

しかし、固定ページでトップページを作成すると、このリンクと最新記事一覧ページを自分で設定する必要がある。

トップページから最新記事を遡る方法

手順は以下の3ステップになる。

固定ページで最新記事一覧ページを作成

「固定ページ」→「新規追加」
記事タイトルに「最新記事一覧」等と入力。
パーマリンクは「news」等に変更。
「更新」して終了

表示設定を編集

設定⇒表示設定。
固定ページをトップページ（ホームページ）に設定する場合、「ホームページの表示」は「固定ページ」にチェックを入れ、「ホームページ」には該当の固定ページを選択。

「投稿ページ」には、上記で設定した「最新記事一覧」を選択。
この場合、1ページに表示する最大投稿数は任意の数字を設定できる。
私の場合、10件で設定している。

「変更を保存」をクリックして終了。

トップページに最新記事一覧ページへのリンクを貼る

トップページの最新記事一覧の後に、最新記事一覧ページへのリンクを貼る。
この場合、
URLは上記で設定した最新記事一覧ページのURL。
【例】https://●●/news/
タイトルは、「最新記事一覧」「過去の新着記事一覧」など。
⇒固定ページで最新記事一覧ページを作成

この方法の問題点

上記で設定したトップページの「最新記事一覧」をクリックすると、1ページに最新記事が10件表示され、それ以前の記事は「以前の記事」をクリックする事で、どんどん遡れる。

しかし、問題が1つある。
それは、デフォルトでは、トップページに表示されている最新記事の下の「以前の記事」をクリックすると、それ以前の記事が表示される。

しかしながら、今まで説明した方法では、トップページの「最新記事一覧」をクリックすると、トップページに表示されている最新記事がダブって表示される。

但し、トップページに表示する件数は少なめにして、「最新記事一覧」ページに表示する件数は多めにすると、違和感はないかもしれない。

当サイトでは、トップページには最新記事を5件～7件、「最新記事一覧」ページには10件を設定している。
【「WordPressトップページを固定ページで表示」関連記事】
トップページ（ホームページ）を固定ページで表示する方法【WordPress（ワードプレス）】

トップページ（ホームページ）を固定ページで作成する理由

トップページ（ホームページ）を固定ページで作成メリット

トップページを固定ページで作成する理由は、面倒だから。

通常のデフォルトのトップページ（＝index.html）の場合、「メインインデックスのテンプレート」を編集する必要がある。

ところが、「メインインデックスのテンプレート」にたどり着くまで、私の場合、4ステップかかる。

通常のトップページの場合、編集するのに以下のステップが必要。

通常より1ステップ多いのは、テンプレートは賢威を使用しており、編集するテーマは子テーマがデフォルトの為、親テーマを選択する必要があるからだ。

その点、トップページを固定ページで作成すると、トップページを表示した状態で、「固定ページを編集」をクリックするだけで、トップページ（ホームページ）の編集が出来る。

便利この上ない。

トップページ（ホームページ）を固定ページで作成するデメリット

但し、トップページ（ホームページ）に表示したい項目は自分で設定する必要がある。

固定ページをトップページ（ホームページ）にする手順

固定ページをトップページ（ホームページ）にする手順は以下の通り。

固定ページを作成

トップページ（ホームページ）にする固定ページにどのような項目を入れるかは、サイトの内容による。
私の場合、以下の項目を入れることが多い。

賢威テンプレートの場合、固定ページのタイトルはh1なので、項目はh2で設定している。
各項目の内容を細かく設定すると、h3、h4となる。

サイトの説明

「当サイトはどういったテーマを扱っているのか」を説明することは大事だ。
トップページでは簡単な説明にして、自分のプロフィールなどを細かく書いたページへのリンクを張るのも良い。

⇒「アフィリエイト脱初心者宣言」とは？

トップページに最新記事を表示する方法

トップページ（ホームページ）に最新記事を何件か掲載するには以下のコードを貼り付ける。

コード

実際には以下のコードを[]で囲んで挿入。

newpost rows=7 show_date=”none”? show_cat=”false” title_length=”40″ excerpt_length=”50″

値の説明

●rows=7
最新記事を「7」件表示。
数字を変えると表示件数を変更できる。
●title_length=”40″
タイトルの文字を40文字まで表示。
数字を変えると表示文字数を変更できる。
●excerpt_length=”50″
ようやくの文字数を50文字まで表示。
数字を変えると表示文字数を変更できる。

人気記事ランキング

当サイトの人気記事ランキングは、①サイドバー②トップページ③固定ページに掲載している。

サイドバー

サイドバーの人気ランキングは、「WordPress Popular Posts」というプラグインを使用。

トップページ

以下はトップページ（ホームページ）に掲載の人気ランキング

⇒トップページ（ホームページ）
尚、人気ランキングページ（固定ページ）は⇒人気記事ランキング

固定ページに人気ランキングを表示する方法

②③も作成方法は同じ⇒人気記事をプラグインなしで固定ページに表示する方法【WordPress】

過去の新着記事一覧

トップページ（ホームページ）に過去の新着記事一覧ページへのリンクを設定する方法は別記事をご参照ください。

「ホームページの表示」を「固定ページ」に変更

設定⇒表示設定⇒ホームページの表示⇒「固定ページ」にチェック⇒変更を保存

【「WordPressトップページを固定ページで表示」関連記事】
固定ページに最新記事を表示させる方法【WordPress（ワードプレス）】

「人気記事ランキング」を表示する理由

「人気記事ランキング」を表示する理由は、サイトの回遊率を上げる為と言うのが通説だ。

「関連記事」も同じ。

プラグインを使う方法

固定ページに「人気記事ランキング」を表示する方法をネットで検索すると出てくるのがウィジェットを固定ページに表示する方法だ。

そしてこれを実現する為にはプラグインを使う必要がある。
以下のプラグインがあった。

ウィジェットを固定ページに表示するプラグイン

●Page Builder by SiteOrigin
●Display Posts Shortcode
●Custom Content Shortcode
●Widgetize Pages Light
●Widgets On Pages
●Widget Shortcode
●Elementor Page Builder

いくつかインストールしてみたが、設定がややこしい。
「WordPress 5.3.2から利用可能」というものもある。
※「Widgets On Pages」はプラグインが見つからなかった。

その中で操作が簡単そうだったのが、「Widget Shortcode」。

「Widget Shortcode」

以下のコードをビジュアルエディタに貼り付けるというのだが、何故か、人気記事ランキングが表示しない。

<ul class=”wpp-list”>
<li style=”list-style-type: none;”>
<ul class=”wpp-list”>
<li>{thumb} {title} <span class=”wpp-meta post-stats”>{stats}</span></li>
</ul>
</li>
</ul>

そこで、プラグインを使わないで「人気記事ランキング」を固定ページ（トップページ）に表示する方法を探すことにした。

プラグインを使わない方法

プラグインを使わないで「人気記事ランキング」を固定ページに表示する方法は簡単だ。

以下のコードをテキスタエディタに貼り付けるだけ。
※最初と最後の［］は半角に変えて下さい。
値を変えるだけで細かい設定もできる。

コード

［wpp range=”weekly” thumbnail_width=”75″ thumbnail_height=”75″ order_by=”visitors” limit=”5″ post_type=”post” stats_views=”0″ title_length=”40″ excerpt_length=”45″ stats_comments=”0″ wpp_start=’

‘ wpp_end=”

” post_html=’

• {thumb}

  {text_title}
  {summary}

‘］

コードの解説

●wpp range=”weekly”：ランキングの計測期間
“weekly”＝1週間、”monthly”＝1ヶ月、”all”＝全期間
※但し、「90日（90days）」等日数では設定できない。

●thumbnail_width=”75” thumbnail_height=”75″：サムネイルの画像サイズ
値を変えることでサムネイルの画像サイズを変更できる。
“75” を”60″ や”100″ といった具合。
幅（width）と高さ（height)は同じ値を設定するのが無難だ。

●limit=”5″：表示するランキングの数

●title_length=”40″：タイトルの文字数

●excerpt_length=”45″：説明文の文字数

CSS

上記は人気ランキングらしく、順位を数字で表示する為のコードだ。
見栄えを良くする為の以下のCSSを編集ページの下部にある「この投稿だけの個別css/JS記述欄」に以下のコードを貼る。
<style>
.wpp-list2{
margin: 0!important;
counter-reset: no;
}
.wpp-list2 li{
line-height:1.5em;
margin:0;
padding:0;
}
.wpp-list2 li:before{
content: counter(no);
counter-increment: no;
color: #fff; /*文字色*/
background-color: #84662A; /*背景色*/
text-align: center;
opacity: .999;
float: left;
line-height: 30px;
width: 30px;
height: 30px;
border-radius: 2px;
-moz-border-radius: 2px;
margin-right: -25px;
}
</style>

実際の表示

尚、上記のコードを実際に表示すると以下になる。
※今回のテーマは「固定ページ」に「人気記事ランキング」を表示することだが、投稿ページの任意の位置にも表示可能だ。

サムネイルが表示しない時は？

サムネイルが表示しない時は、「WordPress Popular Posts」の「ツール」画面で「Lazy Load」が「はい」になっていのが原因であることが大半。
「いいえ」に変更して「適用」をクリックすると、大抵は表示する。