워드프레스 이미지 파일 제어

이번 장에서는 워드프레스 이미지 파일 등록 관련하여 예제에서 필요한 기능을 미리 정의합니다. 우선, 이미지와 관련한 함수를 지속해서 추가할 파일을 만들기 위해 테마 루트 inc 디렉터리에 ‘image-functions.php’ 파일을 만들고 다음 코드를 추가하고 저장합니다.

<?php
/**
 * 이미지 함수 모음
 */

위의 코드 다음부터 지속해서 안내하는 코드를 추가하면 됩니다.

다음으로 테마의 functions.php 파일 맨 아래 줄에 다음 코드를 추가하고 저장합니다.

// 이 줄 아래 코드만 functions.php 파일 맨 아래 추가
require get_parent_theme_file_path( '/inc/image-functions.php' );

위 코드는 조금 전 만든 파일을 인클루드한 것입니다. 이때 사용한 함수는 워드프레스 인클루드 관련 함수 중 하나인데, 따로 안내하지 않고 다음처럼 몇 가지 목록만 나열합니다. 코덱스에서 각 함수에 관하여 추가 정보를 얻으세요.

get_header();
get_sidebar();
get_footer();
get_template_part();
get_search_form();
comments_template();
get_stylesheet_uri();
get_stylesheet_directory();
get_stylesheet_directory_uri();
get_template_directory();
get_template_directory_uri();
get_theme_file_uri();
get_theme_file_path();
get_parent_theme_file_path();

이미지 사이즈 선택 옵션 추가

포스트 작성 시 미디어 삽입 화면에서 이미지를 올리면 삽입할 이미지 크기를 선택할 수 있는 필드가 나옵니다. 그러나 기본 이미지 사이즈만 선택할 수 있으며, ‘medium_large’와 추가한 ‘large_second’ 이미지 사이즈는 선택 항목에 나오지 않습니다. 이 이미지 사이즈를 선택할 수 있도록 다음 순서에 따라 진행합니다.

• 타입 post의 새 글 작성 화면으로 접근합니다.
• 제목에 ‘이미지 사이즈 선택 옵션’을 입력합니다.
• 미디어 추가 버튼을 클릭하고, 연습파일 이미지 중 ‘이미지-사이즈-선택-옵션.jpg’ 파일을 올립니다.
• 미디어 삽입 화면의 첨부 표시 설정 ‘크기’ 드롭다운 목록을 확인합니다.

다음의 그림과 같은 목록을 확인할 수 있는데, ‘medium_large’, ‘large_second’ 이미지 사이즈는 볼 수 없습니다.

다음 안내에 따라 계속 진행합니다.

• 미디어 삽입 화면 영역 밖을 클릭하여 미디어 삽입 화면을 닫거나, 미디어 삽입 화면 오른쪽 위 ‘X’ 아이콘을 클릭하여 화면을 닫습니다.
• ‘임시 글로 저장하기’ 버튼을 클릭합니다.

image-functions.php 파일에 다음 코드를 추가하고 저장합니다.

/* 미디어 삽입 화면에서 이미지 사이즈 선택 항목 추가 */
 add_filter( 'image_size_names_choose', 'pic_add_custom_sizes' );
 function pic_add_custom_sizes( $sizes ) {
     return array_merge( $sizes, array(
         'large_second' => '좀 더 큰',
         'medium_large' => '보통보다 큰',
     ) );
 }

• 타입 post 임시 글로 돌아와 페이지를 새로 고치기 위해 ‘임시 글로 저장하기’ 버튼을 클릭합니다.
• 미디어 추가 버튼을 클릭하고, 미디어 삽입 화면에 나오는 이미지를 선택합니다.
• 첨부 표시 설정 ‘크기’ 드롭다운 목록을 확인하여, 이미지 사이즈 항목을 확인합니다.

결과는 따로 안내하지 않아도 충분할 것이며, ‘좀 더 큰’, ‘보통보다 큰’이라는 한글 명칭은 필자가 정한 것으로 각각 ‘large_second’, ‘medium_large’ 이미지 사이즈 명칭에 대응하는 것임을 바로 앞의 코드를 보면 알 수 있습니다.

추가한 코드는 image_size_names_choose 필터 훅으로 이미지 사이즈 명칭을 추가한 것인데, 해당 훅과 이미지 사이즈 명칭을 추가한 함수에 관하여 깊은 이해는 필요하지 않으므로 언젠가 필요하다면 참고할 ‘워드프레스 코드 스니핏’ 정도로 이해하세요. 이미지 사이즈 선택 옵션 확장도 예제에서 필요한 기능은 아니지만, 이미지가 주 콘텐츠인 예제에 적응하기 위한 과정으로 생각하세요.

임시 글과 추가한 이미지는 필요하지 않으므로 미디어 삽입 화면에서 ‘영구적으로 삭제하기’를 클릭하여 바로 지우고 미디어 삽입 화면을 닫은 후 임시 글도 ‘영구적으로 삭제하기’ 클릭으로 삭제합니다.

워드프레스 파일 확장자 필터

반복하지만, 예제에서는 이미지 파일만 다룹니다. 이미지 파일도 다양한 포맷이 있는데, 다음의 확장자를 가진 이미지만 사용하도록 설정합니다. 긴 설명이 필요하지 않으며, 직접 경험하여 이해하면 됩니다.

jpg|jpeg|jpe, gif, png

위의 이미지 파일 확장자 중에 ‘jpg’의 경우는 앞에서 여러 번 올렸으므로 등록할 수 있음은 확인된 것입니다. 따라서 이미지가 아닌 파일을 기준으로 진행합니다. 다음 순서로 따라 해보세요.

• 관리페이지 미디어 메뉴를 클릭하고, ‘파일 올리기’ 버튼을 클릭합니다.
• 제공한 연습파일 이미지 폴더의 ‘압축파일.zip’ 파일을 선택하여 업로드합니다.
• 파일 등록이 가능할 것이며, 올린 압축파일을 ‘영구적으로 삭제’합니다.

다음 코드를 image-functions.php 파일에 추가하고 저장합니다.

/* 파일 확장자 필터 */
add_filter( 'upload_mimes','allow_upload_mimes' );
function allow_upload_mimes() {
    $allow_mimes = array(
        'jpg|jpeg|jpe' => 'image/jpeg',
        'png' => 'image/png',
        'gif' => 'image/gif',
    );
    return $allow_mimes;
}

• 관리페이지를 한 번 새로 고친 후 다시 파일 올리기를 이용하여 ‘압축파일.zip’ 파일을 업로드합니다.

다음 그림의 메시지가 나온다면 올바르게 적용된 것입니다.

코드에서 사용한 ‘upload_mimes’ 필터 훅으로 간단하게 등록 파일 종류를 제어할 수 있는데, 필요할 때 참고하면 됩니다. 또, 워드프레스에서 특정 파일 제어를 위한 파일 유형별 표기 정보를 확인하는 방법은 다음 코드로 가능한데, 이 역시 이미지 등의 파일 중심 콘텐츠 웹사이트에서는 참고할 필요가 있습니다. 연습장 파일에 기존에 추가한 코드를 모두 지우고, 다음 코드를 추가하고 저장하여 연습장 페이지를 확인해보세요. 결과는 직접 확인하고 판단하면 됩니다.

// 기존 코드 지우고 아래 코드만 추가
echo '<pre>' . print_r( wp_get_mime_types(), true ) . '</pre>';

이미지 사이즈 제한

예제에서는 다음처럼 이미지 사이즈를 제한합니다.

• 가로(width): 1999px 보다 크고
• 세로(height): 500px 보다 큰 이미지

제한하는 이유는, 승인된 특정 사용자가 이미지를 올리고 일반 회원에게 이미지 다운로드를 제공한다는 예제의 가상 주제에 맞추기 위함으로, 원본 이미지 사이즈가 위의 기준 정도일 때 앞에서 정한 여러 이미지 사이즈 명칭에 맞는 이미지를 생성할 수 있다는 필자의 판단에 의한 것입니다.

또, 위의 가로 기준 정도일 때 나중에 구성할 프런트 페이지의 인기 이미지 가로 사이즈에 대응하기 적절하며, 위의 세로 기준일 때 예제 전체의 이미지 아카이브(목록) 섬네일로 사용하는 것이 적절하다는, 이 역시 필자의 판단에 의한 것입니다. 결국, 운영자 마음이라는 뜻입니다.

과정에서 파악할 사항은 간단한 코드와 특정 훅으로 워드프레스에서 이미지 업로드 시 이미지 사이즈를 확인하여 기준에 맞는 이미지만 업로드가 가능하도록 제어하는 부분입니다. 다음처럼 진행합니다.

• image-functions.php 파일에 다음 코드를 추가한 후 저장합니다.

/* 기준을 충족하는 이미지만 업로드 가능하도록 제한 */
add_filter( 'wp_handle_upload_prefilter', 'pic_limit_resolution' );
function pic_limit_resolution( $file ) {
    //echo '<pre>' . print_r( $_FILES, true ) . '</pre>';
    $tmp_name = $file['tmp_name'];
    $type = $file['type'];
    $mime = strpos( $type, 'image' );
    list( $width, $height ) = getimagesize( $tmp_name );
    $limit_w = 1999;
    $limit_h = 500;
    if ( $width <= $limit_w || $height < $limit_h ) {
        $file['error'] = '이 이미지는 가로가 ' . $width . 'px, 세로가 ' . $height .'px 입니다. 이미지는 가로 ' . $limit_w . 'px 보다 크고, 세로 ' . $limit_h . 'px 보다 커야 합니다.';
    }
    return $file;
}

• 관리페이지 미디어 메뉴 하위의 파일 올리기 메뉴를 클릭합니다.
• 연습파일 이미지 중 ‘1999×500.jpg’, ‘2000×501.jpg’ 파일 2개를 선택하여 한 번에 업로드합니다.

다음 그림과 같은 결과가 나올 것입니다.

앞의 코드는 파일을 실제 워드프레스 데이터로 확정하기 전에 파일 정보를 확인하여 사용자가 원하는 결과를 얻기 위한 워드프레스 필터 훅 wp_handle_upload_prefilter 과 PHP 함수의 조합으로 정의한 것입니다.

4번 줄을 활성화하고 이미지를 업로드하면 앞의 코드 이해와 원하는 결과를 얻는 데 도움이 될 수 있으므로 활성화하여 이미지를 올려보세요.

예제파일과 정리

다음 장부터는 예제 구성 과정의 반을 차지하는 싱글 이미지 페이지를 구성합니다. 물론 복잡한 것은 하나도 없습니다. 그전에 지금까지 변경된 예제파일을 제공하고 연습으로 진행한 포스트, 이미지 등을 모두 제거합니다.

먼저, 관리페이지에서 ‘글’, ‘미디어’ 메뉴를 클릭하여 포스트나 이미지가 존재한다면 모두 삭제합니다. 또, ‘페이지’ 메뉴를 클릭하여 처음에 생성한 8개의 타입 page 포스트 외의 포스트가 존재한다면 모두 삭제합니다. 처음에 생성한 8개의 포스트는 ‘page 포스트 타입과 페이지 템플릿, 메뉴 구성’에서 안내하였습니다.

다음으로 편집기에 열린 파일이 있다면 모두 닫고, 최종 예제 결과와 과정 중에 안내하는 줄 번호 등의 오류를 최대한 막기 위해 아래 다운로드 페이지로 이동하여, 변경한 예제파일을 받아 압축을 풀고, 테마 루트에 덮어씁니다.

파일을 덮어쓰지 않고, 파일의 코드만 복사하여 기존 파일에 붙여넣어도 됩니다. 압축파일은 다음의 파일과 폴더가 있습니다.

9장까지
├── inc
│   └── image-functions.php
└── functions.php

테마 루트 경로를 확인하여 틀리지 않도록 주의합니다.