クライアントに納品するWordPressの管理画面カスタマイズ vol.4.5

ログイン画面のカスタマイズを、もっと深くカスタマイズする方法を紹介していこうと思い、記事を書こうと思いましたが、記事のタイトルをどうしようか迷いました。

というのも、クライアントに納品するwordpressの管理画面カスタマイズ vol.4にてログイン画面の簡単なカスタマイズ方法を紹介、クライアントに納品するwordpressの管理画面カスタマイズ vol.5にてクライアントへの状況案内の記事を作成済みで、この記事の番号は・・・4と5の間ぐらいだろ~な~ということで、タイトルは4.5としています。。

分かりづらっ!

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

この記事はちょっと長いです。なので、先にこのようなログイン画面が作れるますよーとここに表記しておきます。

ログイン画面サンプル
ログイン画面サンプル

 

まずはvol4のこのようなカスタマイズ方法は簡単ですね。

ログイン画面4
ログイン画面4

でも、クライアントへCMSとして提供するので、もっと自社のCMSらしいデザインにしたい。

もっとより深いカスタマイズをしたい。そういったカスタマイズ方法を記載しています。

 

まずはデフォルトのログイン画面を確認

ログイン画面
ログイン画面

いつものログイン画面です。この画面をカスタマイズしていきます。

 

Yahoo!っぽいやつを参考として

ログイン画面
参考にするヤフーのログイン画面

今回カスタマイズ後の画面をヤフーのログイン画面風と決めました。

ヤフーのログイン画面をおおまかに分けると、

  • ヘッダー(ロゴ、ヘルプへのリンク、パスワード変更の案内)
  • コンテンツ(ログインフォーム、広告的なリンク?)
  • フッター(いろんなリンク)

です。(おおざっぱ過ぎ?)

じゃあさっそくやっていきましょ。

 

全体枠

ログインフォームの全体枠css
ログインフォームの全体枠css

管理画面で全体の幅を指定しているのは#loginとなっていますので、#loginのスタイルをまずは変更。

※管理画面にCSSの読み込み方が分からない人はクライアントに納品するwordpressの管理画面カスタマイズ vol.4を読んでね。

Yahooは950pxなので、ここは同じように。

#login {
 width: 950px;
 margin: 0 auto;
 padding: 10px 0;
}

これで、全体の幅が大きくなりました。

全体幅変更後
全体幅変更後

やけに入力フォームが長いですが、今は気にせず。

次に、ロゴ画像の変更。

ログイン画面のロゴ部分
ログイン画面のロゴ部分

ここはヤフーと同じサイズの幅141px、高さ36px設定で。 (画像へのパスは設置したパスに変えてね。)

ここで注意ですが、ロゴ画像のサイズを変更する際、background-sizeの値をautoもしくはその画像のサイズにして下さい。でないと、作成したロゴ画像がbackground-sizeで指定したサイズに無理やり伸縮されます。

#login h1 a {
 width: 141px;
 height: 36px;
 background-image: url(./logo.png);
 background-size: auto;
 padding: 0;
}

せっかくなので、マウスオーバーも。

#login h1 a:hover {
 background-image: url(./logo_hover.png);
}
ロゴ画像変更
ロゴ画像変更

ちょっとロゴの上下の余白が狭く感じるので、余白もつけます。

#login h1 {
 padding: 18px 0;
}
ロゴ画像余白
ロゴ画像余白

うん、こんな感じでしょう。

 

次はログインフォーム。

ヤフーのログインフォームは右側に位置していて、上に10px、右に10pxの余白、幅は275px となっています。
ここも同じように変更していきます。

ログインフォームソース
ログインフォームソース

ソースを見ると、form の idはloginformとなっていて、いかにも#loginformとしてCSS設定をしていそうですが、ここのCSS設定は .login form にて設定されているので少し注意。

.login form {
 width: 275px;
 margin: 10px 10px 0 auto;
}

これで、このようになります。

ログインフォームサイズ変更後
ログインフォームサイズ変更後

ログインフォームが右に寄った事で、左側の広告にあたるような部分の空白がなんとも気になりますが、今はそのままで。

あ、「パスワードをお忘れですか?」の部分もここは右に移動させましょうか。

.login #nav, .login #backtoblog {
 width: 275px;
 margin: 10px 10px 0 auto;
}
ログイン画面その後
ログイン画面その後

余計空白が目立ちましたが、まだそのまま。フッターにリンクを表記していきましょう。

※ログイン画面フッターにリンクを表記する方法が分からない人はクライアントに納品するwordpressの管理画面カスタマイズ vol.4を読んでね。

ヤフーは色々ありますが、今回は「お問い合わせ」とコピーライトの表記をします。

ソースはこれ。

<div class="footer">
 <ul>
  <li>
   <a href="#">contact</a>
  </li>
 </ul>
 <p class="copyright">Copyright (C) 2013, SAMPLE. All Rights Reserved.</p>
</div>

こんな感じに設定。

ソース設定例
ソース設定例

cssはこんな感じに。

.login .footer {
 width: 950px;
 margin: 0 auto;
 text-align: center;
 border-top: 1px solid #777;
 padding: 10px 0 12px;
}

で、それらしくなってきました。

フッター設置後
フッター設置後

 

次は、ロゴの右側にもお問い合わせのリンクを設置(ヤフーでいう、ヘルプの代わり)

フッターに独自の表記を追加する場合は、WordPressにてアクションフックが既に用意されているので簡単ですが、ヘッダーのロゴの近くにソースを追加するとなると、どのフックなのか。

調べてみましたが、見当たらず….。 😳

しょうがないので、ここはJavascript(jQuery)で要素を追加していきます。

ここでロゴ周りのソースを確認。

<div id="login">
 <h1>
  <a href="wordpress.org">site name</a>
 </h1>
 ******* here **********
 <form name="loginform" ....

#login直下のh1の周辺に、お問い合わせのリンクのソースを追加します。
橙字で here と記載した部分です。

まずは、Javascriptファイルを読み込ませる為に、functions.phpに以下を記載。

function mylogin() {
 wp_enqueue_script( 'my-login-js' , get_template_directory_uri() . '/login.js' , array( 'jquery' ) );
}
add_action( 'login_head' , 'mylogin' );

これで、http://サイトURL/wp-content/themes/テンプレートディレクトリ/login.js

というJavascriptファイルがログイン画面に読み込まれます。

login.jsファイルを用意し、まずはちゃんとファイルが読み込まれているかどうかを確認する為に以下のコードを記載。

jQuery( function($) {
 alert('test');
});

これで「test」とアラートが出たら、正常に読み込まれています。
(アラートが出ない人は何かの記述が間違っているか、既にどこかでJavascriptのエラーが発生していると思われます。コンソールを確認してみてください)

javascriptの例
javascriptの例

まずは、お問い合わせリンクを、h1要素の後に追加します。

$(".login #login h1").after('<p><a href="#">***************</a></p><div class="clear"></div>');

これで、お問い合わせリンクが追加されました。

 

お問い合わせリンク追加
お問い合わせリンク追加

後は追加した要素にCSSを設定。

#login .head_link {
 float: right;
 width: 270px;
 padding: 24px 14px 0;
 text-align: right;
}

h1要素にfloat: leftを指定するのを忘れずに。

#login h1 {
 padding: 18px 0;
 float: left;
}

これで、このようになります。

リンク追加後
リンク追加後

こんな調子でどんどんいきましょう。

次に、ログイン画面左側の大きな余白の広告面っぽい部分。そのままではスタイルを適用するのが難しい為、ログインフォーム自体をdivで囲みます。

jsファイルに下記を追記してください。

$(".login #loginform").wrap('<div class="my-login-form" />');

すると、

ログインフォームを囲う
ログインフォームを囲う

.my-login-formというクラスのdivで、ログインフォームを囲う事ができます。あとはいつも通りCSSの設定です。

.my-login-form {
 width: 950px;
 height: 480px;
 background: url(./login_bg.png) no-repeat 0px 0px;
}

login_bg.pngは、幅950px、高さ480pxのただのオレンジ色の画像を用意。

これで、

背景指定後
背景指定後

このようになります。

よく見ると、あれ!?フォームが上にくっつき過ぎですね。
「パスワードをお忘れですか?」も下のほうにいきました。

なぜでしょう。ログインフォームにマージントップ10pxは指定されていますが。

まぁいいや、として。まずはログインフォームが上にくっつき過ぎている点を修整します。

.my-login-form {
 width: 950px;
 height: 480px;
 background: url(./login_bg.png) no-repeat 0px 0px;
 padding-top: 1px;
}

padding-topを追加。

次に、「パスワードをお忘れですか?」の部分を移動させる為に、jsファイルに以下を追記してください。

var $LosgPass = $(".login #backtoblog").clone();
$(".login #backtoblog").remove();
$(".login #loginform").after( $('<div>').append( $LosgPass ).html() );
var $LosgPass = $(".login #nav").clone();
$(".login #nav").remove();
$(".login #loginform").after( $('<div>').append( $LosgPass ).html() );

これで、ほぼ完成してきました。

ほぼ完成図
ほぼ完成図

この時点で一旦、IETesterを使用して、IE8で確認しましたが、表示の崩れはありませんでした。

 

最後に、ログインフォームのデザインを変更していきます。

ちなみに、これはヤフーのログインフォーム。

ヤフーのログインフォーム
ヤフーのログインフォーム

Yahooのログインフォームの場合、「ユーザー名」「パスワード」という表記部分が、入力する部分に記載されているかのように見え、クリックすると真っ白になります。

WordPressのログインフォームのソースは以下のようになっています。

ログインフォームのソース
ログインフォームのソース

このソースをベースに、色々と改変していきます。

ここは少し難しいです。

まず、ユーザー名と記載されている部分が、一切タグで囲まれていないのでとても扱いづらい。

なので今回はspanタグで囲み、CSSを適用してカスタマイズする事にしました。

その囲ったspanタグは、inputにfocus&blurした際に、IDが入力されているかどうかのチェックで表示するorしない。と表示を変更する仕様にします。

jsファイルは以下。

var $UserField = $(".login #loginform p:eq(0)");
 var $UserFieldClass = $("label" , $UserField).attr("for");
 var $UserFieldValue = $("input" , $UserField).val();

 $UserField.attr( "class" , $UserFieldClass );
 $("label br" , $UserField).remove();

 $("label" , $UserField).contents().filter(function() {
 return this.nodeType == 3 && !/\t/.test(this.data);
 }).wrap("<span/>");

if( $UserFieldValue != "" ) {
 $("span" , $UserField).hide();
 } else {
 $("span" , $UserField).show();
 }

$("input" , $UserField).focus(function() {
 $("span" , $UserField).hide();
 });
 $("input" , $UserField).blur(function() {
 if( $("input" , $UserField).val() != "" ) {
 $("span" , $UserField).hide();
 } else {
 $("span" , $UserField).show();
 }
 });

 var $PassField = $(".login #loginform p:eq(1)");
 var $PassFieldClass = $("label" , $PassField).attr("for");
 var $PassFieldValue = $("input" , $PassField).val();

 $PassField.attr( "class" , $PassFieldClass );
 $("label br" , $PassField).remove();

 $("label" , $PassField).contents().filter(function() {
 return this.nodeType == 3 && !/\t/.test(this.data);
 }).wrap("<span/>");

if( $PassFieldValue != "" ) {
 $("span" , $PassField).hide();
 } else {
 $("span" , $PassField).show();
 }

$("input" , $PassField).focus(function() {
 $("span" , $PassField).hide();
 });
 $("input" , $PassField).blur(function() {
 if( $("input" , $PassField).val() != "" ) {
 $("span" , $PassField).hide();
 } else {
 $("span" , $PassField).show();
 }
 });

cssは以下。 

.login #loginform p {
 position: relative;
}
.login #loginform p label span {
 position: absolute;
 font-size: 16px;
 top: 10px;
 left: 8px;
}
.login #loginform .user_pass {
 width: 70%;
 float: left;
}

ただ、このままだと、

jscss適用後
jscss適用後

float のおかげで表示が崩れます。なので、追加でjsファイルに以下を。

var $Forget = $(".login #loginform .forgetmenot").clone();
 $(".login #loginform .forgetmenot").remove();
 $(".login #loginform .submit").after( $('<div>').append( $Forget ).html() );

$(".login #loginform .forgetmenot").after( '<div class="clear"></div>' );

これで、どうでしょう。ばっちりじゃないでしょうか。念の為IEでチェック。

IE8  & IE9 での表示チェック
IE8  & IE9 での表示チェック

ばっちりですね。

ユーザー名をクリックすると、

ユーザー名クリック
ユーザー名クリック

入力フィールドが空になります。ユーザー名を入力すると、その入力名を維持しているように見えます。

これで、完璧。なんじゃないかな。 🙂

あとは背景やログインフォーム部分をもう少し凝ったりして、

ログイン画面サンプル
ログイン画面サンプル

このようにもできるはずです。是非お試しください。

写真:http://www.pakutaso.com/

クライアントに納品するWordPressの管理画面カスタマイズ vol.4

vol.1~vol.3 までで、管理画面のカスタマイズはほとんど終えたと思います。
前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.3

 

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次は、デフォルトのログイン画面をカスタマイズします。

 

ログイン画面

ログイン画面
ログイン画面

これがデフォルトのログイン画面。WordPressのロゴがあり、クリックするとWordPress.orgのサイトへ飛びます。

別にこの状態を変更する必要は無いですが、特にWordPress.orgにリンクさせる必要もないと思います。
逆に、WordPress.orgにジャンプすると「これ何ですか?」となって、説明するのがちょっと大変。。。

なので、この状態をカスタマイズします。

 

ログインフォーム

ログインフォーム設定
ログインフォーム設定

この項目はログインフォームのロゴのカスタマイズができます。
ログをクリックするとクライアントサイトのトップにジャンプするように。
ロゴのタイトルはクライアントサイトの名前になるようにカスタマイズできます。

例ですが、ロゴ画像をクライアントのロゴ画像に変更する場合。

ログインフォーム設定例1
ログインフォーム設定例1

こんな感じです。これで、ログイン画面を確認してみます。

ログイン画面2
ログイン画面2

おっと、ロゴ画像を用意するのを忘れていました。

とりあえず、適当にロゴ画像を用意して、指定したディレクトリに入れると、

ログイン画面3
ログイン画面3

ものすごく、ロゴの画像がつぶされてしまいました。 😳
元のロゴ画像のサイズを調べてみると、幅(width)274px、高さ(height)63pxのようなので、そのサイズにロゴ画像を調整して、もう一度確認すると…

ログイン画面4
ログイン画面4

これでよさそうです。

あとはお好みで、独自のCSSを読み込んだり、フッターにテキストを追加してください。

もっとログイン画面をカスタマイズしたいという方は、クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5をご覧ください。

次は、クライアントに納品するwordpressの管理画面カスタマイズ vol.5 で、クライアントの管理画面のダッシュボードに、現在の契約内容やお知らせを表示する方法です。