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

Sponsored Link

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

下記のソースをテーマ内のfunction.phpに記載します。

function usces_loginout_btn( $out = '') {
	global $usces;
	if ( !$usces->is_member_logged_in() )
		$res = '<p class="logon"><a href="' . apply_filters('usces_filter_login_uri', USCES_LOGIN_URL) . '" class="usces_login_a"><img src="'.get_bloginfo("template_directory").'/images/btn_logon.png" alt="' . apply_filters('usces_filter_loginlink_label', __('Log-in','usces')) . '"></a></p>';
	else
		$res = '<p class="logout"><a href="' . apply_filters('usces_filter_logout_uri', USCES_LOGOUT_URL) . '" class="usces_logout_a"><img src="'.get_bloginfo("template_directory").'/images/btn_logout.png" alt="' . apply_filters('usces_filter_logoutlink_label', __('Log out','usces')) . '"></a></p>';

	if( $out == 'return' ){
		return $res;
	}else{
		echo $res;
	}
}

※pタグが余計に入ってしまっていたため、7/27に修正済。

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

<?php usces_loginout_btn(); ?>

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

function usces_loginout( $out = '') {
	global $usces;
	if ( !$usces->is_member_logged_in() )
		$res = '<a href="' . apply_filters('usces_filter_login_uri', USCES_LOGIN_URL) . '" class="usces_login_a">' . apply_filters('usces_filter_loginlink_label', __('Log-in','usces')) . '</a>';
	else
		$res = '<a href="' . apply_filters('usces_filter_logout_uri', USCES_LOGOUT_URL) . '" class="usces_logout_a">' . apply_filters('usces_filter_logoutlink_label', __('Log out','usces')) . '</a>';

	if( $out == 'return' ){
		return $res;
	}else{
		echo $res;
	}
}

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

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

ログインの状態です。

共有: