Welcartでログイン、ログアウトの切り替えリンクを画像にカスタマイズ

Welcartの独自関数にログインとログアウトの切り替えを行うusces_loginout関数があるのですが、
この出力がテキストベースなので、
画像ボタンにしたいな〜と思いカスタマイズしてみました。

予め用意した画像ボタンをテーマのimagesフォルダに入れておきます。
ログインボタンの画像名は、btn_logon.png、
ログアウトボタンの画像名は、btn_logout.pngです。

下記のソースをテーマ内のfunction.phpに記載します。
[php]function usces_loginout_btn( $out = ”) {
global $usces;
if ( !$usces->is_member_logged_in() )
$res = ‘

‘;
else
$res = ‘

‘;

if( $out == ‘return’ ){
return $res;
}else{
echo $res;
}
}[/php] ※pタグが余計に入ってしまっていたため、7/27に修正済。

テーマ内の表示したい部分に下記のソースを挿入します。

[php][/php]

参考にした関数は、function/template.func.phpの1330行目の下記のソースです。

[php]function usces_loginout( $out = ”) {
global $usces;
if ( !$usces->is_member_logged_in() )
$res = ‘‘ . apply_filters(‘usces_filter_loginlink_label’, __(‘Log-in’,’usces’)) . ‘‘;
else
$res = ‘‘ . apply_filters(‘usces_filter_logoutlink_label’, __(‘Log out’,’usces’)) . ‘‘;

if( $out == ‘return’ ){
return $res;
}else{
echo $res;
}
}[/php]

CSSで背景画像にしてボタンに見せるのも１つの手段なのですが、
画像の方がきれいなのでカスタマイズしてみました。

ボタン画像にした表示例です。
ログアウトの状態です。

ログインの状態です。