상세 컨텐츠

본문 제목

wordpress thumb(워드프레스 썸네일 설정하기)

쿠쿠 작업장(web CMS)/wordpress

by eunclove 2014. 10. 20. 16:55

본문

728x90
반응형

워드프레스 에서 썸네일 설정 하는 방법은 다음과 같다.


기본적인 썸네일 생성방식

 functions.php에 다음과 같은 코드를 생성해 준다.


 add_theme_support( 'post-thumbnails' );


다음 썸네일이 나와야 하는곳에 예를 들어 메인에 썸네일을 표현 하고 자 한다면


index.php내에 


<?php

if ( has_post_thumbnail() ) {

the_post_thumbnail();

}

?>

위와 같이 넣어주면 썸네일이 생성된것을 볼 수가 있다.

(글 쓰기에서 특성이미지가 설정된 경우 설정이 안되어 있을경우 썸네일을 불러 오지 못한다.)



썸네일의 사이즈는 특성이미지에 설정된 값을 불러 온다.


썸네일의 사이즈를 조절하여 사용할 경우에는 아래와 같이 사용이 가능하다.


the_post_thumbnail( 'thumbnail' );       // 썸네일 기본 사이즈인 150*150 사이즈로 출력 된다.

the_post_thumbnail( 'medium' );          // 썸네일 사이즈가 300*300 사이즈로 출력 된다.

the_post_thumbnail( 'large' );           // 썸네일 사이즈가 640*640 사이즈로 출력 된다.

the_post_thumbnail( 'full' );            // 썸네일 사이즈가 업로드된 사이즈로 출력 된다.

 

the_post_thumbnail( array(100, 100) );  // 사용자가 지정한 값으로 출력 된다. 100*100


the_post_thumbnail( array(100, 100) ); 이렇게 했을때에는 사이즈가 정사각형 형식으로 출력이 된다.


하지만 사용자 지정 사이즈로 출력을 하는 방법도 있다.


사용자 지정사이즈로 출력을 할 경우에는 

function.php 에 다음과 같은 코드를 입력한다.



add_image_size( 'thumb_001', 300, 150, true );

add_image_size( 'thumb_002', 200, 100, true );


위에서는 예를 들기 위해 두가지 사이즈의 코드를 작성했다.


다음 index.php에서


<?php

if ( has_post_thumbnail() ) {

the_post_thumbnail('thumb_001');

}

?>

와 같이 the_post_thumbnail 내에 functions.php에서 설정했던 원하는 값의 이름을 넣어주면 된다.



썸네일에 style를 지정해 주고 싶을 때에는

<?php

if ( has_post_thumbnail() ) {

the_post_thumbnail('thumbnail'array( 'class' => 'alignleft' ));

}

?>

위와같이 클래스를 설정해 주면 된다.


the_post_thumbnail 참고 주소 

http://codex.wordpress.org/Function_Reference/the_post_thumbnail




add_image_size  참고 주소 

http://codex.wordpress.org/Function_Reference/add_image_size



728x90

관련글 더보기

댓글 영역