ブログのスパイス

【ワードプレス】初心者でも簡単!Cocoonテーマでフロントページをカスタムしよう!

ワードプレスの活用は日々勉強中ですが、Cocoonテーマでのフロントページを固定ページで作って設定してみたのでやり方紹介したいと思います!

私レベルである程度は出来たので初心者の方でも大丈夫です!

固定ページで作成しますのでダメなら削除で終わり。

サイトが壊れるようなことはありませんので是非オリジナルなフロントページの作成にチャレンジしてみてください!

固定ページでフロントページを作成するメリット

デフォルトの設定だと新着記事がずらずらっと並んでいくだけですよね。

固定ページで作成することによってサイト風なフロントページにすることが出来ます!
・人気記事やカテゴリー毎のページを表示させられる。
・広告を入れられる。
など、自分のオリジナリティもだせちゃいます!

 

では実際やってみましょう!

↓↓↓

作成前にざっくりで良いのでレイアウトを考える

今回私が作成したものはこんな感じ

固定ページの作成

レイアウトイメージが完成したら固定ページの作成に取り掛かります。

新規追加をして赤枠のタグを選択して『カラム』を記事内に入れます。

カラム内に

【赤枠】文字を入力 (私は画像に直接文字を入れたので文字は入れてません)

【緑枠】必要な画像を入れてください

【青枠】ショートコードを選択して表示したいものを選択します。

 

それぞれ入力するとこんな感じになります。

おススメ記事と書いてあるところは通常の記事作成と同じで『スタイル』から装飾できます

 

例)新着記事のショートコード

new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”

count=”5″ :数字を変えると表示される記事数が変わります。

cats=”all” :allはすべての記事が対象となっています。カテゴリーを絞る場合はカテゴリーIDを入れます。

IDの確認はカテゴリーの編集ページを開いて

上のURLで青枠で囲ってるID=9と書いてある『9という数字です。』

 

ここまで入力したらプレビューで見てみましょう!

 

あとはどんどん必要なものを追加していく

この基本操作が出来ればあとは組み合わせ!

カラムを入れてその中に必要なものを入れ込んでいくだけです!

 

例えば

これはカラム内に文字と広告入れてスタイルから色と枠を付けただけで完成です!

 

他には

これはカラム内に画像、ショートコードは新着で記事数は3、カテゴリー毎に表示させています。

記事下のボタンはスタイルから入れてカテゴリーのリンクを入れます。

最後に全体に色付けて囲って完成!

普段ブログ書いてる人なら難しくないですよね?

Cocoonのスタイル一覧は記事にしていますのでよかったら確認してみてください!

無料テンプレートはCocoonがオススメ!記事装飾『スタイル』一覧

フロントページが完成したら設定しよう!

ダッシュボードから

外観→カスタマイズ→ホームページ設定

ここで作成した固定ページを設定すれば設定完了です!

固定ページのタイトルが邪魔問題

タイトルは消せます!

簡単なのはプラグインを使用した方法です。

『Hide Page And Post Title』をインストールして有効にします。

これは記事ごとにタイトルの非表示設定が可能です。

 

記事の編集画面に行って右側を下に見ていくと

 

一番下にいました!

チェックボックスにチェックを入れればタイトルが非表示になります。

まとめ

固定ページからフロントページを作成、設定する方法でした!

Cocoon使っている方は是非オリジナルのフロントページ作成にチャレンジしてみてください!

ブログをもっとおしゃれに!

商品リンク作成におすすめ!WordPressプラグインのRinker(リンカー)導入方法解説!

 

もう登録しましたか?

ブログ初心者に絶対におすすめのASPサイト

ABOUT ME
初めまして! 虹色スパイス管理人の桃です☆ ブログ訪問ありがとうございます。 日常のネタやブログネタを中心に情報発信中です! 雑草のような人生も記事にまとめてますので是非覗いてやってください!