当サイトで販売しているWelcart対応テーマ「Twentyfour Seven」のデフォルト機能にある「CTAの表示方法」について紹介します。
CTA（Call To Action）とは：
ユーザーに購入や資料請求など、何かしらの行動を起こしてもらうための施策です。
「Twentyfour Seven」では、簡単に各商品ページへのサムネイル付きリンク（CTA）を投稿記事内に設置できます。
CTA設置方法
「Twentyfour Seven」のテーマをご使用中の場合に、ご利用になれる機能です。
投稿記事での設置方法
- 管理画面の「投稿を編集」画面で左上にある「+」ボタンをクリック。
- 「ウィジェット ＞ ショートコード」でショートコードのブロックを追加。
- ショートコードブロックの入力欄に下記コードを入力して完了です。
[item code=商品コード]「商品コード」は管理画面「Welcart Shop ＞ 商品マスター」の一覧や、各商品ページでご確認いただけます。ご自身で設定されたものです。
また、こちらのCTAは投稿記事内で複数設置可能です。追加する場合は、同じ手順でショートコードブロックを新しく追加してください。
テンプレートファイルでの設置方法
テンプレートファイル内でCTAショートコードを表示したい場合は、表示したい箇所に
<?php echo do_shortcode('
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」向けに開発されたテーマです。
