언어 전환기의 스타일 및 CSS 문제를 해결하는 방법

사용자 정의 메뉴 생성기가 있는 특정 테마는 WPML 언어 전환기를 올바르게 표시하지 않을 수 있습니다. 여기에서는 언어 전환기 스타일링과 관련된 문제에 대한 문제 해결 단계를 제공합니다.

고급 사용자 정의를 원하시는 경우를 대비하여 WPML의 메뉴 언어 전환기에 사용되는 CSS에 대한 자세한 설명도 편의를 위해 제공합니다.

드롭다운 및 메뉴 언어 전환기의 표시 문제를 해결하는 방법

모든 디버깅 프로세스와 마찬가지로, 언어 전환기가 올바르게 렌더링되는 것을 방해하는 요소가 있는지 확인하기 위한 몇 가지 초기 단계가 있습니다.

1. 매우 간단한 CSS를 사용하여 거의 모든 사이트에서 작동하는 푸터 언어 전환기를 일시적으로 추가하세요.
2. 사용자 정의 CSS를 일시적으로 제거하고 기본 설정으로 WPML의 언어 전환기를 사용하세요.
3. 브라우저 CSS 디버거를 사용하여 명백한 CSS 충돌이 있는지 확인하세요. 원인을 찾은 경우 WPML → 언어 페이지의 언어 전환기 옵션 섹션에서 CSS 스타일링을 재정의할 수 있습니다. 해당 섹션에서 추가 CSS 링크를 클릭하세요.

테마와 WPML 사이에 문제가 있는 경우, WPML 지원 팀이 호환성 팀 및 테마 개발자와 협력하여 적절한 해결 방법을 제공합니다.

언어별 CSS 클래스

다음은 각 언어에 대한 CSS 클래스 목록입니다.

• wpml-ls-slot-{slug}: 예: “wpml-ls-slot-sidebar-1”.
• wpml-ls-item.
• wpml-ls-item-{language_code}: 예: “wpml-ls-item-en”.
• wpml-ls-current-language: 현재 언어 항목에만 해당합니다.
• wpml-ls-menu-item: 메뉴의 언어 전환기에만 해당합니다.
• wpml-ls-first-item: 목록의 첫 번째 언어 항목을 대상으로 합니다.
• wpml-ls-last-item: 목록의 마지막 언어 항목을 대상으로 합니다.

각 언어에 대한 CSS 클래스를 변경해야 하는 경우 WPML은 wpml_ls_model_language_css_classes 필터 훅을 제공합니다.

예를 들어, 모든 언어에 my-custom-item-class 클래스를 추가해야 한다고 가정해 보겠습니다. 이 경우 테마의 functions.php 파일에 다음과 같은 코드를 추가할 수 있습니다.

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

언어 전환기 래퍼 CSS 클래스

다음은 언어 전환기 래퍼에 대한 CSS 클래스 목록입니다.

• wpml-ls
• wpml-ls-{group}-{slug}: 예: “wpml-ls-statics-footer”.
• wpml-ls-{template-slug}: 예: “wpml-ls-legacy-dropdown-click”.
• wpml-ls-rtl: RTL 언어용입니다.
• wpml-ls-touch-device: 이 클래스는 모바일 및 태블릿 기기용으로 추가됩니다.

다음 표에서는 {group} 및 {slug}에 따라 CSS 클래스가 어떻게 구성되는지 보여줍니다.

이전과 마찬가지로 언어 전환기 래퍼에 사용자 정의 CSS 클래스를 추가해야 하는 경우 wpml_ls_model_css_classes 필터 훅을 사용할 수 있습니다. 테마의 functions.php 파일에 다음과 같은 코드를 추가하면 my-custom-wrapper-class CSS 클래스가 추가됩니다.

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

참고: WPML은 메뉴의 언어 전환기 옵션에 대해 일부 요소만 주입합니다. 결과적으로 래퍼 클래스가 없습니다.

CSS로 언어 전환기 사용자 정의

WPML → 언어 페이지의 언어 전환기 옵션 섹션에서 사용자 정의 CSS 스타일을 쉽게 추가할 수 있습니다. 해당 섹션에서 추가 CSS 링크를 클릭하세요.

예 1: 현재 언어를 굵게 표시

.wpml-ls-current-language {
font-weight: bold;
}

예 2: 푸터의 언어 전환기에만 글꼴 크기 변경

.wpml-ls-statics-footer {
    font-size: 18px;
}

예 3: 마지막 언어 항목 뒤의 오른쪽에 여백 지정

.wpml-ls-last-item {
    margin-right: 10px;
}

선택자를 결합하여 대상을 더 잘 지정할 수도 있습니다.

예 4: 푸터 언어 전환기의 현재 언어에 굵은 텍스트 추가

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

예 5: 메뉴의 언어 전환기 너비 고정

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}