お久しぶりの更新。
最近気づいたことは「フリーランス」と「経営」は全く別ってこと。稼ぎたいのか自由に働きたいのか。しっかりと自分の指針を決めておくことが、フリーランスになるときに一番大切だよって伝えておきます。
さて、ここからが今日の本題。
WordPressのブロックエディタを使って記事を書いていると、ブロックのカスタマイズをしたくなることがあります。
使用するブロックにもよりますが、デフォルトの状態だとHTMLアンカーと追加CSSクラスしか設定することができない。
jsライブラリを使うためにはdata属性も持たせたい。面倒だから直接style属性でcss調整したい。そんな時に役立つ話。
「Attributes for Blocks」で全て解決
今回ご紹介するのは「Attributes for Blocks」というプラグイン。
このプラグインが何をするかっていうと、ブロックにstyle属性やdata属性など任意のHTML属性を追加することができるというもの。
デフォルトのブロックであれば、ほぼ全てのブロックに任意のHTML属性を追加することができるので、data属性やstyle属性はもちろんのこと、onClickなどを追加することもできます。
使い方
使い方はめちゃくちゃ簡単。
プラグインをインストールして有効化したら、ブロックの「高度な設定」から追加したい属性を自由に追加していくだけ。
インストール方法
WordPressの公式で配布されているプラグインなので、プラグインの追加画面から「Attributes for Blocks」と検索するか、公式サイトからzipファイルをダウンロードしてアップロードすることでインストールできます。
属性の追加方法
属性の追加方法は、追加したいブロックを選択した状態で、投稿画面の右側にあるメニューから「ブロック」の「高度な設定」を開き、属性を追加していきます。
ぱっと見だと少しわかりにくいかもしれませんが、高度な設定の中にある「追加属性」に、追加したい属性を入力して「追加」を押すことで、入力欄を追加することができます。
試しに「style属性」を追加してみます。
ちなみに、この動画も横幅がフルで表示されてしまうので、「Attributes for Blocks」を使ってstyle属性にwidth:300px;を追加しています。
今回はstyle属性を追加していますが、data属性でもonClickでもx-dataでも、HTML属性であればなんでも追加することができます。
どんなことに使えるのか
使い方については運用方法や考え方次第で無限大にあると思います。
今回は特に使用頻度の多そうなものをいくつかピックアップして紹介します。
sytle属性で圧倒的な簡易デザイン調整
例として紹介したstyle属性の追加。
style属性にcssを直接記述するのは、保守的な面でもパフォーマンス的な面でも推奨はされない方法ですが、少しだけデザインを調整したい。局所的に調整が必要。など、どうしても使用したい場面は出てきます。
また、jsで制御する部分なども直接styleを当てることもありますよね。
ブロックエディタはほぼノーコードでページを作成することができるので、できるだけテーマファイルを触りたくない場合にも使えますね。
data属性を使ってjsによる制御をする
案件や使用するjsライブラリによっては、振る舞いを変更するためにdata属性に値を持たせる必要があることもあります。
また、自作のjs関数などを動かすための識別などのためにdata属性を使うこともありますね。
alpine.jsと連携させる
この記事を書いていてふと思ったのが、alpine.jsと連携させればかなり使えそうということ。
最近とある案件でalpine.jsを使うことがあり、それ以降かなり使い倒しているのですが、アコーディオンやハンバーガーメニュー、モーダル表示などを爆速で作ることができるのでとっても重宝しています。
現状、WorpdressではデフォルトでjQueryが使われているので、alpine.jsをあえて使う必要もない・・・。のかもしれませんが、脱jQueryに向けて、こういった代替できるものに触れておくことも大切。
alpine.jsでは基本的にHTML属性にさまざまな値を持たせて、jsファイルを使わずにアコーディオンなどを作成することができます。
モーダル表示などもあらかじめグループで作ったブロックにalpine.jsの記述を追加しておけば、それをパターン登録しておくことで、オリジナルのデザインで作ったモーダル表示を、お客様がノーコードで使うこともできそう。
まだ、実装で試してみてないのですが、機会があればこれマジ試してみたい。
推奨されない使い方
使い方次第では便利に使えそうなプラグインですが、逆に推奨されない使い方としてはon系のイベントハンドラーの設定はあまり使わない方が良さそう。
プラグインの仕様という問題ではなく、そもそもonClickなどはパフォーマンス的にも保守的にも推奨されない使い方。
小規模な開発であれば・・・。といったところですが、その場合、Wordpressのプラグインを導入してまで使うのはナンセンスな気がします。
まとめ
今回はHTML属性の中でも使用頻度が高そうなものだけを紹介しましたが、実際に使えるHTML属性は本当にたくさんあります。
これを機に、どんなHTML属性があるのかみてみたいって人はMDNのページなどを参考にしてみてくださいね。
個人的にはalpineやmuuriなどのjsプラグインと組み合わせることで、お客様がノーコードでもっと自由なレイアウトの記事を作れそうってことで少しワクワクしました。
WordPressなどのCMSでWEBサイトを作る。それは、コンテンツを常に最新のものに更新していくからこそ本当の価値を作ることができます。
お客様ができるだけ負担のない形で、より良いコンテンツを更新できるように我々コーダーは構築していかなくてはいけませんね。