2018.08.24

[WordPress]ログイン画面にテキストやリンクを追加する方法

こんばんは、webエンジニアのゾノ( @ozonosho )です。

さて、今日のブログではWordPressでログイン画面にテキストやリンクを追加する方法を紹介したいと思います。

今回は「ログイン画面の下に規約ページへのリンクを貼りたい」という相談をいただいたので実装してみました。

WordPressでログイン画面にテキストやリンクを追加する方法

実装は簡単で、functions.phpに下記のコードを追加してください。

//ログイン画面にテキスト追加
function custom_login_message() {
  $message = '<div class="login-message"><p>テキストや<a href="">リンク</a>を自由に追加することができます。</div>';
  return $message;
}
add_filter('login_message', 'custom_login_message');

ログイン画面のソースを直接編集してしまうと、Wordpress更新時に編集内容が上書きされて消えてしまう可能性があります。

そのためログイン画面にメッセージを追加するためのフック「login_message」を利用して実装しましょう。

そのまま利用するとメッセージはフォームの上部に表示されるため、表示位置や装飾を変更したい方はCSSで調整してください。

ログイン画面のCSSを編集する方法

テーマのスタイルシートではログイン画面のCSSを編集できないため、ログイン画面用のCSSファイル「login.css」を作成したうえでfunctions.phpに下記のコードを追加してください。

//ログイン画面にlogin.cssを適用する
function login_logo() {
 echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/login.css" />';
}
add_action('login_head', 'login_logo');

これでログイン画面のCSSを自由に編集することができます。