기사마다 썸네일 이미지 표시하기

기사마다 썸네일 이미지 표시하기

기사의 제목과 요약문을 표시한 카테고리 페이지에 각 기사의 썸네일 이미지를 추가한다. 여기에서는 각 기사의 특성 이미지를 표시하도록 지정하고 특성 이미지가 지정되지 않은 경우 대체 이미지를 표시한다.

  1. 기사마다 1장의 썸네일 이미지 표시하기
    카테고리 페이지에 각 기사의 썸네일 이미지를 표시한다. 썸네일 이미지는 기사마다 1장씩 표시하기 위해 각 기사의 특성 이미지를 표시한다.
  2. 특성 이미지 확인하기
    특성 이미지는 기사마다 1장만 지정할 수 있는 이미지이다.
    ->MEMO
    특성 이미지를 사용하지 않은 경우 기사의 본문에 추가한 이미지를 썸네일 이미지로 표시할 수 있다. 자세한 내용은 아래쪽의 ‘TIPS 기사에 추가한 이미지의 썸네일 표시하기’를 참조하기 바란다.
  3. 썸네일 크기의 특성 이미지 표시하기
    특성 이미지를 업로드하면 앞에서 지정한 것처럼 550×400픽셀 크기의 이미지가 자동으로 생성된다. [설정]-[미디어]에서 지정한 3가지 종류의 크기 이미지도 동시에 생성된다. 3종류의 크기 가운데 ‘작은크가(썸네일)(150×150픽셀)’의 특성 이미지를 표시한다.
    썸네일 크기의 특성 이미지를 표시하기 위해 content-excerpt.php에 <?php the_post_thumbnail(); ?>을 추가해서 파라미터를 thumbnail이라고 지정한다. 여기에서는 제목과 요약문 사이에 표시한다.
  4. 이미지의 배치 지정하기
    style.css에서 이미지의 배치를 지정한다. ‘float: left’로 지정해서 이미지를 왼쪽에 배치하고 오른쪽에 기사의 요약문이 배치하도록 한다. margin에서는 이미지의 오른쪽과 아래쪽에 10픽셀의 여백이 삽입되도록 지정한다.
  5. 특성 이미지가 지정되지 않은 기사 확인하기
    특성 이미지를 지정하지 않은 기사를 확인하면 제목과 요약문만 표시된다.
  6. 특성 이미지가 지정되지 않았을 때 대체 이미지 표시하기
    특성 이미지를 지정하지 않은 기사에서는 대체 이미지를 표시한다. no_image.jpg라는 대체 이미지를 준비해서 테마 폴더로 업로드한다.
    특성 이미지 유무는 <?php if(has_post_thumbnail()): ?>로 판단한다. 특성 이미지가 있는 경우 출력하는 내용은 <?php if(has_post_thumbnail()): ?>~<?php else: ?> 사이에 입력하고, 특성 이미지가 없는 경우 출력하는 내용은 <?php else: ?>~<?php endif; ?> 사이에 입력한다. 특성 이미지가 없는 경우에는 no_image.jpg를 표시한다. <?php bloginfo(‘template_url’); ?>은 테마 폴더의 URL을 출력해서 이미지를 지정한다.

->TIPS 자동 생성하는 이미지의 크기 늘리기

특성 이미지를 업로드할 때 자동 생성하는 이미지의 크기를 늘리기 위해서는 add_image_size()로 지정한다. add_image_size()의 지정은 function.php에 추가해서 파라미터를 ‘이미지 크기를 나타내는 키워드’, 가로 길이, 높이 라는 형식으로 지정한다. 예를 들어 ‘mysize400’, 400, 400 이라고 지정하면 가로 길이 400픽셀인 이미지가 생성된다. 예제와 같이 640×480픽셀의 이미지를 업로드한 경우 400×300 픽셀의 이미지가 생성된다. 이 이미지는 <?php the_post_thumbnail(~); ?>로 키워드를 mysize400이라고 지정해서 표시한다.
길이를 지정한 크기가 맞추는 것이 아닌 가로 길이와 높이를 지정한 크기로 하기 위해서는 add_image_size()에서 4번째 파라미터를 ‘true’라고 지정한다. 예를 들어  ‘mysize100’, 100, 100, ‘true’ 라고 지정하면 640×480픽셀의 이미지를 업로드해도 100×100픽셀의 이미지를 생성할 수 있다. 이 이미지는 <?php the_post_thumbnail(‘mysize100’); ?>이라고 지정해서 표시한다.
add_image_size()를 이용해서 이미지를 지정하는 경우 이미 업로드한 이미지에는 적용되지 않는다. 따라서 이미 업로드된 이미지를 수정하려면 이미 업로드된 이미지를 삭제한 후 다시 업로드하거나 다음에 설명하는 ‘TIPS 업로드된 이미지 수정하기’를 참고하기 바란다.

->TIPS 업로드된 이미지 수정하기

워드프레스는 이미지를 업로드할 때 [설정]-[미디어]와 add_image_size()로 지정한 크기의 이미지를 자동 생성한다. 그러나 나중에 크기의 지정을 변경해도 이미 업로드된 이미지에는 적용되지 않는다. Regenerate Thumnails 플러그인을 설치해서 활성화한 후  [도구]-[Regen. Thumbnails]를 선택해서 실행화면을 연다. 실행화면에서 [Regenerate All Thumbnails] 버튼을 클릭하면 이미 업로드된 모든 이미지를 대상으로 자동 생성되는 처리가 실행된다.
이미 업로드된 이미지를 개별적으로 수정하는 방법은 [미디어]-[라이브러리]에서 이미지에 커서를 가져가면 표시되는  [Regenerate Thumbnails]을 클릭한다.

->TIPS 기사에 추가한 이미지의 썸네일 표시하기

특성 이미지를 사용하지 않는 경우 기사에 추가한 이미지의 썸네일을 이용해서 표시할 수도 있다. content-excerpt.php에 다음과 같이 입력한다. 각 기사의 편집화면에 마지막으로 업로드한 이미지를 1장 표시한다.

본문에 추가한 이미지가 없는 경우 content-excerpt.php에 다음과 같이 설정을 추가하면, 앞에서 준비한 대체 이미지를 표시할 수 있다.

content-excerpt.php

썸네일 크기의 특성 이미지 표시하기

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p>

<p class=”thumb”>
<?php the_post_thumbnail(‘thumbnail’); ?>
</p>

<?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

특성 이미지가 지정되지 않을 때 대체 이미지 표시하기

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p><p class=”thumb”>

<?php if(has_post_thumbnail()): ?>

<?php the_post_thumbnail(‘thumbnail’); ?>

<?php else: ?>
<img src=”<?php bloginfo(‘template_url’); ?>/no_image.jpg” alt=”No Image” width=”150″ height=”150″ />
<?php endif; ?>

</p>

<?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

자동 생성하는 이미지 크기 늘리기

function.php

<?php

(생략)

// 자동생성하는 이미지 크기
add_image_size(‘mysize400’, 400, 400);
add_image_size(‘mysize100’, 100, 100, true);

?>

content-excerpt.php

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p>

<p class=”thumb”>
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(‘mysize400’​); ?>
<?php else: ?>
<img src=”<?php bloginfo(‘template_url’); ?>/no_image.jpg” alt=”No Image” width=”150″ height=”150″ />
<?php endif; ?>
</p>

<?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

기사에 추가한 이미지의 썸네일 표시하기

content-excerpt.php

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p>

<p class=”thumb”>

<?php
$imgset = array(
‘post_type’ => ‘attachment’,
‘post_mime_type’ => ‘image’,
‘post_parent’ => $post->ID,
‘numberposts’ => ‘1’
);
$images = get_children($imgset);
$image = array_shift($images);
?>

<?php if($image): ?>
<?php echo wp_get_attachment_image($image->ID, ‘thumbnail’); ?>
<?php else: ?>
<img src=”<?php bloginfo(‘template_url’); ?>/no_image.jpg” alt=”No Image” width=”150″ height=”150″ />
<?php endif; ?>

</p>

<?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

출처: 바꾸면서 배우는 워드프레스 디자인

“기사마다 썸네일 이미지 표시하기”에 대한 한개의 댓글

답글 남기기