言語スイッチャーをカスタマイズするには？

ホームページ > ドキュメンテーション > ユーザー > 言語スイッチャーをカスタマイズするには？

内容

1 - デザインオプションで言語セレクタをカスタマイズする

2 - 言語選択フラグのカスタマイズ

3 - CSSで言語セレクタをカスタマイズする

4 - 言語セレクターの場所を選ぶ

5 - wpLinguaで言語セレクタをフルカスタマイズ！

続きを読む：

グラフィックチャーターに適応させるには、言語セレクターの外観をパーソナライズすることができます。このために、wpLinguaは多くのデザインオプションだけでなく、独自のカスタムCSSを追加するための自由を提供しています。

1 - デザインオプションで言語セレクタをカスタマイズする

wpLinguaに行くとき > スイッチャタブは、さまざまなカスタマイズオプションで画面を見つけます。スイッチャのデザインパネルは4種類のオプションを提供します。

スイッチャテーマ
スイッチャスタイル
表示された名前
旗様式

詳しくはこちらをご覧ください。

1.1 - 言語選択テーマ

これにより、言語のスイッチャーの色と境界スタイルを選択できます。

色の選択は5つの主題を提供します:

ライト: スイッチャの背景の白色
グレー: 灰色の背景色
ダーク: 黒い背景色
Blurの黒: 黒のテキストと境界線で透明でぼやけた背景色
Blurの白: 白いテキストと境界線で透明な背景色

それぞれのテーマは、形状と境界スタイルによって分解されます。

ダブル – スムーズ: 切替器は丸みのある角の二重の境界線によって組み立てられます。
ダブル – スクエア: 正方形の角が付いている二重ボーダー。
シンプルで滑らかな: 丸みを帯びた角を持つ単一の境界線。
シンプル – スクエア: 角の角の単一の境界。

1.2 - 言語セレクタのスタイル

これらのオプションは、スイッチャの言語のレイアウトを定義することができます...

インラインリスト: それぞれの言語が並んでいます。
ブロック: 言語は列に置かれます。
ドロップダウン: 言語はドロップダウンメニューに表示されます。これは、サイトが複数の言語を提供するときに推奨されます。

1.3 – 名前を表示

これらのオプションは、言語の名前がスイッチャーに書かれているかどうかを選択できます。

翻訳された名前: 言語の名前は、サイトの元の言語に翻訳されます。
元の名前: 各言語は、独自の言語(英語、フランス語、日本語、能力、スペイン語など)で名前を保持しています。
言語ID: 言語名は言語ID(FR、EN、DE、RUなど)を利用しています。
表示無し: テキストなし、フラグのみが表示されます。

1.4 - フラッグスタイル

これらのオプションは、スイッチャのフラグの外観を選択することができます。

サークル 丸いフラグを表示
長方形 長方形の旗を表示します
ウェーブ wavy フラグを表示
ディスプレイなし 言語名だけが表示されません。

2 - 言語選択フラグのカスタマイズ

フラグの形状を超えて、言語で表示するフラグも選択できます。これは、従来のフラグ以外のフラグを使用するという欲求かもしれません。たとえば、イギリス国旗の代わりに、米国またはオーストラリアの旗を英語の言語に使用できます。フランスの旗の代わりに、カナダまたはベルギーのフランス語。お問い合わせ

2.1 - 国旗の好みを選ぶ

wpLingua > wpLingua タブに移動します。
[フラグの編集] をクリックします。
お気に入りのフラグを選択し、変更を保存することを忘れないでください。
メディアライブラリに上流をインポートするパーソナライズされたフラグを使うこともできます。

2.2 - カスタムフラグを使う

ご利用にあたって カスタムフラグ次のように、最初にメディアライブラリにインポートする必要があります。

メディアに行く > ライブラリタブをクリックし、新しいメディアファイルを追加します。
フラグをインポートして、メディアを開きます。これで、URLをコピーしてクリップボードにクリックすることができます。
wpLingua > wpLinguaタブに移動して、カスタムフラグURLを貼り付けます。変更を保存。
スイッチャは新しいフラグを表示します。

必要に応じて各言語を繰り返します。

3 - CSSで言語セレクタをカスタマイズする

グラフィカルなチャーターに合わせて言語のスイッチャーのデザインが必要な場合は、カスタムCSSでパーソナライズできます。もちろん、CSSの知識がいくつかある必要がありますが、下ではCSSに新しい場合は、いくつかのヒントを提供します。

3.1 - ブラウザーコンソールの検査

ブラウザコンソールは最高の友人です。パーソナライズされたCSSをテストし、視覚的なレンダリングのライブを見るのに役立ちます。これを行う方法は次のとおりです。

ブラウザからサイトのフロントエンドにアクセスし、右クリックして、Inspectオプションを選択します。ここでは、Firefox の例ですが、他のブラウザは同じ方法で動作します。
矢印アイコンをクリックします。このツールを使用すると、アイテムを簡単に検索できます。ちなみに、言語のスイッチャーを調べる(矢印ツールをクリックすると言語のスイッチャーをクリックします)。
コンソールの左側にはHTMLコードで、必要に応じて他のHTMLタグを選択するためにナビゲートできます。
コンソールの右側はCSSコードです。 CSS がなくても、リアルタイムで簡単に外観を変えることができます。たとえば、境界色、テキスト、背景の16進数カラーコードを変更します。 心配しないでください。変更は考慮に入れられません。ページを再読み込みすると、サイトは初期状態に戻ります。 設定に応じてスイッチャーを変更する機会を取ります。
リアルタイムで、CSSの変更に応じて言語のスイッチャーの新しい外観を視覚化します。

3.2 - CSSコードをwpLinguaパラメータに追加する。

理想的なCSSコードを見つけたら、言語のスイッチャーをパーソナライズするには、ブラウザコンソールに直接コピーしてwpLingua > Switcher > カスタムCSSタブでwpLingua設定に貼り付けることができます。

専用のフィールドにCSSコードが入力されるとすぐに、スイッチャープレビューの結果を確認できます。

変更を保存することを忘れないでください。

3.3 - 便利なCSSの抜粋

あなたを助けるために、我々はこれらのいくつかのCSSコードスニペットが役立つかもしれないと思った:

まず、CSS のクラスに注意 .switcher-content クラス中に言語スイッチャーのブロック全体で動作させることができます .wplng-langague 自分で言語を操作することができます。

この例では、スイッチャーはテーマライト - ダブル - スクエアで定義されました。スイッチャの背景と境界色を変更するには、CSS は次のとおりです。

.wplng-switcher.theme-light-double-square .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

言語の背景と境界色を変更するには、CSS は次のとおりです。

.wplng-switcher.theme-light-double-square .switcher-content .wplng-language {
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

しかし、例えば、Light – Simple – Smooth テーマを選択した場合は、CSS クラスの変更の1つに気づくでしょう。.theme-light-simple-smooth)、そのため、変更をするときにこれを考慮に入れます(ブラウザコンソールを使用して正しいCSSクラスを検索することが重要です)。使用するコードは次のとおりです。

.wplng-switcher.theme-light-simple-smooth .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

.wplng-switcher.theme-light-simple-smooth .switcher-content .wplng-language {
  background-color: #ffffff;
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

それ以外の場合は、すべてのCSSクラスのターゲティングを避けるため、追加を忘れずにこの方法でコードを単純化できます。 !important 特定の規則のために。結果は同じになります:

.switcher-content {
  background-color: #5e33d9 !important;
  border: 1px solid #5e33d9 !important;
}

.wplng-language {
  background-color: #ffffff !important;
  border: 1px solid #5e33d9 !important;
  color: #5e33d9 !important;
}

このようにして、CSS コードが許可するすべての変更ができます: 影を追加, 移行, マウスオーバー上の状態など.

/* add a shadow to the switcher */

.switcher-content {
  box-shadow: 5px 5px 0px 0px #5e33d9;
  transition: 500ms ease;
}

/* obtain a rounded switcher */

.switcher-content {
  border-radius: 100px;
}

そして、カスタムCSSコードで仕上げるために、ここに私たちのサイトで使用されるものがあります。

.switcher-content {
  box-shadow: 8px 8px 0px 0px #bcfa99;
  transition: 500ms ease;
	
}

.switcher-content:hover {
  box-shadow: 10px 10px 0px 0px #bcfa99;
}

.switcher-content .wplng-languages .wplng-language:hover .language-name {
  color: #bcfa99;
}