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

2020-05-262024-09-21

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

初級編[🡕]

中級編[🡕]

と、いいますと？

その機能だけでも十分素晴らしいのだけど
この機能があるともっと嬉しいのになッ！！！
ということでひと手間加えることでパワーアップさせよう！という魔改造企画にゃー

なんだかよくわかりませんが

このブログはLuxeritasという神テーマを使っているけど
特に頻繁に使うのがブログカードの機能にゃー

Luxeritas [🡕]

確かに使いますけど
このブログカードみたいに

このブログカード機能、外部サイトへのリンクに便利なのだけど、もちろん自サイトへのリンクもできるのにゃー
WordPress標準のリンク機能だと、リンクを作る際に自サイトならキーワードで検索できるのだけど、Luxeritasのブログカードだと自サイト検索してくれないのにゃー

なるほど
それは確かに不便ですね

神テーマなのにそこだけWordPress標準より劣っているとは許せんのにゃー
ということで今回はこのブログカードに自サイト検索させる機能を追加するのにゃー

ということは今回はLuxeritas限定の話ですね

まー応用編ということで許してにゃー
仕組みが似た機能だったら他でも使えるかもしれんし

応用範囲の狭い応用編だな

中級編とかも考えるのめんどくさいかったし

普段この吹き出しとブログカードのみですからね
たくさんブロックがありますけど殆ど使いませんし

そんな多機能だと使いこなせないのにゃー
シンプルイズベストにゃー
標準機能で充分にゃー

企画を根底から覆すような事いうなコノヤロー

Contents

1. Luxeritasのブログカードはどうなっているのか
2. 値をパラメータに変換
3. Handlebarsで制御する
4. コントロールの割当て

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というビルトインヘルパーは初めてですね