IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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


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="' . apply_filters('usces_filter_login_uri', USCES_LOGIN_URL) . '"><img src="'.get_template_directory_uri().'/images/btn_login.png" alt="' . apply_filters('usces_filter_loginlink_label', __('Log-in','usces')) . '"></a>';
    else
        $res = '<a href="' . apply_filters('usces_filter_logout_uri', USCES_LOGOUT_URL) . '"><img src="'.get_template_directory_uri().'/images/btn_logout.png" alt="' . apply_filters('usces_filter_logoutlink_label', __('Log out','usces')) . '"></a>';
    if( $out == 'return' ){
        return $res;
    }else{
        echo $res;
    }
}

3. 表示部分の記述

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

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

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

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