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

公開日:2017年9月10日 バックエンド(管理)


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

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

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

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

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

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

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

  1. ログイン画面にスライダー画像を挿入できる
  2. 画像にはそれぞれリンクが設定でき、クリックで別のページへリダイレクトできる
  3. 基本的に変更するであろう項目についてはメニュー化されている

この記事を参考にプラグインの導入をする際以下に留意ください

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

【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関連の本

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS(コンテンツ管理システム)です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。

  • 記事の作者: ひまあーと(管理人)

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


QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

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

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

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


【スポンサーリンク】


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