[WPTuts] 사용자 정의 필드를 활용한 배경화면 바꾸기

안녕하세요. 왼손은거들뿐입니다.

 

카페 질문란에 올라와 있는 걸 끄적끄적 테스트를 해보니 잘 되는거 같아서(?) 여기에 올려봅니다.

원문은 제 블로그에 있어요(http://www.1efthander.com). 여긴 카피 ㅎㅎ

 

카페에 ‘페이지 배경으로 그림을 깔려면 어떻게 해야 할까요?’ 라는 질문이 있었어요.

플러그인이 있을거 같고, 질문자도 플러그인을 사용하기에 다른 방법으로 처리해보도록 할께요.

1. 배경 이미지를 넣을 수 없을까?

왼손은01

 

 

 

 

 

 

 

 

 

 

2. 크롬 브라우져 요소검사로 테스트해보기 배경무늬 이미지 url을 하나 알아둬요.

왼손은02

 

 

 

 

 

 

 

 

 

 

 

 

 

크롬 브라우져 요소검사로 배경이 body CSS Style에 적용되어 있음을 알 수 있네요. background-image : url(이미지주소); 를 넣고 테스트 해보니 아래 이미지와 같이 배경무늬가 생겼어요.

(색상을 바꿀려면 background의 색상을 변경하면 되겠네요.)

왼손은03

 

3. 착안(황씨의 착한 워드프레스 블로그) 사용자 정의 필드 활용하기

황씨님 블로그 중 사용자 정의 필드 사용하기 라는 포스팅이 있었는데요.

이 포스팅을 참고로 저도 사용자 정의 필드를 사용해서 배경 이미지를 바꿔보겠어요.

the_meta() function 기능을 확인하기 위해서 워드프레스 코덱스를 봐야겠죠.

왼손은04

 

 

 

 

 

 

 

 

 

 

 

 

 

5. wordpress codex 확인 다행히도 코덱스 내용 중 제가 원하는 function이 있더군요. get_post_meta($post_id, $key, $single = false)

 

왼손은05

 

 

 

 

 

 

 

 

 

 

 

 

6. 적용하기 배경으로 사용할 이미지를 올려요~

왼손은06

 

 

 

 

 

 

헉 왠 소스~ 하시겠지만 우리에겐 copy & paste 가 있죠. 제가 사용하는 theme가 twentyeleven 이에요. 또한, 페이지가 아닌 포스트에 적용 할거에요. (theme가 다르더라고, 페이지가 아닌 포스트 더라도 내용은 비슷하리라 생각해요. 페이지든 포스트든 내용이 나오는 소스파일에 추가해주는 거에요.)

content-single.php 파일을 수정해요. 맨 하단에 사용자 정의 필드 중 Background Image 를 사용한 포스트 라면 CSS Stype을 적용해요.

왼손은07

 

내용이 너무 길죠? 그래서 function으로 바꿨어요

왼손은08

 

 

 

<?php custom_field_background_image( $post->ID, false );?>

 

function.php 파일에 아래 내용을 추가해요. custom_field_background_image( $post_id, $repeat ) $post_id : 포스트, 페이지 아이디 $repeat : 반복여부(true | false) 포스트 아이디만 파라미터로 넘겨줘도 되지만, repeat도 제어하기 위해서 넘겨봤어요. (custom_field_background_image 함수의 CSS 부분은 입맛에 맞게 수정하시면 되요~)

 

왼손은09

 

/** * 1eftHander, 2012-09-03, 사용자 정의 필드를 활용한 배경화면 바꾸기 * @since Twenty Eleven 1.0 */function custom_field_background_image( $post_id, $repeat ) { $meta_values = get_post_meta($post_id, ‘Background Image’, true); if ( ” != $meta_values ) {  echo ”; }}

 

 

 

7. 확인하기 사용자 정의 필드를 add 하여

name : Background Image value : 이미지 파일 url

을 입력하고 저장해요.

왼손은10

 

 

 

짠~ 바뀐게 보이시나요? 이렇게 포스트에 사용자 정의 필드를 이용하면 포스트별로 배경이미지를 바꿀 수 있겠죠? 적용 사이트 (http://www.1efthander.com/study/wordpress/change-the-background-image-using-a-custom-fields/)

왼손은11

 

 

 

 

 

 

 

 

 

 

 

 

이상이에요~

허접합니다. ㅜ_ㅠ 노력할께요~

 

 

2013년 February 9일 / TIP 노하우, 테마&플러그인

Share the Post

About the Author

Comments

No comment yet.


Warning: strpos() expects parameter 1 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 190

Warning: preg_match() expects parameter 2 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 201
Leave a Reply

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

Cart

  • No products in the cart.

Login