ステップアップ!WordPress中級

ログイン画面のカスタマイズ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
少しのコードとCSSだけで、簡単にログイン画面の見た目をカスタマイズする方法を解説します。
講師:
12:33

字幕

このレッスンでは ログイン画面のカスタマイズについて 学習します 今 WordPress の ログイン画面を開いています このままでは特に使う上で 何の問題もないんですが 簡単なコードを描くだけで この画面を 少しカスタマイズすることができます まず このログインフォームの上に 表示されている― WordPress のロゴを 自分の好きなロゴに変更してみたいと思います エディターに移動します 画面のカスタマイズは funtions.php を使って行っていきます 使用しているテーマ内にある functions.php を開きます funtions.php の一番下に コードを追記していきます コードを描くときには このようにコメントを使って 後でわかりやすいようにしておくと 良いと思います ログイン画面を カスタマイズするための オリジナルの php 関数を記述します この fuction から始まる コードが― php の関数と呼ばれるものです この場合は custom_login という オリジナルの関数を 自分が宣言したということになります この custom_login という部分は 自分の好きな― 関数名を付けることができます 一度管理画面に移動して この― ロゴがどのように表示されてるのかを 確認してみたいと思います インスペクターを開きます この ロゴの部分を表示すると a タグの中に background-image が― 設定されているのがわかります これですね また background-size が 指定されています ログインクラスの中の h1 の a タグに対して このような CSS が付けられています ですので これを CSS で 上書きしてしまえば このロゴを変更することが できるはずです それではスタイルシートを 記述するようにしたいと思います スタイルシートを 画面に出力するためには php のこの echo という 関数を使います 普通に style type="text/css" を 記述します まず background-image を指定します あらかじめテーマフォルダーの中に 自分で― 作ったロゴ画像を アップロードしておきます ロゴ画像は 背景を透過した png 画像にしておくと良いと思います だいたい幅が 300px 以内にしておくと良いと思います 今回は このようなロゴを用意しています URL の欄に URL を描いていきますが ここで― get_bloginfo を使うと簡単です template_directory とすれば 設定しているテーマのフォルダーまで 自動的にパスを記述してくれます 後はそこからの ロゴ画像までの パスを記述します CSS を上書きしますので 必ず !important 属性を 付けておくと良いと思います このような形で get_bloginfo を使って パスを途中まで読み込んでいます それから background-size も指定しましょう 自分の作った 画像のサイズを指定して 同じく !important を付けておきます 書けたら style を閉じて 出来上がりですね この 今作った custom_login という関数は呼び出すと このスタイルシートの記述を 画面に出力する― という ただそれだけの簡単な関数を作りました そしてこの関数をですね add_action という― WordPress 関数を使って ログイン画面に アタッチしていきます add_action('login_head') とすると ログイン画面のヘッダー情報― HTML の Head タグ内に Head タグ内で この関数が実行されます 二つ目のパラメータには custom_login という 今作った関数を指定します こうすることで― ログイン画面の HTML Headの中で この関数が実行される― そうすると Head の中の このスタイルシートの記述が 追加されますので ログイン画面のロゴ画像を 新しい CSS で上書きすることが できるという そういう仕組みになっています それでは保存をして― サイトで表示を確認してみます はい 変わりました オリジナルのロゴになっています この部分ですかね wp-login.php で― background-image 自分が指定した画像― とサイズが入っています それではもう少し カスタマイズを進めてみたいと思います 次は背景画像を 変更してみましょう やはりインスペクターを使って まず body タグを調べます そうすると 背景は body.login という クラスが付いた body に対して― 色が指定されていますので この部分を カスタマイズしていけば良いと思います それではエディターに戻ります スタイルシートに― 記述を追加していきます body.login でしたので body.login に対して― background-image を指定します パスを get_bloginfo で取得して 新しい背景画像の― パスを記述します 忘れずに !important を付けておきます 他に background-position― ですとか background-size など 指定したい項目を追加していきます それでは実際に サイトでの表示を確認してみます はい 自分でアップロードした 綺麗な背景画像が出てきました これでログインする わくわく感が増えたと思います 背景に画像を付けたところ この― リンクがちょっと見難くなってしまったので ここも変更しておきたいと思います やはりインスペクターを使って 要素を特定していきます ここの色は .login #nav の― a タグと .login #backtoblog のa タグに 付けられていますので 今までと同じように CSS を記述してみましょう 二つに― 二つの a タグに対して 色を白に― したいと思います それから font-weight を― bold にします マウスオーバーの時の表示も 変えましょう 同じく色を白にしておきます それから text-shadow を つけておきたいと思います text-shadow は 古いブラウザーでは 表示がされませんが 最近のブラウザであれば 問題なく表示されます 今回はサンプルのサイトですので 比較的に 新しい CSS を使っています はい できました これで保存をして表示を確認してみましょう リロードします えっと 白くでましたが まだちょっとおかしいですね 失礼しました ここが間違っています はい 正しい表示になりました 今回変えたところ以外にもですね この― ログインフォームの中の 入力欄やボタンなども CSS を使って変更していくことが 出来ると思います このようにログイン画面を カスタマイズすることができます このレッスンでは ログイン画面の カスタマイズ方法について学習しました

ステップアップ!WordPress中級

このコースではWordPressのマルチサイトという機能を使って、通常では作るのが難しい本格的なウェブサイトの構築方法を解説します。 同機能を有効にする手順から実際にマルチサイトを使ってサイトを構築する方法、また本格的なウェブサイトを作るうえで役に立つ実践的なWordPressのカスタマイズ方法までを丁寧に説明します。

3時間24分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年02月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。