초보라면 꼭 봐야 할 워드프레스 구조 설명 (header, sidebar, footer)

 

영어 학습의 시작은 알파벳부터 입니다. 그 다음 단어와 문법을 배워야 비로소 제대로 된 영어를 사용할 수 있게 됩니다.

워드프레스웹사이트의 구조와 각 부분의 이름 파악하는 것부터 시작해야 합니다.

무턱대고 워드프레스에 뛰어들면 자신이 손보고 싶은 부분이 어디인지 몰라서 검색이 불가능해집니다.

이 포스팅에서는 아주 기본적인 구조와 명칭에 대해서 알려드리겠습니다. 이 구조와 이름에 대해 알고 나면 디자인을 하거나 필요한 기능을 구현하기 한결 편해질 것입니다.

 

1.구조를 알아야 하는 이유

워드프레스는 세세한 부분은 반드시 스스로 설정하고, 디자인할 줄 알아야 합니다.

그런데 초보라면 다음과 같은 용어 앞에서 머리가 복잡해서 머리가 하얘집니다. (Appearance->Customize->Layout)

구조를 알아야 하는 이유

 

사이트 배치(Layout)을 하고 싶은데 어느 용어가 어디 위치인지를 모르면 시작조차 못합니다. 따라서 스스로 워드프레스를 다루기 위해서는 반드시 구조를 알아야 합니다.

 

2.웹사이트의 구조

웹사이트는 크게 3부분으로 이루어져 있습니다.

  • 머리(Header)
  • 몸통(Contents)
  • 다리(footer)

삼성 웹사이트를 예시로 보겠습니다.

삼성 구조 설명 삼성 구조 설명2

 

 

그런데 어떤 사이트는 손(Side bar)도 있습니다. 다음 사이트를 예시로 보겠습니다.

Wp beginner 구조설명 side bar

손(Side bar)는 없거나, 한 쪽에만 있거나, 양 쪽 모두 있을 수도 있습니다.

 

지금까지 구조를 그림으로 표현하면 다음과 같습니다.

머리 몸 손 다리

 

모든 웹사이트는 이와 같은 구조를 따릅니다. 다만 몸(contents)를 제외하면 나머지 부위는 감추거나 없앨 수도 있습니다.

이 웹사이트는 헤더가 따로 없고, 사이드바 위치에 메뉴를 만들어 뒀습니다.

헤더가 없는 웹사이트

이 처럼 구조는 큰 틀일 뿐이고 자신이 원하는 대로 개성 있게 디자인할 수 있습니다.

 

3.알면 유용한 개념 3가지 – Navigation, container, Widget

Navigation

기본적으로 대부분 사이트가 머리(Header)와 결합 돼 있습니다. 웹사이트의 메뉴 등이 길을 안내하듯이(Navigation) 표현돼 있는 곳입니다.

Navigation 설명

 

Container

컨테이너(Container)는 글을 담는 상자의 사이즈입니다.

(Appearance -> Customize ->Layouts->Container)

 

제 웹사이트를 보시면 다음과 같이 1215px로 컨테이너가 설정 돼 있습니다.

Container 설명1 Container 설명2

 

 

870px로 한 번 줄여보겠습니다. 이런 식으로 컨테이너를 조정할 수 있습니다.

Container 설명3

 

Widget

Widget은 머리, 손, 다리에 집어 넣을 수 있는 요소입니다. 위젯 화면은 다음과 같습니다.

widget 위젯 설명

 

참고로 저는 목차(Table of Contents)를 오른쪽 사이드바(side bar)에 추가한 상태입니다.

widget 위젯 설명2

 

4.Contents, Widget의 주요 용도

웹사이트의 구조를 파악했다면 이제 자신이 원하는 대로 꾸밀 수 있습니다. 사이드바(Sidebar)와 푸터(Footer)의 주요 용도는 다음과 같습니다.

사이드바(Sidebar)

✅프로필 삽입

✅판매 상품 광고 창

✅소셜 버튼

✅인기 있는 글 삽입

푸터(Footer)

✅Copy right 명시

✅개인정보 정책(Privacy Policy)

✅Support(고객센터)

✅사업자 정보

✅메뉴

 

무료테마는 제한이 많이 있습니다

워드프레스는 구조와 명칭을 파악하고 나면 굉장히 사용하기 쉬워집니다. 숲의 구조를 먼저 이해해야 나무를 꾸밀 수 있기 때문입니다.

그런데 무료 테마는 입맛에 맞게 변형시키려고 해도 잘 안되는 사람이 많을 것입니다. 왜냐하면 대부분 무료 테마는 제한을 걸어 두었기 때문입니다.

무료 테마를 쓰는 사람은 코딩을 조금 다룰 줄 아셔야 자유롭게 구조를 바꿀 수 있습니다.

자유롭게 웹사이트 구조 변경이 가능하며, 속도와 성능도 뛰어난 워드프레스 테마 GeneratePress를 추천합니다.

 

이글이 워드프레스 구조에 대해 이해하는데 도움이 되셨길 바랍니다.

 

 

2 thoughts on “초보라면 꼭 봐야 할 워드프레스 구조 설명 (header, sidebar, footer)”

  1. 감사합니다. 워드프레스와 테마에 대하여 이해하는데 아주아주 큰 도움이 되었습니다. 아직은 서툴게 해나가고 있는데 여기에서 큰 공부하고 갑니다.

    Reply

Leave a Comment