Pochipp(ポチップ)をウィジェットで使う方法（カスタムHTMLにショートコード）

無事にポチップ（ブロックエディタ専用の商品リンク作成プラグイン）を導入して見た目を整えた当サイト。

ポチップ外観カスタマイズ／ボタン色をマウスホバーで反転、影やロゴを消す方法（CSS使用）

アフィリエイトリンクを作るのにしばらく『もしもアフィリエイト』を使っていたのですが、このたび当サイトにポチップを導入しました！こんな感じの、見たことありませんか？ポチップはワードプレスのブロックエディタに特化した商品リ...

turicco.com

2023年02月08日

ここで困ったことがひとつ…

カスタムHTMLでも使えるのかな？

ブロックの中からポチップを呼び出すことで使い方がとても便利にはなったのだけど、今までは記事内の他にウィジェットを使って記事下に共通の商品リンクを置いていたんです。

特定のカテゴリーに同じリンクを設置したい場合など、一括管理できて便利だね。

カスタムHTMLに商品リンクのコードを貼る必要があるのでポチップは使えないかなぁ…と。

ところが、

両方ともできる方法がありました！

結果的にTwitterフォロワーさんのお力添えで念願叶いましたのでご紹介したいと思います。

ポチップをウィジェット（カスタムHTML）で使うには

カスタムHTMLではブロックエディタが使えない代わりにショートコードを使うことができます。

ポチップの商品リンクをショートコードで呼び出す方法 | ポチップ

「ポチップ管理」ページに登録している商品リンクは、ショートコードでも呼び出すことができます。 例えば、商品のレビュー記事で繰り返し同じ商品を呼び出すときには、ショートコードを使うのが便利になります。 今回は、ポチップをショートコードで呼び出

pochipp.com

ただしこのショートコードを入力するだけでは表示されなくて。

いつもお世話になっているフォロワーさんが情報をくださいました。

フォロワーさん

コードを追加する必要があり。

functions.phpにコードを追加する必要がある

ウィジェットでショートコードが使えるようにするためにひとつコードが必要とのこと。

こちらのサイトに掲載されているPHPコードを追加しました。

add_filter( 'widget_text', 'do_shortcode' );

functions.phpにコードを追加する場所

子テーマを使用します。

テーマがCocoonの場合

Cocoonの場合は『Cocoon Child』（子テーマ）

外観→テーマファイルエディター→テーマのための関数（functions.php）に追加。

これでショートコードが使える状態になりました^^

ウィジェット（カスタムHTML）にショートコードを記述する

1. ポチップ管理→商品を登録
2. IDを確認する（公式サイト参照）
3. ウィジェット（カスタムHTML）にショートコードを記述する（必要があれば表示するカテゴリーを変更）

ショートコードに商品IDを入れるだけなのね！完成～♪

実際に作成した商品リンク

下記が実際にカスタムHTMLにショートコードを入れて作った商品リンクですが、問題なく表示されているかと思います。

迷わず決まる配色アイデア 3色だけでセンスのいい色

¥1,980 （2023/03/22 04:53時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

ポチップ

この方法なら、ブロックエディタじゃなくてもポチップ使えちゃうね。

難しくないのでぜひお試しください。