7ヶ月前に投稿

カスタムブロックを追加してみた

2019年1月25日

この記事は約 3 分で読めます。

4

はじめに

いずれは
カスタムブロック開発を
目指してみたいが、
ちょっと敷居が高いな・・と思い、

だけどコンプリート
されたものじゃなく
カスタマイズも
ちょっとは試したいと
思って調べたら
よいものがありました。

今回は導入までを
記事にします。

最終的にこうなります

最終的には
アイキャッチ画像のような
状態
を目指します。

  • オリジナル (4to6 Blocks) のカテゴリー
  • Dashicons の変更と追加 (layout & carrot)
  • 記事とエディタの両方にスタイルを充てる

こんなカスタムブロックになります。

とりあえず
カスタムブロックを
試してみましょう。
この段落はカスタムブロックで
書いたものです。

gutenberg-examples をダウンロード

https://github.com/WordPress/gutenberg-examples に行き、
以下に従ってダウンロードします。
これが WordPress のプラグインとして扱われます。

下記にもあるように
GitHubボタンからは絶対ダウンロードしないでください。

Gutenberg Examples are distributed as WordPress plugin.
Download a pre-built zip archive of the latest release. Do not download from the “Clone or download" GitHub button, as this includes the source material only. Read the Development instructions below if you’re interested in building your own copy of the plugin.

GitHub – WordPress/gutenberg-examples: Examples for extending …

グーテンベルクの例はWordPressプラグインとして配布されています。
最新リリースのビルド済みzipアーカイブをダウンロードしてください。
「クローン作成またはダウンロード」GitHubボタンからダウンロードしないでください。

gutenberg-examples.zip をダウンロードしたら
以下に従いプラグインとしてインストールして下さい。

  1. WordPress管理ダッシュボードの[プラグイン]> [プラグインを追加]に移動します。
  2. ページ上部の[新規追加]をクリックします。
  3. ページ上部の[Upload Plugin]をクリックします。
  4. [ファイルを選択]をクリックし、ダウンロードしたzipファイルを見つけてアップロードします。
  5. プラグインのインストールが完了したら、[有効にする]をクリックします。
  6. これで終わりです。

投稿画面のブロックの追加を開き
レイアウト要素を見ると
カスタムブロックが追加されています。

次回は

次回は最終的な
アイキャッチ画像のような
状態を目指します。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
カスタムブロックを追加してみた