ワードプレス内に投稿一覧ページをプラグインを使って作成！。当記事では、ブロックエディターを用いて解説します。今回は、ワードプレス内に投稿一覧ページをプラグインを使って作成！について書いていきます。
プラグインの「Spectra - WordPress Gutenberg Blocks」を使えば「投稿」「固定ページ」問わず、投稿一覧ページを作成することができます。投稿数が沢山ある場合などは便利だと思います。是非設定してみて下さい。
| 結論を先に話ししておきます |
| 「Spectra - WordPress Gutenberg Blocks」を使用すると、誰でも簡単に投稿一覧ページを作成することが簡単にできます。プラグインをインストールし有効化すると「Post Grid」と言うブロックが一覧に追加されます。
「Spectra - WordPress Gutenberg Blocks」は、高度で強力なブロックであり、Gutenbergエディターをパワーアップします。「Post Grid」を開いて、あなた好みのブロックを選択するだけで、ブログ構築の手間を省くことが可能。
Gutenberg用のユニークでクリエイティブなブロックを多数用意しています。また、1行もコードを書かずにページを構築することができ、使いやすいインターフェースとカスタムコードなしでブログを簡単に構築可能です。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、ブロックエディターの設定をしていきます。ブロックエディターとして設定されていない方は、下記の図解を参考に設定してみて下さい。図解を見ながら設定していけば直ぐに終わるかと思います。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
| 念の為書いておきますが、無理にブロックエディターに変更する必要はありません。クラシックエディターで使っていきたいと思えばそのままでも大丈夫です。 |
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。この場合「固定ページ」でも問題ありません。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えるかと思います。 |
【投稿一覧内の編集】
この章でも、図解を用いながら解説していきます。冒頭でも記載しているように、投稿一覧を設定するには、プラグインの「Spectra - WordPress Gutenberg Blocks」をインストールし有効化しなければなりません。
| 投稿一覧ページを作成するには |
|
- では初めていきましょう。下記の図解は、プラグインの新規画面です。「赤色枠」で囲まれているボックス内に「プラグイン名」を入力しましょう。次の図解を参照。
- 次に「緑色枠」で囲まれているボックス内に「Spectra」もしくは「Spectra - WordPress Gutenberg Blocks」と入力して下さい。すると「黄色枠」で囲まれているようなものが左上の方に表示されます。
そのまま「オレンジ色枠」で囲まれている「今すぐインストール」を押して下さい。
- 今すぐインストールが終わると「水色枠」で囲まれている「Activate」もしくは「有効化」が表示されるのでそのまま押して下さい。
- 「Activate」もしくは「有効化」が終わると、下記のような画面に切り替わります。その画面は閉じて頂いても問題ありません。
- 次に「投稿」もしくは「固定ページ」のどちらでも構わないので、新規追加を開いて下さい。すると下記のような画面が開きます。次に「オレンジ色枠」で囲まれている「+」を押してみましょう。
- +を開くと、ブロック一覧が表示され、その中の「紫色枠」で囲まれている「Post Grid」を開いてみましょう。
- すると、投稿してきた順番に対し「投稿一覧」が表示されるようになります。
- では一度「紫色枠」で囲まれている「プレビュー」を押して、プレビューで見てみましょう。すると「桃色枠」で囲まれているプルダウンが開くので、その中の「新しいタブでプレビュー」を押してみましょう。
- トップページから見た感じです。横3列で並んでいることが分かります。
| 上記の画面では、横3列となっていますが、3列以外でも勿論変更することは可能です。次の章から、投稿一覧「一般内の変更」について書いていきます。 |
【投稿一覧「一般内の変更」】
この章から、投稿一覧「一般内の変更」について解説していきます。「一般内の変更」については、少しややこしいかも知れませんが、使い方に慣れてくれば操作性もしやすくなると思います。
| Post Gridについて |
| Post Grid内にあるブロックの中には「一般」「スタイル」「高度な設定」などがあります。「高度な設定」については、触る必要はありません。 |
一般設定
一般設定の中には「General」「Pagination」「Image」「Content」「Read More Link」における5項目の設定箇所があります。各箇所の設定をおこなうことで、投稿一覧に表示される見方が変わってきます。
- 一般設定の中の「General」→「Text Alignment」を見ていきましょう。「赤色枠」で囲まれている「枠内」を選択後「黄色枠」で囲まれている「一般」が開き「緑色枠」で囲まれている「General」を開きます。
- Generalを開き「紫色枠」で囲まれている箇所を選択すると「水色枠」で囲まれた枠内の表示が「左寄せ」になっていることが分かるかと思います。
- 次に「オレンジ色枠」で囲まれている箇所を選択すると「桃色枠」で囲まれた枠内の表示が「中央寄せ」になりました。
- 次に「水色枠」で囲まれている箇所を選択すると「黄色枠」で囲まれた枠内の表示が「右寄せ」になりました。
| ここまでが「General」→「Text Alignment」で「左寄せ」「中央寄せ」「右寄せ」のやり方についての解説でした。次は「Posts Per Page」を見ていきましょう。 |
- 次に「General」→「Posts Per Page」を見ていきましょう。下記の図解では、1列に対し、3つの投稿がされている状態です。では「オレンジ色枠」で囲まれているプルダウンで「6」に変更してみましょう。
- すると、その下にも同じように3つの投稿がされました。では「オレンジ色枠」で囲まれているプルダウンで今度は「9」に変更してみましょう。
- すると、その下にも同じように3つの投稿がされました。
| 上記、いずれかの状態でプレビューして、どのような状態か確認して見て下さい。次は、新しい項目で「Pagination」の中の「Pagination Alignment」を見ていきましょう。現時点で「Pagination」の項目がない場合「General」の中にある「Post Pagination」の中のボタンを「ON」にし「Page Limit」のスライドを横に移動し「10」ぐらいまで数字を表示させて下さい。 |
- 次の項目で「Pagination」を開きましょう。「オレンジ色枠」で囲まれている「左寄せ」のボタンを押すと「桃色枠」で囲まれているように「ページ覧が左寄せ」になっています。
- 次に「緑色枠」で囲まれている「中央寄せ」のボタンを押してみましょう。すると「オレンジ色枠」で囲まれているように「ページ覧が中央寄せ」になりました。
- 次に「紫色枠」で囲まれている「右寄せ」のボタンを押してみましょう。すると「黄色枠」で囲まれているように「ページ覧が右寄せ」になりました。
| 上記、いずれかの状態でプレビューして、どのような状態か確認して見て下さい。次は、新しい項目で「Image」の中の「Show Featured Image」を見ていきましょう。 |
- では「黄色枠」で囲まれている「アイキャッチ画像」を表示させない設定にしてみましょう。「赤色枠」で囲まれているボタンを押してみて下さい。
- すると、表示されていたアイキャッチ画像が表示されなくなりました。その右側にある「紫色枠」で囲まれているボタンも色が変わっていることが分かります。
| 上記、いずれかの状態でプレビューして、どのような状態か確認して見て下さい。次は、新しい項目で「Content」の中の「Show Title」を見ていきましょう。 |
- 次は「紫色枠」で囲まれている「タイトル名」を非表示にさせてみましょう。「赤色枠」で囲まれているボタンを押します。
- すると、上記の図解と見比べても分かる通り、タイトル名が非表示になっていることが分かるかと思います。その際「桃色枠」で囲まれている「ボタン」の色も変更されています。
| 上記、いずれかの状態でプレビューして、どのような状態か確認して見て下さい。次は、新しい項目で最後の設定となります。「Read More Link」の中の「Show Read More Link」を見ていきましょう。 |
- 次に「黄色枠」で囲まれている「続きを読むリンク」を非表示にしてみたいと思います。「緑色枠」で囲まれているボタンを押して下さい。
- すると、続きを読むリンクが非表示になっていることが分かります。その際「オレンジ色枠」で囲まれている「ボタン」の色も変更されています。
| 上記、いずれかの状態でプレビューして、どのような状態か確認して見て下さい。一般設定内に於いて、省略している箇所もありますが、ご自分でやってみて下さい。 |
今回は以上となります。ワードプレス内に投稿一覧ページをプラグインを使って作成！については理解して頂けたでしょうか。いろいろとご自分で触ってみないと覚えられないので頑張って覚えましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
