WordPress 메뉴 항목에 첫 번째 및 마지막 CSS 클래스를 추가하는 방법

최근 게시물 게시판 wordpress WordPress 메뉴 항목에 첫 번째 및 마지막 CSS 클래스를 추가하는 방법

  • WordPress 탐색 메뉴의 첫 번째 항목과 마지막 항목에 사용자 지정 스타일을 추가해야 합니까?

    사용자 정의 CSS 클래스를 첫 번째 및 마지막 메뉴 항목에 간단히 추가할 수 있지만 메뉴가 재배열되면 해당 항목은 더 이상 처음 및 마지막 항목이 아닙니다.

    이 기사에서는 메뉴 항목이 재정렬되더라도 첫 번째 및 마지막 메뉴 항목의 스타일을 지정하는 .first 및 .last 클래스를 추가하는 방법을 보여줍니다.

    WordPress 탐색 메뉴 항목에 첫 번째 및 마지막 클래스를 추가하는 방법

    첫 번째 탐색 항목과 마지막 탐색 항목의 스타일을 다르게 지정하는 이유는 무엇입니까?

    과거 사용자 지정 디자인 프로젝트에서 우리는 탐색 메뉴 항목에 몇 가지 사용자 지정 스타일을 추가해야 했습니다. 워드프레스 웹사이트. 특히 이 디자인은 첫 번째 메뉴 항목과 마지막 메뉴 항목에 대해 다른 스타일이 필요했습니다.

    이제 메뉴를 쉽게 편집하고 첫 번째 및 마지막 메뉴 항목에 사용자 정의 CSS 클래스를 추가할 수 있습니다. 그러나 우리는 클라이언트에게 프로젝트를 전달하고 있었기 때문에 메뉴 순서를 재배열하더라도 솔루션이 작동해야 했습니다.

    그래서 우리는 사용하기로 결정 필터 대신에.

    이 튜토리얼에서는 탐색 메뉴의 첫 번째 항목과 마지막 항목의 스타일을 지정하는 두 가지 방법을 보여줍니다. 아래 목록에서 원하는 방법을 선택할 수 있습니다.

    방법 1: 필터를 사용하여 첫 번째 및 마지막 클래스 추가

    첫 번째 탐색 메뉴 항목과 마지막 탐색 메뉴 항목의 스타일을 다르게 지정하는 첫 번째 방법은 테마에 필터를 추가하는 것입니다.

    테마에 코드를 추가해야 합니다. 기능.php 파일. 이전에 이 작업을 수행하지 않은 경우 다음 가이드를 참조하세요. WordPress에서 코드를 복사하여 붙여넣는 방법.

    테마의 functions.php 파일을 열고 다음 코드 조각을 붙여넣기만 하면 됩니다.

    function wpb_first_and_last_menu_class($items) {
        $items[1]->classes[] = 'first';
        $items[count($items)]->classes[] = 'last';
        return $items;
    }
    add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
    

    이렇게 하면 첫 번째 및 마지막 탐색 메뉴 항목에 대해 각각 .first 및 .last CSS 클래스가 생성됩니다. 이러한 클래스를 사용하여 메뉴 항목의 스타일을 지정할 수 있습니다.

    이 작업을 수행하는 방법을 자세히 알아보려면 다음 가이드를 참조하세요. WordPress 탐색 메뉴의 스타일을 지정하는 방법.

    이 튜토리얼에서는 테마의 style.css 스타일시트에 다음 기본 CSS 형식을 추가하여 첫 번째와 마지막 메뉴 항목을 굵게 표시합니다.

    .first a {font-weight: bold;}
    
    .last a {font-weight: bold;}
    

    여기에서 데모 사이트에 코드를 추가하기 전과 후의 스크린샷을 볼 수 있습니다.

    다른 스타일의 첫 번째 및 마지막 메뉴 항목 미리보기

    방법 2: CSS 선택기를 사용하여 첫 번째 항목과 마지막 항목 스타일 지정

    첫 번째와 마지막 메뉴 항목의 스타일을 다르게 지정하는 두 번째 방법은 CSS 선택기를 사용하는 것입니다. 이 방법은 더 간단하지만 Internet Explorer와 같은 일부 구형 브라우저에서는 작동하지 않을 수 있습니다.

    이 방법을 따르려면 테마에 코드를 추가해야 합니다. 스타일 시트 또는 ‘추가 CSS’ 섹션 워드프레스 테마 커스터마이저.

    이전에 이 작업을 수행하지 않은 경우 다음 가이드를 참조하세요. WordPress 사이트에 사용자 정의 CSS를 쉽게 추가하는 방법.

    테마의 style.css 파일을 편집하거나 다음으로 이동하여 시작해야 합니다. 모양 » 사용자 정의 ‘추가 CSS’를 클릭합니다.

    그런 다음 다음 코드 조각을 붙여넣은 다음 변경 사항을 저장하거나 게시해야 합니다.

    ul#yourmenuid > li:first-child { }
    ul#yourmenuid > li:last-child { }
    

    ‘yourmenuid’를 탐색 메뉴의 실제 ID로 바꿔야 합니다. 선택자 ‘first-child’와 ‘last-child’는 탐색 메뉴인 부모의 첫 번째이자 마지막 자식인 경우 요소를 선택합니다.

    예를 들어 이 코드를 사용하여 데모 사이트의 첫 번째 및 마지막 탐색 메뉴 항목을 굵게 표시했습니다.

    ul#primary-menu-list > li:first-child a {
        font-weight: bold;
    }
    ul#primary-menu-list > li:last-child a {
        font-weight: bold;
    }
    
    CSS 선택기를 사용하여 첫 번째 메뉴 항목과 마지막 메뉴 항목의 스타일을 다르게 지정

    이 튜토리얼이 .first 및 .last 클래스를 WordPress 탐색 메뉴에 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다.

    당신은 또한 배우고 싶을 수도 있습니다 50가지 일반적인 WordPress 오류를 수정하는 방법, 또는 우리의 최고의 드래그 앤 드롭 페이지 빌더 목록.

    이 기사가 마음에 들면 구독하십시오. 유튜브 채널 WordPress 비디오 자습서용. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.

    Source link

    신고하기
  • 답변은 로그인 후 가능합니다.