福井のホームページの企画・制作 水雲(みずくも)
福井県福井市にてホームページの企画・制作全般、Flashコンテンツ制作などを行っております。


HOME > お仕事メモ > WordPressログイン画面をカスタマイズ


WordPressログイン画面をカスタマイズ

2009/02/26

WordPressのログイン画面は

ノーマルログイン画面

こんな感じなのだけど、このデザインをカスタマイズできないかな・・・
と思っていたら、こんなプラグインがあった。
BM Custom Login Plugin

[http://www.binarymoon.co.uk/projects/bm-custom-login/]
上記ページの「Download the plugin」からダウンロードできます。

  1. ダウンロードする
  2. ファイルを解凍
    「bm-custom-login」フォルダが生成されます。
    格納されているファイルは以下の通り
    ・readme.txt
    ・bm-custom-login.php
    ・bm-custom-login.css
    ・bm-custom-login-2.css
    ・「images」
    ・「image-templates」
  3. イメージ画像作成
    「image-templates」フォルダの中に
    「login-bkg-tile.psd」「footer.png」と、サンプルファイルがあるので
    それらを参考にデザインをカスタマイズすれば良いと思います。出来上がった画像ファイルを「images」フォルダに移動させますが
    スタイルシートで何も変更しない場合は、ファイル名は以下の通りです。
    タイトル、背景画像:login-bkg-tile.jpg
    ログインエリアの下の画像:login-bkg-bottom.gif
    「images」フォルダに元々入っている「login-bkg-tile-SAMPLE.jpg」は削除しても問題無いです。
  4. 必要に応じてスタイルシートを変更
    画像関係は「bm-custom-login.css」、それ以外は「bm-custom-login-2.css」に書かれています。
  5. FTPでアップロード
    「bm-custom-login」を「wp-content/plugins」にアップします。
    この際ですが、「readme.txt」や「image-templates」はアップする必要は無いと思います。
  6. 管理画面にて「bm-custom-login」をアクティブして、設定完了

自サイトでやる分には、ただの自己満足ですw
でも、お客様へ納品する場合などは使えるのじゃないかなーと思っています。

ちなみに、カスタマイズした感じはこんな感じです。
ログイン画面 カスタマイズ後


2件のコメント »

  1. [...] 詳しい設定の方法は、自サイトに掲載しましたので、よろしければご覧ください。 →http://www.mizukumo.jp/worksmemo/logincustomised [...]

    ピンバック by WordPressログイン画面をカスタマイズしてみた « 行雲流水 — 2009/02/26 @ 19:18

  2. [...] Custom Login Plugin ログイン画面をカスタマイズできる。 ≫インストールガイドページ [...]

    ピンバック by wordpressプラグイン【2010/5/13更新】 | WEBでいこう! — 2010/11/18 @ 13:46

コメントする