언어 전환기를 사용자 지정하는 방법은 무엇인가요?

홈 페이지 > 문서 > 사용자 > 언어 전환기를 사용자 지정하는 방법은 무엇인가요?

콘텐츠

1 - 디자인 옵션으로 언어 선택기 사용자 지정하기

2 - 언어 선택기 플래그 사용자 지정하기

3 - CSS로 언어 선택기 사용자 지정하기

4 - 언어 선택기의 위치를 선택합니다.

5 - wpLingua로 언어 선택기를 완전히 사용자 정의하세요!

계속 읽기 :

그래픽 차트에 적응하려면 언어 선택기의 외관을 개인화 할 수 있습니다. 이 경우 wpLingua는 많은 디자인 옵션뿐만 아니라 자신의 사용자 정의 CSS를 추가 할 수있는 자유를 제공합니다.

1 - 디자인 옵션으로 언어 선택기 사용자 지정하기

wpLingua로 갈 때 > Switcher 탭, 다른 사용자 정의 옵션으로 화면을 찾습니다. Switcher Design panel은 4가지 유형의 옵션을 제공합니다:

Switcher 테마
Switcher 스타일
표시된 이름
플래그 스타일

1.1 - 언어 선택기 테마

이것은 언어 스위처의 색상과 국경 스타일을 선택할 수 있습니다.

색상 옵션 제공 5 테마:

빛: 스위처의 배경에 흰색 색상
회색: 회색 배경 색깔
어두운: 까만 배경 색깔
Blur 검정: 투명하고 blurred 배경 색상 검은 텍스트와 국경
Blur 백색: 흰색 텍스트와 국경을 가진 투명하고 blurred 배경 색상

각 주제는 모양과 국경 작풍에 의해 그 때 부서집니다:

두 배 – 매끄러운: 스위처는 둥근 모서리가있는 이중 국경에 의해 프레임됩니다.
더블 – 광장: 정연한 구석을 가진 두 배 국경.
간단한 – 매끄러운: 둥근 구석과 단 하나 국경.
간단한 – 광장: 정연한 구석을 가진 단 하나 국경.

1.2 - 언어 선택기 스타일

이 옵션은 전환기에 언어의 레이아웃을 정의 할 수 있습니다 ...

인라인 목록: 언어는 서로 옆에 줄어들고 있습니다.
구획: 언어는 열에 배치, 다른 사람의 밑에.
드롭다운: 언어는 드롭다운 메뉴에 나타났습니다. 사이트가 여러 언어를 제공 할 때 권장됩니다.

1.3 – 표시된 이름

이 옵션은 언어 이름을 스위처에 작성한 방법을 선택할 수 있습니다.

Translated 이름: 언어의 이름은 사이트의 원래 언어로 번역됩니다.
이름: 각 언어는 자체 언어(영어, 프랑스어, 독일어, 스페인어 등)의 이름을 유지합니다.
언어 ID: 언어 이름 사용 언어 ID (FR, EN, DE, RU, 등)
전시 없음: 텍스트는 표시되지 않습니다.

1.4 - 깃발 스타일

이 옵션은 스위처의 플래그의 외관을 선택할 수 있습니다.

한국어 라운드 플래그 표시
뚱 베어 rectangular 플래그 표시
파기방법 wavy 플래그 표시
전시안내 어떤 플래그를 표시하지 않습니다, 언어 이름 만 표시됩니다

2 - 언어 선택기 플래그 사용자 지정하기

플래그의 모양을 넘어 언어에 의해 표시 할 플래그를 선택할 수 있습니다. 이것은 기존의 플래그보다 다른 플래그를 사용하는 욕망이 될 수 있습니다. 예를 들어 영국 국기 대신 미국 또는 호주의 국기를 사용할 수 있습니다. 또는 캐나다 또는 벨기에의 프랑스 언어, 대신 프랑스의 국기 ... 가능!

2.1 - 깃발 기본 설정 선택

wpLingua로 이동 > wpLingua 탭.
편집 플래그를 클릭합니다.
당신의 마음에 드는 깃발을 선택하고 당신의 변화를 저장하는 것을 잊지 마십시오.
미디어 라이브러리로 업스트림을 가져올 수 있는 맞춤 플래그도 사용할 수 있습니다.

2.2 - 사용자 지정 플래그 사용

이용안내 사용자 정의 플래그, 당신은 먼저 미디어 라이브러리에 가져야한다, 다음과 같이:

미디어로 이동 > Library 탭을 클릭하고 새 미디어 파일을 추가하십시오.
플래그를 가져 와서 미디어를 열려면 클릭하십시오. 지금, 당신은 클립보드에 복사 URL을 클릭합니다.
wpLingua > wpLingua 탭으로 이동하여 사용자 정의 플래그 URL을 붙여 넣습니다. 저장 변경.
이제 스위처가 새로운 플래그를 표시합니다.

필요한 경우 각 언어의 반복.

3 - CSS로 언어 선택기 사용자 지정하기

그래픽 차트를 일치하기 위해 언어 스위퍼의 디자인을 원한다면 사용자 정의 CSS로 개인화 할 수 있습니다. 물론 CSS에 대한 지식이 필요하지만 아래에서 우리는 CSS에 새로운 경우 이상적인 몇 가지 팁을 줄 것입니다.

3.1 - 브라우저 콘솔 검사하기

브라우저 콘솔은 최고의 친구입니다. 개인 CSS를 테스트하고 시각적 인 렌더링을 볼 수 있도록 도와줍니다. 그것을 수행하는 방법 :

브라우저 및 오른쪽 클릭에서 사이트의 프런트 엔드를 방문한 다음 Inspect 옵션을 선택하십시오. 다음은 Firefox와 예이지만 다른 브라우저는 매우 같은 방법으로 작동합니다.
화살표 아이콘을 클릭합니다. 이 도구는 쉽게 검사 항목을 선택 할 수 있습니다. 그런데, 언어 스위퍼를 검사하기 위해 사용 (Arrow 도구를 클릭 한 후 언어 스위퍼를 클릭).
콘솔의 왼쪽에 HTML 코드, 필요한 경우 다른 HTML 태그를 선택할 수 있습니다.
콘솔의 오른쪽에 CSS 코드입니다. CSS whiz가 아닌 경우에도 즉시 외관을 변경할 수 있습니다. 예를 들어, 국경 색상, 텍스트 또는 배경의 hexadecimal 색상 코드를 변경 ... 걱정하지 마세요, 변경은 계정으로 촬영되지 않습니다, 그것은 단지 외관을 테스트하는 것입니다, 당신은 페이지를 다시로드 할 때, 사이트가 초기 상태로 반환합니다. 당신의 선호도에 따라 스위처를 수정할 수있는 기회를 얻으십시오.
실시간 CSS 수정에 따라 언어 전환기의 새로운 모습이 시각화됩니다.

3.2 - wpLingua 매개변수에 CSS 코드 추가하기

언어 스위처를 개인화하는 이상적인 CSS 코드를 발견하면 브라우저 콘솔에 직접 복사하여 wpLingua > Switcher > Custom CSS 탭에서 wpLingua 설정으로 붙여 넣을 수 있습니다.

CSS 코드가 전용 필드에 입력되면 Switcher 미리보기에서 결과를 볼 수 있습니다.

변경 사항을 저장하는 것을 잊지 마세요.

3.3 - 유용한 CSS 추출 몇 가지

당신을 돕기 위해, 우리는 이 몇몇 CSS 부호 스니펫이 도울지도 모른다고 생각했습니다:

우선 CSS 클래스를 참고하십시오. .switcher-content 언어 스위처의 전체 블록에 행동 할 수 있습니다. .wplng-langague 언어를 스스로 행동 할 수 있습니다.

이 예제의 경우, 스위처는 테마 라이트로 정의되었습니다 – Double – Square. 스위처의 배경과 국경 색상을 변경하려면, 여기에 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;
}

그러나 빛 선택했다면 - 간단한 - 예를 들어 부드러운 테마, 당신은 CSS 클래스 변경 중 하나를 통지합니다 (.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;
}