Welcartのログイン、ログアウトボタンの画像を切り替える

  • 公開日:2013/9/1
この記事は最終更新日から6年以上が経過しています。


Welcart関数であるusces_loginout()でログイン、ログアウトのリンクを切り替えることができます。これをリンクではなくボタン画像で切り替える方法です。

1. ログインとログアウトのボタン画像を用意

今回はテーマ配下のimagesフォルダに以下の画像を置きました。
ログイン:btn_login.png
ログアウト:btn_logout.png

2. functions.phpにカスタム関数を追記

テーマのfunctions.phpに以下を追記します。
関数名は任意です。
画像のパスは1で配置した場所を指定します。

// ログインボタンの切替え
function usces_loginout_btn( $out = '' ) {
    global $usces;
    if ( !$usces->is_member_logged_in() )
        $res = '<a href=&quot;' . apply_filters('usces_filter_login_uri', USCES_LOGIN_URL) . '&quot;><img src=&quot;'.get_template_directory_uri().'/images/btn_login.png&quot; alt=&quot;' . apply_filters('usces_filter_loginlink_label', __('Log-in','usces')) . '&quot;></a>';
    else
        $res = '<a href=&quot;' . apply_filters('usces_filter_logout_uri', USCES_LOGOUT_URL) . '&quot;><img src=&quot;'.get_template_directory_uri().'/images/btn_logout.png&quot; alt=&quot;' . apply_filters('usces_filter_logoutlink_label', __('Log out','usces')) . '&quot;></a>';
    if( $out == 'return' ){
        return $res;
    }else{
        echo $res;
    }
}

3. 表示部分の記述

実際に表示したい場所には以下のように書くだけです。

ついでに、新規会員登録とマイページも切替えたいと思います。
ログイン、ログアウトと同様に画像を準備します。
新規会員登録:btn_member.php
マイページ:btn_mypage.php

表示個所に以下の記述をします。
ログイン、ログアウトと同様に関数にもできますが、私はテンプレートに直接記述しました。

<?php if (usces_is_login()) { ?>
    <a href=&quot;<?php echo USCES_MEMBER_URL; ?>&quot;><img src=&quot;<?php echo get_template_directory_uri(); ?>/images/btn_mypage.php&quot; alt=&quot;マイページ&quot;></a>
<?php } else { ?>
    <a href=&quot;<?php usces_url('newmember') . apply_filters('usces_filter_newmember_urlquery', NULL); ?>&quot;><img src=&quot;<?php echo get_template_directory_uri(); ?>/images/btn_member.php&quot; alt=&quot;新規会員登録&quot;></a>
<?php } ?>