Cocoonショートコード×固定ページですっきりトップページを作る

Cocoon
スポンサーリンク
るんぴあ
るんぴあ

頑張ってブログ記事を量産してきたんだけど…アップするカテゴリーもバラバラだから、トップページがとっても見づらいの…


これじゃ、読者に関連記事まで見てもらえない…


昔の記事まで何ページもさかのぼって見てもらえるとは到底思えないしなぁ…

コップ先生
コップ先生

確かに100記事以上あると、昔にさかのぼって見て行くのはしんどいよな!


そんな時は…自分でトップページを作るというのはどうかな?


サイトの人気記事や、あなたが読んでほしい記事をバーンと表にだせたり…ある程度自由にカスタマイズできるぞ!

るんぴあ
るんぴあ

なにそれーーーー!

やってみたい!やります!!!やりま~す!!!

この記事を読んで分かる事

固定ページでトップページを作る意味

固定ページでトップページを作る方法と構成の例

Cocoonで内部リンクを作る方法(3種類)

Cocoonコクーンのショートコードと編集方法
(カテゴリー・人気記事・最新記事・ナビカード・ブロックメニュー・プロフィール)

固定ページをホームページに設定する方法

トップページから不必要なものを取り除く方法(リンク)

Cocoon(コクーン)のショートコード利用ですっきりしたトップページを作る

トップページとは、あなたのサイトを開いた時に一番最初に開くページ(ホームページ)のこと。サイトの入り口です。


WordPress、Cocoon(コクーン)テーマでは通常、新規記事が『ブログカード』という表示形式でどんどん上がるような仕様になっています。


数記事のサイトであればそこまで問題ありませんが、記事数が増えるにつれてホームのページ数も増えていきます。


最新記事がサイトのトップページには表示されるものの、サイトを初めて訪れた人には『サイトの概要が一目で分かりづらい』という欠点も。


サイトマップやカテゴリーページをトップページに設定しても良いかと思います。


しかし、記事の羅列がバーっと表示されるのは初期仕様のトップページとそこまで変わりませんよね。


より興味を持ってもらうために『固定ページ』を使って、あなたのサイトの魅力を押し出すトップページを作ってみませんか?

固定ページでトップページを作る利点

あなたが一番見てほしいページへユーザー(読者)を誘導できる

あなたのメッセージやサイト概要をダイレクトに読者に伝えることができる

読者が興味を持ってくれそうなページ構成を作成できる

コップ先生
コップ先生

要するに、ユーザーがサイト内を巡るための導線をあなた自身でデザインして整えることができるのじゃ。

るんぴあ
るんぴあ

最新記事が出なくなったら、ブログのリピーターの人に見づらくならないかしら?

コップ先生
コップ先生

心配御無用!
WordPress・Cocoonでは多彩なショートコードが用意されておる。

それを上手に使う事で『最新記事』や『人気記事』の表示も簡単にできるトップページを作成することが出来るんじゃよ。

固定ページでトップページを作る前の準備

トップページを作成する前に、あなたのサイトに設置したい『トップページ』の大まかな構成を決めておきましょう。

トップページオススメの構成:例1

【サイトの概要を主要記事と共にユーザーに示す】

記事の要約説明+一番読んでほしいページへの誘導

記事の要約説明+一番読んでほしいページへの誘導

記事の要約説明+一番読んでほしいページへの誘導

または…

【カテゴリー別に概要を説明し、サイト全体像を示す】

カテゴリ概要説明+一番読んでほしいページへの誘導、もしくは、カテゴリーページへ誘導

カテゴリ概要説明+一番読んでほしいページへの誘導、もしくは、カテゴリーページへ誘導

カテゴリ概要説明+一番読んでほしいページへの誘導、もしくは、カテゴリーページへ誘導

トップページオススメの構成:例2

【ブログの概要とオススメ記事をコンパクトにまとめる】

あなたのブログに対する思い、どんな人に見てほしいのか、あなたはどんな人なのか、など…はじめに読んでほしいメッセージを表示

+自己紹介・アピールページなどへ誘導

人気記事表示

最新記事表示


他にもオススメしたい表示に【自己紹介】【オススメ記事(自分で編集する)】【商品のランキング】【広告】などがあります。




こちらではうえにあげた2例についてCocoonショートコードを利用したトップページの作成方法を解説します。

固定ページでトップページを作成する

まずはトップページになる固定ページを作成します。

ダッシュボード【固定ページ】>【新規追加】より固定ページ編集画面を開く

①ダッシュボード【固定ページ】>【新規作成】から固定ページ編集画面を開く

②タイトルとパーマリンクの設定をする(画像はブロックエディタのページ)

この固定ページに【あなたが思い描くトップページのパーツ】を入れ込んでいきます。

コップ先生
コップ先生

ここからは【トップページに使えるテクニック】を紹介するぞ!

色々組み合わせて自由自在にトップページを編集してみてくれ!

特定の記事に誘導する方法(内部リンク)

1.ブログカードを表示する

・旧エディタはビジュアルモードにURLをコピーアンドペースト


・ブロックエディタはそのまま(段落ブロックに)URLをコピーアンドペースト



2.文字の内部リンク

文字を入力して、その文字をマウスで反転させる>ツールバーの『リンク』をクリック>URLを入れる欄が表示されるので、URLをコピペ>Enter


3.ボタンの内部リンク

【ボックスエディタの場合】

【旧エディタ(クラシックエディタ)の場合】

カテゴリーを表示するショートコード

1.ショートコードでカテゴリーページの数記事を表示する

カテゴリーページの解説をしたいときには、以下のショートコードを入力(もしくはコピペ)すると、一覧が現れます。

\ショートコードを編集して使用します/

new_list count=”〇”:〇に入る数字は表示する記事数の指定です
上のコードでは5記事が表示されるようになっています

type=”default”は表示形式の事です
default(デフォルト)では左に記事のアイキャッチ、右に文が表示する通常の記事カードが表示されます

表示形式を変更したければ以下を参考にしてください↓

【記事カードの表示形式を変更する場合はコードにあるtype=”○○”の○○を変更します】

●記事のカードの間に区切り線を入れる:border_partition

●記事のカードを枠線で囲む:border_square

●記事カードのサムネイルを大きくする:large_thumb

●大きなサムネイルにタイトルを重ねる:large_thumb_on

※すべてのコードにおいて記事数やカテゴリーIDは変更してください
(上記コードは例です)


children=”0″:子カテゴリーを含めるかの指定

0:含めない、1:含める

cats=”△”:△に入る数字はカテゴリー(もしくはタグ)IDの指定をする数字です
※複数のカテゴリーを指定する場合は半角カンマ(,)で区切って指定する

カテゴリーやタグのID確認はダッシュボード【投稿】>【カテゴリー(タグ)】から確認できます

2.カテゴリーページへのリンクを作る

A.文字の内部リンクの場合

B.ボタンを使用して内部リンクを作る場合


ボックスエディタの場合

⊕から『ボタン』編集のボックスを選ぶ>ボタンに文字を入力>URLを入力>ボタンの色などを編集(画面右横)

旧エディタ(クラシックエディタ)の場合

ツールバーの【スタイル】>【ボタン】>【色・大きさを選ぶ】>ボタンに文字を入力>文字を反転>ツールバーの【リンク】をクリック>URLを入力>Enter

新着記事を表示するショートコード

上で解説した『カテゴリーのコード』と仕組みは同じです。表示のデザインを変更する場合は、上記のコードを参照してください。


新着記事のショートコードはnew_list count=”(記事数)“になります

※castは全記事対象のallになっています

人気記事を表示するショートコード

表示のデザインを変更する場合は、type=”〇〇”の○○部分に別のコードを入れてください。


人気記事のショートコードはpopular_list days =”all”から始まります。

※castは全記事対象のallになっています

るんぴあ
るんぴあ

上にあげた『新着記事と人気記事』のショートコードはツールバーからも指定できます(デフォルトのコードが入ります)

ナビカードを表示するショートコード

ナビカードはダッシュボード【外観】>【メニュー】から作ったものを表示する機能です。


新着記事や人気記事と同様、ツールバーのショートコードからコードを入れることができますが、事前にナビカードの項目を作成する必要があります。


これを使えば、あなたが一押ししたい記事のみを選んで表示することが可能です。

⇒ナビカードの作り方と表示方法

ナビカードのショートコードはこちら↓

コップ先生
コップ先生

ここにあげたモノ以外にも、自己紹介のボックスや、ボックスメニューの表示も【ショートコード】を使用する事で簡単に表示できるんじゃよ。


⇒プロフィールボックスのショートコード(詳細はこちら)

”自己紹介”は好きな言葉に変更可能です


⇒ボックスメニューのショートコード(詳細はこちら)

るんぴあ
るんぴあ

Cocoonのショートコードは充実しているから、いろいろな組み合わせで作って、あなたオリジナルのトップページが作れるね!

固定ページをトップページに指定する

固定ページでトップページが作成できたら、それをトップページに指定します。

ダッシュボード【設定】>【表示設定】より行います

①ダッシュボード【設定】>【表示設定】で表示設定画面を開く

②『ホームページの表示』の部分の【固定ページ】にチェックする

③ホームページ:固定ページのタイトル『トップページ』を選択する

④投稿ページ:新着記事一覧を選択する

⑤【変更を保存】をクリック

コップ先生
コップ先生

以上で固定ページをホームページにする作業は終了じゃ!


しかし!!!
このままでは、トップページに必要ない物【目次とかアイキャッチなど】も表示されてしまう状態になっておるんじゃ。


不必要なものを表示しないための方法はこちらをチェックしておくれ!⇒トップページのCSS編集

【WP・Cocoonのショートコードでトップページを作る】まとめ

まとめ

 

るんぴあ
るんぴあ

コップ先生のセクシー秘書リムが、当記事のまとめをご案内します!

セクシー秘書
セクシー秘書

お任せください。では、参ります。

固定ページでオリジナルのホームページを作るために…

まずはあなたのサイトのホームページ『トップページ』の構成を考えましょう


あなたのサイトの概要や、あなたの想いなどを一番最初にユーザーに伝えることが出来ます


ホームページからあなたのサイトで得られる情報がぱっとわかる、そんな構成がよいでしょう


ダッシュボード【固定ページ】>【新規追加】より『トップページ』を作成します


トップページを作る際は『内部リンク』や『ブログカード』、Cocoonの『ショートコード』を駆使して、ユーザーが興味をそそる導線を作りましょう


作成したトップページをホームページに設定するには、ダッシュボード【設定】>【表示設定】からホームページの設定をしてください
※デフォルトでは最新の投稿がホームページに設定されています


トップページに表示される不要なものを取り除くための編集はこちらをご確認ください
⇒CSS編集でトップページから不要なものを非表示にする

セクシー秘書
セクシー秘書

お疲れさまでした♡

納得のいくトップページは作成できましたか?

ブログの運営年数が長い、記事数が多い方はホームページを見直してみるといいかもしれませんね!

タイトルとURLをコピーしました