워드프레스 강좌 / 메뉴 만들고 배치하기

워드프레스는 페이지, 글, 카테고리, 태그, 사용자 정의 링크 등으로 메뉴를 만들 수 있습니다. 그리고 그 메뉴는 테마가 제공하는 위치에 배치를 합니다. 하나의 메뉴를 여러 곳에 배치할 수도 있고, 위젯에 추가하는 것도 가능합니다.

메뉴 생성과 관리는 [테마 디자인 - 메뉴]에서 합니다.

화면 옵션

메뉴에 추가할 수 있는 아이템은 여러 가지가 있습니다. 그리고 테마나 플러그인으로 인해 만들어지는 아이템도 있습니다. 하지만, 그 모든 아이템이 화면에 나오지는 않습니다. 메뉴를 만들 때 가장 먼저 해야 할 것은 오른쪽 위의 화면 옵션을 클릭하여 어떤 아이템이 있는지 살펴보는 것입니다. 필요한 아이템 또는 속성에 체크를 하고 메뉴 만들기를 시작합니다.

메뉴 만들기

  • 메뉴 이름에 적당한 이름을 입력하고 [메뉴 생성]을 클릭하면 메뉴가 만들어집니다.
  • 메뉴는 여러 개 만들 수 있습니다. 메뉴 생성과 배치는 별개의 문제입니다. 즉, 메뉴를 만들었다고 해서 꼭 배치해야 하는 것은 아닙니다.
  • 테마를 변경해도 메뉴는 삭제되지 않고 그대로 남아 있습니다.

메뉴 아이템 추가하기

  • 왼쪽에서 아이템을 체크한 후 [메뉴에 추가]를 클릭하면 메뉴에 아이템이 추가됩니다.

  • 메뉴 아이템은 여러 개 넣을 수 있고, 마우스로 드래그하여 위치를 바꾸거나 계층적으로 만들 수 있습니다.
  • 메뉴가 완성되었으면 [메뉴 저장]을 클릭하여 저장합니다.

메뉴 배치하기

테마가 제공하는 자리에 배치하기

  • 테마에는 메뉴를 배치할 공간이 마련되어 있습니다. 공간의 갯수와 위치는 테마마다 다릅니다.
  • Twenty Nineteen의 경우 Primary, Footer Menu, Social Links Menu 세 곳이 있습니다.
  • 배치시킬 메뉴를 선택하고, 테마 위치에서 원하는 위치를 선택한 다음 [메뉴 저장]을 클릭합니다.

  • 아래는 Primary에 배치한 결과입니다. 계층적 메뉴를 만들었다면, 하위 메뉴는 드롭다운으로 나옵니다.

  • 메뉴 위치는 [외모 - 메뉴]의 [위치 관리하기] 탭에서 정할 수도 있습니다.

  • Social Links Menu는 소셜 링크를 위한 특별한 메뉴입니다.
  • 새롭게 메뉴를 만들고, 사용자정의 링크의 URL에 자신의 SNS URL을 입력하고, 링크 텍스트에 적당한 문구를 입력한 후, 메뉴에 추가합니다.

  • 위치를 Social Links Menu로 선택하고 [메뉴 저장]을 클릭합니다.

  • 소셜 링크 메뉴의 위치는 Primary의 아래이고, URL을 분석하여 적절한 아이콘을 보여줍니다.

사이드바에 배치하기

  • [탐색 메뉴]이 메뉴를 출력하는 위젯입니다. 위젯을 사이드바 영역에 배치하고 메뉴를 선택하면, 그 자리에 선택한 메뉴가 출력됩니다.

같은 카테고리의 다른 글

워드프레스 / 우커머스 / 잡다한 정보들

상품 페이지 라이트박스 제거 functions.php에 다음 코드 추가 add_filter( 'woocommerce_single_product_image_thumbnail_html', 'wc_remove_link_on_thumbnails' ); function wc_remove_link_on_thumbnails( $html ) { return strip_tags( $html, '<img>' ); } 우커머스 스타일 제거 functions.php에 다음 코드 추가 add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); 관련 상품 제거 CSS에 다음 코드 추가 .single-product .related.products { display: none; } Database Pending 작업 실행하는 방법 예약된 데이터베이스 작업이 진행되지 않는다면 강제로 실행할 수 있습니다. ...

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

자식 테마의 뜻 어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다. 자식 테마 만드는 방법 워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다. 방법 1 wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.) twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css ...

워드프레스 강좌 / 플러그인 / WP Super Cache / 캐시를 이용하여 사이트 속도 빠르게 해주는 플러그인

워드프레스 강좌 / 플러그인 / WP Super Cache / 캐시를 이용하여 사이트 속도 빠르게 해주는 플러그인

WP Super Cache 웹사이트 속도는 중요합니다. 홈페이지에 접속했을 때 속도가 느리다면 방문자가 금방 떠나고, 검색 엔진에서도 불이익을 받습니다. 따라서 속도 개선은 사이트 관리자의 중요 업무 중의 하나입니다. 워드프레스는 기본적으로 페이지를 동적으로 만듭니다. 요청이 있으면 데이터베이스에서 자료를 가져와서 테마의 파일들을 이용해 출력을 하기에, 방문자가 접속할 때마다 페이지를 생성합니다. 그래서 정적인 페이지보다 속도가 느립니다. 이를 ...

워드프레스 강좌 / 플러그인 / Search Meter / 검색어 키워드 통계 플러그인

워드프레스 강좌 / 플러그인 / Search Meter / 검색어 키워드 통계 플러그인

Search Meter 워드프레스는 검색 기능을 갖고 있습니다. 키워드를 입력하면 해당 키워드를 가진 콘텐츠를 보여줍니다. 하지만, 그 키워드가 무엇인지, 얼마나 검색했는지 관리자에게 알려주는 기능은 없습니다. 방문자가 어떤 키워드로 검색했는지 알고 싶다면 플러그인의 도움을 받아야 합니다. 대표적인 플러그인은 Search Meter입니다. WordPress.ORG에서 공유되는 플러그인이므로 워드프레스 관리자에서 설치할 수 있습니다. 설치하고 활성화합니다. 키워드 보기 에서 키워드를 볼 ...

워드프레스 강좌 / 위젯 추가하기, 설정하기, 삭제하기

워드프레스 강좌 / 위젯 추가하기, 설정하기, 삭제하기

워드프레스의 위젯 기능을 이용하면, 테마가 제공하는 영역에 메뉴, 최근 글, 배너, 광고 등을 쉽게 추가하고 삭제할 수 있습니다. 위젯을 관리하는 방법은 두 가지입니다. 첫번째는 에서 하는 것입니다. 에서 관리하기 위젯 추가하기 사용할 수 있는 위젯에서 원하는 위젯을 마우스로 드래그하여 위젯 ...

워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인

워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인

Pixabay 픽사베이(Pixabay)는 개인은 물론 상업적 용도로도 사용할 수 있는 이미지를 공유하는 사이트입니다.(대부분 CC0 Creative Commons이나, 간혹 상업적 이용이 곤란한 것도 있으니 다운로드 받기 전에 라이센스를 확인하는 것이 좋습니다.) 현재 백만 개가 넘는 사진, 일러스트, 벡터 이미지, 동영상이 있으며, 일정 수준의 품질을 만족해야 공유 가능하므로 좋은 자료가 많습니다. 한글로 번역이 잘 되어 있는 편이어서 한국 ...

워드프레스 강좌 / 플러그인 / Search Exclude / 글 또는 페이지를 검색에서 제외시키는 플러그인

워드프레스 강좌 / 플러그인 / Search Exclude / 글 또는 페이지를 검색에서 제외시키는 플러그인

워드프레스는 검색 기능을 갖고 있습니다. 글이나 페이지를 검색할 수 있는 기능인데, 대부분의 테마는 검색 기능을 사용할 수 있게 해놓았습니다. 워드프레스 공식 테마 중의 하나인 Twenty Twenty라면, 상단 오른쪽의 돋보기 아이콘을 클릭하여 검색할 수 있습니다. 흔한 경우는 아니지만, 특정 글이나 페이지가 검색에서 노출되지 않도록 해야할 때가 있습니다. URL을 정확히 아는 사람만 내용을 볼 ...

워드프레스 강좌 / 플러그인 설치하기, 삭제하기

워드프레스 강좌 / 플러그인 설치하기, 삭제하기

플러그인을 설치하는 방법 플러그인을 설치하는 방법은 세 가지가 있습니다. 웹에서 바로 설치하기 ZIP 파일 업로드하여 설치하기 FTP로 업로드하여 설치하기 WordPress.ORG에서 공유되는 플러그인은 보통 1번 방식으로 설치합니다. WordPress.ORG에서 공유되지 않는 플러그인은 2번 또는 3번 방식으로 설치합니다. 웹에서 바로 설치하기 에서 설치하려는 플러그인을 찾습니다. 추천, 인기 등에서 널리 쓰이는 플러그인을 볼 수 있고, 검색을 통해서 원하는 ...

워드프레스 강좌 / 플러그인 / Responsive Lightbox & Gallery / 이미지 클릭했을 때 확대하는 플러그인

워드프레스 강좌 / 플러그인 / Responsive Lightbox & Gallery / 이미지 클릭했을 때 확대하는 플러그인

워드프레스 테마는 일반적으로, 이미지를 본문에 넣을 때 이미지가 아무리 커도 본문 가로폭을 넘어가지 못하게 만듭니다. 보기에는 좋지만, 그렇게 하면 큰 이미지가 작게 보여서 이미지 안의 내용을 보기 힘들 수가 있습니다. 이를 해결하는 방법은 라이트박스 플러그인을 사용하는 것입니다. 이미지를 클릭하면 원본 이미지로 또는 크게 확대 되는 걸 본 적 있으시죠? 그게 ...

워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

사용자 정의 필드 사용자 정의 필드를 이용하여 글에 추가적인 정보를 입력하고 출력할 수 있습니다. 그 정보를 글 본문에 직접 입력할 수도 있지만, DB에 저장하면 출력하는 것 이외에도 여러 가지로 활용 가능하다는 장점이 있습니다. 사용자 정의 필드 입력하기 사용자 정의 필드는 글 쓰는 화면에서 입력합니다. 사용자 정의 필드를 입력하는 폼이 보이지 않는다면, 화면 옵션에서 ...

워드프레스 강좌