賢威7は初期設定ではトップページに最新記事一覧が抜粋表示されます。ゲームの攻略サイトだったら、知りたい情報にすぐにアクセスできるようにナビが必要かもしれません。その点このブログは何かを体系的に説明しているサイトでもないし、トップページは最新記事一覧でいいと思っていました。このブログは何か特定のテーマに特化したブログではなく、自分が興味あることを書いている雑記ブログ。iPhone関連の記事を読みに来ても最新記事にWordPressの記事ばかり並んでいたら、せっかく訪問してくれたのにすぐに離脱してしまうかもしれません。記事数も少し増えてきたので、ユーザーの利便性を考えてトップページをリニューアルすることにしました。トップページのリニューアルでやりたいこと雑記ブログなので読みたいカテゴリの記事にすぐにアクセスできるようにトップページを2カラムにして、カテゴリごとの記事一覧を表示させたいと思いました。トップページの上部には最新記事を5件くらい表示させようと思います。これでユーザーの利便性が良くなり、回遊性もアップすると思います。それ程トップページにアクセスはないし、同じカテゴリの関連記事が表示されればトップページを作り込む必要はないかもしれません(笑)。考えると自己満足にしかならない気もしますが、トップページを固定ページで作ってみることにしました。以下の記事は今回のリニューアルでカスタマイズした内容です。トップページのカラム数を増やすカテゴリ記事一覧を横に2つ並べたいので、カラム数を2カラムに。この時点で初心者の自分には難易度が高いですが、WordPressにはページビルダープラグインが沢山あります。ページビルダープラグインを使えば簡単操作で思い通りに記事をカスタマイズできます。このブログのテーマは賢威7。賢威7は装飾タグで簡単にカラム数を変えられるので、賢威7ならページビルダーを使わなくても実装できます。ドラッグ&ドロップするだけで記事を自由にカスタマイズできます。難しいコードを使わなくても簡単操作でカラム数を自由自在に変えられます。簡単におしゃれな固定ページが作れるページビルダーのプラグインを使ってみた賢威7の装飾タグたた、サイトの表示速度を考えるとプラグインはできるだけ使用したくありません。この点賢威7は装飾タグでカラム数を自由にいじれるので、初心者の自分でも簡単に設定できます。class="col">カテゴリ2</div></div>装飾タグを使うことで、簡単2カラムにすることができます。(※スマホ表示では2カラムになりません)カテゴリ1カテゴリ2装飾タグで2カラム表示は実装できましたが、問題はカテゴリ別の記事一覧をどのように表示させるかです。カテゴリ別記事一覧を表示させるサムネイル付きでカテゴリごとに記事4件ほどの一覧表示。これは初心者には非常に難しい(笑)。プラグインを2つ使えば簡単に実装できると思います。簡単な方法ページビルダープラグインを使い記事にウィジェットを埋め込むプラグインを使用してウィジェットにPHPを書き込めるようにするテキストウィジェットにカテゴリ一覧を呼び出すPHPをググってコピペこれなら初心者でも簡単にトップページを作り込めます。ページビルダープラグインを使用しないことにしたのでウィジェットを使用できません。調べましたが、現在の自分の知識ではカテゴリごとの記事一覧を表示させるのはやはり難しい。posts」という、カテゴリーの一覧をショートコードで表示させることができるプラグインを使用することにしました。「プラグインを使えば簡単やろ!」と思っていたのですが、そんな単純じゃないのがWordPressのおそろしいところ。デフォルトでサムネイルを表示させると、こんな表示になってしまいます。悪戦苦闘の末、サムネイルの表示位置変更とCSSで表示を整えて何とかまともに表示されるようになりました。postsの表示を整えるだけで半日以上かかりましたが(笑)、何とか形は整えることができました。postsのサムネイル画像の表示位置を変更するカスタマイズトップページのカズタマイズも重要かもしれませんが、ブログカードがアイキャッチ画像のサイズによっては大きくなりすぎてしまうのも直さないといけないかもしれません。カテゴリごとの記事一覧は課題を残しつつもまともに表示させることができたので、次はページの先頭に表示する新着記事をどのように表示させるか考えることにしました。新着記事の表示どうしようか悩んでいたのが新着記事の表示。賢威7はフロントページに固定ページを指定すると新着記事をサムネイル付きで抜粋表示できるので、テーマ付属の新着記事を利用することにしました。表示件数も「賢威の設定」で設定できるので便利なのですが、新着記事の一覧ページへのリンクがありません。賢威7のショートコードで「最新情報」を表示させれば、全記事一覧へのリンクを足すことができます。そこで新着記事の一覧ページを作ることにしました。postsをインストールしたので、1ページに表示する表示件数を決めてページネーション付きで簡単に全記事一覧を作ることはできます。posts」けれど、賢威7の抜粋記事の方が表示がきれいだと思うので、テーマ付属の記事一覧を利用することにしました。フロントページに固定ページを使い新着記事一覧を表示させるには、新着記事を表示させる固定ページを作成します。テキスト部分に何も書き込まず、記事タイトルだけを書き込み「公開」。「フロントページ」を作成したトップページに。「投稿ページ」を記事一覧用に作成した固定ページに設定すると、全記事一覧を抜粋表示させることができます。新着記事一覧も表示されるようになったので、メインメニューに新着記事へのリンクを足すことにしました。WordPressでトップページを固定ページにして新着記事も表示する方法トップページのタイトルを消すこれで「トップページも完成や!」と思ったのですが、フロントページ用に作成した固定ページの記事タイトルが表示されてしまいます。トップページに固定ページの記事タイトルが表示されるのは、見た目的にあまり良くない気がします。Seventeenではフロントページ用のPHPファイルがあるので、content-front-page.php、賢威7の場合はpage.phpを編集してフロントページのみ記事タイトルを非表示にします。トップページのタイトルを非表示にする方法-賢威7のカスタマイズトップページのカラム数トップページに最新記事とカテゴリごとの記事一覧を表示させた場合、サイドバーをどうするか悩むと思います。カテゴリごとの記事一覧を表示しているのでサイドバーはない方がいいと思い、トップページだけ1カラムにすることにしました。全ての設定が終わり「これでトップページの完成!」と思い、コーヒーを飲みながら仕事を終えた満足感に浸っていました。表示を確認したところ、おかしなことになっていることに気づきました。WordPress(カテゴリ)」→「記事タイトル」いう構造。「表示設定」で投稿ページに「新着記事」を設定して新着記事を表示させるようにしたことが原因だと思います。全ての記事のパン屑リストに「新着記事」が表示されています。URLを確認したところ、「カテゴリー/記事タイトル」となっています。階層が深くなったわけではなさそうだし、URLが変わってないので多分問題ないと思いますが、少し心配です(笑)。postsを使用することになりました。時間は物凄くかかりましたが、何とか作りたかったトップページに近づけたので良かったと思います。今日のたつじんへの一歩たつじんw問題はトップページを作ってもサイトにそれ程アクセスがないことかもしれません(笑)タグWordPress賢威この記事を書いている人たつじんwたつじんwになるために勉強したことをこのブログに書いています。必須サイト上に表示された文字を入力してください。TOPWordPressトップページのカラム数を増やしてカテゴリ別記事一覧を表示させてみたプロフィールWordPressとiPhoneが好きな標準的ではない男子(おっさん笑)です。たつじんwプロジェクトホームシェアお問合わせTOPへ。