1. Home
  2. /
  3. Gutenberg
  4. /
  5. ブロックパターンを管理・編集できる「VK Block Patterns」
Gutenberg

ブロックパターンを管理・編集できる「VK Block Patterns」

ブロックパターンを管理・編集できる「VK Block Patterns」
  • 同じブロックの組み合わせを簡単に使いまわしたい!
  • WordPressのデフォルトブロックは使いたくない!
  • Gutenbergでもっと効率的に記事を書きたい!

こういった疑問にお答えします。

Lightning G3 Pro Pack(アップデート期間1年)

Gutenberg歴はリリース日から始まった

Gutenberg Editor

Gutenbergはリリース時から使用しています。

今ではクラシックエディタよりもGutenbergの方が好きになってます。

WordPressの編集を効率的にするVK Block Patterns プラグインについて解説します。

そらまめ

WordPress歴10年以上です。ブロックエディタ好き。テーマはJINとLightning、Cocoonを使ってます。テーマやプラグインなどを試して使ってみるのが好きです。

VK Block Patterns プラグインをオススメする理由

VK Block Patterns

数あるプラグインの中で、VK Block Patterns がおすすめです。
その理由は、

  1. 開発は有名テーマを制作している信頼できる会社
  2. 簡単に自分で作ったブロックパターンを登録することができる
  3. ブロックパターン作成画面がGutenbergと同じ
  4. 複雑な設定項目はなし
  5. カテゴリー分けできる
  6. 記事本文への挿入は、Gutenberg標準のブロックパターンと同じ

だからです。

1.開発は個人よりも会社の方が安心できる

このプラグインは、有料テーマ「Lightning Pro」の開発会社Vektor,Inc. がリリースしたプラグインです。

この VK Block Patterns プラグイン自体は無料ですが、有料テーマと併せて開発されていることもあり、品質も高く、なにか不具合があったときなどは、無料プラグインよりも丁寧に対応してもらうことができます。

2.簡単に自分で作ったブロックパターンを登録できる

このプラグインは、Gutenberg のブロックエディタ画面と同じ操作ですぐにブロックパターンを登録することができます。

3.編集画面がGutenberg記事作成画面と同じで使いやすい

vkblockpatternsの編集画面
編集画面は通常記事作成と同じ

VK Block Patterns プラグインのブロック作成時画面は、Gutenbergで記事を作成する画面と同じです。

プラグインによっては、オリジナルの設定画面であったり、細かすぎる設定などあるけれど、このプラグインはとっても簡単にできています。

4.複雑なプラグイン設定項目は無し

このプラグインはリリースしたばかりなのもありますが、現在は必要最小限度のことだけができるようになってます。

できること
  • プロックパターンの登録・編集・削除
  • カテゴリー登録できる
  • 登録の権限設定ができる(チームで利用する時に便利)

バージョンアップでできることがこれから増えるかもしれませんね。

例えば、デフォルトのWordPressのブロックパターンを非表示にするとか。

5.カテゴリー分けができる

作成したブロックは、管理画面でカテゴリーに分かることができます。

記事を作成するときには、作成したカテゴリーの中から挿入するブロックを選べます。

6.記事本文への挿入は、Gutenberg標準のブロックパターンと同じ

ブロックパターンの挿入もGutenbergのそれと同じです。

特別なウインドウを用意したりはしてありません。

つまり、Gutenbergの使い方に慣れていれば特に覚えることはないのです。

沢山パターンがあると選べるし楽だけど?

このプラグインは、その他のプラグインと比べて予め用意してあるパターンがありません。


沢山パターンがあっても実際に使用するのはごくわずかです。

予め沢山用意してあるパターンも全部使用するとは限りません。

パターンが沢山あるプラグインは参考になるかもしれませんが、使わないものがズラッと並ぶのも不便です。

可能なら似たようなのを自分で作成して登録したほうがスッキリして良いですね。

「VK Block Patterns」のインストールと使用方法

まずWordPressにインストールしましょう。

公式サイト
ブロックパターンを作成・登録できるプラグインを公開しました。

インストール

1.プラグインの検索画面へ、VK Block Patternsと入力する

プラグインをインストールする

2.表示されたプラグインを選択してインストールする

プラグインをインストールする2

3.インストールが終了したら有効化する

ブロックパターンの使用例

例えば、JINには公式サイトへのブログカードがありません。

色々な表現方法がありますが、私はこのような形にしてます。

とっても簡単ですよね。

このボックスを入力する手順を書き出してみます。

通常のブロック操作
  1. ブロックの+をクリックして、見出しつきボックスを選択する
  2. 右側のプロパティからボックスデザイン「細線背景色付きボックス」を選択する
  3. 公式サイトと入力する
  4. ボックス内に文字列を入力する
  5. リンクを設定する
  6. 上に改行を入れる
  7. 下にレスポンシブスペーサーを入れる

7手順あります。

慣れるとそれほど手間ではないかもしれません。

ブロックパターンを登録した場合は、

ブロックパターンを登録した場合
  1. 左上の+を押して、パターンタブを選択し、ブロックを選ぶ
  2. ボックス内に文字列を入力する
  3. リンクを設定する

と3手順まで少なくすることができます。

一つ一つの時間は大したことありませんが、積み重なるとどうでしょう?

では、実際にパターンの作り方をご説明します。

パターンの作り方

1.左列メニューから、【VKブロックパターン】へマウスオーバー。

vkblockpatternsの使い方

2.【新規追加】をクリック

vkblockpatternsの使い方2
タイトルを入力します

3.タイトルを入力し、パターンを作成する

vkblockpatternsの使い方3
※空白がわかりやすいようにしてあります

4.出来上がったら保存する(カテゴリーは登録してもしなくても良い)

パターンの使い方

1.パターンを使いたいところでブロックを作成する

2.左上の+を押して、パターンタブを選択し、パターンブロックを選ぶ

vkblockpatternsの使い方4

パターンの編集

1.左列メニューから、【VKブロックパターン】をクリック

vkblockpatternsの使い方5

2.編集画面から編集したいブロックパターンを選択する

vkblockpatternsの使い方6

3.ブロックパターンを修正したら更新・保存する

どうしてもブロックパターンが欲しい方

Lightning G3

予め登録されたブロックパターン集が欲しい場合は、このプラグインを販売している Vektor,Inc. 社のテーマ、Lightning G3 のような、有料テーマを選択するのも一考です。

Lightning G3 は、このブロックパターンを使ったらサイトがすぐに作れちゃうのでは?というくらい、ブロックパターンが充実しています(逆に多すぎてどうするかと悩むくらい)

ブロックパターンを自分であれこれ悩んで作るのも楽しいですが、時間がかかるのが難。それならば、予め用意してあるのを使って自分用に変更するか、そこから学んでオリジナルを作れます。

または、フリーで提供されているものを使うのも良いでしょう。

Liquid blocks

Liquid Blocks は、有名有料テーマを開発されている会社が作ったプラグイン。

Liquid は、いくつかのパターンが予め登録してあるプラグインです。

実際に使用してみましたが、デザインも綺麗です。

パターンが思いつかない、始めたばかり、という方には便利です。

ただし、最終的にはご自分で調整をする必要がでてきます。

自分でブロックパターンを作ってプラグインにしたい人

VK Block Pattern Plugin Generator

自分が作ったかっこいいブロックパターンを、手軽に他のサイトにも利用したり、商品として販売したりしたくないですか?

それを実現させるプラグインが、 VK Block Pattern Plugin Generator です。

このプラグインを利用すると、自分が作ったブロックパターンをプラグインにして配布することができます。

特徴
  • 今のスタイルを別のテーマ、別ブログへ流用できる(テーマオリジナルCSSなどの場合は、反映されない場合がある)
  • プラグイン管理なので、修正などもプラグイン更新で簡単にできる。
  • 素敵なデザインができたら販売も可能!

このブロックパターンプラグインは使わなくてもよい?

ここまで書いておいて何を言っているんだと言われそうだけど。

そらまめ

ぶっちゃけ、使わなくてもブログは書けます😅

ですが、ある程度ブログ記事を積み重ねると、決まったパターンが出来上がります

例えば、見出しや画像の上下には空白ブロックが欲しいとか。

レイアウトブロックの設定を毎回するのが面倒くさいとか。

そんなとき、ブロックを上下に追加するだけだけど、パターンに登録しておけば何度も同じ作業をする必要はなくなります

パターンに登録するまでもない、すぐにできるものであれば、ショートカットでどんどん入力したほうが早いです

自分が書くことに集中するために、なるべくブロック操作の手間は省きたいですね。

ブロックパターン以外に効率的に編集する方法

ずばり、マークダウンとキーボードショートカットを覚えること、です!

なぜなら、キーボードからなるべく手を離さずに入力できるショートカットは、慣れるとスピードが段違いに早くなるからです。

マークダウンとは

マークダウン(Markdown)は、文章を書く時の一つの記述方法のことです。

キーボードショートカットとは

コピー、ペースト、保存などキーボードを使ったショートカットを覚えている人は多いはず。

WordPressでも便利に使えるショートカットがあります。

ショートカットを覚えるコツ

ショートカットを沢山覚える必要はありません。

あなたが作業をしている時に、何度も何度も繰り返しする作業がきっと出てきます

その時に、ぜひショートカットはどうするのだろう?と思ってください

もしその操作を実現するショートカットがあれば、あなたの作業時間は飛躍的に短縮されるはずです。

ショートカットを登録できるキーボードやマウスなどを利用するのも良いですね!

ブロックパターン、ショートカット、Markdownを覚えるとWordPressの編集が楽になります。

silhouette photo of woman against during golden hour
Photo by Jill Wellington on Pexels.com

WordPressがGutenbergエディタになって、当初は否定的な目で見られていました。

さらに、WordPress5.5では追加で変更が行われました。

前はHTMLとCSSを意識しないと書けなかったブログを、完全にHTMLとCSSから切り離して考えて作る方法にしたい、というのがWordPressの戦略。

ブロックは、どちらかと言えばデザインの上に文章を載せるイメージです。

しかし、それをするといつまでも記事が終わりません。

オススメは、しっかりと記事を書き、それから少し手間だけどブロックを入れ替えていく、という手法です。

まとめ

notebook
Photo by Suzy Hazelwood on Pexels.com

いかがでしたか?

ブロックパターンは、新しい入力補助ツールとして活用できるポテンシャルを秘めていると思います。

分類したり並べ替えたりすることができないので、まだまだ使い勝手がよくないかもしれません。

慣れなければPCに保存して都度コピペして使うのも良いと思います。

良いブロックパターンができたらぜひ保存して活用してくださいね。

WordPressを体系的に学ぶなら

インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。

Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。

udemy

時々セールをするので、その時が狙い目!

 

そのほかにも沢山ありますよ♪

PAGE TOP