Top Layout 변경 및 광고배너 넣기

이 섹션에서는 홈페이지 제작용 유료 테마인 Extra News 테마의 Top Layout 부분에 보이는 로고, 광고, 메인 메뉴의 위치와 같이, Bueno 테마의 Top Layout 부분을 수정하여 동일한 화면이 보일 수 있도록 조정해 보겠다.

Top Layout 분석하기

Extra News 테마의 Top Layout을 보면 다음 그림과 같이 상단 영역은 로고와 광고를 넣을 수 있고, 그 아래쪽 영역은 메뉴와 Search bar가 있다.
[pe2-image src=”http://lh3.ggpht.com/-E4UZ7vYf7zA/UXDHMA-aL_I/AAAAAAAAAG4/wMk3ZNwYv_s/s144-c-o/%252525252525EA%252525252525B7%252525252525B8%252525252525EB%252525252525A6%252525252525BC1.jpg” href=”https://picasaweb.google.com/114978849290694301670/JGyFJF#5868409323697876978″ caption=”” type=”image” alt=”%252525EA%252525B7%252525B8%252525EB%252525A6%252525BC1.jpg” ]

Google Chrome 개발자 도구를 이용하여 소스가 어떻게 구성되어 있는지 확인해본다. ①로고, ②광고, ③메뉴+검색바 영역으로 되어 있다.

  • 로고 : <div class=”logo”>…</div>
  • 광고 : <div class=”headerwidget”>…</div>
  • 메뉴+검색바 : <div class=”nav”>…</div>

Bueno 테마의  Top Layout 부분인'”<div id=”header” class=”col-full”></div>’를 살펴보면 로고와 메인 메뉴로만 구성되어 있는 것을 알 수 있다.

분석한 Top Layout을 Bueno 테마 Top Layout에 적용하기

Top Layout에 광고 배너와 Search Bar 적용하기

워드프레스에는 Top Layout과 Bottom Layout에 해당하는 파일인 header.php와 footer.php가 있다. 로고와 메인 메뉴는 이미 있기 때문에 광고 부분과 Search Bar글 각각 Extra News 테마의 구조처럼 div 태그와 CSS를 사용하여 넣어 보겠다.

  1. Top Layout을 수정하기 위해 ‘알림판 > 외모 > 편집기’에서 header.php 파일을 연다.
  2. 이제 소스코드에서 수정할 부분을 찾는다. 먼저 순서대로 로고에 해당하는 <div> 태그 아래 광고 부분을 넣은 후, 메인 메뉴 <div> 태그 안에 Search Bar를 넣는다
  3. 아래와 같이 코드를 추가한다.
    </div><!–logo–> 바로 아래 부분에
    <!–광고–>
    <div class=”ad_link fr”><a href=”http://blog.naver.com/kbm402/” target=”_blank”>link</a></div>
    <!–광고끝–>
    ‘</div><!–pagenav–>’ 바로 위 부분에
    <!–Search Bar–>
    <div id=”topseardh” class=”fr”>
    <form method=”get” id=”searchform_top” action=”<?php bloginfo(‘url’); ?>”>
    <input type=”text” class=”field” name=”s” value=”<?php _e(‘Search…’, ‘woothemes’) ?>”
    onfocus=”If(this.value==<?php _e(‘Search…’, ‘woothemes’)?>”){this.value=”;} onblur=”If(this.value==”)
    {this.value='<?php _e(‘Search…’, ‘woothemes’) ?>’;}” />
    <input type=”submit” class=”submit” name=”submit” value=”<?php _e(‘Search’, ‘woothemes’); ?>” />
    </form>
    </div><!–/#topsearch–>
    <!–Search Bar 끝–>
  4. 수정을 완료한 후 ‘파일 업데이트’ 버튼을 클릭하여 저장한다. 저장 후 홈페이지를 열면 링크 버튼과 Search Bar만 나타날 뿐 별다른 변화가 없다. <div> 태그로 로고, 광고, 메인 메뉴+Search Bar를 구성하기만 했을 뿐, CSS를 적용하지 않아 정렬이 제대로 되지 않았기 때문이다.

광고 배너 이미지 업로드하기

<div> 태그에 CSS를 적용하기 전에 광고 링크를 설정할 광고 배너용 이미지를 준비한다.

  1. 이 사이트에서 사용할 광고 이미지 사이즈는 468X60px이다. 광고 배너 이미지를 적용하기 위해 ‘알림판 > 미디어 > 파일 올리기’를 이용하여 광고 배너 이미지를 업로드한다.

광고 배너에 CSS 적용하기

  1. 링크 값을 복사한 후 CSS 적용한 후의 화면을 보기 위해 구글 크롬 개발자 도구를 연다.
  2. 구글 크롬을 열고 돋보기 아이콘을 클릭한 후 광고 배너를 넣을 자리(빨간색 link)를 클릭한다.
  3. 개발자 창 왼쪽에 HTML 코드를 살펴보면 선택된 곳 한 칸위에 <div class=”ad_link fr”>가 보이는데 광고 배너 부분의 CSS를 적용하기 위해 클릭한다.
  4. <div class=”ad_link fr”>를 클릭하고 개발자 도구 오른쪽 CSS를 적용하는 부분을 보면 ‘ad_link{}’가 보인다. 그 안에 CSS를 넣어준다.
  5. ad_link 클래스에 CSS 속성들을 적용하면 결과 화면을 확인할 수 있다.
  6. 하지만 광고 배너 링크를 클릭해도 다른 페이지로 넘어가지 않는데, 그 이유는 <a>태그의 영역이 확보되지 않아 발생하는 현상이다. 다시 개발자 도구로 돌아가서 ad_link에 속해있는 <a>태그의 영역을 확보해준다. <a>태그의 영역을 확보하는 CSS를 넣고 사이트 화면에서 광고 배너를 클릭하면 해당 사이트로 이동되는 것을 확인할 수 있다.
  7. 이제 CSS를 적용한다. Bueno 테마에서는 테마 옵션에 custom.css를 적용할 수 있는 Custom CSS 필드가 있으므로 테마 옵션을 통해서 CSS를 적용한다.
  8. ‘알림판 > 외모 > Bueno > Theme Options’ 메뉴에서 ‘General Settings’의 ‘Custom CSS’에 다음과 같이 CSS를 넣어준다.
  9. 이제 실제 사이트에서 확인을 해본다. 로그 우측에 광고 배너가 적용된 것을 확인한다.

메인 메뉴와 Search Bar에 CSS 적용하기

  1. 개발자 도구에서 돋보기 아이콘을 클릭하고 메뉴 부분을 클릭한다.
  2. 우측 부분을 확대해서 보면
  3. #pagenav는 메인 메뉴 <div>태그의 아이디 값이며, margin-top 아래에 ‘width’를 넣어준다.
  4. width 속성을 적용하면 메인 메뉴를 감싸는 <div>태그가 좌우로 잘 정렬되는 것을 볼 수 있다.
  5. 제대로 적용된 모습을 확인하고, 적용한 CSS를 그대로 복사하여 ‘알림판 > 외모 > 테마옵션’의 ‘Custom CSS’에 넣어 준다.
  6. 앞의 과정을 따라 하다 보면 Search Bar가 약간 아래고 내려가 있는 것을 볼 수 있다. 이것 또한 개발자 도구를 이용하여 수정을 해준다.
  7. 먼저 돋보기 아이콘을 클릭한 후 ‘Search Bar’를 클릭한다.
  8. Search Bar를 클릭한 후 개발자 도구 왼쪽 부분에 <input>태그가 선택 되어있는데 바로 위쪽에 Search Bar의 form을 구성하는 <form>태그를 선택한다.
  9. margin이 Search Bar의 빈 공간을 만들기 때문에 체크 상태를 해제한다. margin 체크 해제 후 Search Bar 위쪽에 빈 공간이 없어지는 것을 확인한 후, ‘알림판 > 외모 > 편집기’에서 style.css를 열어서 ‘#topsearch’를 검색하여 찾는다.
  10. 단어 검색을 통해 해당 클래스 ‘#topsearch #searchform_top’을 찾았으면 /* */를 사용하여 주석처리하고 저장한다. 이제 실제 사이트에서 확인해 보면 Layout 부분의 수정이 완료된 것을 확인할 수 있다.

답글 남기기