WordPress – プラグインWelcartのカート内の商品数量合計をウィジェットに表示するショートコードを追加する

この記事は約7分で読めます。
スポンサーリンク

WordPressのネットショップ構築プラグインWelcart(ウェルカート)を使用した販売を行っているサイトで、カートの中の個数をサイドバーなど(ウィジェット)に表示したい時がありました(画像のような感じです)。

カートの中

その方法として、カート内個数を表示させるためのファイルを用意し、そのファイルをテキストウィジェットで使用できるショートコードを作成して対応しました。

スポンサーリンク

まずはカートの中の個数表示用のPHPファイルを作る

Welcartには、カート内の商品数量合計を表示する usces_totalquantity_in_cart という関数が用意されていますので、これを使用します。

usces_totalquantity_in_cart – Welcart サポート

以下の内容のPHPファイルを作成し、ここでは名前を cart-totalquantity.php とし、テーマ(子テーマ)ディレクトリ(style.cssのあるディレクトリ)に置きます。

<div class="cart-totalquantity-wrap"><a href="<?php echo home_url('/'); ?>shopping/usces-cart"><i class="fa fa-shopping-cart"></i><span class="cart-totalquantity-inner"><?php usces_totalquantity_in_cart(); ?></span></a></div>

このファイルでは個数表示と同時にカートページへのリンクにしていますので、aタグで囲っています(カートページのスラッグは usces-cart で、ここでは shopping という親ページの子ページとしています。リンクが不要であればaタグは不要です)。
リンク先URLの取得にはWordPressのテンプレートタグ home_url を使います。

テンプレートタグ/home url - WordPress Codex 日本語版

カートのアイコンには Font Awesome を使用し、CSSで体裁を整えるためにdiv要素とspan要素に適当なクラス名( cart-totalquantity-wrap と cart-totalquantity-inner )を付けています。
Font Awesomeは、テーマCocoonのようにWordPressのテーマに導入されている場合もあると思います。そうでない場合はCDNを利用するなどの方法で使用準備をします。CDNを利用する場合は、例えば下記のコードを<head></head>タグ内(テーマのheader.php など)に挿入します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">

カート内数量合計の表示内容をCSSで整えます

CSSは下記のような感じです。テーマ(子テーマ)のstyle.cssなどに追記します。

.cart-totalquantity-wrap {
position: relative;
width: 60px;
height: 60px;
font-size: 38px;
background-color: #66ccff;
border-radius: 50%;
margin: auto;
}
.cart-totalquantity-wrap i {
display: block;
position: absolute;
top: 20%;
bottom: 0;
left: 0;
right: 0;
color: #fff;
margin-left: 5px;
}
.cart-totalquantity-inner {
position: absolute;
display: block;
top: 40%;
bottom: 0;
right: 0;
font-size: 18px;
color: #fff;
margin-right: 5px;
}

作成したPHPファイルをウィジェットに表示するショートコードを追加するコードを functions.php に追記

WordPressのテーマLuxeritas開発者のるな氏が考えたコードを使用させていただいた以下のコードを、テーマ(子テーマ)の functions.php に追記します。

functions.php
//ウィジェットにWelcartのカート個数ショートコード追加
add_filter( 'widget_text', function( $ret ) {
	$php_file = 'cart_totalquantity';
	if( strpos( $ret, '[' . $php_file . ']' ) !== false ) {
		add_shortcode( $php_file, function() use ( $php_file ) {
			get_template_part( $php_file );
		});
		ob_start();
		do_shortcode( '[' . $php_file . ']' );
		$ret = ob_get_clean();
	}
	return $ret;
}, 99 );

ショートコードといえば、単純に下記のようなコードも思い浮かびましたが不具合の出る可能性があるようで、それに比べ上記コードは安全で、なおかつ速度も出るようにウィジェットでPHPコードを動かす方法とされていますので、上記るな氏のコードを使用します。

//このコードでは不十分なようです
$php_file = 'cart_totalquantity';
add_shortcode( $php_file, function() use ( $php_file ) {
	get_template_part( $php_file );
});
add_filter('widget_text', 'do_shortcode' );

以下は簡単な説明です。

add_filter( ‘widget_text’, function( $ret ) {…}, 99 );
テキストウィジェットに適用されるフィルター widget_text に関数をフックさせます。
add_filter( 'フックさせたいフィルター', 'フックさせる関数', 優先順位[省略可], 引数の数[省略可] );
function( $ret ) {… return $ret;}
widget_text にフックさせる関数です。widget_text にフックさせる“ウィジェットのコンテンツ”ということになります。
$php_file = ‘cart_totalquantity’;
cart_totalquantity という名前のPHPファイルを読み込み、かつ同名のショートコードを追加しますので、変数 $php_file に値を格納します。
if( strpos( $ret, ‘[‘ . $php_file . ‘]’ ) !== false ) {…}
strpos は、検索対象の文字列内に検索文字列が含まれるかどうかを判定し、あれば該当する文字列が最初に現れる位置を数値で返します。この場合、引数$retに文字列 [cart_totalquantity] が含まれている場合のみ処理を実行します。
つまり、テキストウィジェットに [cart_totalquantity] というショートコードが記述されている場合だけ処理することになります。
strpos ( 検索対象文字列, 検索文字列[, 文字列の中での検索開始位置] )
add_shortcode( $php_file, … );
ショートコードタグ用のフックを追加します。
この場合、ショートコード cart_totalquantity が見つかった場合に関数(…の部分)を実行します。
function() use ( $php_file ) {…}
処理を実行して値を無名関数に渡します。
get_template_part( $php_file );
WordPressのテーマ(子テーマ)のテンプレートファイルを読み込みます。
ここでは、cart_totalquantity.php というファイルを読み込むことになります。
ob_start();
出力バッファリングを有効にします。
do_shortcode( ‘[‘ . $php_file . ‘]’ );
ショートコード [cart_totalquantity] を変換します。
$ret = ob_get_clean();
現在のバッファの内容を取得し、出力バッファを削除します。

以上、ご参考になれば幸いです。

ありがとうございます。
皆さまにすべての良きことが雪崩のごとく起きますように。

コメント

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