워드프레스 Column의 이해와 예제

Posted on

워드프레스로 만들어진 사이트 뿐만이 아니라, 유명 사이트를 보다 보면, 아래 그림과 같은 컨텐츠 표현 형식을 많이 볼 수 있습니다. 물론, 그림처럼 정적인 데이터만 반드시 들어 가는 것은 아니지만, 컨텐츠 표현의 틀(레이아웃)을 보면 모두 동일 한 것 입니다.

정적인 데이터가 아니라, 썸네일과 타이틀 및 내용의 일부가 나오는 컨텐츠(포스트나 페이지 등, 우리나라의 개념으로 흔히 ‘최근게시물’)  리스트나 아니면 그 중에 한가지만 추출하는 컨텐츠 리스트, 슬라이드 컨텐츠, 동영상 등 거의 모든 내용을 그림과 같은 형식의 틀에 삽입할 수 있습니다.

Column 표현의 예

워드프레스에서 이런 ‘컨텐츠 표현의 틀’을 이야기 할 때 ‘Column‘ 이라는 개념을 사용합니다.

‘Box’ 라는 개념과도 유사하지만 Box는 Box 플러그인마다 ‘표현의 개념’이 조금씩 상이하며 Column 과는 다소 차이가 있습니다. 플러그인이 지원한다는 가정 하에 Column과 Box의 조합으로도 다양한 컨텐츠 표현의 틀이 가능하다는 점만 염두하면 될 것으로 봅니다.


Column 플러그인이나 Column 을 지원하는 플러그인이 제법 많이 있으며,  Column 을 지원하며, 사용하는 방법을 shortcode와 함께 설명해 놓는 유료테마도 있습니다. Column을 나누는 shortcode 의 표현 방식만 다를 뿐 모두 유사합니다. Parameter를 제공해 좀 더 세부설정이 가능하게 하거나, 좀 더 이해하기 쉽고 간편한 shortcode를 제공해 주는 것, Column 의 폭을 좀 더 세부적으로 나눌 수 있도록 Column의 수를 좀 더 많이 지원해 주는 것 등이 차이점으로 보여집니다. 하지만, 경험적으로 판단 해볼 때 ‘쉽고 간편한 shortcode’와 ‘Column 지원 개수가 일정 수 이상’ 되는 플러그인이 효율적으로 판단됩니다. 그래서 아래와 같은 3가지 Column 지원 플러그인을 기준으로 ‘Column 나누기 예‘ 를 나타내 봅니다.


  1. Ultimate TinyMCE : editor 이며, shortcode 기능 및 Column shortcode 제공
  2. Shortcodes Ultimate : 다양한 shortcode 중에 Column 기능을 지원하는 shortcode 포함
  3. Grid Columns : Justin Tadlock 의 Column 플러그인

<반으로 나누기>

위의 Column 을 상단의 플러그인 순서대로 shortcode 를 나열해 보면 아래와 같습니다.

[one_half]Contents[/one_half]
[one_half_last]Contents[/one_half_last]

[gcolumn size="1-2" last="0"]Contents[/gcolumn]
[gcolumn size="1-2" last="1"]Contents[/gcolumn]

[column grid="2" span="1"]Contents[/column]
[column grid="2" span="1"]Contents[/column]

 

<3 Column>

위의 Column 을 상단의 플러그인 순서대로 shortcode 를 나열해 보면 아래와 같습니다.

[one_third]Contents[/one_third]
[one_third]Contents[/one_third]
[one_third_last]Contents[/one_third_last]

[gcolumn size="1-3" last="0"]Contents[/gcolumn]
[gcolumn size="1-3" last="0"]Contents[/gcolumn]
[gcolumn size="1-3" last="1"]Contents[/gcolumn]

[column grid="3" span="1"]Contents[/column]
[column grid="3" span="1"]Contents[/column]
[column grid="3" span="1"]Contents[/column]

 

<5 Column 을 기준으로 1-1-3 으로 나누기>

플러그인 순서대로 Column shortcode 를 나열해 보면,

[one_fifth]Contents[/one_fifth]
[one_fifth]Contents[/one_fifth]
[three_fifth_last]Contents[/three_fifth_last]

[gcolumn size="1-5" last="0"]Contents[/gcolumn]
[gcolumn size="1-5" last="0"]Contents[/gcolumn]
[gcolumn size="3-5" last="1"]Contents[/gcolumn]

[column grid="5" span="1"]Contents[/column]
[column grid="5" span="1"]Contents[/column]
[column grid="5" span="3"]Contents[/column]

 

<5 Column 기준으로 3-1-1 로 나누기>

플러그인 순서대로 shortcode 를 나열해 보면 아래와 같습니다.

[three_fifth]Contents[/three_fifth]
[one_fifth]Contents[/one_fifth]
[one_fifth_last]Contents[/one_fifth_last]

[gcolumn size="3-5" last="0"]Contents[/gcolumn]
[gcolumn size="1-5" last="0"]Contents[/gcolumn]
[gcolumn size="1-5" last="1"]Contents[/gcolumn]

[column grid="5" span="3"]Contents[/column]
[column grid="5" span="1"]Contents[/column]
[column grid="5" span="1"]Contents[/column]

 

<5 Column 기준으로 4-1 로 나누기>

플러그인 순서대로 Column shortcode 를 나열해 보면 아래와 같습니다.

[four_fifth]Contents[/four_fifth]
[one_fifth_last]Contents[/one_fifth_last]

[gcolumn size="4-5" last="0"]Contents[/gcolumn]
[gcolumn size="1-5" last="1"]Contents[/gcolumn]

[column grid="5" span="4"]Contents[/column]
[column grid="5" span="1"]Contents[/column]

 

<5 Column 기준으로 1-3-1 나누기>

[one_fifth]Contents[/one_fifth]
[three_fifth]Contents[/three_fifth]
[one_fifth_last]Contents[/one_fifth_last]

[gcolumn size="1-5" last="0"]Contents[/gcolumn]
[gcolumn size="3-5" last="0"]Contents[/gcolumn]
[gcolumn size="1-5" last="1"]Contents[/gcolumn]

[column grid="5" span="1"]Contents[/column]
[column grid="5" span="3"]Contents[/column]
[column grid="5" span="1"]Contents[/column]

위의 예제 들은 동일한 결과가 나오지만, 다른 플러그인으로 Column shortcode를 표현하는 방법을 이해하시기 바라는 생각으로 표현해 본 것 입니다. 익숙하지 않으신 분들은 혼동이 될 수도 있지만, 몇 번 테스트 하다 보면 금방 이해가 가능합니다. 플러그인이 지원하는 Column 개수의 한도 내에서 위의 예제에 없는 몇가지를 테스트 해보세요.

여기서 좀 더 활용 방법을 생각한다면, 워드프레스에서 페이지 하나를 만들고 Column 으로 틀을 만든 후에 원하는 컨텐츠 리스트나 정적인 컨텐츠, 동영상 및 SNS 데이터 등을 각각의 Column 에 삽입하고 프론트 페이지로 지정해 주면 프로그래밍 지식이 없어도 쉽게 자신의 웹사이트 메인페이지를 만들 수 있을 것 입니다. 이러한 페이지를 프로그래밍 코딩 없이 만들기 위해서는 컨텐츠 리스트를 표현해 주는 플러그인과 shortcode 등의 조합이 필요합니다.

2 thoughts on “워드프레스 Column의 이해와 예제”

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.