フラットUIを使用したカスタムWordPressログインフォームの作成

最終更新日-2021年7月8日

WordPressはかなり前から存在しています。 ブロガーのポータルとして始まったものが、今では世界のウェブサイト全体のほぼ半分を運営するコンテンツ管理システムになっています。 そのシンプルで直感的なインターフェースとカスタマイズ可能なデザインにより、Webサイトをゼロから構築しようとしている世界中のWeb開発者やデザイナーにとってナンバーワンの選択肢となっています。

WordPressを利用する人は誰でも、ユーザーエクスペリエンスを向上させ、クリック率を高めるための詳細と独創性に目を向けています。 ほとんどの開発者は主にテーマのみに焦点を当てていますが、メンバーシップサイトやその他のプラットフォームの場合、開始点はログインページです。 これを想像してみてください。あなたがウェブサイトに新しく登録されたメンバーであり、未登録のメンバーと同様の画面にログインした場合、影響はわずかに弱まり、かなり不満を感じます。 ただし、ビジネスの要件と美学に合わせてカスタマイズされたWordPressログインページがあると、訪問者とピケの興味に良い印象を残します。

これを支援するために、Webサイトのデザインスキームと視覚的に統合するカスタムWordPressログインページのスタイルを含めるための簡単なガイドラインをいくつかまとめました。

プラグインなしでカスタムWordPressログインページを構築する

選択したテーマのfunction.phpファイルのソースコードを更新することで、WordPressのログインページにいくつかの変更を加えることができます。 ただし、WordPressを更新すると、これらの変更は失われます。 これは、ログインページのテーマスタイルシートがWordPressテーマ設定の一部ではないためです。このため、カスタムログインページ用に別のスタイルシートを作成する必要があります。

テーマフォルダに「Login」というフォルダを作成することから始め、 custom-login-style.cssという名前の.txtファイルを追加します。 そこから、ログインページをカスタマイズして一意性を追加するために、いくつかの基本的な変更を行うことができます。

背景を変更する

ページまたは特定のボタンの背景色を更新するには、 background-color：＃222222を選択し、ヘキサコードを選択した色に変更します。 カラーパレットを利用して、ビジネスの美学を引き立たせ、視覚的に魅力的な色を選択します。

さらに、ログインページの背景画像を変更する場合は、コード行background-image：url（logo_login.png'）を選択し、ファイルの名前であるlogo_login.pngを更新された画像ファイルのURLに置き換えます。 。

クライアントにブランドを覚えてもらいたい企業は、WordPressのロゴをカスタムロゴに変更できます。 カスタムロゴ画像ファイルをLoginフォルダーに保存した後、ファイル名をbackground-image：url（'logo_login'）コードのカスタムロゴに置き換えます。

パディングとマージンを調整してログインフォームをカスタマイズする

開発者は、ログインフォームを調整して、ページを魅力的でサイトの外観に適切に適合させることができます。 ボタンのパディングからラベルの色やフォントサイズなどまで。パディングを増やすことでテキストが圧迫されて表示されないように、ボタンの内側にスペースを追加できます。 コードパディングの数値を増やすだけです：12px 12px12px12px。 周囲の要素が密集しないようにボタンの外側により多くのスペースを作成したい場合は、コードマージンのマージンスペースを増やすことでそれを行うことができます：12px 12px12px12px。 いくつかの空白を追加するだけの単純なものでも、ログインページの最終的な外観に集合的に影響を与え、よりまとめられたように見せることができます。

フォントサイズと色の変更

コードfont-size：15pxを使用して、段落テキスト、リンク、またはフォームフィールドのフォントサイズを変更できます。数値を好みのサイズに調整します。 コードカラー＃222222の色を更新し、色を置き換えることで、フォントの色についても同じことができます。

ログインエラーメッセージの変更

インターネット上でのサイバー犯罪や詐欺の増加に伴い、Web開発者やビジネスオーナーは、自分のWebサイトでチャンスをつかむことができず、機密データを失うことができません。 ユーザーが急いで間違ったログイン資格情報を入力すると、デフォルトのエラーメッセージが自動生成されます。 これはユーザーにこのエラーを通知するためのものですが、ハッカーがログインデータを解読しようとするギャップになる可能性があります。 したがって、ハッカーを寄せ付けないための最善の方法は、 function.phpファイルのエラーメッセージを変更することです。

まとめると、CSSの豊富なノウハウを持っている人は、WordPressログインフォームのスタイルとカスタマイズを最終的に制御できます。 ただし、コーディングスキルが不足していて、カスタムログインページを作成する能力が制限されている場合でも、心配する必要はありません。 WordPressリポジトリには、 WordPress Web開発プロセスを合理化するために利用できるさまざまなプラグインオプションがあり、最も人気のあるものをリストアップしています。

ログインカスタマイザプラグイン

Login Customizerは最もユーザーフレンドリーなプラグインの1つであり、WordPressCustomizerから直接変更を加えることができます。 簡単なインストールプロセスの後、 WordPressダッシュボードの[外観]タブから簡単にアクセスできます。 [カスタマイズの開始]をクリックすると、カスタマイザー画面にリダイレクトされ、好みに応じてすべての領域を再設計します。

Colorlibログインカスタマイザ

Colorlib Login Customizerは、プレミアムプラグインにあるすべての機能を備えながら、無料で提供する、機知に富んだ柔軟なツールです。 その幅広い独自の機能により、ユーザー向けのカスタムソリューションを構築しようとしているWeb開発者にとって究極の選択肢となっています。 これも、WordPress Customizerを介したカスタマイズを可能にするため、ログインページを簡単にナビゲートして改造することができます。

要約すれば

結局、ログインページをカスタマイズする方法は複数あり、すべての経験レベルの開発者がそれらを試してみることができます。 重要なのは、カスタムのWordPressログインページが実際のサイトの美学と一致して補完し、ユーザーエクスペリエンスを向上させることです。 サイトのログインページをカスタマイズすることは、クライアントを喜ばせ、ブランドアイデンティティを構築するためのシンプルで効果的な方法です。 シンプルに始めて基本に基づいて構築することで、シンプルな画面を素晴らしいものに変え、クライアントにこれまでに見たことのないパーソナライズされたオンライン体験を提供できます。