はじめに
ECサイトのコーディングでは、ECサイト会員がログインしているときはメニューにログアウトを表示し、逆に会員がログインしていなければ、ログインが表示されるようにしないといけません。ただ、WelcartやMakeshop、カラーミーショップなどのECサイト構築サービスにはログイン状態によって「ログイン」「ログアウト」の表示を切り替えるためのテンプレートタグが用意されています。基本的に下記で紹介するようなテンプレートタグを使用することによって「ログイン」「ログアウト」の切り替えができるようになります。
「ログイン」「ログアウト」の切り替えテンプレートタグ
カラーミーショップ
<{if $members_login_flg == true}>
<a href="<{$members_login_url}>">ログアウト</a>
<{else}>
<a href="<{$members_login_url}>">ログイン</a>
<{/if}>Makeshop
<{if $member.is_logged_in}>
<a href="<{$url.logout}>">ログアウト</a>
<{else}>
<a href="<{$url.login}>">ログイン</a>
<{/if}>Welcart
<?php usces_loginout(); ?>WordPress管理画面の「外観」の「メニュー」にはテンプレートタグは使用できない
WordPressの「外観」の「メニュー」で設定したメニュー内でテンプレートタグを使用することはできません。なのでwelcartの会員のログイン状態によってクラスを付与することはできないかを考えました。
会員のログイン状態によってクラスを付与する方法
<body>タグにクラスを付与します。functions.phpに下記ソースコードを追加します。
<body>タグにはbody_class関数が使用されていたためadd_filterでカスタムクラスを追加しています。
function custom_usces_loginout_class($classes) {
global $usces;
$original_classes = $classes;
if ($usces->is_member_logged_in()) {
$original_classes[] = 'customer-loggedin';
} else {
$original_classes[] = 'customer-loggedout';
}
return $original_classes;
}
add_filter('body_class', 'custom_usces_loginout_class');このソースコードを追加すると会員ログイン時に<body>のclass内に「customer-loggedin」が追加され、ログアウト時には「customer-loggedout」が付与されます。
あとは外観のメニューで「ログイン」と「ログアウト」をカスタムリンクでそれぞれ追加をし、「customer-loggedin」が付与されている時には、「ログアウト」を表示させ、「customer-loggedout」が付与されているときは「ログイン」が表示されるようにすれば、WordPressの「外観」の「メニュー」で設定したメニュー内でもログインとログアウトの表示を切り替えることができるようになります。
