WordPress에서 추천 이미지 크기를 변경하는 방법

게시 됨: 2017-04-10

업데이트 날짜 2017년 3월 10일

추천 이미지는 사용 중인 테마에 따라 WordPress 내에서 다양한 방식으로 사용됩니다. 대부분의 테마는 일반적으로 홈페이지 및 아카이브 페이지에 표시되는 게시물 또는 페이지의 이미지 중 하나의 축소판 미리보기로 추천 이미지를 사용합니다.

이 기능은 WordPress 2.9에서 도입되었으며 원래 "포스트 썸네일"로 알려졌습니다. 대부분의 WordPress 테마(당사 자체 포함)는 이제 이미지 갤러리, 기능 슬라이더 및 페이지 헤더 이미지와 같은 다른 많은 목적을 위해 추천 이미지를 사용합니다. 예를 들어 전체 프레임 테마에서 추천 이미지는 게시물의 배경 이미지가 됩니다.

추천 이미지는 물론 크리에이티브와 많은 이미지가 포함된 WordPress 사이트를 만드는 사람에게 매우 중요합니다. 모든 Graph Paper Press 테마에서 추천 이미지를 사용하려면 포스트 편집기의 화면 오른쪽에 있는 링크에서 추천 이미지를 선택하기만 하면 됩니다.

테마에 설정된 기본 추천 이미지 크기가 목적에 맞는다면 좋습니다. 그렇지 않은 경우 약간의 코드 편집으로 크기를 변경할 수 있습니다.

추천 이미지 크기를 변경하려는 이유는 무엇입니까? 축소판 갤러리를 더 크게 또는 작게 만드는 것 외에도 치수의 종횡비를 변경할 수 있습니다. 예를 들어 당신이 풍경 사진 작가이고 당신의 포트폴리오가 파노라마 사진으로 구성되어 있다고 가정해 봅시다. 이 경우 테마의 기본 추천 이미지가 정사각형이면 이미지의 대부분이 잘립니다. 치수를 수동으로 더 적합한 것으로 조정하여 이 문제를 해결할 수 있습니다.

functions.php 에서 추천 이미지 크기 변경하기

기본 이미지 크기를 편집하려면 functions.php 파일에서 일부 코드를 변경해야 합니다. 이 파일은 FTP를 통해 액세스하거나 WordPress 대시보드의 모양 > 편집기에서 직접 편집할 수 있습니다. 나는 항상 후자보다 전자의 접근 방식을 권장합니다.

이 파일을 변경하기 전에 문제가 발생할 경우를 대비하여 항상 원본 버전을 백업해 두는 것이 좋습니다. 컴퓨터에 원본 테마 파일이 아직 없는 경우, 적어도 functions.php 파일을 다운로드하여 백업 폴더에 저장해야 합니다.

추천 이미지의 크기를 조정하는 두 가지 방법이 있습니다. 비례적으로 크기를 조정하려면(즉, 이미지가 늘어나거나 압축되지 않도록) 다음 코드를 사용합니다.

 set_post_thumbnail_size( 50, 50 ); // 가로 50픽셀, 세로 50픽셀, 크기 조정 모드

다음 코드를 사용하여 이미지를 잘라 이미지 크기를 조정할 수도 있습니다.

 set_post_thumbnail_size( 50, 50, true ); // 가로 50픽셀, 세로 50픽셀, 자르기 모드

추천 이미지의 기본 크기를 설정합니다.

추가 이미지 크기 추가

각 이미지 크기에 대해 추가 코드 줄을 추가하여 필요한 만큼 추가 이미지 크기를 추가할 수도 있습니다.

 add_image_size( '범주 엄지', 300, 9999 ); // 300픽셀 너비(및 무제한 높이)

그런 다음 다음 코드를 사용하여 테마 템플릿에서 이 새 크기를 사용할 수 있습니다.

 <?php the_post_thumbnail( '카테고리-썸' ); ?>

이 기능은 다양한 방법으로 추천 이미지를 표시하려는 경우에 유용합니다. 예를 들어 이미지 갤러리의 썸네일 크기를 설정하고 게시물 헤더의 크기를 더 크게 설정할 수 있습니다.

업로드하는 이미지는 최소한 추천 이미지에 대해 설정한 크기만큼 커야 합니다. 더 작은 이미지를 업로드하면 크기가 커져 결국 픽셀화되고 흐릿하게 보입니다.

하위 테마로 미래 지향적인 편집

functions.php 파일을 직접 편집할 때의 문제는 테마의 새 버전이 출시되고 업그레이드해야 하는 경우 손실된다는 것입니다. 추가한 코드를 기록해 새 functions.php 파일에 삽입할 수 있지만 이는 특히 편집을 많이 하거나 테마의 새 버전이 자주 나오는 경우 지루할 수 있습니다.

자식 테마를 사용하면 부모 테마가 업데이트될 때 자식 테마가 그대로 유지되므로 이 문제가 해결됩니다. functions.php 파일, 스타일시트 또는 기타 파일에서 테마 코드를 편집하는 경우 항상 하위 테마를 사용하는 것이 가장 좋습니다.

우리는 이미 블로그에 자식 테마를 만드는 방법에 대한 전체 가이드를 가지고 있지만 여기에 우리의 목적을 위해 알아야 할 사항이 있습니다.

하위 테마를 만들려면 FTP를 통해 사이트에 연결하고 /wp-content/themes/ 에 새 하위 테마에 대한 새 폴더를 만듭니다. 폴더 이름을 편집하려는 테마와 동일하게 지정하고 "-child"를 추가하는 것이 일반적입니다. 예: "awesome-child"는 Awesome 테마의 하위 테마를 만드는 경우입니다.

CSS를 편집할 생각이 없더라도 자식 테마 폴더 안에 스타일시트를 만들어야 합니다. style.css라는 새 파일을 만들고 다음 코드를 붙여넣습니다.

 /*
테마 이름: 멋진 아이
테마 URI: http://example.com/awesome-child/
설명: 멋진 어린이 테마
저자: 그래프 페이퍼 프레스
작성자 URI: http://example.com
템플릿: 굉장
버전: 1.0.0
태그: 밝음, 어두움, 반응형 레이아웃, 접근성 지원
텍스트 도메인: Awesome-child
*/

@import url("../awesome/style.css");

/* =테마 커스터마이징은 여기에서 시작됩니다.
-------------------------------------------------- ---------- */

테마 이름 및 기타 세부 정보를 적절하게 변경합니다.

추천 이미지를 자식 테마로 변경하는 기능을 추가하려면 새 functions.php 파일을 만들어야 하므로 계속해서 자식 테마 디렉토리에서 이 작업을 수행하십시오. 이 파일은 상위 테마의 functions.php 와 함께 로드됩니다.

functions.php 의 템플릿은 다음과 같습니다.

 <?php //PHP 태그 열기

// 함수

?> // PHP 태그 닫기

그런 다음 PHP 태그 사이에 이미지 크기 조정 코드를 추가하면 다음과 같이 됩니다.

 <?php // PHP 태그 열기

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( '포스트 썸네일' );
set_post_thumbnail_size( 150, 150, true ); // 기본 포스트 썸네일 치수(잘림)

// 추가 이미지 크기
// 추가 이미지 크기가 필요하지 않으면 다음 줄을 삭제합니다.
add_image_size( '범주 엄지', 300, 9999 ); // 300픽셀 너비(및 무제한 높이)
}

?> // PHP 태그 닫기

자식 테마의 코드 생성이 끝나면 활성화해야 합니다. 관리 패널 > 모양 > 테마 아래의 사이트 대시보드를 통해 이 작업을 수행할 수 있습니다. 목록에서 자녀 테마를 찾아 활성화를 클릭합니다.

크기가 조정된 새로운 추천 이미지 감상하기

추천 이미지의 크기를 변경하고 새 이미지 크기를 추가하는 것은 매우 간단한 작업이지만 약간의 코드 편집이 필요합니다. 이 때문에 일부 사용자는 이미지 크기 조정을 처리하기 위해 플러그인을 사용하는 것을 선호하지만 추가 플러그인을 추가하는 것은 항상 보안 위험입니다. 내부에 들어가서 이와 같이 코드를 약간 변경하면 WordPress 사용에 대한 자신감을 키우는 데 실제로 도움이 될 수 있으며 테마를 사용자 정의하고 테마를 실제로 자신의 것으로 만드는 것이 더 쉬워질 것입니다.

WordPress에서 추천 이미지 크기를 변경하는 방법

functions.php 에서 추천 이미지 크기 변경하기

추가 이미지 크기 추가

추천 이미지 재구축

하위 테마로 미래 지향적인 편집

크기가 조정된 새로운 추천 이미지 감상하기