WordPressのログイン画面に独自のCSSを適応させる方法

ここではWordPressの通常のログイン画面をCSSでカスタマイズためのCSSの読み込み方法を忘れても大丈夫なように下記に記載しています。

ログイン画面にオリジナルCSSを適応させる

functions.php内に下記のコードを書き込み。その後、cssのパスはご自身で変更を行ってください。

/* -----------------
ログイン
--------------------*/
function my_login_page() { ?>
<!-- php内にcssを直接記入 例 -->
 <style>
   .login::before{
       position: absolute;
       top: -10%;
       left: -10%;
       z-index: -2;
       width: 120%;
       height: 120%;
       content:"";
       background: url(<?=get_template_directory_uri()?>/image/login_bg.jpg);
       filter: blur(8px);
   }
 </style>
 <!-- テーマファイル内のCSSファイルを読み込み 例 -->
 <link rel="stylesheet" href="<?=get_template_directory_uri()?>/css/login/login.css">
<?php }
add_action( 'login_enqueue_scripts', 'my_login_page' );

制作の理由

ログインフォームはWordPressのphp(関数)などを使うことで比較的簡単に自作ができますが、セキュリティ系のプラグインとの絡みを考えると通常のログインフォームを使うことが望ましいと判断しました。


この記事が気に入ったらサポートをしてみませんか?