wordpress関数と独自のcssでログイン/ログアウトボタンを作成する
セッション対応のログインボタンはwp_loginout()で出力可能
WordPressの登録/ログインボタンはログイン状態の有無によって以下のように動的に表示およびリンク先が変わる。
- 登録 ↔ サイトの管理
- ログイン ↔ ログアウト
カスタマイズしたログインボタンを作成する場合にリンク先を
<a href="http://blog.local/wp-login.php">ログイン</a>
と固定で作成してしまうと、ログイン済みのユーザーに対してもログインのリンクを表示することになってしまう。セッション対応のログインリンクを表示するためには以下のようにwordpress関数を利用する。
wp_loginout();
これだけでログイン/ログアウトのリンクがセッションに応じて動的に表示されるようになる。[登録]リンクをボタンタイプのリンクへwordpressをカスタマイズの記事では、登録ボタンについて書いてあり、以下のようにHTMLに記述することで動的なリンクを並べて表示することができる。
<?php wp_register($before = '', $after = '', $echo = true); ?> <?php wp_loginout(); ?>
wp_loginoutの出力変更はloginoutフィルターフックで行う
wp_loginout()関数は標準だとプレーンなanchorタグを出力する。出力されるリンクをcssでカスタマイズするためにclass属性を追加するために、
loginout filter fook
が利用できる。プラグイン内では以下のようにフックできる。
add_filter('loginout', array($this, 'new_loginout'));
テーマ内でfunctions.phpに書く場合は、
add_filter('loginout', 'new_loginout');
とする。
new_loginoutという独自関数内では以下のようにanchorタグにclass属性を挿入してみた。
function new_loginout( $link )
{
$link = str_replace("<a href", "<a class='button' href", $link);
return $link;
}
フィルターフックによりclass属性のanchorタグが出力されるようになる。上の場合だと以下のようなHTMLが出力されることになる。
<a href="http://blog.local/wp-login.php" class="button">ログイン</a>
class属性を追加すればcssでデザインしオリジナルのボタンにすることができる
フィルターフックによりclass属性が追加されたので、対応するcssでログインリンクをボタン化し、登録リンクと横並びの状態にしてみる。
a.button {
display: inline-block;
margin: 0.5em;
border-bottom: 1px solid #3aa373;
font-size: 1.28em;
color: #fff !important;
background-color: #E6402A;
padding: 0.3em 1.5em;
font-weight: 420 !important;
border-radius: 5px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
transition: all 0.2s ease-out;
}
a.button:hover {
background-color: #D94412;
}
このcssを適用すると以下のような表示にすることができる。
ログイン済みの場合は動的にリンクが変化する。
wordpress関数を利用してリンクを出力すれば多言語化にも対応したリンクとなる
ログインセッションに対応したリンクをwordpress関数で出力でき、フィルターフックを利用してカスタマイズが可能であることを確認できた。wordpressのリンク出力関数を利用すれば、セッションにより動的にリンクが変化するだけでなく、多言語化に対応したリンクが出力される点も書いておきたい。
ブログサイトに設定されている言語情報によりリンクの情報が動的に変化するという意味になる。
ブログサイトの言語が英語に設定されていれば、wordpress関数は上のように英語化されたリンクを自動的に出力してくれるようになる。
wordpressでログインボタン回りのカスタマイズやサイト制作を行う場合におぼえておきたいノウハウ。