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

公開日:2017年9月10日 バックエンド(管理)
Knowledge Base Wordpress プラグイン
まあバックエンドだから仕方ないことですが、Wordpress標準のログイン画面はちょっと無機質な感じがしませんか?

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

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

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

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

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

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

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

WordPressの投稿や固定ページで動作していないショートコードを非表示にするプラグイン「Hide Broken Shortcodes」

WordPressでメディアにアップロードした画像やファイルを簡単にダウンロードできるプラグイン「WordPress Media Select Bulk Downloader」

WordPressでPHPのエラーが出たらメールで通知してくれるプラグイン「Fatal Error Notify」


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

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

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

インストール方法

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

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

を参照ください

【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. このプラグインの最新バージョンは現在Wordpress公式サイトに "login-slider" は存在しません(配布されていません)です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
【中古】 ビジネスサイトをこれからつくる WordPressデザイン入門 WordPress Ver.4.x対応 サイト制作から納品までのはじめの一歩 ..

【中古】 ビジネスサイトをこれからつくる WordPressデザイン入門 WordPress Ver.4.x対応 サイト制作から納品までのはじめの一歩 ..

1,045 円 (税込)
秋元英輔(著者),清野奨(著者),プライム・ストラテジー株式会社(その他)販売会社/発売会社:SBクリエイティブ発売年月日:2016/02/01JAN:9784797383300//付属品〜CD−ROM付
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報