2023.12.14

WordPressのカスタムブロックを作る方法

 WordPressのテーマをブロックテーマに移行するにあたり、簡単なカスタムブロックのプラグインを書きました。


 WordPress のクラシックテーマ(従来の PHP を使って作るテーマ)では、多少の不都合は PHP による力業で解決していたものですが、現在のブロックテーマはだいぶモダンなスタイルに変わりました。


 その名の通り、「ブロック」という部品を積み上げてテーマを構築するノーコードなスタイルで、プログラミングに疎い人でもテーマをカスタマイズできるようになりました。


 その一方で、既存のブロックにはない機能を求めると途端にブロック開発に手を染める必要に迫られる諸刃の剣でもあります。 クラシックテーマだったら当該部分に直接 PHP のコードをたたき込んで解決することができたのですが、ブロックテーマではこの部分だけちょっとという解決の仕方が使えないのです。今回作成するソーシャルブックマークボタンもそういうもののひとつです。


 たとえばクラシックテーマだったら single.php に直で


$encoded_title = urlencode( get_the_title( $post_id ) );
$encoded_url = urlencode( get_the_permalink( $post_id ) );
echo '<a href="https://twitter.com/shareurl=' . $encoded_url .
'&text=' . $encoded_title . '&via=icoro&related=icoro"' .
'rel="nofollow noopener" target="blank" class="share-tw">Twitter</a>';

とでも書けばよかったのですが、同じことをブロックテーマで実現するには「ソーシャルブックマークボタンを表示するブロック」を開発する必要に迫られるのです。


 もしかしたらそのうち変数を扱えるブロックとか条件分岐できるブロックとかが出てくるのかもしれませんが、今のところ、そういった機能を有したブロックは見当たりません。


今回作るカスタムブロック


 今回作成するのはソーシャルブックマークのボタンを表示

引用元
icoro
icoro
icoro
新潟を拠点にDIYしてみたり、旅行してみたりしているブログ。メルマガをまとめた電子書籍「いころ放談」も意外と人気。いつのまにかあなたの生活に忍び寄っている、icoro(イコロ)です。

icoroからの
おすすめニュース

過去のニュース

最新号のご案内

  • 新潟Komachi5月号

    心ときめく桜とランチ

ログインして
もっと便利に!