WordPress標準のログイン画面に画像スライダーを入れたりデザインをカスタマイズできるプラグイン「Login Slider」

閲覧いただきありがとうございます。当サイトのURLは変更となりました。

旧アドレス(http://happy2010.wpblog.jpで始まるアドレス)でブログなどからのリンク、お気に入り登録、RSS登録などを頂いている方は、恐れ入りますが登録の確認と変更をお願いいたします

まあバックエンドだから仕方ないことですが、Wordpress標準のログイン画面はちょっと無機質な感じがしませんか?

そこでCSSを追加してデザイン変更を!!と思っても、実はWordpressのログイン画面などは通常のテーマで使われているCSSとは別のファイル(別物)なんです。したがってテーマのCSSでカスタマイズしても一向に反映されないんですね。

自身でCSSの編集ができる人なら

Wordpressでは通常のテーマで制御できない管理画面側のCSSがあります。「Admin Customizer」オリジナルのCSSを記述して自由にログイン画面や管理画面のデザインを変更できるプラグインです。

などを使ってカスタマイズすればOKですね。でもそこまでしなくても・・・という方も多いはず。

それにいくらカスタマイズしても色や文字の大きさなどのカスタマイズだけではやっぱりどこか冷たい?感じがする・・・という場合におすすめなのが今回紹介する【Login Slider】です。

この記事を公開する時点ではログイン画面に画像スライダーを使えるプラグインはこれだけだと思われます。

スポンサーリンク

【Login Slider】プラグインの基本的な機能・できること

  1. ログイン画面にスライダー画像を挿入できる
  2. 画像にはそれぞれリンクが設定でき、クリックで別のページへリダイレクトできる
  3. 基本的に変更するであろう項目についてはメニュー化されている
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Login Slider】プラグインの設定画面や表示の日本語化と翻訳

【Login Slider】プラグインは日本語化が可能な言語ファイルが同梱されており、翻訳してみましたが適用されないようです(設定項目が少ないので英語表記でも大丈夫だと思います)。

【Login Slider】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Login Slider】プラグインの基本的な使い方

設定は「外観」→「カスタマイズ」を開き、出てくるカスタマイザーメニューの一番下に追加される「Login Slider」から行います。さまざまな項目については以下の通りです

Slidesメニュー

スライダー画像の設定を行います。最大で7枚までの画像をスライド表示させることができます。

設定項目は

  1. Transition Style
  2. 画像入れ替え時の効果を設定します

  3. Slide Duration (milliseconds)
  4. 画像を入れ替える速度を設定します

で、この設定を行った上で画像を追加していくだけです

Colors and Brandingメニュー

ログイン画面のいろいろなデザイン変更ができます
項目は

  1. Login Form Logo
  2. ログイン画面にあるWordpressロゴをオリジナル画像に変更できます

  3. Body Background
  4. ログイン画面全体の背景色です

  5. Form Background
  6. ログイン情報入力フォームの背景色です

  7. Form Label Color
  8. 入力フォームラベルの色です

  9. Form Input Background Color
  10. 入力欄の背景色です

  11. Form Input Text Color
  12. 入力した文字の色です

  13. Form Button Text Color
  14. ボタンの文字色です

  15. Form Button Background Color
  16. ボタンの背景色です

  17. Below Form Links
  18. フォーム下のリンク文字色です

※ボタンの色はホーバー時(マウスオーバー時)の設定項目もあります

【Login Slider】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

残念ながらカスタムCSSを適用する機能がないためさらに細かく設定変更するには別のプラグインを用いるなどする必要がありますが、今回は同時使用のテストをしていません。

が、これぐらいのカスタマイズができればおそらく十分でしょうし、他のプラグインとのCSS読み込み順などによっては表示が崩れたりする可能性がありますから自身でチェックしてみてくださいね。

プラグインのテスト環境&個人的評価

最後に【Login Slider】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

  1. WordPressのバージョン:4.7.5
  2. PHPのバージョン:7.0
  3. テーマ:Simplicity バージョン2.3.0g
  4. プラグインのバージョン:1.0.0
  5. このプラグインの最新バージョンは1.0.0です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

  1. 設定のしやすさ:★★★★★
  2. 使いやすさ:★★★★☆
  3. おすすめ度:★★★★☆

多数のユーザーで投稿するタイプのサイトでなくても、ログイン画面に画像があるだけで何となくやる気になりますよ。モチベーションアップにおすすめのプラグインです。

Amazonの人気商品

CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る