ログイン画面へ画像スライダーを入れたりデザインをカスタマイズできるプラグイン「Login Slider」
公開日：2017年9月10日
バックエンド（管理）
まあバックエンドだから仕方ないことですが、Wordpress標準のログイン画面はちょっと無機質な感じがしませんか？
そこでCSSを追加してデザイン変更を！！と思っても、実はWordpressのログイン画面などは通常のテーマで使われているCSSとは別のファイル（別物）なんです。したがってテーマのCSSでカスタマイズしても一向に反映されないんですね。
自身でCSSの編集ができる人なら
などを使ってカスタマイズすればOKですね。でもそこまでしなくても・・・という方も多いはず。
それにいくらカスタマイズしても色や文字の大きさなどのカスタマイズだけではやっぱりどこか冷たい？感じがする・・・という場合におすすめなのが今回紹介する【Login Slider】です。
この記事を公開する時点ではログイン画面に画像スライダーを使えるプラグインはこれだけだと思われます。
【Login Slider】プラグインの基本的な機能・できること
- ログイン画面にスライダー画像を挿入できる
- 画像にはそれぞれリンクが設定でき、クリックで別のページへリダイレクトできる
- 基本的に変更するであろう項目についてはメニュー化されている
この記事を参考にプラグインの導入をする際以下に留意ください
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
- すべての環境で動作するとは限りません
- できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
- 有料版と無料版がある場合、テストは原則無料版のみで実施しています
- テスト環境については本文中に記載しています
- 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。
【Login Slider】プラグインの設定画面や表示の日本語化と翻訳
【Login Slider】プラグインは日本語化が可能な言語ファイルが同梱されており、翻訳してみましたが適用されないようです（設定項目が少ないので英語表記でも大丈夫だと思います）。
【Login Slider】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。
インストール方法の詳しい解説は
を参照ください
【Login Slider】プラグインの基本的な使い方
設定は「外観」→「カスタマイズ」を開き、出てくるカスタマイザーメニューの一番下に追加される「Login Slider」から行います。さまざまな項目については以下の通りです
Slidesメニュー
スライダー画像の設定を行います。最大で７枚までの画像をスライド表示させることができます。
設定項目は
- Transition Style
- Slide Duration (milliseconds)
画像入れ替え時の効果を設定します
画像を入れ替える速度を設定します
で、この設定を行った上で画像を追加していくだけです
Colors and Brandingメニュー
ログイン画面のいろいろなデザイン変更ができます
項目は
- Login Form Logo
- Body Background
- Form Background
- Form Label Color
- Form Input Background Color
- Form Input Text Color
- Form Button Text Color
- Form Button Background Color
- Below Form Links
ログイン画面にあるWordpressロゴをオリジナル画像に変更できます
ログイン画面全体の背景色です
ログイン情報入力フォームの背景色です
入力フォームラベルの色です
入力欄の背景色です
入力した文字の色です
ボタンの文字色です
ボタンの背景色です
フォーム下のリンク文字色です
※ボタンの色はホーバー時（マウスオーバー時）の設定項目もあります
【Login Slider】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
残念ながらカスタムCSSを適用する機能がないためさらに細かく設定変更するには別のプラグインを用いるなどする必要がありますが、今回は同時使用のテストをしていません。
が、これぐらいのカスタマイズができればおそらく十分でしょうし、他のプラグインとのCSS読み込み順などによっては表示が崩れたりする可能性がありますから自身でチェックしてみてくださいね。
プラグインのテスト環境＆個人的評価
最後に【Login Slider】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。
テストした環境
- WordPressのバージョン：4.7.5
- PHPのバージョン：7.0
- テーマ：Simplicity バージョン2.3.0g
- プラグインのバージョン：1.0.0
このプラグインの最新バージョンは現在Wordpress公式サイトに "login-slider" は存在しません（配布されていません）です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。
個人的な評価・感想ほか
- ５段階評価
- 設定のしやすさ：★★★★★
- 使いやすさ：★★★★☆
- おすすめ度：★★★★☆
多数のユーザーで投稿するタイプのサイトでなくても、ログイン画面に画像があるだけで何となくやる気になりますよ。モチベーションアップにおすすめのプラグインです。
Wordpress関連の本
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン＆スマホ両対応のＷｅｂサイトを作れる！ソーシャルメディアとの連携やＳＥＯ対策、バックアップなどの運用面も丁寧に解説。
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS（コンテンツ管理システム）です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。
このページはモバイル端末でもご覧いただけます
左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。
いつでもご相談・サイトカスタマイズの依頼を受け付けています
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちら
から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。
【スポンサーリンク】
閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします
