WordPressで手軽に「ジョンソンボックス」を書くためのショートコードをつくってみた

ジョンソン・丁稚さんです。

[johnson title=”かんたんに説明すると”] WordPressでジョンソンボックスを手軽に書けるようにした
: [johnson title="見出し"]...[/ johnson] ですぐ書けるよ

[skel](/tech/2017/0223/79) テーマで使えるよ
: まあ、ほかの人にすぐ使ってもらえるレベルに達してないんですが
[/johnson]

「ジョンソンボックス」ってこういう ↑ 箇条書きにチェックボックスをつけて視覚的にアピールする、広告クリエイティブのことです。
結論ファーストでブログのエントリ書いたり、ランディングページつくるときにべんり。

先日紹介して、このサイト上で開発しながら使ってる「skel」テーマに投入してみました。

使い方は上述のとおりなんですが、

のようにすると、

[johnson title=”見出し”]
箇条書き1

箇条書き内容1

箇条書き2

箇条書き内容2
[/johnson]

になります。

HTML直書きだとまだめんどくさいですね。Markdownと組み合わせると、

で、

[johnson title=”見出し”] 箇条書き1
: 箇条書き内容1

箇条書き2
: 箇条書き内容2
[/johnson]

になるのでなかなかラクです。

テーマにいくつもショートコードを入れ込むのがめんどくさいので、ショートコード実装のための基底もどきっぽいクラスを書きました。

なので [ johnson] ショートコードの実装は短くすみました。こんな感じ:

ぜんぜん「がいこつ」じゃなくなってくなあ、このテーマ…。
でも、ミラドール本体サイトをつくるのにちょっと機能増やさないといけないからなあ…。