워드프레스 테마 만들기 | 메뉴와 사이드바 > functions.php

functions.php 파일은 메뉴나 사이드바 등의 기능의 사용 여부를 정하거나 여러 설정을 하는 파일입니다. 메뉴와 사이드바 만드는 방법은 다음 섹션에서 알아볼 것이니, 여기서는 예제로 썸네일에 대한 설정을 해보겠습니다.

다음의 코드를 가진 functions.php 파일을 만든 다음 style.css가 있는 폴더에 업로드합니다.

<?php
  // Thumbnails
  add_theme_support( 'post-thumbnails' );
?>

테마에서 썸네일을 사용할 수 있게 하겠다는 뜻입니다. index.php에 있는

<?php the_excerpt(); ?>

앞에 다음의 코드를 넣겠습니다.

<?php
  if ( has_post_thumbnail() ) {
    the_post_thumbnail( thumbnail );
  }
?>

만약 포스트에서 특성 이미지를 설정했다면, 그 이미지의 썸네일을 출력하라는 뜻입니다. 세번째 줄 괄호 안에 있는 thumbnail은 이미지 크기입니다. 워드프레스 관리자 모드 [설정 - 미디어]에서 정한 썸네일 크기로 나옵니다. thumbnail 대신에 medium, large, full을 사용할 수 있습니다.

사이트로 가면 특성 이미지가 설정된 포스트는 다음처럼 이미지가 나오는 것을 확인할 수 있습니다.

썸네일 이미지는 크기를 자유롭게 정하고 싶다면, 예를 들어 가로 세로 100px 크기로 만들고 싶다면 다음과 같이 하면 됩니다.

<?php
  if ( has_post_thumbnail() ) {
    the_post_thumbnail( array(100,100) );
  }
?>

썸네일이 요약글 위에 있으니 보기가 좋지 않습니다. 요약글이 썸네일 오른쪽에 흐르도록 하려면 이미지에 class 값을 추가한 후 float 속성을 부여하면 됩니다. 예를 들어 jb-thumbnail이라는 클래스를 추가하려면 다음과 같이 합니다.

<?php
  if ( has_post_thumbnail() ) {
    the_post_thumbnail( array(100,100), array(
      'class' => 'jb-thumbnail',
    ) );
  }
?>

the_post_thumbnail에 대한 자세한 정보는 다음의 링크에 있습니다.

이제 float 속성을 사용할 것인데, 밑의 글이 같이 끌려 올라는 걸 방지하기 위해 포스트 목록에 jb-post-list라는 class를 하나 추가하겠습니다.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="jb-post-list">
    ...
  </div>
<?php endwhile; else: ?>

style.css에 다음의 코드를 추가합니다.

.jb-thumbnail {float: left; margin: 0px 10px 10px 0px;}
.jb-post-list {clear: both;}

결과는 다음과 같습니다.

Source Code Download : making-wordpress-theme-v1-chapter-3-1.zip

Created on 2014-01-14 17:12 | Updated on 2015-07-17 15:16