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

この記事を読むのに必要な時間は約 10 分です。

WordPressのログイン画面をカスタマイズするには?

WordPressログイン画面 上記が標準のWordPressログイン画面になります。 自社に愛着を持ってもらうためにこれを自社のロゴを入れて背景も変更してみようと思います。 ロゴだけなら[simple_tooltip content='標準のWordPressにはない機能(プログラム)が「プラグイン」という形で配布されており、それらを追加インストールする事によって、ウェブサイトに様々な機能を持たせる事が出来ます。']プラグイン[/simple_tooltip]でできるのですが、残念ながら背景まで変更できるってないですね。 ところがある方法を取るとできてしまったりします。 今回は、これを[simple_tooltip content='「テーマ」というのは、テンプレートのこと。ワードプレスの見た目を整える型のこと。「親テーマ」というは、そのテーマの作成者によって公表・配布されている、テンプレートそのもののこと。「親テーマの見た目をそっくり引き継ぎつつ、カスタマイズ可能なテーマのこと」']子テーマ[/simple_tooltip]使って実現させてみます。 ログイン画面 上記のようにカスタマイズしてみたいと思います。

子テーマに必要なファイル

  • style.css
  • functions.php
  • (screenshot.png)
上記の2つもしくは、3つあれば可能です。

style.cssの作成方法

■style.css■
@charset “utf-8”; /* Theme Name: 子テーマの名前 Theme URI:? 子テーマのアドレス Template:???? 親テーマの名前 Description: ?テーマの詳細 Author:   名前 Tags:    子テーマのタグ Version:    親テーマのバージョン(TCDテーマでは必須) */
[simple_tooltip content='文字コード(もじコード)とはコンピュータ上で文字(キャラクタ (コンピュータ))を利用する目的で各文字に割り当てられるバイト表現。もしくは、バイト表現と文字の対応関係(文字コード体系)のことを指して「文字コード」と呼ぶことも多い。']文字コード[/simple_tooltip]をUTF-8にするためにメモ帳では[simple_tooltip content='文字コード(もじコード)とはコンピュータ上で文字(キャラクタ (コンピュータ))を利用する目的で各文字に割り当てられるバイト表現。もしくは、バイト表現と文字の対応関係(文字コード体系)のことを指して「文字コード」と呼ぶことも多い。']文字コード[/simple_tooltip]変更できないので[simple_tooltip content='TeraPad(テラパッド)は、Windowsで動作するSDIタイプのテキストエディターである。']Terapad[/simple_tooltip]で作成することをおすすめします。

functions.phpの記述

■functions.php■
<?php // // Recommended way to include parent theme styles. //? (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme) // add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’) ); } // /*——————————————-*/ /*? ログイン画面カスタマイズ /*——————————————-*/ function custom_login() { ?> <style> .login { background: url(背景画像のアドレス) no-repeat center center; background-size: cover; } </style> <?php } add_action( ‘login_enqueue_scripts’, ‘custom_login’ ); function custom_login_logo() { ?> <style> .login #login h1 a { width:? 250px; height: 100px; background: url(ロゴのアドレス) no-repeat 0 0; } body.login div#login {background-color: #c0c0c0; padding-left: 15px; padding-right:15px; padding-bottom: 10px; margin-top: 35px; border-radius: 10px;} .input[type=text]??? { border-radius : 15px; } .input[type=password]??? { border-radius : 15px; } body.login div#login form#loginform p.submit input#wp-submit? { border-radius : 15px; background-color: #1e3465; } body.login div#login form#loginform p.submit input#wp-submit:hover?? { border-radius : 15px; background-color: #1730ea; } </style> <?php } add_action( ‘login_enqueue_scripts’, ‘custom_login_logo’ ); ?>
functions.phpも同じように[simple_tooltip content='文字コード(もじコード)とはコンピュータ上で文字(キャラクタ (コンピュータ))を利用する目的で各文字に割り当てられるバイト表現。もしくは、バイト表現と文字の対応関係(文字コード体系)のことを指して「文字コード」と呼ぶことも多い。']文字コード[/simple_tooltip]をUTF-8で作成してください。 [simple_tooltip content='「テーマ」というのは、テンプレートのこと。ワードプレスの見た目を整える型のこと。「親テーマ」というは、そのテーマの作成者によって公表・配布されている、テンプレートそのもののこと。「親テーマの見た目をそっくり引き継ぎつつ、カスタマイズ可能なテーマのこと」']子テーマ[/simple_tooltip]作成がちょっとしんどいという方には、下記の[simple_tooltip content='標準のWordPressにはない機能(プログラム)が「プラグイン」という形で配布されており、それらを追加インストールする事によって、ウェブサイトに様々な機能を持たせる事が出来ます。']プラグイン[/simple_tooltip]をオススメします。 One-Click Child Theme One-Click Child Theme [simple_tooltip content='「テーマ」というのは、テンプレートのこと。ワードプレスの見た目を整える型のこと。「親テーマ」というは、そのテーマの作成者によって公表・配布されている、テンプレートそのもののこと。「親テーマの見た目をそっくり引き継ぎつつ、カスタマイズ可能なテーマのこと」']子テーマ[/simple_tooltip]作成が簡単にできますよ 対応できるのは、有償対応ですがバッチリあっという間に変更可能ですよ。 作成したファイルは、[simple_tooltip content='File Transfer Protocolの略でFTPですが、ファイル転送の約束事というのが意味です。サーバーにあるファイルを手元のパソコンから操作できるソフトがFTPソフトになります。']FTPソフト[/simple_tooltip]でアップロードしてくださいね。 FTPの使い方[icon name=”external-link” class=”” unprefixed_class=””]は、こちらの記事でご確認ください。 → FTPの使い方[icon name=”external-link” class=”” unprefixed_class=””]  

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!