Welcart対応テーマ「Twentyfour Seven」で投稿記事にWelcart商品へのリンク・CTAを設置する方法のトップイメージ

Welcart対応テーマ「Twentyfour Seven」で投稿記事にWelcart商品へのリンク・CTAを設置する方法

公開日 / 更新日

当サイトで販売しているWelcart対応テーマ「Twentyfour Seven」のデフォルト機能にある「CTAの表示方法」について紹介します。

CTA(Call To Action)とは:
ユーザーに購入や資料請求など、何かしらの行動を起こしてもらうための施策です。
「Twentyfour Seven」では、簡単に各商品ページへのサムネイル付きリンク(CTA)を投稿記事内に設置できます。

CTA設置方法

「Twentyfour Seven」のテーマをご使用中の場合に、ご利用になれる機能です。

投稿記事での設置方法

  1. 管理画面の「投稿を編集」画面で左上にある「+」ボタンをクリック。
  2. 「ウィジェット > ショートコード」でショートコードのブロックを追加。
  3. ショートコードブロックの入力欄に下記コードを入力して完了です。
[item code=商品コード]

「商品コード」は管理画面「Welcart Shop > 商品マスター」の一覧や、各商品ページでご確認いただけます。ご自身で設定されたものです。
また、こちらのCTAは投稿記事内で複数設置可能です。追加する場合は、同じ手順でショートコードブロックを新しく追加してください。

テンプレートファイルでの設置方法

テンプレートファイル内でCTAショートコードを表示したい場合は、表示したい箇所に

<?php echo do_shortcode('
Welcart対応テーマ「Twentyfour Seven」で投稿記事にWelcart商品へのリンク・CTAを設置する方法

Welcart対応テーマ「Twentyfour Seven」で投...

¥0(税込)

当サイトで販売しているWelcart対応テーマ「Twentyfour Seven」のデフォルト機能にある「CTAの表示方法」について紹介します。 CTA(...

'); ?>

と記述します。

CTAの表示内容をカスタマイズする方法

CTAを出力している関数を上書きします。
子テーマかプラグインでのカスタマイズになりますので、詳しくは下記ページをご覧ください。

CTAを出力しているコード

コードは、テンプレートファイル「functions > library > 247.php」にある下記部分です。

<?php
/* オリジナルショートコード */
if(!function_exists('tfs_item_code_for_post')){
function tfs_item_code_for_post($atts){
- 省略 -
add_shortcode('item','tfs_item_code_for_post');
}
?>

下記コード、HTML部分を編集することで表示される内容を変更できます。
表示したい商品情報の変数が関数内にない場合は、取得用コードの追記が必要です。

<?php
$itemData =
'<div class="pickItemContentBox animationIn flexBetween width100P marginBottom24px">
    <a href="'.$postUrl.'" class="thumnail box36_5P">
        <img src="'.$topImagePath.'" class="borderRadius3px width100P" width="4" height="3" alt="'.$keyTitle.'" decoding="async">
    </a>
    <div class="box60P">
        <div class="flexBetween flexColumn height100P">
            <div class="pickItemData marginBottom16px">
                <h3 class="pickItemTitle"><a href="'.$postUrl.'">'.$limTitle.'</a></h3>
                <span class="pickItemPrice displayBlock textalignRight marginBottom8px">¥'.$price.$taxStatus.'</span>
                <p class="pickItemContent">'.$limContent.'</p>
            </div>
            <div class="textalignRight width100P">
                <a href="'.$postUrl.'" class="linkBk">
                    <span class="noDisplay960"><span class="marginRight4px">'.$limTitle.'</span>の</span>詳細はこちら
                    <img src="'.$directoryUrl.'/img/'.$bkButtonIconRightImg.'" width="17" height="12" alt="右矢印" class="iconDefault iconArrowRight displayIB" decoding="async">
                </a>
            </div>
        </div>
    </div>
</div>';
?>

CTAの表示イメージ

▼ 下のような、サムネイル付き商品リンクが表示されます。

ウェルカート対応テーマのトゥエンティフォーセブン

Welcart対応テーマ「Twentyfour Seven」

販売価格 29,700(税込)

WordPressでオンラインショップを構築できるプラグイン「Welcart」向けに開発されたテーマです。

共有ボタン
Facebook Twitter LINE
関連キーワード
|
関連アーカイブへの矢印Twentyfour Seven/WordPressの関連アーカイブ
WordPress子テーマテンプレートの配布とインストール方法

WordPress子テーマテンプレートの配布とインストール方法

WordPressにおいて、テーマのテンプレートファイルの直接編集は、テーマ更新のタイミングで編集内容が上書きされてしまうので、有効化中のテーマを「親テーマ」と...

購入したWordPressテーマのインストール方法

購入したWordPressテーマのインストール方法

「TwentyfourSeven」の場合、テーマをインストールする前にカートプラグイン「Welcart」をインストールします。他のテーマの場合は、テーマのインス...

プラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法

プラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法

Shopifyの全商品を取得して、WordPressにカスタム投稿として自動登録するプラグイン作成しましたので連携方法をご紹介します。こちらのプラグインはWor...

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressにおいて、親テーマの直接編集はテーマが更新された際に上書きされてしまうので、テーマのカスタマイズは「子テーマ」を使うか「プラグイン」がおすすめ...

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

当サイトで販売しているWelcart対応テーマ「TwentyfourSeven」のヘッダーメニュー項目のカスタマイズ方法について紹介します。部分的に他のテーマで...