Lazy Blocksを使ったオリジナルブロックの作り方 (応用編)

2020-05-26

今までは新規にオリジナルブロックを作ってみたけど今回は趣向をかえて既存の機能に改良を加えてみようなのにゃー
人物のアイコン素材 その5
と、いいますと?
その機能だけでも十分素晴らしいのだけど
この機能があるともっと嬉しいのになッ!!!
ということでひと手間加えることでパワーアップさせよう!という魔改造企画にゃー
人物のアイコン素材 その5
なんだかよくわかりませんが
このブログはLuxeritasという神テーマを使っているけど
特に頻繁に使うのがブログカードの機能にゃー
人物のアイコン素材 その5
確かに使いますけど
このブログカードみたいに
このブログカード機能、外部サイトへのリンクに便利なのだけど、もちろん自サイトへのリンクもできるのにゃー
WordPress標準のリンク機能だと、リンクを作る際に自サイトならキーワードで検索できるのだけど、Luxeritasのブログカードだと自サイト検索してくれないのにゃー
人物のアイコン素材 その5
なるほど
それは確かに不便ですね
神テーマなのにそこだけWordPress標準より劣っているとは許せんのにゃー
ということで今回はこのブログカードに自サイト検索させる機能を追加するのにゃー
人物のアイコン素材 その5
ということは今回はLuxeritas限定の話ですね
まー応用編ということで許してにゃー
仕組みが似た機能だったら他でも使えるかもしれんし
人物のアイコン素材 その5
応用範囲の狭い応用編だな
中級編とかも考えるのめんどくさいかったし
人物のアイコン素材 その5
普段この吹き出しとブログカードのみですからね
たくさんブロックがありますけど殆ど使いませんし
そんな多機能だと使いこなせないのにゃー
シンプル イズ ベストにゃー
標準機能で充分にゃー
人物のアイコン素材 その5
企画を根底から覆すような事いうなコノヤロー

Luxeritasのブログカードはどうなっているのか

ということでまずはブログカードってどう動いているの?
というところから調べますにゃー
人物のアイコン素材 その5
ちょっと難しそうですね
Luxeritasの場合、それほど難しくなかったのにゃー
クラシックブロックからもブログカードが挿入できるからそれで調べると楽なのにゃー
人物のアイコン素材 その5
結構手抜きだな
まあ一応テーマのソースコードも見てみたけど大丈夫そうなのでこれでいいかな、と
で、解析結果はこんな感じにゃー
人物のアイコン素材 その5
なるほど a タグで書かれているのですね
そうなのにゃー
入力は a タグで受け付けて内部でブログカードにしているようなのにゃー
上の行はそのままのウィンドウで表示
下の行は別ウィンドウで表示する場合の a タグにゃー
人物のアイコン素材 その5
そうだとすると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>
人物のアイコン素材 その5
まあ想定どおりですね
かんたんなのにゃー

Handlebarsで制御する

人物のアイコン素材 その5
さて、ほぼ出来上がりのような気がしますが
このまま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}}
人物のアイコン素材 その5
if文ですね
条件をつけて出力すれば1つになりますね
そうにゃー
newopenという変数を追加にゃー
別ウィンドウの場合はtrue、という感じですにゃー
人物のアイコン素材 その5
このあたりは多少プログラミングの知識が必要ですね
if文はプログラミングやったことあれば一回は使ったことあるはずなので、敢えて説明しないけどにゃー
人物のアイコン素材 その5
これで完成ですか?
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}}
人物のアイコン素材 その5
compareというビルトインヘルパーは初めてですね
Handlebarsのif文はAND条件とか比較ができないのにゃー
Lazy Blocksでヘルパーを拡張してそういった比較ができるようにしているのにゃー
人物のアイコン素材 その5
なるほど
そうするとurlとstringが入力されていないと全体が出力されない、ということですね
うむ

コントロールの割当て

人物のアイコン素材 その5
あとはLazy Blocksに登録すればOKですね
ここで大事なのはコントロールをちゃんと選ばないと自サイトの検索をしてくれないのにゃー
人物のアイコン素材 その5
自サイトのキーワード検索はLazy Blocksのコントロールに頼っているのですね
そうにゃー
URLはURLコントロール
stringはTEXTコントロール
newopenはCheckBoxかToggleコントロールのどちらかで設定にゃー
人物のアイコン素材 その5
だいたい想定どおりの割当てですね
あとは以前と同じなので以下省略にゃー
人物のアイコン素材 その5
手を抜きやがった
これで完成ですにゃー
今後Luxeritasの仕様が変更されたらどうなるか知らないけど
人物のアイコン素材 その5
不吉なことを言いますね
まあ何にせよ今回はこんなところだにゃー
それではチャオ!
人物のアイコン素材 その5
イタリア語!?
っていうかこのシリーズなんなの?