정해진 위치에 이미지 표시하기

기사마다 본문에 이미지를 삽입하고 그때마다 크기와 배치를 조절하는 것은 상당히 번거롭다. 따라서 기사마다 1장의 이미지를 ‘특성이미지(워드프레스의 독특한 이미지 처리 방식)’로 지정해서 개별 페이지의 정해진 위치에 자동적으로 표시되도록 한다. 여기에서는 기사의 제목과 본문 사이에 표시한다.

  1. 기사마다 표시할 이미지 준비하기
    기사마다 표시할 이미지를 준비한다. 이미지는 콘텐츠 부분의 가로 길이에 맞추어서 550X400픽셀의 크기로 표시하기 때문에, 이것과 같거나 보다 큰 이미지를 준비한다. 여기서는 640X480픽셀의 이미지를 준비하고 업로드할 때 워드프레스가 자동적으로 축소해서 550×400픽셀의 이미지를 생성하도록 설정한다.
  2. 특성 이미지의 기능 활성화하기
    워드프레스에는 기사마다 1장의 이미지를 ‘특성 이미지’로 지정하는 기능이 있다. 특성 이미지로 지정한 이미지는 전용 태그로 간단하게 표시할 수 있다. 따라서 function.php에 add_theme_support(‘post-thumbnails’)를 추가해서 특성 이미지의 기능을 활성화한다.
    set_post_thumbnail_size(~)는 특성 이미지의 크기를 지정한다. 여기에서는 가로 길이를 550픽셀, 높이는 400픽셀로 지정하고 3번째 파라미터를 ‘true’로 지정한다. 이렇게 지정하면 큰 이미지를 업로드한 경우 이미지를 축소하거나 잘라내기를 해서 지정한 크기의 이미지를 생성한다.
  3. 기사의 특성 이미지 지정하기
    ‘특성 이미지 설정’ 화면에서 이미지를 업로드한다.
  4. 특성 이미지 표시하기
    특성 이미지를 기사의 제목과 본문 사이에 표시한다. 기사의 출력 내용을 지정한 content.php를 열고 본문을 출력하는 <?php the_content(); ?> 앞에 <?php the_post_thumbnail(); ?>을 추가하면 특성 이미지가 출력된다.
  5. 각 기사의 특성 이미지 지정하기
    다른 기사에도 특성 이미지를 지정하면 각 기사의 개별 페이지에 특성 이미지가 표시된다. 모든 페이지의 기사의 제목과 본문 사이에 550×400픽셀의 크기로 표시된다.

function.php

<?php

(생략)

// 특성 이미지
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(550, 400, true);

?>

content.php

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

<?php the_post_thumbnail(); ?>

<?php the_content(); ?>

(생략)

댓글 남기기