ブログ運営 PR

WordPress「Shortcoder」。JINの吹き出しを登録して簡単に使えるようにする

記事内に商品プロモーションを含む場合があります
Uchi
Uchi
毎回、吹き出しアイコン設定がめんどーい

というのが今回のテーマ。

吹き出しを登録、呼び出して使えるようにします。

JIN吹き出し 毎回アイコン設定がめんどう

当ブログは、WordPressテーマJINをつかっています。

売上月100万円以上!と恐るべきアフィリエイター「ひつじ」さんが作り上げたテーマ「JIN」。

ブログで収益をあげるための仕組みが詰まったテーマ「JIN」。

ブログで稼ぎたい 

という思考のブロガーなら、一度は導入検討を考えたテーマではないでしょうか。

とっても良いテーマで気に入ってます。

Uchi

まだ稼げてはないけどな。。。


JIN(ジン) 真の使いやすさを追求したWordPressテーマ
https://jin-theme.com/

さて本題に戻して、JINで吹き出しを使うときは、

このように毎回アイコン画像からの設定が必要です。

JIN公式マニュアルには、プラグインAddQuicktagに登録すれば便利だよ、と書いてある。

しかしAddQuicktagって、クラシックブロックでないと使えないっぽい。

そこで今回は、WordPressのブロックエディタでも使える「Shortcoder」プラグインを使って吹き出しを登録、かんたんに呼び出して使えるようにします。

Shortcoderとは

WordPressプラグイン「Shortcoder」を使えば、定型文などを簡単に登録、呼び出すことが可能になります。

Shortcoderが便利なところは、カスタムパラメータ を使えるところ。

たとえば、下記のような挨拶を毎回記事の文頭にいれるとします。

こんにちは、今日は2023年6月4日ですね。

毎回 日付を変更しないとダメだよね。

でもShortcoderを使えば

こんにちは、今日は 今日の日付 ですね。

と 今日の日付 部分を、本日日付に自動で変更させていくことが可能になります。

Shortcoderを使えば、記事執筆の効率が大幅にあがりますよ。

Shortcorder インストール

ますはWordPressプラグイン Shortcoder をインストール。

検索で「Shortcoder」と入力してプラグインを探します。

「今すぐインストール」ボタンから自分のWordPressへShortcoderプラグインをインストール。

Shortcoderのインストールが終了すると、左サイドメニュー内に現れます。

それにしても、スパムコメントの量がやばい。。。

JIN吹き出し設定をShortcoderへ登録

それでは、吹き出しの登録をしていきましょう。

アイコン名を入力
ここに文章をいれる

Shortcoderから、アイコン画像が入った吹き出しを記事内に挿入するようにします。

手順

  1. 吹き出し部のhtmlコードの取得
  2. Shortcoderへ吹き出しhtmlコードを登録
  3. 吹き出しコメントを自由に入力できるようにする

JIN吹き出し部のhtmlコードを取得

まずはShortcoderに登録する、吹き出し部分のhtmlコードを取得しましょう。

まずは、いつもどおりにJINブロックから吹き出しをよびだして、アイコン画像をいれた吹き出しを作ります。

当ブログだと、こんな感じ。

吹き出しの基本形ができたら、縦に3つならんだ・のメニューから「htmlとして編集」を選択。

するとビジュアル編集ブロックからhtmlコード編集に変わるので

このhtmlコードをShortcoderに登録します。

ShortcoderへJIN吹き出しhtmlコードを登録

Shortcoderへ移動。

ショートコードを作成 をクリック。

新規作成時に設定する箇所は3箇所。

1 「ショートコード名を入力」 と 3 表示名 は、適当に名前をつけてください。

今回は、fukidasi としました。

そして 2 のコード編集エリア部分に、吹き出しのhtmlコードを貼り付けます。

でも、このままだと 呼び出したときに

コメントが固定されてしまうので、もう少し設定していきましょう。

JIN吹き出しコメントを自由に入力できるようにする

Shortcoderを使って、吹き出しを挿入するときに、任意のコメントを入力できるようにします。

Shortcoderのカスタムパラメータ機能を使います。

このカスタムパラメータ機能は、設定したパラメータを任意の値に書き換えて表示してくれます。

それでは設定していきましょう。

ショートコードのパラメータを挿入」から「カスタムパラメータ」を選択。

  • カスタムパラメータ名
  • デフォルト値

を設定します。

今回は 下記の通り設定しました。

  • カスタムパラメータ名 comment
  • デフォルト値 ここに本文を入力

そうするとShortcoderのコードの先頭部分に

%%comment:ここに本文を入力%%

と差し込まれました。これを切り取って 「ここに本文をいれる」 部分を置き換えてやります。

最終的なコード

<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img src="https://uchilog.com/wp-content/uploads/2023/06/iconavatar.jpeg"/></div><span class="icon-name">Uchi</span><div class="balloon-serif"><div class="balloon-content"><!-- wp:paragraph -->
<p>%%comment:ここに本文を入力%%</p>
<!-- /wp:paragraph --></div></div></div>

「アイコン名を入力」という部分も、自分のアイコン名に変更します。

以上でShortcoderの設定は終了です。

ShortcoderからJIN吹き出しを記事内に挿入する

それでは、Shortcoderから吹き出しを呼び出してみましょう。

吹き出しを使いたい箇所で、ブロックエディタ上のShortcoderのアイコンをクリック。

記事内にShortcoderウィジェットが挿入されます。「Select Shortcoder」をクリック。

さきほど作成した fukidasi と、利用可能なパラメータが表示されていますね。

利用可能なパラメータに、吹き出し内に表示させたいコメントを入力。

すると

Uchi

好きな吹き出し入れれるよ!

できました!

ちゃんと、「好きな吹き出し入れれるよ!」と表示されましたね。

応用

カスタムパラメータを使って、投稿時に枠の色や向きも設定可能です。

カスタムパラメータ名内容
alignleft
right


チャットの配置位置
bordernone
gray
blue
red
yellow
枠の色
bgnone
gray
blue
red
yellow
背景色

Shortcoderを活用して執筆に専念

Shortcoder を使ったことで、記事執筆の効率が大幅にあがりましたね。

このようにShortcoderを使えば、固定表示+変化させる表示 を同時に登録、呼び出しが可能です。

プログラミングの知識がなくても、動的に表示内容を変化させる仕組みが作れます。

毎回、同じようなことを書いているな、とか設定してるな、と思ったらShortcoderに登録しちゃいましょ。

時間は、記事を書くことに使いましょう。

それでは良いWordPressブログライフを。

ABOUT ME
matonako
昭和45年生。お仕事はEC系。 嫁、セキセイインコ、魚多数と暮らす。家が大好き。休日はインドア派。 ブログはもっぱら趣味のガンプラ作り、自転車、写真、カメラ、コーヒー、軽登山について。 最近気になるモノ:盆栽、ジャズ、アナログ・レコード、インテリア、ガンプラ