【WordPress】オリジナルのトップ画面を作るには【初心者必見】 – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

【WordPress】オリジナルのトップ画面を作るには【初心者必見】

公開日 最終更新日

オリジナルのトップ画面を作るには

サイトのトップ画面は自由にカスタマイズできないくま~?
トップ画面の編集は少し難しいかもです~。でも、特定の固定ページをトップ画面に表示させることはできるです~。

 

一般的なWordPressサイトのトップ画面は、新着記事が並べられています。

 

トップ画面_新着記事

(※お使いのテーマによって仕様が異なります。)

 

新着記事の他にも「広告」「お知らせ」を配置できたら嬉しいですよね。

しかし、トップ画面をカスタマイズするにはテーマファイルを編集する必要があり、初心者には少し難しいかもしれません。

 

代わりの方法として、WordPressではトップ画面に特定の「固定ページ」を表示させることができます。

固定ページは投稿と同じ方法で編集できるため、初心者でも簡単にオリジナルのトップ画面を作成できます。

今回は、固定ページをトップ画面に設定する方法と、理想的なトップ画面を作るためのヒントをご紹介したいと思います。

 

トップ画面に固定ページを設定する

まず、トップ画面に設定する固定ページをあらかじめ作成しておきましょう。

※WordPressのテーマによっては固定ページをトップ画面に設定できないものもあります。事前にテーマの仕様をご確認の上、設定を進めてください。

 

WordPressの管理画面にログインしたら「固定ページ」⇒「新規追加」に移動します。

そして、普段の投稿と同じ要領でトップ画面を作成します。

 

固定ページ_エディター

 

タイトルは空白でも構いません。

ちなみに一般的なサイトのトップ画面は、以下のような項目で構成されていることが多いです。

 

・「お知らせ」「注意事項」

・広告

・人気記事(ランキング)

・新着記事一覧

 

また、テーマによっては固定ページの「テンプレート」が何種類か用意されている場合があります。

例えば、公式テーマの「Twenty Twelve」には「フロントページ」というトップ画面用のテンプレートを利用できます。

テンプレートは、固定ページの編集画面⇒「ページ属性」から変更可能です。

 

フロントページ

 

必ずしも「フロントページ」を選ぶ必要はありません。

あなたのサイトに合ったテンプレートを選択しましょう。

 

固定ページを作成したら「公開」してください。

次に、固定ページをトップ画面に設定します。

WordPress管理画面「設定」⇒「表示設定」へと移動しましょう。

 

表示設定

 

「ホームページの表示」項目のラジオボタンから「固定ページ」を選択してください。

 

表示設定_ホームページ_固定ページ

 

さらに「ホームページ:」のプルダウンメニューから、先ほど作成した固定ページのタイトルを見つけます。

最後に「変更を保存」をクリックすれば、サイトのトップ画面に固定ページが反映されます。

 

固定ページ_トップ画面

 

しかし、今までトップ画面を担っていた新着記事の一覧ページが無くなってしまいました。

トップ画面ではなく、別のページとして復活させたい場合にも、固定ページを活用します。

再び固定ページを新規に立ち上げ、今度は本文を空っぽのまま公開しましょう。

 

新着記事一覧

 

そして「設定」⇒「表示設定」に移動し「ホームページの表示」⇒「投稿ページ」のメニューから空っぽの固定ページを指定してください。

 

表示設定_投稿ページ

 

空っぽの固定ページのURLにアクセスすると、新着記事の一覧が表示されるはずです。

 

投稿ページ設定

 

固定ページをトップ画面に表示させる基本的な方法は以上です。

しかし、トップ画面を作成するのに固定ページのエディター機能だけでは物足りないと感じるかと思います。

サイト内の回遊率を高めたり、ユーザビリティを改善するために、プラグインを使ってトップ画面をグレードアップしてみませんか。

以降は、プラグインを使って多彩なツールをトップ画面に導入する方法をご紹介します。

 

新着・人気コンテンツを掲載する

トップ画面での新着記事のお知らせは、手動で更新しなくちゃいけないくま~?
プラグインを使えば、新着記事や人気記事のお知らせを自動化できるです~。

 

固定ページでトップ画面を自由に作成できるようになった反面、新着記事を一覧で確認できなくなってしまいました。

記事を投稿するたびに、トップ画面にお知らせを追記することもできますが、あまり効率が良いとは言えませんよね。

 

そこで、新着記事一覧を自動で掲載するプラグインを導入してみましょう。

中でもオススメなのが「Content Views」です。

 

Content_Views

 

Content Viewsは、新着記事一覧を好きな位置に表示できるプラグインです。

ショートコードをエディターに貼り付けるだけで、サムネイル付きの新着記事を掲載できます。

 

ショートコード

 

基本操作は非常に簡単ですが、表示形式の変更や詳細なカスタマイズも可能です。

 

グリッド表示

 

Content Viewsの詳しい特徴や設定方法を知りたい方は、下記の講座をご覧ください。

【Content Views】新着記事を画像付きでリスト化する方法

 

評判の良かった記事をもっとたくさんの読者に知ってもらいたいくま~!
トップ画面で「人気記事」を配置してみると良いです~。

 

新着記事一覧の次は「人気記事」を配置してみましょう。

人気記事といえば「WordPress Popular Posts」が有名です。

 

アクセスが多いコンテンツを見つけ出し一覧化します。

日本語に対応しており、初心者でも扱いやすいプラグインですね。

 

WordPress_Popular_Posts

 

本来ウィジェットで使われることの多いプラグインですが、記事内にも利用できます。

以下のショートコードを固定ページの好きな位置に貼り付ければ、人気記事のリンクが表示されます。

 

テキストのみ
[wpp]

 

また、以下のように条件や機能を付け足すことも可能です。

 

サムネイルと抜粋表示・3記事まで表示

[wpp excerpt_length=25 post_html='<li>{thumb}{title}<br><span class="wpp-excerpt">{summary}</span></li>' thumbnail_width=100 thumbnail_height=60 limit=3]

 

下記の「ショートコード詳細」を参考にして、トップ画面のレイアウトに適した内容にアレンジしてみてください。

 

ショートコード詳細

「excerpt_length=〇〇」:記事の冒頭から何文字抜粋するか数値を入力

「 post_html=’〇〇’」:<li>リストタグ内のHTMLの構成を指定

「thumbnail_width=〇〇」:サムネイル(アイキャッチ)画像の横幅をピクセル指定

「 thumbnail_height=〇〇」:サムネイル画像の高さをピクセル指定

「limit=〇〇」:表示する記事数

 

ショートコード

 

プレビューで確認すると…。

 

人気記事

※テーマによって実際のレイアウトと異なる場合があります。

 

WordPress Popular Postsの詳しい情報や使い方を知りたい方は、以下の講座をチェック!

【WordPress Popular Posts】回遊率を改善する人気記事の設置方法

 

これで「新着記事」「人気記事」の項目をトップ画面に追加できました。

 

スライドショーを設置する

おすすめコンテンツや広告に読者を誘導したいくま~。
そんな時は「スライドショー」がオススメです~。

 

読者に注目してもらいたいコンテンツや広告がある場合、他のコンテンツよりも目立たせる必要があります。

画像が順々に切り替わる「スライドショー」は、静的なWEBページの画面に躍動感を与えます。

 

ギャラリー

 

スライドショーに特定のコンテンツ広告のリンクを貼れば、読者の目にとまりやくなるでしょう。

トップ画面にスライドショーを設置するなら「Smart Slider 3」がオススメです。

 

Smart_Slider_3

 

Smart Slider 3は、各スライドに画像やテキスト、ボタンを自由に配置できるプラグインです。

デザイナーズサイト顔負けのスライドショーを、初心者でも直感的に作れるのが特徴です。

 

プラグインの設定画面でスライドショーを作成したら、ショートコードを固定ページに貼り付けましょう。

 

ショートコード

 

最後にプレビューでレイアウトを確認し、トップ画面を更新してください。

 

スライドショー

 

Smart Slider 3でスライドショーを作成する方法は、以下の講座が詳しいので参考にしてみてください。

 

【Smart Slider 3】誘導力高めるスライドショーの使い方【WordPress】

 

「固定ページでトップ画面を作る方法」のおさらい

簡単に今回のまとめをしておくです~。

 

まとめ

・特定の固定ページをフロントページに設定すれば、オリジナルのトップ画面を作れる。

・固定ページのエディター機能だけでは、ハイスペックなトップ画面を作るには不十分。

・トップ画面から読者をコンテンツや広告に誘導するためにもプラグインの力を借りよう。

 

関連記事

後悔しないためのWordPress8つの初期設定

【WordPress】固定ページの用途と作成方法【Gutenberg対応】

【WordPress】プラグインのインストール方法 基本から応用まで3つのメソッドをご紹介

【WordPress】スライドショーを設置するプラグイン おすすめ5選

 

新規パートナー無料登録はこちら

 

 

サイト作成コース 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による