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

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

이번 장에서는 워드프레스 이미지 파일 등록 관련하여 예제에서 필요한 기능을 미리 정의합니다. 우선, 이미지와 관련한 함수를 지속해서 추가할 파일을 만들기 위해 테마 루트 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 필터 훅으로 이미지 사이즈 명칭을 추가한 것인데, 해당 훅과 이미지 사이즈 명칭을 추가한 함수에 관하여 깊은 이해는 필요하지 않으므로 언젠가 필요하다면 참고할 ‘워드프레스 코드 스니핏’ 정도로 이해하세요. 이미지 사이즈 선택 옵션 확장도 예제에서 필요한 기능은 아니지만, 이미지가 주 콘텐츠인 예제에 적응하기 위한 과정으로 생각하세요.

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

워드프레스 8 - 무료 이미지 저장소

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

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

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

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

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

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

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.