Lazy Blocksの使い方・WordPressでカスタムブロックが作れるプラグイン
WordPressのブロックエディターで、独自のカスタムブロックを作れるプラグイン、Lazy Blocksを使ってみたのでレビューします。
カスタムブロックの作り方
まずは管理画面の「プラグイン」→「新規追加」からプラグインの検索で「Lazy Blocks」と検索して「Custom Blocks Constructor-Lazy Blocks」の「今すぐインストール」ボタンを押してインストール、「有効化」します。
有効化したら、左メニューに「Lazy Blocks」のメニューが出来ているので選択。
ブロックの「新規投稿を追加」ボタンを押して新しいブロックを追加します。
あらかじめ入っているサンプルブロックを見ると使い方の役に立ちました。
新規投稿を追加したら、編集画面でタイトルを入力します。ここは自分が分かれば何でも良いので「テストのURL」にしました。
タイトルを入力したら「Content Controls」をクリックしてカテゴリーを追加します。
右側のパネルが表示されるので、項目を入力していきます。
SLUGはカスタムブロックを表示するURLなので、半角英数字で入力。ここでは「buttun-url」。
CATEGORYはどのブロックカテゴリーに表示させたいかを選択します。ここでは一番上に表示される「テキスト」にしました。
DESCRIPTIONは説明文なので「テストのボタン」にしておきました。
次に実際のブロックを追加します。中央の「+」プラスボタンをクリックして追加。
右側のパネル項目を埋めて行きます。
LABELはカスタムブロックに表示される名前です。「テストのボタン」にしました。
NAMEはURLの名前部分です。「button-url」とカテゴリーで付けた名前と合わせておきます。
TYPEは、今回はURLのブロックを追加するので「URL」を選択。
Codeについて
画面下をスクロールして、Codeの項目からカスタムブロックを出力するタグを入れます。
今回はPHPの項目を選択して、HTMLのタグの中にPHPを入れて、先ほど作った「button-url」を入力します。
実際に書き込んだタグ。echo esc_urlリンクタグで、attributesで作ったカスタムブロックの名称を囲むとうまくいきました。
- <p class="test-button">
- <a href="<?php echo esc_url( $attributes['button-url'] ); ?>" target="_blank">
- <i class="fas fa-link"></i>
- テストのボタン <i class="fas fa-external-link-alt"></i>
- </a>
- </p>
完成したら、右上の「公開」ボタンを押して、ようやくカスタムブロックの完成です。
こんな感じでURLだけでなく、画像や他のカスタムブロックも作成できます。
カスタムブロックは出来たので、実際の投稿ページか固定ページを開いてブロックを追加すると、先ほど作ったカスタムブロックが表示されています。
カスタムブロックを追加したところ。URLの入力欄が表示されるので、リンクさせたいURLを入力すれば完成です。
まとめ
最初はどこがどの部分になるのかよく分かりませんでしたが、触っていくうちに少しずつ理解してきました。PHP別ファイルを用意する必要もなく、管理画面の中だけでカスタムブロックが作れるのはすごく便利でした。
[公開日] 2024年10月31日 / カテゴリー:WordPress
同じカテゴリーの記事
-
WordPressを多言語化する簡単プラグイン!GTranslateの使い方
日本語だけでなく多言語化したホームページを作る場合、手動だと2つサイトを作らないといけないので時間も手間もかかります。 [続きを読む]
-
WordPressはテーマカスタマイズかオリジナルテーマ制作かの判断基準
WordPressがグーテンベルクのブロックエディターというものになってから、ホームページの制作は誰でも簡単に作れるよう [続きを読む]
-
TwentyTwentyのWordPressテーマの横幅を変更する・初心者も簡単!
WordPressのデフォルトテーマ、TwentyTwentyテーマはシンプルなデザインで使い勝手が良さそうなのですが、 [続きを読む]
-
WordPressのプラグインを多用するリスクと対策
先日、WordPressで作ったサイトのバックアップと、ヘッダー画像を差し替えたいとのご相談があったのですが、 サイトを [続きを読む]
最新の投稿
2024年10月31日
2024年10月31日
2024年10月17日
2024年10月02日
2024年09月27日