【第27回】Ishikawa WordPress Meetup｜ Lazy Blocksプラグインを使ってページ内にメニュー&ループスライダーを実装してみた話

Details

【第26回】Ishikawa WordPress Meetup｜ハイブリッド開催｜ Lazy Blocksプラグインを使ってページ内にメニュー&ループスライダーを実装してみた話

今回はカスタムフィールドのブロックを作成出来るプラグインLazy Blocksを使い、ページ独自のハンバーガーメニューの作成やおしゃれな無限ループスライダーを設置した例を紹介し、その作り方をご紹介します。
※実案件の為、クラシックテーマを利用しての解説です。

【今回作るデモ】
https://test01.website-sample.net/slider-sample/

このイベントに参加すると、

・お客様も編集できるメニューが作成できるようになります。
・メニューのアイコンの色や背景色も変えられます。
・Lazy Blocksを使って繰り返しコンテンツを作成、表示する方法が分かります。
・実際のコードもお渡しします。
・Lazy Blocksのエクスポート、インポート、エディター画面での入力方法などが分かります。

※ループスライダーやハンバーガーメニューのスライドアニメーションはJavaScriptやCSSの知識が必要となります。

最近はパターンを使ってページを作成することも増えてきましたが、どうしてもアニメーションなどが絡むと、追加・削除箇所を間違えて崩れがちになってしまいます。

そんな時はカスタムフィールドのような入力欄の方が安心。

Lazy Blocksを使用するとカスタムフィールドのブロックを作成できるようになりますので、今回のイベントを是非カスタマイズの幅を広げることに使って頂けますと幸いです。

◾️イベント参加にあたっての事前準備

・カスタマイズ可能なワードプレスサイト
・Lazy Blocksプラグインのインストール&有効化
https://ja.wordpress.org/plugins/lazy-blocks/
・ブロックエディター（※クラシックエディターではご利用頂けません。）

【イベントスケジュール】=================

■9:30～　WordPress Meetupについてのご紹介
WordPress Meetupについての紹介を行います。

■9:35～　自己紹介
イベントスタート。
まずは参加者の方に自己紹介をお願いしています。
お1人あたり1分くらいで自己紹介して頂きます。
【自己紹介内容】
・お名前
・今回の勉強会に参加した理由や知りたいこと
・何か話したい内容がありましたらお気軽にお話しください

■9:50～　生成AIでプラグインを作成してみよう
⓪Lazy Blocksで作るものの紹介
①今回作りたいものの説明
②入力欄の作成と表示
③CSSや必要JavaScriptのご紹介
④ブロックエディターでの入力
⑤表示確認
⑥エクスポート・インポートについて

■10:50～　休憩

■11:00～　質問&雑談タイム