無事にポチップ(ブロックエディタ専用の商品リンク作成プラグイン)を導入して見た目を整えた当サイト。
ここで困ったことがひとつ…

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

特定のカテゴリーに同じリンクを設置したい場合など、一括管理できて便利だね。
カスタムHTMLに商品リンクのコードを貼る必要があるのでポチップは使えないかなぁ…と。
ところが、
両方ともできる方法がありました!
結果的にTwitterフォロワーさんのお力添えで念願叶いましたのでご紹介したいと思います。
ポチップをウィジェット(カスタムHTML)で使うには
- Step1functions.phpにコードを追加する
テーマのための関数(functions.php)に一行、ショートコードを使うためのコードを追加します
- Step2ポチップの商品IDを確認する
ポチップ管理で商品IDを確認します
- Step3ウィジェット(カスタムHTML)にショートコードを記述する
ショートコードは簡単[ pochipp id=”ここに数字を入れるだけ” ]
- 完成
カスタムHTMLではブロックエディタが使えない代わりにショートコードを使うことができます。
ただしこのショートコードを入力するだけでは表示されなくて。
いつもお世話になっているフォロワーさんが情報をくださいました。

コードを追加する必要があり。
functions.phpにコードを追加する必要がある
ウィジェットでショートコードが使えるようにするためにひとつコードが必要とのこと。
こちらのサイトに掲載されているPHPコードを追加しました。
add_filter( 'widget_text', 'do_shortcode' );
functions.phpにコードを追加する場所
子テーマを使用します。
テーマがCocoonの場合
Cocoonの場合は『Cocoon Child』(子テーマ)
外観→テーマファイルエディター→テーマのための関数(functions.php)に追加。

これでショートコードが使える状態になりました^^
ウィジェット(カスタムHTML)にショートコードを記述する
- ポチップ管理→商品を登録
- IDを確認する(公式サイト参照)
- ウィジェット(カスタムHTML)にショートコードを記述する(必要があれば表示するカテゴリーを変更)
[ pochipp id=”1234567890″ ]


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


この方法なら、ブロックエディタじゃなくてもポチップ使えちゃうね。
難しくないのでぜひお試しください。
Comment