페이지마다 다른 배경/슬라이드 표시하기 2 - 사용자 정의 필드 사용[워드프레스]

워드프레스에서 페이지나 글마다 배경을 달리 표시하는 방법은 여러 가지가 있습니다. 앞에서 Display Widgets이라는 플러그인을 사용한 방법을 살펴보았습니다. ("페이지마다 다른 배경 표시하기 1" 참조) 원하는 위치에 위젯 영역이 있거나 위젯 영역을 만들 수 있는 경우 이 방법이 편리하고 직관적입니다.

숏코드를 사용하여 배경/슬라이드를 개별 글/페이지별로 표시하기

이번에는 사용자 정의 필드(Custom Field)를 사용하여 페이지마다 다른 배경, 특히 슬라이드를 표시하는 방법을 살펴보겠습니다. 처음 사용자 정의 필드를 접했을 때에는 '그런 것이 있는가보다. 분류를 쉽게 하겠군'하고 지나쳤는데, 사용자 정의 필드를 사용하여 배경(이미지)을 글 또는 페이지마다 삽입할 수 있다는 것을 알게 되었습니다. 더구나 Advanced Custom Fields 플러그인을 사용하면 다양한 응용이 가능하다고 하네요. 그럼, 숏코드도 넣을 수 있겠네라는 생각이 들었습니다. 그렇다면 개별 글이나 페이지마다 숏코드를 사용하여 쉽게 이미지나 슬라이드를 쉽게 삽입할 수 있을 것입니다.

인터넷을 검색해보니 역시 가능하네요. 이 글에서 친절하게 코드까지 적어놓았네요. 저는 여기에 div 요소를 추가하여 페이지 헤더(또는 글 헤더에도 가능)의 메뉴 아래에 추가하여 슬라이드를 테스트로 넣어봤습니다.

Custom Field for shortcode in WordPress

위와 같이 Header가 끝나는 지점에 삽입했습니다. 직접 코드를 적어보면

<?php $shortcode=get_post_meta($post->ID,'사용자 정의 필드 이름',true);
echo '<div class="요소 이름">';
echo do_shortcode($shortcode);
echo '</div>';
?>

참고로 사용자 정의 필드 값이 존재하는지 확인하는 구문을 삽입하려면 위의 코드를 다음 코드로 둘러싸면 됩니다.

<?php if ( get_post_meta($post->ID,'사용자 정의 필드 이름',true) ) { ?>

//위의 코드

<?php } ?>

이제 테스트로 페이지에 사용자 정의 필드를 추가하여 잘 되는지 테스트해 보겠습니다. 원하는 페이지를 편집하거나 새로운 페이지를 만들고 사용자 정의 필드 이름에 위의 코드에 기재한 것과 동일한 이름을 입력하고 표시할 쇼트코드를 상자에 삽입합니다.
Custom Field for shortcode in WordPress 2

혹시 사용자 정의 필드 추가란이 표시되지 않으면 맨 위의 "화면 옵션"에서 사용자 정의 필드를 체크해주시면 됩니다. 저는 슬라이드를 하나 만들고 숏코드(shortcode)를 추가했습니다. 실제로 잘 작동하는지 살펴보니 예상대로 잘 되네요.
Custom Field WordPress slider

추가 후 곧바로 보면 위치가 틀어져 있을 것입니다. CSS를 사용하여 위치를 조정하거나 원하는 효과를 주시면 됩니다. 여기에서는 슬라이드를 추가했는데, 이외에도 이미지 위젯을 사용하여 배경 그림도 삽입 가능합니다.

그림 이미지 링크를 직접 입력하여 개별 글/페이지별로 표시하기

사용자 정의 필드에 숏코드 대신 그림 파일 링크(예: http://....)를 직접 입력하여 표시하는 방법도 가능합니다.
custom field using image hyperlink
이를 위해서는 헤더 파일이나 원하는 페이지의 적당한 위치에 다음과 비슷한 코드를 삽입합니다. (원리는 위에서 다룬 것과 완전히 동일합니다. 다른 점은 위에서는 숏코드를 값을 입력한 대신, 여기서는 하이퍼링크 주소를 직접 입력하는 것입니다.)

<?php if ( get_post_meta($post->ID,'사용자 정의 필드 이름',true) ) { ?>
<?php echo '<div class="요소 이름">'; ?>
<img src="<?php echo get_post_meta($post->ID, '사용자 정의 필드 이름', true); ?>" />
<?php echo '</div>'; ?>
<?php } ?>

위의 요소 이름을 이용하여 CSS에서 레이아웃을 조정해주면 위와 동일한 결과를 얻을 수 있습니다.

위젯 영역을 사용하는 방법의 경우 전체적으로 제어할 수 있는 장점이 있지만 개별 페이지나 글을 제어하려면 별도의 플러그인(예: Display Widgets)을 사용해야 합니다. 이 글에서 사용한 방법은 개별 글이나 페이지에서 사용자 정의 필드를 직접 추가하여 개별적으로 제어할 수 있는 이점이 있습니다. 이외에도 사용자 정의 필드의 활용은 다양한 것 같습니다(시간이 될 때 더 알아봐야 하겠습니다). 요약하면 이 방법은 개별 글/페이지를 제어하는 데 적합하며, 앞에서 다루었던 위젯을 사용한 방법은 전체적으로 (가령 페이지별/카테고리별 등) 제어하는 데 유리합니다. (하지만 위젯을 사용하는 방법에서도 Widget Logic이라는 플러그인을 대신 사용하면 보다 정밀하게 제어가 가능합니다.)

참고 -- 위젯에서 숏코드 정보 얻기

참고로 숏코드가 지원되지 않는 위젯의 경우 Widget Shortcode라는 플러그인을 사용하여 숏코드를 얻을 수 있습니다. 위젯을 저장하면 해당 위젯 맨 아래에 숏코드가 생성됩니다. 그러면 위젯을 비활성 사이드 영역으로 옮기고 숏코드를 페이지나 글 등에 사용할 수 있습니다.
Widget shortcode plugin

바야흐로 2015년 새해가 밝았네요. 저는 오늘 납품해야 하는 번역 프로젝트 때문에 휴가도 반납하고 혼자 집을 지키고 있습니다. 이제 겨우 1차 납품을 끝내고 한숨을 돌리고 있습니다(그런데 2차 납품이 기다리고 있다는...). 이게 프리랜서의 비애가 아닐까 생각되네요. 2015년에는 소망하는 모든 일이 이루어지길 기원합니다. 새해 복 많이 받으세요.


댓글 남기기

* 이메일 주소는 공개되지 않습니다.