이미지의 개별 페이지를 사용자정의로 디자인하기

기사에 이미지를 추가할 때 이미지에는 이미지 파일 또는 이미지의 개별 페이지로 이동하는 링크를 설정할 수 있다. 여기에서는 이미지의 개별 페이지로 이동하는 링크를 설정하고, 이미지만 표시되는 개별페이지를 별도의 레이아웃으로 표시한다.

->POINTS

  • 이미지의 제목을 출력
    <?php the_title(); ?>
  • 이미지를 출력
    <?php echo wp_get_attachment_image(); ?>
  1. 이미지의 링크를 설정하기
    먼저 기사의 편집화면에서 ‘미디어추가’를 클릭하여 이미지를 업로드하고, 이미지 편집화면에서 이미지 설정을 하고 업데이트한다.
  2. 이미지의 개별 페이지 열기
    기사의 개별 페이지에서 이미지를 클릭하면, 링크로 연결된 이미지의 개별 페이지가 열린다. 이미지 개별 페이지는 기사의 개별 페이지와 같은 single.php로 생성되기 때문에 본문 대신 이미지가 출력되는 형태가 된다.
  3. 이미지의 개별 페이지 전용의 템플릿 준비하기
    ‘image.php’라는 템플릿을 작성해서 테마 폴더로 업로드한다. 또한 image.php는 single.php를 기본으로 작성하기 때문에 single.php의 소스를 복사한다. 그러나 아직 이미지가 표시되지 않는다. image.php를 이용해서 이미지를 표시하기 위해서는 템플릿 태그를 수정해야 한다.
  4. 이미지 표시하기
    이미지 개별 페이지에 이미지를 표시하기 위해 <?php get_template_part(‘content’,’single’); ?>를 삭제하고, content-single.php를 로딩하지 않도록 한다. 대신에 <?php the_title(); ?>로 이미지의 제목을 출력하도록 지정하고, <?php echo wp_get_attachment_image(); ?>로 이미지를 출력하도록 지정한다. 출력화면을 확인하면 썸네일 크기의 작은 이미지가 표시된다.
  5. 전체 크기의 이미지 표시하기
    <?php echo wp_get_attachment_image(); ?>의 파라미터를 $post->ID,’full’이라고 지정하면 전체 크기를 표시할 수 있다. 단, 콘텐츠 부분의 가로 길이는 550픽셀이기 때문에 전체 크기로 업로드한 640×480픽셀의 이미지 전체가 표시되지는 않는다.
    ->MEMO
    <?php echo wp_get_attachment_image($post->ID,’~’); ?>에서 표시하는 이미지의 크기를 지정할 수 있다. 지정할 수 있는 값은 아래 표와 같다.
    값                    표시되는 이미지의 크기
    thumbnail         작은 사진(썸네일)
    medium           보통
    large                 큰
    full                  전체 크기
  6. 사이드바 삭제하기
    <?php get_sidebar(); ?>를 삭제하면 사이드바는 출력되지 않는다.
  7. 이미지의 개별 페이지의 클래스 이름 확인하기
    콘텐츠 부분을 헤더와 푸터와 같은 가로 길이로 지정해서 이미지의  레이아웃을 지정한다. 콘텐츠 부분의 가로 길이는 style.css의 div#content {~}로  지정하지만 이 지정을 변경하면 모든 페이지에서 가로 길이가 변한다. 따라서 이미지의 개별 페이지를  식별하는 클래스 이름을 확인한다. 이미지의 개별 페이지에도 <?php body_class(); ?>에 의해 페이지를 식별할 수 있는 클래스 이름이 출력된다. <body> 부분을 확인하면 다음과 같이 출력되기 때문에 여기에서는 attachment라는 클래스 이름을 이용한다.

    <body class=”attachment single single-attachment postid-1541 attachmentid-1541 attachment-jpeg logged-in admin-bar no-customize-support​“>
  8. 콘텐츠 부분의 가로 길이 변경하기
    style.css에 설정을 추가해서 콘텐츠 부분의 가로 길이를 지정한다. 위의 클래스 이름을 이용해서 .attachment div#content {~}라고 설정을 추가하여 가로 길이를 지정한다. .attachment p.photo  {~}에서는 이미지를 가운데 맞춤으로 표시하도록 지정한다.

이미지 표시하기

<?php get_header(); ?>

변경 전

<!– 콘텐츠 –>
<div id=”content”><?php if(have_posts()): while(have_posts()):
the_post(); ?>
<div class=”posts”>

<?php get_template_part(‘content’,’single’); ?>

<p class=”pagenation”>

(생략)

<?php get_sidebar(); ?>

<?php get_footer(); ?>

변경 후

<!– 콘텐츠 –>
<div id=”content”><?php if(have_posts()): while(have_posts()):
the_post(); ?>

<div class=”post”>
<h2><?php the_title(); ?></h2>
<p class=”photo”><?php echo wp_get_attachment_image(); ?></p>
</div>

<p class=”pagenation”>

(생략)

<?php get_sidebar(); ?>

<?php get_footer(); ?>

전체 크기의 이미지 표시하기

<!– 콘텐츠 –>
<div id=”content”><?php if(have_posts()): while(have_posts()):
the_post(); ?>
<div>
<h2><?php the_title(); ?></h2>
<p><?php echo wp_get_attachment_image($post->ID,’full’​); ?></p>
</div>

<p>

(생략)

<?php get_sidebar(); ?>

<?php get_footer(); ?>

사이드바 삭제 후

<!– 콘텐츠 –>
<div id=”content”><?php if(have_posts()): while(have_posts()):
the_post(); ?>
<div>
<h2><?php the_title(); ?></h2>
<p><?php echo wp_get_attachment_image($post->ID,’full’); ?></p>
</div>

<p>

(생략)

<?php get_footer(); ?>

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

“이미지의 개별 페이지를 사용자정의로 디자인하기”에 대한 한개의 댓글

답글 남기기