LoginPress:ログインページをカスタマイズできる
ログインページを外観カスタマイザーでカスタマイズできる WordPress 用プラグインの紹介です。
それは「Custom Login Page Customizer | LoginPress」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
- 1. Custom Login Page Customizer | LoginPress
- 2. Gutenberg エディターでの動作
- 3. インストール手順
- 4. 日本語化
- 5. 専用メニュー
- 6. 初回操作時
- 7. 使い方
- 8. 設定(Settings)
- 9. インポート&エクスポート(Import/Export)
- 10. アドオン(Add-Ons)
- 11. 代替プラグイン
- 12. URL
Custom Login Page Customizer | LoginPress
Custom Login Page Customizer | LoginPress は、ログインページを外観カスタマイザーを使ってリアルタイムプレビューで確認しながらカスタマイズできます。
カスタマイズした内容は、登録フォームとパスワードリセットフォームにも適用されます。
「ログイン状態を保存する」チェックボックスに自動的にチェックを付けたり、
登録フォームに確認用の入力フィールドを追加することもできます。
また、ログインセッションの有効期限を設定したり、
ログイン時にユーザー名かメールアドレスのどちらかだけを使用するようにもできます。
カスタマイザーでの設定を含む全ての値をインポート&エクスポートできます。
記事を作成もしくは更新時点でのバージョン:v 1.2.4
マルチサイトでの利用:可
Gutenberg エディターでの動作
Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Custom Login Page Customizer | LoginPress – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「LoginPress」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Custom Login Page Customizer | LoginPress を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「コメント」メニューの下に追加されています。
「外観」メニューにもメニューが追加されています。
初回操作時
If you opt-in some data about your installation of LoginPress will be sent to WPBrigade.com (This doesn’t include stats)
and You will receive new feature updates, security notifications etc No Spam, I promise.LoginPressのインストールに関するデータがWPBrigade.comに送信されます(統計情報は含まれていません)。
そして、あなたは新機能のアップデート、セキュリティ通知などを受け取るでしょう。いいえ、迷惑メールはありません、私は約束します。
このプラグインの使用状況を送信するかどうかを尋ねてきます。
送信したくない場合には「Skip This Step」リンクをクリックしましょう。
使い方
専用のカスタマイザーは、LoginPress のメニュー「Customizer」もしくは、
外観メニューの「LoginPress」から起動できます。
専用カスタマイザーのデフォルト画面。
右側の画面に表示されているアイコンをクリックすると、
そのアイコンに対応したカスタマイザーのメニューが開きます。
Themes
Default テーマ以外はプレミアム版でしか選択できません。
Logo
- Disable Loge
ロゴを不可にするかどうか。 - Logo Image
ロゴにする画像を選択します。 - Logo Width
ロゴ画像の幅を px 単位で指定します。
初期値:84 px - Logo Height
ロゴ画像の高さを px 単位で指定します。
初期値:84 px
- Space Bottom
ロゴ画像と下の入力フィールドとの隙間を px 単位で広げることができます。
初期値:0 px - Logo URL
ロゴ画像にリンクする URL を入力します。未入力の場合にはホームが設定されます。 - Logo Title
ロゴ画像のタイトル属性に設定する文字列を入力します。
Background
- Background Color
背景色を選択します。
Background Image
- Enable Background Image?
背景画像を有効にするかどうか。 - Background Gallery
背景画像として使用する画像をギャラリーから選択します。 - Background Image
メディアライブラリー等から背景画像を選択することもできます。
- Background Repeat
背景画像を繰り返すかどうか。繰り返す場合には、背景画像のリピートの仕方を指定します。 - Select Position
背景画像の表示開始位置を指定します。 - Background Image Size
背景画像を拡大もしくは縮小したい場合に使用します。
Background Video
Enable Background Video
動画を背景に使うかどうか。
Background Video
背景に埋め込む動画ファイルを選択します。
Customize Login Form
Login Form
- Enable Form Transparency
フォームを透明化するかどうか。 - Form Background Image
フォームの背景画像を選択します。 - Form Background Color
フォームの背景色を選択します。 - Form Width
フォームの幅を px 単位で入力します。
初期値:350 px - Form Minimum Height
フォームの最小の高さを px 単位で入力します。
初期値:200 px
- Form Radius
フォームの角を丸まり具合を px 単位で入力します。
初期値:0 px - Form Shadow
フォームに影を付ける際の付け具合を px 単位で入力します。
初期値:0 px - Form Shadow Opacity
フォームの影の不透明度を % 単位で入力します。「0」に近いほど影は透明になります。
初期値:0 %
- Form Padding
フォームのパディングを設定できます。 - Border
フォームの枠線のスタイルを設定できます。
Input Fields
- Input Field Background Color
入力フィールドの背景色を選択します。 - Input Field Text Color
入力フィールドの文字色を選択します。 - Input Text Field Width
入力フィールドの幅を % 単位で入力します。
初期値:100 % - Input Text Field Margin
入力フィールドのマージンを設定できます。
Input Field Labels
- Input Field Label Color
入力フィールドのラベルの文字色を選択します。 - Rememberme Label Color
「ログイン情報を保存する」の文字色を選択します。
Customize Forget Form
- Forget Form Background Image
パスワードリセットフォームの背景画像を選択します。 - Forget Form Background Color
パスワードリセットフォームの背景色を選択します。
reCAPTCHA
プレミアム版のみ有効の機能です。
Button Beauty
- Button Color
ボタンの色を選択します。 - Button Border Color
ボタンの枠線の色を選択します。 - Button Color(Hover)
マウスホバー時のボタンの色を選択します。 - Button Border(Hover)
マウスホバー時のボタンの枠線の色を選択します。
- Button Box Shadow
ボタンの影の色を選択します。 - Button Text Color
ボタンの文字の色を選択します。
- Button Size
ボタンのサイズを % 単位で入力します。
初期値:100 % - Button Top Padding
ボタンのトップパディングを px 単位で入力します。
初期値:13 px - Button Bottom Padding
ボタンのボトムパディングを px 単位で入力します。
初期値:13 px
- Radius
ボタンの角の丸み具合を px 単位で入力します。
初期値:5 px - Shadow
ボタンの影の付き具合を px 単位で入力します。
初期値:0 px - Shadow Opacity
影の不透明度を % 単位で入力します。
初期値:80 % - Text Size
文字のサイズを px 単位で入力します。
初期値:15 px
Error Messages
表示するエラーメッセージをカスタマイズできます。
Welcome Messages
通常のメッセージをカスタマイズできます。
- Message Field Border
メッセージフィールドの枠線のスタイルを設定できます。 - Message Field Background Color
メッセージフィールドの背景色を選択します。
Form Footer
Lost Your Password Text
Enable Footer Text
フォームの下の「登録」と「パスワードをお忘れですか?」セクションのテキスト文字列をカスタマイズするかどうか。
無効にするとセクション自体が非表示となります。
- Lost Password Text
「パスワードをお忘れですか?」部分のテキスト文字列を入力できます。 - Select Text Decoration
文字のデコレーションを選択します。
- Footer Text Color
文字色を選択します。 - Footer Text Hover Color
マウスホバー時の文字色を選択します。 - Text Font Size
テキスト文字列のサイズを px 単位で入力します。
初期値:13 px - Footer Background Color
背景色を選択します。
Back To Site Text
Enable “Back to" Text
「戻る」リンクを有効にするかどうか。
- “Back to" Text Decoration
「戻る」テキストのデコレーションを選択します。 - “Back to" Text Color
「戻る」テキストの文字色を選択します。 - “Back to" Text Hover Color
マウスホバー時の「戻る」テキストの文字色を選択します。
- “Back to" Text Font Size
テキストのフォントサイズを px 単位で入力します。
初期値:13 px - “Back to" Background Color
「戻る」リンクの背景色を選択します。
LoginPress Footer Text
- Enable Copyright Note
「著作権について」を表示するかどうか。 - Copyright Note
著作権表示として表示する内容を入力します。 - Show some Love.
このプラグインの宣伝用として「Powered By」を表示するかどうか。 - Love Position
「Powered By」の表示位置を選択します。
Google Fonts
プレミアム版のみ有効の機能です。
Custom CSS/JS
カスタム CSS と Javascript コードを入力できます。
設定(Settings)
- Session Expire
ログインセッションを分単位で設定することができます。
初期値:10 分 - Auto Remember Me
「ログイン状態を保存する」チェックボックスに自動的にチェックを付けるかどうか。 - Custom Password Fields
登録フォームに確認用の入力フィールドを追加するかどうか。
- Login Order
ユーザーがログインする際にユーザー名またはメールアドレス、あるいはその両方を使用してログインできるかを選択します。 - Reset Default Settings
このプラグインのデフォルトの設定に戻すかどうか。 - Remove Settings on Uninstall
このプラグインをアンインストール時に全ての設定を削除するかどうか。
インポート&エクスポート(Import/Export)
カスタマイザーでの設定を含む全ての LoginPress の設定をインポート&エクスポートできます。
アドオン(Add-Ons)
有償機能に関する情報が表示されます。
代替プラグイン
LoginPress にほしい機能が無かった場合には、
LoginPress 以外にもログインページをカスタマイズできるプラグインを記事にしています。
以下では、LoginPress を含めて 6 個を簡単に紹介しています。
ログインページをカスタマイズできるWordPressプラグイン一覧