Lazy Blocksを使ったオリジナルブロックの作り方 (応用編)
今までは新規にオリジナルブロックを作ってみたけど今回は趣向をかえて既存の機能に改良を加えてみようなのにゃー
https://possiblytrue.com/インターネット/lazy-blocksを使った...
と、いいますと？
その機能だけでも十分素晴らしいのだけど
この機能があるともっと嬉しいのになッ！！！
ということでひと手間加えることでパワーアップさせよう！という魔改造企画にゃー
なんだかよくわかりませんが
このブログはLuxeritasという神テーマを使っているけど
特に頻繁に使うのがブログカードの機能にゃー
https://thk.kanzae.net/wp/
確かに使いますけど
このブログカードみたいに
このブログカード機能、外部サイトへのリンクに便利なのだけど、もちろん自サイトへのリンクもできるのにゃー
WordPress標準のリンク機能だと、リンクを作る際に自サイトならキーワードで検索できるのだけど、Luxeritasのブログカードだと自サイト検索してくれないのにゃー
なるほど
それは確かに不便ですね
神テーマなのにそこだけWordPress標準より劣っているとは許せんのにゃー
ということで今回はこのブログカードに自サイト検索させる機能を追加するのにゃー
ということは今回はLuxeritas限定の話ですね
まー応用編ということで許してにゃー
仕組みが似た機能だったら他でも使えるかもしれんし
応用範囲の狭い応用編だな
中級編とかも考えるのめんどくさいかったし
普段この吹き出しとブログカードのみですからね
たくさんブロックがありますけど殆ど使いませんし
そんな多機能だと使いこなせないのにゃー
シンプル イズ ベストにゃー
標準機能で充分にゃー
企画を根底から覆すような事いうなコノヤロー
Luxeritasのブログカードはどうなっているのか
ということでまずはブログカードってどう動いているの？
というところから調べますにゃー
ちょっと難しそうですね
Luxeritasの場合、それほど難しくなかったのにゃー
クラシックブロックからもブログカードが挿入できるからそれで調べると楽なのにゃー
結構手抜きだな
まあ一応テーマのソースコードも見てみたけど大丈夫そうなのでこれでいいかな、と
で、解析結果はこんな感じにゃー
なるほど a タグで書かれているのですね
そうなのにゃー
入力は a タグで受け付けて内部でブログカードにしているようなのにゃー
上の行はそのままのウィンドウで表示
下の行は別ウィンドウで表示する場合の a タグにゃー
そうだとするとLazy Blocksで利用しやすいですね
値をパラメータに変換
ということで、いつもの流れでHTMLのパラメータをLazy Blocks向けに変更するのにゃー
変換前
<a href="あああ" data-blogcard="1">いいい</a>
<a href="ううう" target="_blank" rel="noopener" data-blogcard="1">えええ</a>変換後
<a href="{{url}}" data-blogcard="1">{{string}}</a>
<a href="{{url}}" target="_blank" rel="noopener" data-blogcard="1">{{string}}</a>まあ想定どおりですね
かんたんなのにゃー
Handlebarsで制御する
さて、ほぼ出来上がりのような気がしますが
このまま2行を表示するとブログカードも2つになってしまいますね
そうならないように出力を制御するにゃー
ブログカードの別ウィンドウ表示な必要なときと不要なときでHTMLを別々にするにゃー
{{#if newopen}}
<a href="{{url}}" target="_blank" rel="noopener" data-blogcard="1">{{string}}</a>
{{else}}
<a href="{{url}}" data-blogcard="1">{{string}}</a>
{{/if}}if文ですね
条件をつけて出力すれば1つになりますね
そうにゃー
newopenという変数を追加にゃー
別ウィンドウの場合はtrue、という感じですにゃー
このあたりは多少プログラミングの知識が必要ですね
if文はプログラミングやったことあれば一回は使ったことあるはずなので、敢えて説明しないけどにゃー
これで完成ですか？
URLとかが入力されていないと少し変な動きになるようなので、さらに防止策を入れるにゃー
{{#compare url '&&' string}}
{{#if newopen}}
<a href="{{url}}" target="_blank" rel="noopener" data-blogcard="1">{{string}}</a>
{{else}}
<a href="{{url}}" data-blogcard="1">{{string}}</a>
{{/if}}
{{/compare}}compareというビルトインヘルパーは初めてですね
Handlebarsのif文はAND条件とか比較ができないのにゃー
Lazy Blocksでヘルパーを拡張してそういった比較ができるようにしているのにゃー
なるほど
そうするとurlとstringが入力されていないと全体が出力されない、ということですね
うむ
コントロールの割当て
あとはLazy Blocksに登録すればOKですね
ここで大事なのはコントロールをちゃんと選ばないと自サイトの検索をしてくれないのにゃー
自サイトのキーワード検索はLazy Blocksのコントロールに頼っているのですね
そうにゃー
URLはURLコントロール
stringはTEXTコントロール
newopenはCheckBoxかToggleコントロールのどちらかで設定にゃー
だいたい想定どおりの割当てですね
あとは以前と同じなので以下省略にゃー
手を抜きやがった
これで完成ですにゃー
今後Luxeritasの仕様が変更されたらどうなるか知らないけど
不吉なことを言いますね
まあ何にせよ今回はこんなところだにゃー
それではチャオ！
イタリア語！？
っていうかこのシリーズなんなの？