お洒落なログインボタンのウィジェット
スポンサーリンク
Welcartにも標準でログイン用ウィジェット（右の画像）が用意されていますが、SSL設定ではないページのサイドバーにも表示されてしまいますので、なんとなく不安です。
そこで、自分でログインボタンのウィジェットを作ってみました。
ボタンからSSL対応のログインページへ誘導して、更にログイン後はウィジェットのボタンからログアウトするというものです。
もくじ
- sidebar.phpにコードを記入
- CSSで装飾
- 鍵アイコンをつけるカスタマイズ
1. sidebar.phpにコードを記入
通常はWordpressダッシュボード→外観→ウィジェット で、サイドバーのカスタマイズが出来ます。
しかし、このウィジェットカスタマイズではPHPが書けないので、今回はsidebar.phpに直接書き込みます。
※ウィジェットにPHPコードが書けるプラグインもありますが、セキュリティ観点上Welcartでは推奨されていません。
<div class="contents widget-conts">
こんにちは、<?php if(usces_is_login()){printf(__('Mr/Mrs %s', 'usces'), usces_the_member_name('return'));}else{echo 'ゲスト様';} ?>
<div class="loginout"><?php echo usces_loginout(); ?></div>
<?php if(usces_is_login()): ?>
登録内容の確認・変更はこちら
<div class="memberpage"><a href="<?php echo USCES_MEMBER_URL; ?>">会員ページ</a></div>
<?php else: ?>
新規登録はこちらから
<div class="newmember"><a href="<?php echo USCES_NEWMEMBER_URL; ?>" title="<?php _e('New enrollment for membership.','usces') ?>">新規会員登録</a></div>
<?php endif; ?>
</div>
サイドバーのコンテンツの一つと認識されるように、divタグで挟んでwidget-contsというclassをつけています。
2. CSSで装飾
上記のコードを書くだけでは、まだ文字だけの表示です。
CSSカスタマイズ前
ここからは、クラス名などをうまく利用してCSSでボタン装飾します。
CSSでのボタン風装飾には、CSS Button Generatorが便利。CSS編集の際、Button Generatorのコードをコピーした場合は、font-sizeやfont-familyなど要らないコードを削除して下さい。また、下記をaタグに追記しておくのもボタンらしく見えるコツです。
display: inline-block; /*ボタン全体をリンクに*/ width: 80%; /*ボタンの幅を一定に*/ text-align: center; /*文字をボタンの中央に*/
そうしてちょいちょいっとCSSをいじれば、こんなに素敵に！
CSSカスタマイズ後
3. 鍵アイコンをつけるカスタマイズ
ログイン・ログアウトボタンにはそれぞれCSSで南京錠アイコンをつけると、さらにそれらしく見えます。
その場合は、Button GeneratorのCSSをaタグに適用してしまうとbackgroundが使えなくなるので、aタグを挟んでいるdivにボタン用CSSを適用して、aタグにbackgroundで南京錠アイコンをつけるのが良いと思います。
鍵マーク・ログイン前とログイン後
上記のボタンでよろしければ以下のCSSをどうぞ。
鍵の画像は、画像の名前をicon-lock.png（鍵が閉じているもの）icon-unlock.png（鍵が外れているもの）として、お使いのテーマのimagesフォルダに用意して下さい。
/* ログインウィジェットのボタン */
.newmember, .loginout, .memberpage{
width: 90%;
text-align: center;
margin: 5px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #dcdcdc;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
color:#777777;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
margin: 5px 6%;
}
.newmember:hover, .loginout:hover, .memberpage:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.newmember:active, .loginout:active, .memberpage:active {
box-shadow: inset 1px 1px 1px rgba(000,000,000,0.2);/*ボタンプッシュ時の動き*/
}
.newmember a, .loginout a, .memberpage a{
text-decoration: none;
display: block;
color: #333;
padding: 4% 10%;
}
/*ログインボタンの鍵画像*/
.loginout a.usces_login_a {
background: url(./images/icon-lock.png) 20% no-repeat;
}
.loginout a.usces_logout_a{
background: url(./images/icon-unlock.png) 20% no-repeat;
}
筆者の環境で作っています。微妙に異なる場合があると思いますので適宜調節して下さい。
