初心者がトップページをサイト形式に変更してみた(テーマcocoonの場合)

IT初心者
スポンサーリンク

はじめに

当サイトはトップページの形を「サイト形式」に変更しました。

通常、WordPressでブログを作成し、テーマを「cocoon」にした場合、下のような形式で表示されます。

最新記事が一番上に来る、この形式は「ブログ形式」と呼ばれます。
元々、ブログというのは日記として始まったからだと言われています。

一方、下記の画面のように人気記事や新着記事、さらにはカテゴリーごとの人気記事を表示する形式を「サイト形式」と言います。

これは記事数が増えて、人気記事が奥の方に埋もれてしまうと読まれにくくなることから、記事数が増えたサイト(ブログ)でよく使われる表示形式です。

当サイト(ブログ)も記事が増えて来たことから、サイト形式に変えたいと思いました。
ところがCSSやHTMLなんて言われても、何も知識がないので、どうしたらいいかわかりませんでした。
しかし、調べてみたところ、テーマ「cocoon」だと、知識なしで簡単にできることがわかったのです。
以下に備忘録も兼ねて、その方法を記します。
なお、記事作成の参考にしたサイトは以下の2つのサイトです。

一部、コードなどを引用させていただきました。

【Cocoon】サイト型トップページのカンタンな作り方【プログラミング知識は不要!】
ワードプレスブログでCocoonテーマを使っていて、サイト型トップページを作りたいと考えていませんか?実は、プログラミングなど使わずにできる作り方があります!なぜなら、僕がやった方法ではプログラミング知識なんて一切使っていないからです。それではさっそく、やり方を紹介していきますね。
Cocoonトップページのカスタマイズ【3ステップでサイト型】
「ブログの記事数が増えてきたから、Cocoonのトップページでいろんな記事を掲載したい!」「でもカスタマイズがむずかしそう…」。本記事はそんな悩みに応えます。Cocoonならトップページのサイト型へのカスタマイズは簡単です。本記事を読めば3ステップでサイト型トップページができちゃいます!
スポンサーリンク

念のための確認

単にサイト(ブログ)の記事を縦2列に表示したいだけなら、「cocoon」の設定画面でチェックを入れるだけで可能です。

姉妹サイト「My favorite things」を実験台に使って紹介します。

ダッシュボード「cocoon設定」→「cocoon設定」と進み、「インデックス」タブを選択してください。

すると、「カードタイプ」という選択肢があります。

ここで、「縦型カード」か「タイルカード」の2列か3列を選択すれば、パソコンでもスマホでも2列、または3列で記事が表示されます。
「縦型カード」だと、整列した形で、「タイルカード」だと上下がずれた形で表示されます。

※下記の画面は「縦型カード2列」を選択した画面です。

ただ、このやり方では、2列表示はできるものの、人気記事や新着記事をカテゴリー別で上位に表示することができません。
今回、目指すのはそちらの形式であるため、記事を続けます。
ただ、サイト形式にした場合、パソコン版では縦2列にはなりますが、スマホ画面では2列にできません。
これはスマホ画面で2列にすると狭い画面では見づらいだろうという配慮から、そういう設定になっているそうです。
どちらを取るかは自己判断でお願いします。

スポンサーリンク

まずはエディター設定

普段、記事を書く際、エディターは何を使っておられますか?

Gutenbergエディターは使いにくいので、従来のエディターを使っておられるのではないでしょうか? 私もそうです。
しかし、これからする作業にはどうしてもこのGutenbergエディターの機能が必要なので、とりあえず、有効にしてください(すべて作業が終われば、元のエディターに戻して問題ありません)。

「cocoon設定」から「エディター」タブをクリックし、「Gutenbergエディターを有効にする」にチェックを入れてください。

※普段からGutenbergエディターを使っている方には必要のない設定です。

スポンサーリンク

固定ページを作ります。

エディターの設定ができれば、次は固定ページを新規作成します。
ダッシュボードから「固定ページ」→「新規追加」と進んでください。
すると、以下のような画面が出ると思いますので、「タイトルを追加」と書かれているところに、仮のタイトルをつけてください。
あとで消せますので、タイトルは何でもいいです。
とりあえず、ここでは「トップページ」と入力しました。

続いて、画面左にある◯で囲まれた「+」をクリックしてください。
そして、画面をスライドさせて、「cocoonレイアウト」を選択し、「2カラム」を選択してください。

すると、以下のような画面になるはず。

この色が付いた部分が各カテゴリーになります。
同じ作業をカテゴリーの数だけ、続けてください。
今回、説明に使った私のサイトはカテゴリーが6つなので、三段でいいのですが、新着記事と人気記事を表示するスペースも作りたかったので、さらに2つ足して、四段、8つのカラムを作りました。
以下の画面です。

スポンサーリンク

カテゴリーのタイトルを入れます。

各カラムにタイトルを入力してください。
なお、タイトルは見出し設定や色設定など装飾ができます(ここでは見出しH3、太文字で色をつけています)。
画像を取り込むこともできるようですが、ここでは省略します。
そのあたりは慣れてからいろいろ設定してください。

スポンサーリンク

ショートコードを入力します。

先程作ったタイトル見出しの下にショートコードを入力します。

※下記の画面で「1」と入力してあるのは、カーソルを合わせるだけでは、ショートコードを入力するバーが出て来ないことがあるため、とりあえず入力した文字です。ショートコードを入力してからは「1」の文字は消してください。

下記画面のとおり、ショートコードのマークから「新着記事一覧」というところを選択してください。
なお、人気記事一覧の場所では、「人気記事一覧」の方を選択して追加します。
各カテゴリーに表示する記事一覧については、「新着」か、「人気」か、好みで選んでください。

一通り入力したら、下記のような画面になっていると思います。
「new」で始まっているコードは新着記事を「popular」で始まっているコードは人気記事を表しています。

スポンサーリンク

表示する記事の数を選択します。

上記のショートコードを見ていただくと、「count=5」という表示があるのがわかるでしょうか?
実はこれが表示する記事数を表しています。
デフォルトだと5記事表示されるようになっているわけですね。
これを好みの数字に変えてください。
サイトが縦長になるのが嫌なら3くらいにすればいいですし、カテゴリーが少ないサイト(ブログ)なら、7とか10にしてもいいと思います。
この記事上ではデフォルトの5のままにしておきます。

記事カテゴリーの数字を入力します。

これは各カテゴリーのショートコードを表示した画面ですが、cats=”all”という表記があるのに気づかれたでしょうか?
この「cats」というのはカテゴリーのことを表しています。
「all」というのは、すべてのカテゴリーから抽出するということを表しています。
先程のようにサイト(ブログ)全体から新着記事や人気記事を抽出するなら「all」で良いわけですが、こちらはカテゴリーごとの人気記事や新着記事を抽出したいわけですから、この「all」の部分を変更する必要があります。

各カテゴリーには固有の番号があります。
確認の仕方ですが、一度、この固有ページ画面を保存して、ダッシュボードの「投稿」→「カテゴリー」と進んでください。
そして、各カテゴリーの名称にカーソルを合わせてください。

※◯印をした場所(各カテゴリーの名称)にカーソルを合わせてください。

すると、画面下に長い文字列が表示されるのですが、そこに表示されている「ID=◯◯」という部分の◯◯がカテゴリーの番号です。

※上記例では書籍カテゴリーはID=2となるわけですね。
他のカテゴリーについても同様です。
数字を間違えないようにメモを取るなどしてください。
この数字を先程の”all”の部分に入力します。

「all」を「2」と「6」に変更しています。
他のカテゴリーについても、同じ要領で変更してください。

全部の設定が終わり、試しにプレビューを見ると、こんな感じの画面になっています。

私はプラグインを使って目次を作っているので、目次が表示されています。
次はこれを消す作業をします。
※プラグインで目次を作っていない方には必要のない作業です。

目次を消すショートコードを入力

目次を作っているプラグインは「Table of Contents Plus」、略して「TOC+」というプラグインです。人気のプラグインなので導入している人も多いのではないでしょうか?
このプラグインのヘルプを参照したところ、ページのどこかに「no_toc」というショートコードを入力すればいいとのことでした。
そこで固定ページ一覧から先程の画面を開き、一番下の空白部に「no_toc」と入力しました。

※カギカッコは上記の形にしてください。説明文章にこのカギカッコを使うとなぜか表示されなかったので、文章上は違うカギカッコにしてあります。

これで目次が消えます。
保存してプレビューを見てください(下記の画面)。

スポンサーリンク

続いて、ボタンを作成します。

各カテゴリーの下に「もっと読む」というボタンを作り、カテゴリー内の別記事を読んでもらえるように設定します(私は「もっと読む」と表示していますが、文言はなんでもいいです)。

カテゴリーのショートコードの下に改行をして、もうひとつ入力欄を作り、◯で囲まれた「+」をクリックしてください。
そして「cocoonブロック」を選択しますと、その中に「ボタン」があるのでそれをクリックします。

すると、こんな形でボタンができるので、これも装飾していきます。

まず「ボタン」という文字を「もっと読む」に変えました。
そして、画面右のボタン設定から、サイズを「大」に変え、形を「円形にする」を選択しました。

右のボタン設定を下にずらすと「色指定」という設定欄が出てきますので、そこでボタンの色や文字色を変えられます。好みで選択してください。
同じ要領で、各カテゴリーにボタンを設定してください。
設定後、プレビューを見るとこんな感じになっているはず……
※5記事の設定にしてあるのに、3記事または4記事までしか表示されていないのは、作りたてのサイトなので、まだ記事数が少ないのと、一度も読まれていない記事があってカウントされていないからです(苦笑)

スポンサーリンク

ボタンにURLを入力します。

先程ボタンを作成する際に、右画面にURLと書かれた空白欄があったのに気づかれたでしょうか?
下記画面です。
ここに各カテゴリーのURLを入力します。

各カテゴリーのURLですが、「サイトのURL/category/カテゴリー名」となります。

この実験をしているサイトの書籍カテゴリーの場合「https://favorite.arafuka1582.com/category/書籍」となります。
ボタンをクリックして、各カテゴリー別のURLを入力してください。
すべて入力できたら、プレビューで確認して、ボタンをクリックしてみてください。
各カテゴリー記事が表示されたら成功です。

ここまでできたら、一旦、下書き保存ではなく、「公開する」をクリックしてください。
※実際はまだ公開されません。

固定ページをトップページに変更します。

ダッシュボードから「設定」→「表示設定」と進んでください。

すると上記のような画面が出ますが、通常だと「最新の投稿」というところが選択されているのですが、これを「固定ページ」の方に変えます。
そして「ホームページ」と表示されているところを、自分が名前を付けたトップページに変更します。
※私は「トップページ」という名前を付けたので、この名前になっています。他の名前を付けていたら、それを選択してください。名前が出てこないとすれば、下書き保存のままで、「公開する」を選択していないからです。

変更できたら、画面下の「変更を保存」をクリックしてください。
そして、一度、サイトを表示させてみてください。

こんな感じの画面になったのではないでしょうか?
これで、一応は成功なのですが、もう少しこだわって設定をします。
というのは、「トップページ」という表示が残っているのと、「新着記事」「人気記事」という欄を作ったのに、画面右に同じ情報があるのは意味がないと思われるからです。
それらを表示させないようにします。

スポンサーリンク

まず、トップページという表示を消します。

画面上にある「トップページ」(他の名前を付けているならその名前)表示を消します。
ダッシュボードの「外観」→「テーマエディター」とクリックしてください。
難しそうなCSSという画面が出ますが、そこの一番下に以下のコードを貼り付け、「ファイルを更新」してください。

/* トップページのタイトル非表示 */
#post-●●●● h1.entry-title {
display: none;
}

コードはこちらのサイトから引用させていただきました。

Cocoonトップページのカスタマイズ【3ステップでサイト型】
「ブログの記事数が増えてきたから、Cocoonのトップページでいろんな記事を掲載したい!」「でもカスタマイズがむずかしそう…」。本記事はそんな悩みに応えます。Cocoonならトップページのサイト型へのカスタマイズは簡単です。本記事を読めば3ステップでサイト型トップページができちゃいます!

「●●●●」の部分はトップページのIDとなります。

確認方法ですが、「固定ページ」一覧を開き、右の方にある数字がそれです(下記画面参照)。

成功すれば、以下のように「トップページ」という表示が消えます。

スポンサーリンク

続いて右サイド画面の表示設定

画面右側のサイドバーにある表示の一部を表示させないようにします。
こちらはコードなど必要なく行えます。
ダッシュボードから「外観」→「ウィジェット」と進んでください。

私の場合はサイドバーに上記のウィジェットを登録しています。
※サイドバーではなく、他の場所に登録してある方はそちらを開いてください。

このうち、「カテゴリー」「最近の投稿」「人気記事」の3つがトップページと重複するため表示させないようにします(どこまで表示させるかはお好みで選択してください。別にすべて消して、スペースを作られても良いかと思います)。

表示させたくないウィジェットを選択し、下にある「表示設定」をクリック。
さらに「ページ」タブをクリックし、「トップページのみ」というところにチェックを入れてください(今は固定ページがトップ画面になっていますので、「固定ページ」の方をチェックする必要はありません)。
チェックを入れたら、「保存」し、そのあと「完了」と書いてあるところをクリックしてください。
他のウィジェットについても同様です。
サイトを表示させ、設定したものが消えていたら完成です。

最後に

長々と説明しましたが、いかがだったでしょうか?
終わってみると、意外と簡単かと思われたのでは?
「cocoon」というテーマの親切設計に私は感服しました。
ボタンや各カテゴリー名称については、色を変えたり、画像を挿入したり、いろいろいじれるようなので、好みで設定して、自分だけのオリジナルサイトをデザインして作ってみてください。
おつかれさまでした。

コメント