워드프레스 아바다 테마에서 최상단에 배너 넣는 방법

//워드프레스/아바다 테마/워드프레스 아바다 테마에서 최상단에 배너 넣는 방법




테마옵션을 이용하는 방법

이 방법은 아래의 그림처럼 사용 중인 헤더가 2~5번(헤더 탑이 있는 헤더)를 사용 중일 때 간단하게 배너를 넣을 수 있는 방법 입니다.
만약 헤더 2~5번을 사용하지 않거나, 헤더탑 부분을 다른 용도로 사용하고 있다면 아래의 “아바다 훅(Hooks)을 이용하는 방법“을 이용 하세요.

아바다 테마 상단에 배너를 넣는 방법-01

위에서 설명한 것처럼 헤더의 레이아웃을 2~5번 중 하나를 선택하게 되면  “테마옵션-헤더-헤더 컨텐츠” 하단에 ‘헤더 컨텐츠1’과 ‘헤더 컨텐츠2’를 설정하는 옵션이 나타납니다.
이 설정을 아래의 이미지처럼 헤더컨텐츠1은 “연락 정보”를 헤더컨텐츠2는 “아무것도 표시하지 않음”을 선택합니다.

아바다 테마 상단에 배너를 넣는 방법-02

그리고 바로 아래 옵션중 “연락 정보에 표시 할 전화번호” 입력칸에 아래와 같이 원하는 배너를 입력 하고, “연락 정보에 표시 할 이메일” 입력칸은 비워 둡니다.

<div style="text-align: center;"><a href="http://avada.kr" target="_blank" ><img src="//avada.kr/wrps/wp-content/uploads/2014/01/avadakr_main_logo.png" /></a></div>

아바다 테마 상단에 배너를 넣는 방법-03

그러면 입력한 배너가 헤더 탑 영역의 중간에 나타납니다.
이 배너 이미지와 링크를 원하는 것으로 바꿔 주면 됩니다.

단점

하지만 이 방법은  단점이 있습니다.
첫째, 헤더 2~5번을 사용하지 않으면 이 방법을 사용할 수 없습니다.
둘째, 헤더 탑 영역의 본래 기능을(연락처 알림, 탑메뉴 등) 이용하고 싶을 때 사용할 수 없습니다.

아바다 훅(Hooks)을 이용하는 방법

워드프레스는 테마나 플러그인이 필요한 순간에 워드프레스와 연결 될 수 있도록 “Actions”과 “Filters” 훅(hook)을 제공합니다.
이 방법을 통해서 테마나 플러그인이 다양한 방법으로 워드프레스의 기능을 추가하거나 변경하게 만들어 주는데, 아바다 테마도 이와 같은 기능을 하는 아바다 테마만의 액션과 필터 훅을 제공합니다.

워드프레스 액션 훅 리스트
워드프레스 필터 훅 리스트
아바다 테마 액션 / 필터 훅 리스트

아바다 테마에서 제공하는 액션 훅 중 “avada_before_header_wrapper” 훅이 헤더의 상단에 원하는 컨텐츠를 넣는 데 사용됩니다.

아래의 코드를 사용 중인 차일드테마의 functions.php 파일 맨 아랫부분에 붙여넣기 합니다.

add_action( 'avada_before_header_wrapper', 'avada_top_add_banner' );
function avada_top_add_banner() {
    echo '<div style="text-align: center;"><a href="http://avada.kr" target="_blank" ><img src="//avada.kr/wrps/wp-content/uploads/2014/01/avadakr_main_logo.png" /></a></div>';
}

상단의 코드를 원하는 링크와 원하는 이미지로 변경하면 됩니다.







|2017. 4. 28|카테고리: 아바다 테마|0 개의 댓글

글쓴이 :

댓글 쓰기