使いこなすと無敵！SWELLのブログパーツがヤバいことに気が付いた
SWELLにはブログパーツという他のテーマに無い機能があります。
SWELLのカスタマイズ記事で、ブログパーツを使ったカスタマイズをよく見かけるので、ご存知の方も多いでしょう。
SWELLのブログパーツとは？
SWELLのブログパーツというのは特に新しいものではなく、WordPressの再利用ブロックの別名です。
WordPressの再利用ブロックを実際に使ってみると、なんか使いにくい！と感じる人が多いと思いますが、その使いにくさを解消しているのがSWELLのブログパーツという機能です。
SWELLのブログパーツは、再利用ブロックにショートコードを割り当てたり、記事内でブログパーツとして直接呼び出せることに特徴があります。
他のテーマでもプラグインを導入すればブログパーツと同じことが実現できます。
ブログパーツを使うとウィジェットが簡単に作れる
SWELLのブログパーツを使って、ウィジェットエリアにブログパーツのショートコードを置くというカスタマイズをよく見かけます。
Classic widget＋ショートコードという方法は、なんか古臭いカスタマイズだなと言うのが私の感想でした。
しかし、違いました。
FSE対応のために、ウィジェット領域はブロックを配置する方法に変わりつつあります。
しかし、今のUIだとブロックウィジェットは正直使いにくいです。
でも、ブロックをウィジェットに配置することでClassic widgetに無い機能をコードを書かずに実現出来ます。
Classic widgetとは？
最新のWordpress（WordPress 5.9 以降）ではウィジェットエリアにブロックを配置するように変更されました。
SWELLではテーマを有効化するだけで以前のClassicウィジェットが有効になるようになっています。
しばらくの間、ブロックウィジェットは強制オフにして様子見しようと思います。
https://swell-theme.com/news/8211/
SWELLユーザーは、Classic Widgetsプラグインを入れた時と同じ状態になるのが初期状態です。
Classic widgetに無い機能もブログパーツで実現できる
Classic widgetに無い機能もブログパーツで実現できるわかりやすい例を挙げます。
SWELLの場合は、新着記事ウィジェットは投稿にしか対応していません。
しかし、投稿リストブロックはカスタム投稿にも対応しています。
投稿リストブロックをブログパーツとして登録すれば、ウィジェットにショートコードで配置することができます。
投稿リストブロック＋ブログパーツを使えば、新着記事ウィジェットをカスタム投稿対応にすることもできるわけです。
やっていることはブロックウィジェットと同じかもしれませんが、使いにくさを解消することで利用者が増えて利用方法にも幅が出ていると思います。
ただし、条件分岐などの複雑な動きは実現できないので、複雑な動きを実現したい場合はウィジェットのコードをカスタマイズする必要があります。
SWELL ブログパーツの便利な使い方
ブログパーツを使うとウィジェットエリアのデザインも出来てしまう
これも、ブロックウィジェットでもできることですが、使いやすさという点ではClassic widget + ブログパーツの方が優れていると思います。
ブログパーツは、通常のエディタが立ち上がりますのでブロックを好きに配置してデザインすることができます。
セクションを配置して、セクションの境界をデザインしたり、セクションの背景を変えたりすることもできます。
やっていることは、FSEそのものだと思いますが、使いやすいUIで実現しているのがSWELLの偉いところです。
SWELLのメインビジュアルにもブログパーツが配置できる
SWELLのメインビジュアルにはテキストを出力できる入力欄があります。
テキスト入力部分を色々カスタマイズしたいと思った時に、コードをいじらなくても、ブログパーツを配置できるようになっています。
これは結構便利です。
ブログパーツというのは結局はショートコードなのですが、ショートコードの中身をブロックエディタで作れるというのが斬新というか意外と需要があるという。
再利用ブロックというのがその考え方なのですが、それをショートコードとして好き勝手に使っていいですよ、というのがブログパーツですね。
SWELLのヘッダー内部のウィジェットエリアにも配置できる
ブログパーツを使えば、ヘッダー内部のウィジェットエリアにボタンなどを並べたパーツを作っておけば、呼び出すこともできますね。
少しCSSの知識は必要になるでしょうが、それでもウィジェットエリアにHTMLをゴリゴリ書いたり、別途ショートコードをfunctions.phpに書くより、ブロックエディタで書いた方がすっきりします。
Code Snippetsでfunctions.phpの代わりにしている人は多いと思いますが、Code snippetsって階層を持たせたり、グループ化できないので、スニペットが増えてくると探すのが大変になるんです。
だから、何でもかんでもCode snippetsやfunctions.phpに放り込むのはいかがなものかと思ってます。
ブログパーツでSWELLのメガメニューも作成できる
SWELLブログパーツを使用するときの注意点
SWELLのブログパーツは、ショートコードで自由に配置できますが、SWELLの高速化オプションとの組み合わせで不具合が発生することがあります。
SWELLの高速化オプションには、「コンテンツに合わせて必要なCSSだけを読み込む」という項目があります。
本文エリアで使用されているブロックやウィジェットエリアのコンテンツを判定して必要なCSSのみ読み込むようにする設定です。
https://swell-theme.com/update/8814/
この項目を有効化すると、ブログパーツの配置場所によっては、必要なCSS画読み込まれずにデザインが崩れることがあります。
「コンテンツに合わせて必要なCSSだけを読み込む」を有効化すると、SWELLはページ内で使われているブロックを検索して、そのブロックを使用ブロックとして登録し、使用ブロックのみのCSSを読み込むように動作します。
しかし、この検索場所に含まれない場所にブログパーツを配置した場合、ブログパーツに使われているブロックが検索されず、必要なCSSが読み込まれないため、デザインが崩れる現象が起こります。
具体的には、ヘッダーメニューの内部などにブログパーツを配置すると検索されませんでした。
まとめ
SWELLのブログパーツを使って、Classic widgetのショートコードを作成し、ウィジェットを配置することで、コードのカスタマイズをしなくてもカスタマイズできることが増えます。
ブロックとして用意してあるものを組み合わせてブログパーツを作成すると、機能だけでなくデザインもできるようになります。
これはFull Site Edittingそのものだと思います。
SWELLは、FSE対応していませんが、FSEの思想や使いやすさをブログパーツというかたちで取り入れているのだと思います。
SWELLユーザーがサイドバーやフッターのカスタマイズを行う場合は、ブログパーツを使う方が幸せになれそうです。
コメント