WelcartでWelcome機能をWidget化する

Posted on by Eternal-tears
Sponsored Link

WelcartでWelcome機能を作る方法で実装したものをWidget化しようという内容です。

Sponsored Link


まずはじめに、下記の記事の内容を実装していることが前提です。
下記の記事の関数などが自作テーマ内のfunction.phpに記載されていないと表示されません。

用意する画像

  • ご利用状況の画像…btn_availability.png
  • 新規会員登録画像…btn_register.png
  • カートを見る画像…btn_viewcart.png
  • ログインボタンの画像…btn_logon.png
  • ログアウトボタンの画像…btn_logout.png

※ウィジェットにオプション機能など、タイトルを含めて一切付けません。

sidebar.phpファイルに直書きしていたソースは下記になります。
元々自分用に作成したので、画像サイズが入っています。
sidebar.phpに直書きする場合は、
ご自分で作られた画像ボタンのサイズに修正してみてください。

<aside class="login">
<p class="welcome">こんにちは<br>
<?php if(usces_is_membersystem_state() || usces_is_cart()): ?>
<?php if(usces_is_membersystem_state()): ?>
<strong><?php if(usces_is_login()){printf(__('Mr/Mrs %s', 'usces'), usces_the_member_name('return'));}else{echo 'ゲスト様';} ?></strong><br>
いらっしゃいませ。</p>
<?php usces_loginout_btn(); ?>
<?php if(usces_is_login()): ?>
<p class="availability"><a href="<?php echo USCES_MEMBER_URL; ?>"><img src="<?php bloginfo('template_directory'); ?>/images/btn_availability.png" alt="ご利用状況" width="152" height="24"></a></p>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>

<?php if ( ! usces_is_login() ) { ?>
<p class="register">初めてのお客様は<br>
<a href="<?php echo USCES_NEWMEMBER_URL; ?>" title="<?php _e('New enrollment for membership.','usces') ?>"><img src="<?php bloginfo('template_directory'); ?>/images/btn_register.png" alt="<?php _e('New enrollment for membership.','usces') ?>" width="152" height="24"></a>
</p>
<?php } ?>
<p class="incart">カートの中身<br>
商品数：<?php usces_get_item_conut(); ?>点<br>
合計：<?php echo usces_total_price('return'); ?>円（税込）</p>
<p class="viewcart"><a href="<?php echo USCES_CART_URL; ?>"><img src="<?php bloginfo('template_directory'); ?>/images/btn_viewcart.png" alt="カートを見る" width="182" height="29"></a></p>
</aside>

function.phpに記載するWelcome機能をウィジェット化するのソースの追加

class ShopWelcome_Widget extends WP_Widget {
	function ShopWelcome_Widget() {
    $widget_ops = array('classname' => 'login_widget', 'description' => 'Welcartのいらっしゃいませ表示' );
    $this->WP_Widget('WelcomeWidget', 'Welcome Widget', $widget_ops);
	}

	function widget($args, $instance) {
	echo $args['before_widget']."\n";
	echo '<p class="welcome">こんにちは<br>'."\n";
		if(usces_is_membersystem_state() || usces_is_cart()):
		if(usces_is_membersystem_state()):
	echo '<strong>';
		if(usces_is_login()){printf(__('Mr/Mrs %s', 'usces'), usces_the_member_name('return'));}else{echo 'ゲスト様'; }
	echo '</strong><br>'."\n";
	echo 'いらっしゃいませ。</p>'."\n";
	echo usces_loginout_btn() . "\n";
		if(usces_is_login()):
	echo '<p class="availability"><a href="';
	echo USCES_MEMBER_URL;
	echo '"><img src="' . get_bloginfo("template_directory") . '/images/btn_availability.png" alt="ご利用状況" width="152" height="24"></a></p>' ."\n";
		endif;endif;endif;
		if ( ! usces_is_login() ) {
	echo '<p class="register">初めてのお客様は<br>'."\n";
	echo '<a href="';
	echo USCES_NEWMEMBER_URL;
	echo '" title="';
	_e("New enrollment for membership.","usces");
	echo '"><img src="' . get_bloginfo("template_directory") . '/images/btn_register.png" alt="';
	_e("New enrollment for membership.","usces");
	echo '" width="152" height="24"></a>'."\n";
	echo '</p>'."\n";
		}
	echo '<p class="incart">カートの中身<br>'."\n";
	echo '商品数：';
	usces_get_item_conut();
	echo '点<br>' ."\n";
	echo '合計：';
	echo usces_total_price('return');
	echo '円（税込）</p>' ."\n";
	echo '<p class="viewcart"><a href="';
	echo USCES_CART_URL;
	echo '"><img src="' . get_bloginfo('template_directory') . '/images/btn_viewcart.png" alt="カートを見る" width="182" height="29"></a></p>' ."\n";
	echo $args['after_widget']."\n";
	}
}
function ShopWelcomeWidgetInit() {
	register_widget('ShopWelcome_Widget');
}
add_action('widgets_init', 'ShopWelcomeWidgetInit');

ログイン時に出力するソースと表示例

ログインしている状態の表示例

<aside class="login_widget">
<p class="welcome">こんにちは<br>
<strong>Eternal tears 様</strong><br>
いらっしゃいませ。</p>
<p class="logout"><a href="http://example.com/usces-member/?page=logout" class="usces_logout_a"><img src="http://example.com/wp-content/themes/テーマ名/images/btn_logout.png" alt="ログアウト"></a></p>
<p class="availability"><a href="http://example.com/usces-member/"><img src="http://example.com/wp-content/themes/テーマ名/images/btn_availability.png" alt="ご利用状況"></a></p>
<p class="incart">カートの中身<br>
商品数：1点<br>
合計：980円（税込）</p>
<p class="viewcart"><a href="http://example.com/usces-cart/"><img src="http://example.com/wp-content/themes/テーマ名/images/btn_viewcart.png" alt="カートを見る"></a></p>
</aside>

ログアウト時に出力するソースと実際の表示例

ログアウトしている状態の表示例

<aside class="login_widget">
<p class="welcome">こんにちは<br>
<strong>ゲスト様</strong><br>
いらっしゃいませ。</p>
<p class="logon"><a href="http://example.com/usces-member/?page=login" class="usces_login_a"><img src="http://example.com/wp-content/themes/テーマ名/images/btn_logon.png" alt="ログイン"></a></p>
<p class="register">初めてのお客様は<br>
<a href="http://example.com/usces-member/?page=newmember" title="新規ご入会はこちら新規ご入会はこちら"><img src="http://example.com/wp-content/themes/テーマ名/images/btn_register.png" alt=""></a>
</p>
<p class="incart">カートの中身<br>
商品数：1点<br>
合計：980円（税込）</p>
<p class="viewcart"><a href="http://example.com/usces-cart/"><img src="http://example.com/wp-content/themes/テーマ名/images/btn_viewcart.png" alt="カートを見る"></a></p>
</aside>

これで、ウィジェットエリアに自由に配置することができます。

Sponsored Link