広告 WordPress

【WordPress】自作のタブやタイムラインにはショートコードを使う

なるべくプラグインを使うことなく、タブやタイムラインやアコーデオンなどの機能をHTML+CSS(+JavaScript)で使おうとしています。ただ、その場合の例として

<div class="tab-wrap">
<div class="tab-group">
<div class="tab is-active">1st</div>
<div class="tab">2nd</div>
<div class="tab">3rd</div>
<div class="tab">4th</div>
</div>
<div class="panel-group">
<div class="panel is-show">
~タブ1の記事本文~
</div>
<div class="panel">
~タブ2の記事本文~
</div>
<div class="panel">
~タブ3の記事本文~
</div>
<div class="panel">
~タブ4の記事本文~
</div>
</div>

という感じではないでしょうか。この時記事本文以外を「カスタムHTML」ブロックとし、記事本文を「段落」のブロックとして記載すると「カスタムHTML」ブロックがエラーとなり「ブロックのリカバリー」が表示されます。どうも「カスタムHTML」が<div>で終わったり</div>で始まったりするのはいけないらしいです。

ここでブロックのリカバリーが表示されないようにできないかと、以下のように考えました。(タブ1の記事本文までのカスタムHTML)

<!-- wp:html -->
<div class="tab-wrap">
<div class="tab-group">
<div class="tab is-active">1st</div>
<div class="tab">2nd</div>
<div class="tab">3rd</div>
<div class="tab">4th</div>
</div>
<div class="panel-group">
<div class="panel is-show">
<!-- /wp:html -->

<!-- wp:html -->と<!-- /wp:html -->で囲んでみますと「ブロックのリカバリー」は表示されなくなりました。しかし、次に記事を編集しようと開いてよく見ますと「カスタムHTML」ブロックの中身が消えているのです。そのまま「更新」をしてプレビューを確認しますとタブがありませんでした。

まさか、記事本文を「段落」ブロックで書き、HTMLに変換してコピーし、「カスタムHTML」ブロック内にペーストするようなことにはしたくありません。

ここから解決

ちょっと悩んでから「ショートコード」にしてしまえばよいのではないか、と思い至りました。ここで使用したのがShortcoderプラグインです。他にショートコードを自作するプラグインを使用しているのでありましたら、それでも良いかと思います。

プラグインはWordPressの「プラグイン」-「新規追加」からインストールできます。特に難しい設定はありません。このプラグインをインストールしますと、ブロックエディタにも自動で追加されます。

ここで「記事本文」以外の「カスタムHTML」をShortcoderに記述してみますと

各タブの記事本文を「段落」ブロックで記述し、前後に3種類のショートコードにて挟み込むようにすればOKです。

このショートコードを使いまわすには各タブのタイトルはパラメータ化しないとショートコードの数が膨大になります。このShortcoderプラグインはパラメータ化が可能なのです!パラメータとしたい箇所を「%%パラメータ名%%」とします。パラメータ名を覚えておく必要は全くありません。

ショートコードの名前は英数字しか使用できませんが、「表示名」にて日本語が使用可能です。識別しやすい名前をつけます。

「Shortcoder」ブロックを選び、「Select Shortcode」ボタンをクリックしますと、登録されたショートコード一覧が現れます。パラメータのあるものは自動的に入力画面になります。ここではタブのタイトルをパラメータとして入れます。

まとめ

今回はタブでしたが、タイムラインなど、HTML+CSS+JavaScriptで記述するもので<div>~本文~</div>の類のものは全てこれでできます。

ショートコードは使いまわしが利きますので、最近では多用しています。

-WordPress
-, , ,

Please disable your adblocker or whitelist this site!