【#iPadでWordPress】ブログの顔。「yStandard」でサイト型トップページを制作・設定する方法。

【#iPadでWordPress】ブログの顔。「yStandard」でサイト型トップページを制作・設定する方法。

2020-08-15
iPad

自分だけのトップページに。

ずっと憧れていたサイト型トップページ。

入り口は記事ページであることがほとんどですが、そうは言ってもブログの顔はトップページ。

リニューアルで一番悩んだのが、このトップページの作り方でした。

一から作るわけでは無いとはいえ、オリジナリティーのあるトップページにするには面倒で時間がかかってしまう作業が必須。

ですが、リニューアルで使った「yStandard」とプラグインの「yStandard Blocks」を駆使すれば、PHPファイルを書き換えるような面倒なことをせずともトップページを簡単に作れる。

今回は「yStandard」を使った、サイト型トップページの設定方法を紹介していきます。

また、サイト型トップページを設定するだけであれば他のテーマでも同じ方法で変更できるので参考にしてみて下さい。

スポンサーリンク

サイト型トップページを制作・設定する方法。

設定の流れは、

  1. 固定ページでトップページを作る。
  2. 同様に記事一覧ページを作る。
  3. それぞれのページを割り当てる。

この3工程です。

1-フロントページを作る。

まずは、ブログの顔となるトップページを作っていきます。

固定ページから「新規追加」でページを追加し、タイトルを付けます。

このページはyStandardのオプション機能で、ページ属性のテンプレートを「投稿ヘッダーなし1カラム(ワイド)」投稿オプションで広告や目次など全てを「非表示」に設定します。

あとはこの固定ページにコンテンツを並べる作業。

ブロックエディターを使い、画像を配置したり、yStandardのショートコードを使いながら表示させたい記事を入れ込んでいきます。

「yStandard Blocks」という純正プラグインを使うと簡単に思い通りのページに仕上がります。

セクションブロックなどを使い背景画像や背景色の変更、「カスタム見出し」でデザインを行いました。

2-記事一覧ページを作る。

今までトップページだった「記事一覧」ページが無くなってしまうと困るので、新たに作っていきます。

トップページ同様、固定ページの「新規追加」から。

これはタイトルを決めるだけ。今回は『記事一覧』としました。

ここで決めるタイトルは、パンくずリストに表示されます。

中身は空っぽのままでOKです。

この時にパーマリンクも設定しておきましょう。分かりやすいよう「allpost」とかでいいと思います。

記事一覧のページはこれで完成。

3-それぞれのページを割り当てる。

この2つの固定ページを作ったらあとはそれぞれを割り当てていきます。

WordPressダッシュボードから「設定」→「表示設定」を開きます。

「ホームページの表示」の項目が「最新の投稿」になっていると思うので、「固定ページ」に変更。

「ホームページ」に先ほどトップページ用に作った固定ページの『HOME』を、

「投稿ページ」に『記事一覧』の固定ページを選択。

固定ページ一覧をみると『HOME』にフロントページが、『記事一覧』に投稿ページが割り当てられているはずです。

これでブログにアクセスすれば『HOME』の固定ページがトップページとして表示されるようになります。

yStandardには「カスタマイズ」項目に設定が用意されているのでそちらからでも大丈夫です。

他のテーマでも用意されている場合があるので「カスタマイズ」から探してみてください。

ブログの顔。トップページを設定する。

僕は一度、WordPressテーマを自作したことがあるのですが、この作業はとてつもなく面倒で時間がかかる。

トップページだけを作る場合も、PHPファイルを書き換えてCSSも書き足していかなくてはいけないので、なかなか腰が上がりませんでした。

今回使った無料テーマ「yStandard」そして、プラグイン「yStandard Blocks」のおかげで、簡単に自分らしいトップページを作ることができました。

他のテーマを使っている人も同様の設定方法で、サイト型トップページに変更できるので参考にしてもらえると嬉しいです。