意外に簡単!サイト型トップページの作成方法

2024年9月1日

こんなことありませんか?

ワードプレスで、サイト型ができるって聞いたので、作ろうとしたけどどうやったらいいかわからない。

わかります。私もそうでした。

やってみたら簡単だったのでシェアしたいと思います。

サイト型のイメージ Cocoonの場合

サイト型のトップページにする方法

固定ページを作成

ダッシュボード固定ページ新規追加をクリック。

今回作りたいフロントページのイメージは、カテゴリーは3カラムで1つのカテゴリーには3記事づつとして2段にしました。その下にもっと見るボタンを配置して、クリックすればカテゴリーの一覧が見れるようにできて、その下には、新着記事、人気記事を見れるように配置してます。

画像に alt 属性が指定されていません。ファイル名: image-11.png

カラムの作り方

ブロックのデザインにあるカラムをクリックしてください。

3分割にしたい場合は、33/33/33を選択してください。

見出しの作り方

見出しを作っていきます。「+」の部分をクリックします。

見出しをクリックします。

3分割したところの見出しはH5を選択しました。

見出しを入力したら、改行をクリックします。

」をクリックします。ブロックのウィジェットにあるショートコードをクリックします。

それぞれのカラムごとに、見出しにカテゴリー名と、その下にショートコードの入力をします。

1つのカテゴリーごとに3記事にしたいのでショートコードを以下のようにしました(コピペして使うと簡単です)。

(追記:""ダブルクォーテーションが入っていると上手くいかない事例があり、試しに取ってみましたら解決しました)

[new_list count=3 cats=182]

ちなみにnew_listは、カテゴリーごとの新着記事を入れてねという意味です。

count=3は、3記事配置してねという意味です。

cats=182は、カテゴリー番号の182番を入れてねという意味です。

カテゴリー番号というのは、それぞれカテゴリーごとに番号が振りあてられているのでご確認ください。

カテゴリー番号の調べ方

ダッシュボード投稿カテゴリーをクリック。

カテゴリーのIDのところを見ると番号が振られています。これがカテゴリー番号です。

光るボタンの入力方法

ボタンの種類は、下の画像のボタンを選択してください。

ボタンの設定のカテゴリーのURLを入力円形にする光らせる文字やボタンの色を選択するなど。デザインはお好みで設定してください。

カテゴリーのURLの調べ方

ダッシュボード投稿カテゴリーをクリック。

カテゴリーの表示をクリックする。

表示をクリックすると左上にURLが表示されますので、これをコピーします。それを先ほどのボタンの設定のカテゴリーのURL欄にペーストします。

新着記事、人気記事の入力

ここでもショートコードを使ってます。

新着記事には、

[new_list]

人気記事には、

[popular_list]

と入力してます(コピペして使うと簡単です)。

作り終えたら、プレビューを見て、全体的に整えてから公開をクリックします。

新着記事を作成する方法

固定ページに新規追加して、新着記事を作成するだけです。

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

ダッシュボード設定表示設定をクリックします。

表示設定のホームページの表示を固定ページに変更します。

ホームページの欄には、フロントページとして今作ったものを選択します。

投稿ページの欄には、新着記事を選択します。これで完了です。

今回は、テーマCocoonについての、サイト型への変更方法を、ざっと大まかに主要の部分だけ説明しました。

テーマごとにやり方が違うところもあると思います。少しでもご参考になれば幸いです。

細かいデザイン等のこだわりなど、それぞれ個性を輝かせてみてください。楽しいですね。

もし、やり方がわからない場合は、以下のお問合せフォームをご利用ください。

お問い合わせ内容によっては、ご返答に少々お時間をいただく場合がございますが必ず返信いたします。

WEB関係のことってわかりにくかったりしますよね。もしかしたら、あなたも「やってみたいけど不安」「自分にできるかな?」と感じているかもしれません。 そんな時は、以下のお悩み相談窓口(初回30分無料) をぜひご利用ください!! 小さな疑問や不安でも大丈夫!あなたのペースで一歩を踏み出すお手伝いをします。

   

初心者向け!Wordpress個別相談!ブログ制作の無料お悩み相談窓口

~無料メルマガのご案内~

お悩み相談に申し込むのはちょっとまだいいかなと思われた方へ。まずは無料メルマガを読んでみませんか?

一歩踏み出したいあなたへ!パソコン・ブログ応援する無料メルマガ、配信中!

煩わしい手続きは必要ありません。メールアドレスを登録するだけです!

無料メルマガ登録はこちらから!

メルマガの詳細はこちらをクリック

 

人生を楽しく生きる為のパソコン講座
無料メルマガ登録フォーム
 

ココナラに初出品!!個別相談では、あなたのペースで無理なくパソコンスキルアップのお手伝いをします。

初心者向けWordpressのお悩み相談受付けます 1ヶ月質問し放題とビデオチャット30分オンライン個別講座

《新着記事》

Thumbnail of new posts 042

: ブログの作り方

やってみてわかった!!Facebookイベントページで「興味あり」ボタンが押せないトラブル解決の記録

Facebookでイベントページを作成した際、「興味あり」ボタンが押せないという ...
Thumbnail of new posts 093

: マイスピー

誰でも簡単にLPが作れる!MyASP(マイスピー)のフォームを使ったシンプルな方法!

ネットサーフィンしていて、あれっ!これって自分でも作れるかもって思うことがありま ...
Thumbnail of new posts 190

: ワードプレス

[WordPress]プラグインBeaver Builderのエラー対策(Cocoonの場合)

Wordpressのサイトで、LP(ランディングページ)を簡単につくりたいって思 ...
Thumbnail of new posts 155

: ワードプレス

「このブログ記事だけ見せたくない!」そんな時どうする?簡単な方法をご紹介!

ブログ記事を公開したいけれど、ちょっと困ってます。 今回の記事は、すべての人にで ...
Thumbnail of new posts 062

: ワードプレス

[対処方法]ヘッダー画像がスマホだと画像が切れてしまう!

こんなことありませんか? パソコンではヘッダー画像が上手く全部表示されているんだ ...