WordPress 헤더 메뉴에 버튼을 추가하는 방법

최근 게시물 게시판 wordpress WordPress 헤더 메뉴에 버튼을 추가하는 방법

  • WordPress 헤더 메뉴에 버튼을 추가 하시겠습니까?

    헤더 탐색 메뉴에 버튼을 추가하면 더 눈에 띄는 클릭 유도 문안을 만들 수 있습니다. 가장 중요한 페이지에 더 많은 클릭을 유도하고 방문자가 조치를 취하도록 도와줌으로써 더 나은 사용자 경험을 만들 수 있습니다.

    이 기사에서는 WordPress 헤더 메뉴에 버튼을 쉽게 추가하는 방법을 보여줍니다.

    WordPress 헤더 메뉴에 버튼을 추가하는 이유는 무엇입니까?

    워드 프레스 탐색 메뉴 일반적으로 모두 동일하게 보이는 일반 텍스트 링크입니다. 디자인 측면에서 모든 링크에는 동일한 중요성과 가중치가 부여됩니다.

    일반 링크가있는 헤더 탐색 메뉴

    링크를 추가하려면 어떻게해야합니까? 온라인 주문 양식, 로그인 또는 가입 페이지 링크 또는 지금 구매 링크? 이러한 중요한 클릭 유도 문안은 헤더 메뉴의 나머지 링크와 유사합니다.

    WordPress 탐색 메뉴의 중요한 링크를 버튼으로 변경하면 더 눈에 띄게됩니다. 이를 통해 사용자가 쉽게 찾을 수 있으므로 웹 사이트에서 참여와 경험을 개선 할 수 있습니다.

    버튼이있는 탐색 메뉴

    기본적으로 WordPress에는 다음과 같은 옵션이 있습니다. WordPress 게시물 및 페이지에 버튼 추가 버튼 블록을 사용합니다. 그러나 탐색 메뉴에 단추를 추가하는 기본 제공 옵션이 없습니다.

    다행히도 WordPress 탐색 메뉴의 모든 링크를 버튼으로 변환하는 쉬운 해킹이 있습니다.

    즉, 플러그인을 설치하지 않고 WordPress 헤더 메뉴에 버튼을 추가하는 방법을 살펴 보겠습니다.

    WordPress 헤더 메뉴에 버튼 추가

    먼저 버튼으로 변환하려는 링크를 WordPress 탐색 메뉴에 추가해야합니다.

    간단히 외관»메뉴 WordPress 대시 보드에서 페이지를 열고 탐색 메뉴에 링크를 추가합니다.

    WordPress 메뉴에 링크 추가

    그 후, 당신은 화면 옵션 상단의 버튼. 다양한 옵션이있는 플라이 다운 메뉴가 표시됩니다. ‘CSS 클래스’옵션 옆에있는 확인란을 선택해야합니다.

    화면 옵션에 CSS 클래스 표시

    이제 메뉴로 스크롤하고 버튼으로 변환하려는 메뉴 항목을 클릭하여 확장합니다.

    링크에 사용자 정의 CSS 클래스 추가

    당신은 새로운 것을 알게 될 것입니다 CSS 메뉴 항목 설정의 클래스 옵션. 여기에 수업 이름을 입력해야합니다. 이 CSS 클래스를 원하는 고유 한 이름으로 부를 수 있지만이 자습서에서는 메뉴 버튼이라고합니다.

    이름을 입력 한 후 ‘메뉴 저장’버튼을 클릭하여 변경 사항을 저장하십시오.

    메뉴 항목에 사용자 정의 CSS 클래스를 추가 했으므로 이제 맞춤 CSS 코드.

    간단히 이동 외관»사용자 정의 WordPress 테마 커 스터 마이저를 시작합니다.

    이제 오른쪽에 웹 사이트의 실시간 미리보기가 표시되고 왼쪽 열에 여러 테마 설정이 표시됩니다.

    WordPress 테마 커 스터 마이저의 추가 CSS 옵션

    이제 추가 CSS 탭을 클릭하여 확장해야합니다. 사용자 지정 CSS 코드를 추가 할 수있는 상자가 표시됩니다.

    여기에서 다음 CSS 코드를 복사하여 붙여 넣을 수 있습니다.

    
    .menu-button { 
    background-color:#eb5e28;
    border:1px;
    border-radius:3px;
    -webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
    -moz-box-shadow:1px 1px 0px 0px #2f2f2f;
    box-shadow:1px 1px 0px 0px #2f2f2f;
    }
    .menu-button a,  .menu-button a:hover, .menu-button a:active { 
    color:#fff !important;
    }
    

    CSS 코드를 추가하자마자 테마 커 스터 마이저 웹 사이트 미리보기에 자동으로 적용되며 변경 사항이 적용되는 것을 볼 수 있습니다.

    게시 버튼을 클릭 할 때까지 웹 사이트에 변경 사항이 적용되지 않으므로 걱정하지 마세요.

    메뉴 버튼 미리보기

    CSS를 원하는만큼 자유롭게 사용해보십시오. 배경색 변경, 텍스트 색상 연결, 테두리 추가 등을 수행 할 수 있습니다.

    변경 사항을 저장하려면 게시 버튼을 클릭하는 것을 잊지 마십시오.

    쉽지 않았나요?

    이 트릭을 사용하여 헤더 메뉴에 버튼을 추가 할뿐만 아니라 WordPress 탐색 메뉴에서 링크를 강조 표시 할 수도 있습니다.

    이 기사가 WordPress 헤더 메뉴에 버튼을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 사용자가 버튼과 어떻게 상호 작용하는지 알고 싶으십니까? 가이드보기 WordPress에서 전환율을 추적하는 방법. 다음으로, 우리의 목록을 확인하십시오 중소기업을위한 최고의 라이브 채팅 소프트웨어.

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

    Source link

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