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

今までは新規にオリジナルブロックを作ってみたけど今回は趣向をかえて既存の機能に改良を加えてみようなのにゃー

人物のアイコン素材 その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

イタリア語!?
っていうかこのシリーズなんなの?