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

앞 장에서는 예제에서 사용하는 워드프레스 버전의 기본 이미지 사이즈 명칭을 확인했는데, 원본 이미지 사이즈를 포함하면 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 파일에서 찾아 지우고 저장합니다. 그리고 사이트에서 연습장 페이지를 확인¹합니다. ‘medium_large’ 값이 다음처럼 나올 것입니다.

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

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

예제에서는 ‘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’, 세로는 제한을 두지 않고, 이미지를 크롭하지 않는 설정입니다.

기본 이미지 사이즈 변경

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

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

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

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

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

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] => 
        )

)

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