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

カスタマイズ

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

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

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

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

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

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

ところが、

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

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

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

  • Step1
    functions.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)にショートコードを記述する

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

ショートコードの書き方

[ pochipp id=”1234567890″ ]

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

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

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

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

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

Comment

タイトルとURLをコピーしました