Gutenberg Post Blocksの使い方と設定
Gutenberg に投稿一覧をリスト・グリッド・スライダー形式で表示できるブロックを追加できる WordPress 用プラグインの紹介です。
それは「Gutenberg Post Blocks」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Gutenberg Post Blocks
Gutenberg Post Blocks は、Gutenberg に投稿一覧をリスト・グリッド・スライダー形式で表示できるブロックを追加します。
Gutenberg Post Blocks の主な機能は、以下のとおりです。
- 3 種類の投稿リストブロック搭載
- 4 種類の投稿グリッドブロック搭載
- アニメーション付きの投稿スライダーブロック搭載
- 各ブロック内にカテゴリとタグフィルター機能搭載
- ブロックでの Google フォントのサポート
- ブロックでの SVG カスタムアイコンのサポート
- 見出し・画像・ラッパーブロックも搭載
各ブロックの概要は、以下のとおりです。
- 投稿リスト＃1：投稿のリストを大きな画像デザインで表示します。
- 投稿リスト＃2：最初の投稿を太字のデザインで表示します。
- 投稿リスト＃3：サイドイメージデザインを使用して投稿のリストを表示します。
- グリッド＃1：一番大きな画像で投稿をグリッド表示します。
- グリッド＃2：グラデーションオーバーレイスタイルで投稿をグリッド表示します。
- グリッド＃3：ブロックの上部にボールドなデザインのグラデーショングで投稿をグリッド表示します。
- グリッド＃4：ブロックの左側にボールドなデザインのグラデーショングで投稿をグリッド表示します。
- 投稿スライダー＃1：投稿の動的スライダーを表示します。
- 見出し：多くの既成のデザインを含む特定のセクションの見出しを表示します。
- 画像：多くのスタイル、ボタン、オーバーレイで画像を表示します。
色を設定する項目があるので、よく使う色があるのであれば、
色を一元管理できるプラグイン「Central Color Palette」があると便利かも。
Central Color Palette の使い方 – WordPress 活用術
記事を作成もしくは更新時点でのバージョン：1.1.7
インストール手順
Gutenberg Post Blocks をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Gutenberg Post Blocks – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Gutenberg Post Blocks」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Gutenberg Post Blocks を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
管理画面の「設定」メニューの下に追加されています。
使い方
Gutenberg エディターで投稿を開きます。
専用のセクションが追加されています。
セクションを開くと専用ブロックがあります。
Post List #1
デザインは、4 種類のレイアウトが用意されています。
Setting
設定項目がセクション毎に分類されています。
一般
Query
見出し
Pagination
画像
Content Wrap
タイトル
Meta
カテゴリー
抜粋
Read More
区切り
高度な設定
一般
Custom CSS
Post List #2
Post List #3
Post Slider #1
Post Grid #1
Post Grid #2
Post Grid #3
Post Grid #4
Heading
Image
Wrapper
設定
