Laravel パスワードリセットメールのデザイン変更
はじめに
今回の記事はLaravelにある
パスワードリセット機能、こちらのメール部分の編集方法を
忘れないようにメモを残しておきます。
パスワードリセットメール
まず、デフォルトの画面をみてみましょう
はい。見事に英語ですね
おまけに、上の方にLaravelのロゴ入りです
これだとメールが届いたユーザーが困惑してしまうので
メールの文章を編集していきましょう
vendor/laravel/framework/src/Illuminate/Auth/Notifications/ResetPassword.php
vendor/laravel/framework/src/Illuminate/Notifications/resources/views/email.blade.php
上記の2ファイルがパスワードリセットメールの箇所なので確認していきましょう
ResetPassword.php
まずこちらのファイルからいきましょう
protected function buildMailMessage($url)
{
return (new MailMessage)
->subject(Lang::get('Reset Password Notification'))
->line(Lang::get('You are receiving this email because we received a password reset request for your account.'))
->action(Lang::get('Reset Password'), $url)
->line(Lang::get('This password reset link will expire in :count minutes.', ['count' => config('auth.passwords.'.config('auth.defaults.passwords').'.expire')]))
->line(Lang::get('If you did not request a password reset, no further action is required.'));
}
上記のように記載されているクラスのreturnの中の文章を見てみると
先ほどメールに送られてきた文章と一致していることがわかります。
つまり、この文章をmailのbladeに渡して表示しているということがわかりました。
直接ResetPassword.php内を編集しても文字の変更もできますが
「vendor」配下は汚さないのが一般的なので
英語を日本語に変換するという形で対応していきましょう
変換ファイルの作成
まず、始めに
config/app.php の下記の箇所を書き換えてください。
- 'locale' => 'en',
+ 'locale' => 'ja',
-'faker_locale' => 'en_US',
+'faker_locale' => 'ja_JP',
次に
resources/lang の配下に
ja.jsonというファイルを作成します
中身は
{
"Hello!": "ご利用ありがとうございます。",
"Regards":"よろしくお願いいたします。",
"Reset Password Notification": "パスワード再設定のお知らせ",
"Reset Password":"パスワードの再設定を行う",
"You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード再設定のリクエストがありました",
"This password reset link will expire in :count minutes.": "このリンクの有効期限は受信してから、:count 分です。",
"If you did not request a password reset, no further action is required.": "内容にお心当たりがない場合は、本メールは破棄して頂けるようお願いいたします。"
}
※日本語訳は、自由に設定してください
上記のように変更して、パスワードリセットメールを送ってみると。。。
日本語になっています!!
email.blade.php
次に編集するファイルです
laravelではおなじみのbladeファイルですね
@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
# @lang('Hello!')
@endif
@endif
{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}
@endforeach
{{-- Action Button --}}
@isset($actionText)
<?php
switch ($level) {
case 'success':
case 'error':
$color = $level;
break;
default:
$color = 'primary';
}
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endisset
{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}
@endforeach
{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
@lang('Regards'),<br>
{{ config('app.name') }}
@endif
{{-- Subcopy --}}
@isset($actionText)
@slot('subcopy')
@lang(
"If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\n".
'into your web browser:',
[
'actionText' => $actionText,
]
) <span class="break-all">[{{ $displayableActionUrl }}]({{ $actionUrl }})</span>
@endslot
@endisset
@endcomponent
上記のようになっているかと思います。
こちらも「vendor」配下のファイルになりますので直接変更をするのは、やめておきましょう
なので、bladeを編集するために下記のコマンドを実行します
php artisan vendor:publish --tag=laravel-notifications
すると、同じ内容のファイルが下記のディレクトリに複製されています。
resources/views/vendor/Notifications /email.blade.php
下記のコマンドも実行してください!
logoマークやデザインを変更する際に必要になるので!
php artisan vendor:publish --tag=laravel-notifications
resources/views/vendor/にmailフォルダが出来たと思います。
これで準備は終わりです。レイアウトを変更していきましょう
logoの変更
メールにあったLaravelのlogoを変更するには
先ほど複製したmailフォルダのhtml配下にあるheader.bladeを編集すれば
logoを変えたり、非表示にしたりできます。
footerの変更
コピーライトは
message.bladeの24行目にあるのでこちらを変更するなり削除するなりしましょう!
デザインの変更
最後にデザインの変更です。
ボタンの色や背景の色の変更方法です。
編集するファイルの場所は、先ほどのコマンドで作成した
resources/views/vendor/mail/html/themes 配下にある
default.cssです!
例えば背景色を変更したいなら
/* Body */
.body {
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
background-color: #edf2f7;
border-bottom: 1px solid #edf2f7;
border-top: 1px solid #edf2f7;
margin: 0;
padding: 0;
width: 100%;
}
上記箇所のbackground-colorを変えるなど
このCSSファイルを変更することで
デザインを変更することができます!
長くなりましたが以上になります。
Author And Source
この問題について(Laravel パスワードリセットメールのデザイン変更), 我々は、より多くの情報をここで見つけました https://qiita.com/donguriMAN/items/88318e6dbf9298dc2417著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .