【Block Lab】コピペでOK!色切り替えのできるPointブロックを作ろう

eye catch point block

先日の記事でこんなのを書きました。

sample: point block
メリット・デメリットを紹介している箇所

このメリット・デメリットを書く欄をBlock Labを使用して作成しているのですが、赤と青が違うだけで別のカスタムブロック(オリジナルのGutenbergブロックの事)を作るのなんて面倒臭いですよね…

という事で、今回はこれを一つのカスタムブロックで色を切り替えできるように作ってみました!

この時のPHP, CSSファイルを公開します。

BlockLabでこういうのを作りたい方は、ぜひ使ってみてください!

完成形

完成品は冒頭の画像の通りで、入力欄は以下のようになっています。

Point block editing screen
実際の入力画面

タイトルとテキストは普通に入力できて、「color」欄でREDかBLUEを選択できるようにしています。

こうすれば何かと使い勝手が良いですよね!

ちなみに名前は「PointBlok」と名づけました。以降はこの名前で呼びますね!

事前知識

冒頭でも言いましたが、今回のカスタムブロックは「Block Lab」というプラグインを使って作成しています。

以下の記事で基本的な使い方は解説していますので、今回は割愛しますね。

これからBlocl Labを使い始める方は先にこちらを読んでください!

Block LabはWordPressの新しいエディタGutengergにカスタムブロックを追加する事ができるプラグインです。当サイトではBlock Labを使って、さまざまな目的に合ったカスタムブロックの作り方を紹介しています。[…]

eyecatch_blocklab

作り方

それでは早速作っていきましょう!

BlockLabの設定

まずはBlockLabの設定画面はこのように入力してください。

タイトルとSlug(ファイル名になる)はこちら

  • Title: PointBox
  • Slug: box-point-color(設定画面の右側に入力欄があります)

続いてFieldはこちら。

・Field 1. Title領域

title field
Titleフィールドの設定

・Field 2. 主テキスト領域

textarea field
Textフィールドの設定

・Field 3. 色選択

color field
colorフィールドの設定

あとの部分はお好きなように入力し、保存してください。

PHP, CSSの記述

BlockLabの設定ができたら、次はPHP, CSSの記述です!

本来こちらは最も難しい所ですが、今回はコピペでOK!

以下をコピーして、適切な箇所にファイルを配置してください。

・ bloc-point-color.php

・bloc-point-color.css

これで完成です!

使ってみる

それでは使ってみましょう!

using point box
PointBoxに入力する

タイトル、テキストを入力し、colorはBLUEにすると…

point box result screen
PointBoxの完成!

青色のボックスになりました!

まとめ

これでPointBoxの完成です!

BlockLabの基本的な使い方をマスターした人だったら、10分もかからず出来てしまうんじゃないかなと思います。

PHPもCSSもできない筆者が頑張って書いたコードです。
ぜひ使ってくださいね!

沢山使ってくれると筆者が報われますよ

使ってくれた事教えてくれたら更に喜びます…!!

今回の記事について、もし不明点があればコメント欄にてお問い合わせください。

TwitterのDMも受け付けていますので、お気軽にご連絡くださいね。

 

最後まで読んでいただき
ありがとうございます!

ブログに関する悩みはいつでもご相談くださいね!

 

\ Twitterのブログ仲間を募集中です/
⇒Twitterを見てみる

 

<スポンサーリンク>