디바이스별로 다른 워드프레스 컨텐츠 보여주기

Posted on

워드프레스로 컨텐츠를 생산할 때 항상 세로 나열형으로만 표현하지는 않습니다. 이미지를 텍스트 컨텐츠의 좌•우측에 배치할 때도 있고, 이전 글 ‘워드프레스 Column의 이해와 예제‘처럼 컬럼을 나누는 플러그인을 사용하여 컨텐츠 표현을 다양하게 시도할 수도 있습니다. 또는, 프론트페이지를 만들어 다양한 분류의 컨텐츠를 컬럼을 나누어 표현할 경우도 많이 있습니다.

하지만, 이렇게 표현된 컨텐츠를 PC가 아닌 모바일 기기에서 열람할 때, 사용하는 테마가 반응형(Responsive) 테마라면 가로 화면의 크기에 맞게 축소 되어 오히려 컨텐츠를 열람하는 것이 불편할 때가 많습니다. 특히, 일정한 길이의 텍스트가 포함 되어 있다면 지나치게 세로로 늘어나 컨텐츠의 표현이 더욱 더 어색해 질 때가 많습니다. 반응형 테마가 아니더라도 모바일 기기에서는 단순하게 컨텐츠를 세로 나열형으로 표현해 주는 것 또는 긴 텍스트 내용은 나오지 않게 하는 것이 유리할 수도 있습니다.

아래 그림은 이미지를 텍스트의 좌측에 배치한 것과 컬럼으로 3단을 구분하여 각각의 컬럼에 이미지를 좌측에 배치하고 텍스트를 삽입한 결과를 PC화면과 모바일 기기에서 본 화면입니다.

PC화면의 컨텐츠를 모바일 기기에 볼 때
반응형 테마 사용 시에 PC화면의 컨텐츠를 모바일 기기에 볼 때 텍스트가 세로로 늘어나는 모양

이러한 문제의 해결방안을 코드스킬로 해결한다는 것은 불필요하며, 너무나 비효율적인 일입니다. 이 역시 플러그인을 통하여 해결해 보는 것이 즐거운 일입니다.


플러그인 : Mobile Content

위의 플러그인은 몇 가지 쇼트코드를 통하여 디바이스 별로 다른 컨텐츠를 나타나게 해주는 것입니다. 당연히 각각의 컨텐츠는 직접 작성하여야 됩니다. 플러그인 사용은 너무 간단하므로 설명이 필요 없습니다.

2013.3.19 현재 플러그인이 다운로드 되지 않습니다. 위의 링크로 다운로드 되지 않을 때 여기를 눌러 받아보세요.

위의 그림을 기준으로 간단히 작성을 해보면 아래와 같습니다.

워드프레스 플러그인 디렉토리에서 더 이상 서비스되지 않습니다. 유료플러그인으로 전환되어 판매중인 것으로 확인됩니다. 대체 플러그인으로 WP Mobile Detect 플러그인이 있습니다. 해당 플러그인 의 FAQ 탭에 사용안내가 있으니 참고하세요.

Mobile Content 플러그인 쇼트코드
PC 및 모바일에서 각각 표현할 컨텐츠

PC 화면에서 보일 내용에는 기존 내용 시작과 끝에 각각 위의 그림과 같이 입력해 주고, 모바일 기기에서 보여질 내용에는 PC 화면의 내용을 복사하지만, 컬럼으로 나누거나 이미지를 텍스트 좌측에 배치하지 않고, 단순히 나열형으로 작성하고, 긴 텍스트 대신에 짧은 제목을 입력하거나, 이미지에 caption을 입력한 후에 컨텐츠 시작과 끝에 해당 쇼트코드를 넣어 줍니다.

모바일 기기에서는 아래와 같이 나옵니다.

모바일 기기에서 컨텐츠를 다르게 표현하기

간단한 예제를 하나의 포스트를 기준으로 안내한 것입니다만, 다양한 분류의 컨텐츠를 한번에 표현하고자 하는 프론트페이지에서는 이러한 컨텐츠 표현의 방법론이 대단히 유용할 것으로 생각됩니다.

답글 남기기

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