워드프레스 OceanWP 테마 수직 헤더 설정하기

워드프레스 OceanWP 테마에서 제공하는 데모 중에서 Minimal 데모는 헤더가 수직으로 배열되어 왼쪽 사이드바에 헤더가 표시됩니다.

이 미니멀 데모를 로드하니 데모 페이지와 달리 실제 사이트에서는 헤더 부분(좌측 사이드바)이 표시되지 않아서 조금 당황스러운 상황이 되었습니다.

OceanWP에 지원을 요청해도 주말이라 답변을 제대로 받을 수 없었습니다. 조금 살펴보니 사용자 정의하기의 헤더/푸터 섹션에서 헤더 템플릿과 푸터 템플릿을 지정하는 옵션이 있었습니다.

워드프레스 OceanWP 테마 수직 헤더 설정하기

OceanWP 테마를 설치한 경우 워드프레스 관리자 페이지 > OceanWP > OceanWP Panel > Install Demos에서 데모를 선택하여 설치할 수 있습니다.

데모를 설치한 후에는 제거하는 옵션이 없으므로 사이트를 백업한 후에 진행하면 좋습니다.

Import 버튼은 누른 후에 데모를 설치할 수 있습니다. Minimal Demo의 경우 데모를 로드하니 데모 페이지와 달리 헤더 섹션(왼쪽 사이드바 부분)이 표시되지 않았습니다. 

데모를 잘못 설치했는가 싶어서 초기화한 후에 다시 시도해도 동일한 현상이 발생했습니다.

OceanWP에서 헤더 템플릿은 워드프레스 관리자 페이지 > 템플릿 > 저장된 템플릿의 헤더 템플릿을 사용합니다.

위의 그림에서 minimal-header가 헤더 템플릿입니다. 

하지만 데모 설치 시 설치된 이 템플릿은 사실 Elementor Pro에서 제공하는 기능입니다. 템플릿을 수정은 할 수 있지만, 엘리멘터 프로 기능은 사용할 없고 테마 빌더를 통해 템플릿을 헤더나 푸터 등에 지정할 수 없습니다.

대신 OceanWP는 외모 > 사용자 정의하기 > Header > General 섹션에서 헤더 템플릿을 지정할 수 있는 옵션을 제공합니다.

위의 그림에서 Select Template(템플릿 선택) 섹션에서 헤더 템플릿을 선택하거나 - Select -를 선택하여 헤더 템플릿을 선택하지 않을 수 있습니다.

Header Template을 선택하면 엘리멘터로 헤더를 커스텀할 수 있습니다. 템플릿을 선택하지 않으면 로고, 메뉴, 검색 상자를 헤더 섹션에 표시할 수 있습니다.

메뉴는 외모 > 메뉴에서 만들어서 지정할 수 있습니다. 메뉴 위치를 Main으로 설정하면 헤더에 표시됩니다.

마치며

이상으로 워드프레스 OceanWP의 수직 메뉴(Vertical Menu)를 설정하는 방법에 대하여 간략히 살펴보았습니다. OceanWP는 오래전에 잠시 다루어본 적이 있습니다. 당시 속도가 괜찮아서 이 테마로 테스트해보았습니다.

사이트 속도가 중요하다면 OceanWP와 같은 테마도 괜찮은 선택일 수 있습니다. 또한, GeneratePress 테마도 속도 때문에 수익형 블로그에서 많이 사용됩니다.

OceanWP 테마를 사용하여 벤치마킹한 사이트와 비슷하게 세팅하는 작업을 맡았습니다. 쉽게 생각했지만 막상 해보니 테마에 버그도 있고 생각처럼 쉽게 세팅할 수 있는 것이 아니네요. 시간이 생각보다 많아 소요되었지만 OceanWP 테마에 대하여 조금 더 자세히 알게 되는 계기가 되었습니다.

참고

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/2659

워드프레스 엘리멘터 헤더 템플릿 만들기 (헤더 & 푸터 커스텀)