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

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

앞 장에서는 예제에서 사용하는 워드프레스 버전의 기본 이미지 사이즈 명칭을 확인했는데, 원본 이미지 사이즈를 포함하면 5개입니다. 예제에서는 6개의 이미지 사이즈를 사용하며, ‘thumbnail’ 이미지 사이즈를 제외한 5개의 이미지 사이즈를 다운로드할 수 있도록 제공하는 웹사이트를 구성합니다. 또, 적절한 크기를 지정하여 방문자가 원하는 이미지 사이즈를 선택하여 다운로드할 수 있도록 구성합니다. 과정에서 이해를 더하기 바랍니다.

‘medium_large’ 이미지 사이즈 설정 값 변경

‘medium_large’ 이미지 사이즈는 가로 ‘768’, 세로 ‘0’ 값이 기본으로 설정되어 있으며, 데이터베이스옵션 테이블에 저장된 값이라고 말했습니다. 또, 관리페이지 미디어 설정에서 수정할 수 있는 화면을 이 역시 기본으로 제공하지 않으므로 함수를 사용하여 간단하게 데이터를 직접 변경합니다.

먼저, 테마 루트의 functions.php 파일을 엽니다. 16번 줄에서 20번 줄의 코드를 보면 다음과 같습니다.

/*
// medium_large_size_w, medium_large_size_h 값 업데이트, 싱글 첨부 페이지 이미지에 사용.
update_option('medium_large_size_w', 965);
update_option('medium_large_size_h', 965);
*/

위의 코드 1번 줄, 5번 줄에 해당하는 내용을 functions.php 파일에서 찾아 지우고 저장합니다. 그리고 사이트에서 연습장 페이지를 확인1합니다. ‘medium_large’ 값이 다음처럼 나올 것입니다.

[medium_large] => Array
        (
            [width] => 965
            [height] => 965
            [crop] => 
        )

데이터가 데이터베이스 옵션 테이블에 저장되어 있고, 관리페이지에서 편집 화면을 제공하지 않으므로 함수를 사용하여 간단하게 변경한 것입니다.

update_option()
데이터베이스 ‘_options’ 테이블의 특정 필드 값을 변경할 수 있는 사용이 간편한 함수입니다. 예제에서는 테마의 functions.php 파일의 특정 함수 내에 추가하였지만, 이 함수는 어떤 곳에서나 독립적으로 사용할 수 있습니다. 예제에서는 안내의 편의를 위해 해당 위치에 추가한 것입니다. 워드프레스를 사용할 때 유용한 기본 함수이므로 기억할 필요가 있습니다.

예제에서는 ‘medium_large’ 이미지 사이즈를 싱글 이미지 페이지의 본문 영역에 출력합니다. 또, 세로와 가로의 사이즈를 제한하였고, 가로 ‘965’로 정한 이유는 사이트의 본문 영역 최대 가로 사이즈에 맞춘 것으로 실제 운영 사이트에서는 운영자의 마음에 달린 것임을 참고하세요.

앞의 코드 실행으로 업데이트한 데이터는 데이터베이스에 저장되었으므로 추가한 코드는 이제 필요하지 않습니다. 완전히 삭제해도 되지만, 원래 코드 그대로 비활성화합니다. 따로 안내하지 않으니 처음의 상태로 되돌리세요.

‘large_second’ 이미지 사이즈 추가

이번에는 이미지 사이즈를 추가합니다. 파일 functions.php 21번 줄은 다음 코드 1번 줄과 같은데, 2번 줄로 변경합니다. 그리고 저장 후 연습장 페이지를 다시 확인합니다.

//add_image_size( 'large_second', 1920, 0, false ); // (크롭하지 않음)
add_image_size( 'large_second', 1920, 0, false ); // (크롭하지 않음)

연습장 페이지에 다음 데이터가 추가된 것을 볼 수 있습니다.

[large_second] => Array
        (
            [width] => 1920
            [height] => 0
            [crop] => 
        )

‘large_second’라는 이미지 사이즈 명칭을 추가한 것이며, 가로는 최대 ‘1920’, 세로는 제한을 두지 않고, 이미지를 크롭하지 않는 설정입니다.

add_image_size()
이미지 사이즈를 추가할 때 사용하는 간단한 함수입니다. 이 함수 사용으로 추가한 이미지 사이즈는 데이터베이스에 저장되지 않습니다.

기본 이미지 사이즈 변경

마지막으로 워드프레스 제공 기본 ‘medium’, ‘large’ 이미지 사이즈 값을 변경합니다. 현재 연습장 페이지를 보면 두 이미지 사이즈의 데이터가 다음처럼 나올 것입니다.

[medium] => Array
        (
            [width] => 300
            [height] => 300
            [crop] => 
        )

[large] => Array
        (
            [width] => 1024
            [height] => 1024
            [crop] =>
        )

관리페이지의 미디어 설정 페이지를 보면 앞의 데이터와 같은 이미지 사이즈의 값을 볼 수 있습니다. 직접 관리페이지에서 확인해보세요.

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

관리페이지에서 직접 변경해도 되지만, 함수를 사용하여 데이터를 변경해봅니다. 이번에는 연습장 파일에 다음 코드를 현재 존재하는 코드 다음에 추가하고 저장합니다. 존재하는 코드 다음에 추가했으므로 연습장 페이지를 몇 번 새로 고쳐 결과를 확인하세요.

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 400 );
update_option( 'large_size_w', 1280 );
update_option( 'large_size_h', 0 );

추가한 코드의 결과를 포함한 연습장 페이지의 전체 데이터는 다음과 같고, 관리페이지의 미디어 설정 페이지를 확인하면 역시 변경된 데이터를 볼 수 있습니다.

Array
(
    [thumbnail] => Array
        (
            [width] => 150
            [height] => 150
            [crop] => 1
        )

    [medium] => Array
        (
            [width] => 0
            [height] => 400
            [crop] => 
        )

    [medium_large] => Array
        (
            [width] => 965
            [height] => 965
            [crop] => 
        )

    [large] => Array
        (
            [width] => 1280
            [height] => 0
            [crop] => 
        )

    [large_second] => Array
        (
            [width] => 1920
            [height] => 0
            [crop] => 
        )

)

이미지 사이즈를 추가하고, 기본 이미지 사이즈를 변경한 것은 예제에서 싱글 페이지나 아카이브 페이지에 출력하기 위한 이미지와 다운로드에 제공할 이미지 사이즈를 미리 정한 것으로, 모두 필자의 판단에 의한 것입니다. 실제 운용 사이트를 구상할 때는 여러분의 취향과 상황에 따라 이미지 사이즈 명칭을 정하고 값을 설정하면 됩니다. 또, 실제 운용 사이트의 이미지 사이즈를 정할 때는 구성 단계에서 몇 번의 반복 과정을 통해 적절한 값을 정해야 합니다. 추가, 변경한 이미지 사이즈 각각의 역할은 예제 구성 과정에서 이해를 더하세요.

예제 목차

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

1. 예제 구성 환경과 파일

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

3. 테마 Pics Press

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

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

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

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

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

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

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 인증과 제한 및 제어

이메일로 소식 받기

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