WordPressのネットショップ構築プラグインWelcart（ウェルカート）を使用した販売を行っているサイトで、カートの中の個数をサイドバーなど（ウィジェット）に表示したい時がありました（画像のような感じです）。
その方法として、カート内個数を表示させるためのファイルを用意し、そのファイルをテキストウィジェットで使用できるショートコードを作成して対応しました。
まずはカートの中の個数表示用のPHPファイルを作る
Welcartには、カート内の商品数量合計を表示する usces_totalquantity_in_cart という関数が用意されていますので、これを使用します。
以下の内容の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 を使います。
カートのアイコンには 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();
- 現在のバッファの内容を取得し、出力バッファを削除します。
以上、ご参考になれば幸いです。
ありがとうございます。
皆さまにすべての良きことが雪崩のごとく起きますように。
コメント