워드프레스에서 글을 작성하기 전에 카테고리 이름과 글 화면의 기본 모양을 먼저 정리하면 이후에 작성하는 글에 같은 설정을 적용할 수 있습니다.
기본 카테고리인 Uncategorized가 그대로 표시되거나 본문이 너무 좁고 대표 이미지가 잘리면 정보 글의 내용이 좋아도 방문자가 읽기 불편할 수 있습니다.
이 글에서는 기본 카테고리를 한글로 변경하고, Twenty Twenty-Five 테마의 PC 본문 너비를 넓히며, 대표 이미지 비율을 16:9로 맞추는 방법을 설명합니다.
설정을 마친 뒤 임시글 미리보기로 개별 글을 검사하고, 공개된 홈에서도 이미지가 잘리지 않는지 확인하는 과정까지 함께 설명합니다.
단일 글과 블로그 홈은 서로 다른 템플릿이므로 두 화면을 각각 확인해야 합니다.
1. 기본 카테고리 이름과 슬러그 변경하기
워드프레스 관리자 화면에서 글 → 카테고리로 이동합니다.
처음 설치한 워드프레스에는 Uncategorized라는 기본 카테고리가 만들어져 있을 수 있습니다.
카테고리 이름을 클릭해 편집 화면으로 들어갑니다.
이 블로그에서는 초보자가 워드프레스를 만드는 과정을 순서대로 다루기 때문에 다음과 같이 변경했습니다.
- 이름 예:
워드프레스 시작하기 - 슬러그 예:
wordpress-start
이름은 블로그 화면에서 방문자에게 보이는 카테고리 제목입니다.
예를 들어 이름을 PDF 파일로 입력하면 카테고리 목록에는 한글로 PDF 파일이 표시됩니다.
슬러그는 카테고리 인터넷 주소의 마지막 부분에 들어가는 영문 이름입니다.
예를 들어 카테고리 이름이 PDF 파일이고 슬러그가 pdf-file이라면 공개 주소는 다음과 같은 형식이 됩니다.
설명용 주소 예: https://wpstart.kr/category/pdf-file/
위 주소에서 pdf-file 부분이 슬러그입니다.
슬러그는 방문자가 읽는 카테고리 이름과 달리 주소에 사용되므로 짧은 영문 소문자와 하이픈으로 작성하는 것이 좋습니다.
이 블로그에서는 워드프레스 시작하기의 슬러그를 wordpress-start로 설정했습니다.
입력한 뒤 아래쪽의 업데이트를 누릅니다.
기본 카테고리의 이름을 수정하면 그 카테고리에 들어 있던 기존 글에도 변경된 이름이 적용됩니다.
새 글을 작성할 때도 오른쪽 글 설정에서 자신이 정한 카테고리가 선택됐는지 확인합니다.
이번 단계에서는 워드프레스가 처음 만들어 둔 기본 카테고리의 이름과 슬러그를 수정하는 방법만 설명합니다.
블로그 주제에 맞춰 새로운 카테고리를 추가하고 글을 분류하는 방법은 이후 글에서 실제 화면 캡처와 함께 별도로 설명합니다.
2. PC 본문 너비를 645px에서 860px로 변경하기
처음 설치된 워드프레스에는 총 3개의 테마가 있었으며, Twenty Twenty-Five가 기본 활성 테마로 설정되어 있었습니다.
이 글의 본문 너비와 대표 이미지 설정은 현재 활성화된 Twenty Twenty-Five 테마를 기준으로 설명합니다.
다른 테마를 사용하면 설정 메뉴의 위치와 제공되는 항목이 다를 수 있습니다.
Twenty Twenty-Five 테마의 기본 콘텐츠 너비는 PC 화면에서 좁게 느껴질 수 있습니다.
특히 설명이 길고 캡처 이미지가 많은 사용법 글은 본문이 지나치게 좁으면 제목이 여러 줄로 나뉘고 이미지 글자도 작게 보입니다.
관리자 화면에서 모양 → 테마 편집기로 이동합니다.
변경 전에는 콘텐츠 너비가 645px로 설정되어 있었습니다.
이어서 스타일 → 레이아웃을 열고 콘텐츠 너비 값을 860으로 변경합니다.
오른쪽 단위는 px를 사용합니다.
넓은 너비는 기존 1340px를 그대로 유지했습니다.
콘텐츠 너비 860px는 PC에서 설명과 이미지를 보기 편하게 넓히면서 한 줄이 지나치게 길어지지 않도록 선택한 값입니다.
반응형 테마이므로 모바일 화면의 본문을 860px로 고정하는 설정은 아닙니다.
3. 대표 이미지가 잘리는 이유 확인하기
이 사이트에서는 개별 글의 대표 이미지를 16:9로 변경한 뒤에도 블로그 홈에는 3:2 설정이 남아 있었습니다.
그래서 글을 눌러 들어가면 정상인데 홈의 글 목록에서는 같은 이미지의 좌우가 잘렸습니다.
이미지를 영역에 가득 채우는 커버 방식에서는 원본과 표시 영역의 비율이 다르면 이미지 일부가 잘릴 수 있습니다.
위 화면은 앞서 개별 글을 수정하기 전에 촬영한 화면입니다.
아래는 이번에 블로그 홈의 대표 이미지가 잘리는 것을 확인한 실제 편집 화면입니다.
가로 1200px, 세로 675px 이미지는 16:9 비율입니다.
이 이미지를 3:2 영역에 커버로 채우면 좌우 일부가 잘릴 수 있습니다.
단일 글: 제목을 눌러 들어간 개별 게시물 화면블로그 홈: 여러 게시물이 나열되는 블로그 글 목록 화면
단일 글을 고쳤다고 블로그 홈까지 자동으로 같은 비율이 되는 것은 아닙니다.
아래에서는 4. 단일 글 16:9 변경 방법과 5. 블로그 홈 16:9 변경 방법을 설명합니다.
4. 단일 글 대표 이미지 비율을 16:9로 변경하기
관리자 화면에서 모양 → 테마 편집기 → 템플릿으로 이동합니다.
템플릿 목록에서 단일 글을 선택한 뒤 미리보기 화면의 대표 이미지 블록을 클릭합니다.
오른쪽 블록 설정에서 스타일을 선택하고 치수 항목으로 이동합니다.
종횡비를 클래식 3:2에서 와이드 16:9로 변경한 뒤 위쪽의 저장을 누릅니다.
대표 이미지 원본을 16:9로 제작한다면 템플릿 비율도 같은 16:9로 맞추는 것이 좋습니다.
원본과 표시 영역의 비율이 같으면 커버 방식에서도 좌우가 잘리는 현상을 줄일 수 있습니다.
5. 블로그 홈의 대표 이미지도 16:9로 변경하기
5-1. 템플릿 목록에서 블로그 홈 열기
관리자 화면에서 모양 → 테마 편집기 → 템플릿으로 이동합니다.
아래 실제 화면에서 단일 글과 블로그 홈이 별도 항목인 것을 확인할 수 있습니다.
이번에는 단일 글이 아니라 블로그 홈을 누릅니다.
코드가 보인다면 코드 편집기 나가기를 눌러 블록을 화면에서 선택할 수 있는 편집기로 전환합니다.
여기서 사용하는 화면은 블록 테마의 사이트 편집기이며 PHP 파일을 수정하는 테마 파일 편집기와는 다릅니다.
별도의 정적 페이지를 홈페이지로 사용한다면 해당 페이지나 프런트 페이지 템플릿을 확인해야 하므로 메뉴 이름을 무조건 따라 바꾸지 않습니다.
5-2. 글 목록 안의 대표 이미지 블록 선택하기
편집 화면에서 게시물 위에 보이는 큰 대표 이미지를 클릭합니다.
오른쪽에 개별 이미지 설정 대신 게시물 목록, 1열 패턴이 표시될 수 있습니다.
이 경우 아래 화면처럼 패턴 편집을 누른 다음 화면 안의 대표 이미지를 다시 선택합니다.
이미지 비율은 다음 단계에서 설정합니다.
위 캡처는 비율 변경 후 편집 경로를 다시 촬영한 것이므로 이미지 자체는 이미 전체가 보입니다.
이미지가 선택되지 않으면 편집기 위쪽의 목록 보기를 열어 글 목록 안의 대표 이미지 블록을 찾습니다.
일반 이미지 블록을 새로 추가하거나 대표 이미지 파일을 교체하는 작업이 아닙니다.
글 목록을 반복해서 표시하는 블록의 설정을 바꾸는 것이므로 각 게시물을 하나씩 수정할 필요는 없습니다.
5-3. 종횡비를 와이드 16:9로 맞추고 저장하기
오른쪽 설정에서 블록 → 스타일 → 치수를 엽니다.
치수가 보이지 않으면 오른쪽 설정 영역 안에서 아래로 스크롤합니다.
종횡비를 클래식 - 3:2에서 와이드 - 16:9로 변경합니다.
이 사이트에서는 너비와 높이는 자동으로 두고 이미지 크기 조정 방식은 커버를 유지했습니다.
원본도 16:9이므로 표시 영역을 같은 비율로 맞추면 원본의 좌우를 보여 줄 수 있습니다.
원본 비율이 다른 이미지까지 모두 잘리지 않는다는 뜻은 아니므로 자신의 원본 비율도 확인합니다.
위쪽의 저장을 누르고 저장 확인 화면이 나오면 변경 대상이 의도한 템플릿인지 확인한 뒤 저장을 완료합니다.
템플릿이 업데이트되었습니다와 같은 완료 안내가 표시되는지 확인합니다.
편집기 안에서 정상으로 보이는 것만으로 끝내지 말고 7번 순서대로 공개 홈을 다시 확인합니다.
6. 임시글로 단일 글의 대표 이미지 확인하기
3번에서는 16:9 원본 이미지가 3:2 영역에 맞춰지면서 좌우가 잘리는 문제를 확인했습니다.
4번에서는 단일 글 템플릿의 대표 이미지 비율을 와이드 16:9로 변경했습니다.
이제 같은 비율의 사진을 넣은 임시글을 만들어 미리보기에서 이미지가 잘리지 않는지 확인해야 합니다.
이 단계는 개별 글에 적용되는 단일 글 템플릿을 검사하는 과정입니다.
임시글은 공개 홈 목록에 나타나지 않으므로 이 미리보기만으로 블로그 홈 설정까지 확인할 수는 없습니다.
아직 설정을 확인하는 단계이므로 테스트 글은 방문자에게 공개하지 않습니다.
검사에 사용할 임시글을 만드는 과정에서 새 글 추가, 글과 사진 입력, 임시 저장, 미리보기와 삭제 방법도 자연스럽게 익힐 수 있습니다.
아래 순서에서는 테스트용 임시글의 미리보기를 확인하고, 7번에서 공개 홈과 개별 글을 확인한 뒤 8번에서 테스트용 임시글을 정리합니다.
이 과정에서는 파란색 공개 버튼을 누르지 않습니다.
6-1. 새 글 추가 화면 열기
워드프레스 관리자 화면의 왼쪽 메뉴에서 글에 마우스를 올립니다.
옆에 표시되는 하위 메뉴에서 글 추가를 누릅니다.
6-2. 테스트 글 작성하고 대표 이미지 지정하기
위쪽의 제목 추가 영역에 목적을 알아보기 쉬운 제목을 입력합니다.
제목 예: 대표 이미지 16:9 테스트
제목 아래의 본문 영역을 클릭하고 이미지 비율을 확인하기 위한 짧은 문장을 입력합니다.
문장이 끝날 때마다 Enter를 눌러 다음 줄에서 새 문장을 시작합니다.
대표 이미지 테스트를 하려면 오른쪽 설정에서 글 탭을 열고 대표 이미지 설정을 누릅니다.
오른쪽 설정이 숨겨져 있으면 편집기 위쪽의 설정 버튼을 눌러 엽니다.
파일 업로드 또는 미디어 라이브러리에서 16:9 이미지를 선택하고 대표 이미지 설정 버튼으로 확정합니다.
이미 지정된 글에서는 교체 버튼이 보일 수 있습니다.
오른쪽 글 설정에 선택한 이미지의 작은 미리보기가 보이는지 확인합니다.
본문 사진과 대표 이미지는 별개의 설정입니다.
본문에 사진만 삽입하면 대표 이미지 블록 테스트가 되지 않으므로 위 지정 단계를 빠뜨리지 않습니다.
본문 사진도 함께 테스트하려면 사진을 넣을 위치에서 새 줄을 만든 뒤 /이미지를 입력하고 이미지 블록을 선택합니다.
PC에 저장된 사진을 직접 올리려면 업로드를 누르고, 워드프레스에 이미 등록한 사진을 사용하려면 미디어 라이브러리를 누릅니다.
사진을 본문으로 끌어다 놓거나 복사한 사진을 본문에 붙여 넣는 방법도 사용할 수 있습니다.
이번 테스트에서는 3번에서 좌우가 잘렸던 것과 같은 16:9 사진을 사용합니다.
같은 사진을 사용해야 4번의 비율 변경 전후를 정확하게 비교할 수 있습니다.
6-3. 작성한 글을 임시글로 저장하기
테스트 글과 사진을 모두 입력했다면 화면 오른쪽 위의 임시글로 저장을 누릅니다.
아래쪽에 임시글 저장됨 안내가 표시되면 방문자에게 공개하지 않은 상태로 저장된 것입니다.
오른쪽의 파란색 공개 버튼은 누르지 않습니다.
6-4. 저장한 임시글 미리보기
임시 저장 완료 안내에 표시된 미리보기 보기를 누릅니다.
미리보기 화면이 새 탭에서 열리면 가장 먼저 대표 이미지의 왼쪽과 오른쪽 내용이 모두 보이는지 확인합니다.
3번 화면과 비교했을 때 이전에 잘렸던 부분까지 보인다면 4번에서 설정한 와이드 16:9 비율이 정상적으로 적용된 것입니다.
그다음 다음 내용을 함께 확인합니다.
- 대표 이미지의 좌우가 잘리지 않고 원본과 같은 16:9 비율로 보이는지
- 이미지 안쪽의 글자와 주요 내용이 끝까지 보이는지
- 본문 영역이 이전보다 넓어졌는지
- 입력한 제목과 문장이 정상적으로 보이는지
- 문장이 줄바꿈한 위치에서 다음 줄로 표시되는지
- PC와 모바일 화면에서 내용이 가로로 넘치지 않는지
임시글 미리보기 확인이 끝났다면 테스트용 임시글은 아직 지우지 않고, 다음 단계에서 공개 홈과 개별 글을 확인합니다.
7. 공개 홈과 개별 글을 직접 열어 확인하기
편집기 안에서만 확인하지 말고 (자신의 사이트 주소) 를 브라우저에서 엽니다.
홈의 글 목록에서 대표 이미지 안의 왼쪽 글자와 오른쪽 그림이 모두 보이는지 확인합니다.
이어서 같은 글의 제목이나 대표 이미지를 직접 눌러 개별 글로 이동합니다.
개별 글에서도 같은 이미지가 잘리지 않고 표시되는지 확인합니다.
아래는 블로그 홈 템플릿을 16:9로 저장하고 캐시를 갱신한 뒤 실제 공개 홈에서 촬영한 화면입니다.
수정 전 잘렸던 왼쪽의 글자와 오른쪽 그림이 함께 보입니다.
7-1. 저장했는데 예전 모습이 보이면 캐시 확인하기
이 사이트에서는 저장 직후 공개 홈에 이전 3:2 화면이 남아 있었습니다.
관리자 도구 표시줄의 캐시 삭제를 누르고 홈을 다시 열자 변경된 16:9 화면이 표시됐습니다.
캐시 삭제는 저장된 옛 화면을 비우는 작업이며 글이나 이미지 파일을 지우는 작업이 아닙니다.
캐시 플러그인을 사용한다면 해당 플러그인의 캐시 삭제 기능을 실행한 뒤 페이지를 새로고침합니다.
브라우저에 이전 화면이 남아 있으면 Ctrl + F5로 새로고침하거나 로그아웃한 창에서도 확인합니다.
캐시 삭제 메뉴는 플러그인에 따라 다르므로 같은 메뉴가 보이지 않는다고 플러그인을 새로 설치할 필요는 없습니다.
7-2. PC와 모바일에서 마지막으로 확인하기
PC뿐 아니라 휴대전화에서도 (자신의 사이트 주소) 를 열어 홈과 개별 글을 각각 확인합니다.
이미지 비율이 유지되고 글자나 본문이 화면 바깥으로 넘치지 않는지 살펴봅니다.
카테고리 목록이나 검색 결과에서만 잘린다면 해당 화면은 다른 템플릿을 사용할 수 있으므로 그 템플릿의 대표 이미지 설정도 따로 확인합니다.
아직 발행한 글이 없다면 임시글로 단일 글을 먼저 확인합니다.
나중에 실제로 발행할 글을 공개한 뒤 홈 목록을 검사하면 되며 테스트만을 위해 임시글을 공개할 필요는 없습니다.
8. 확인이 끝난 테스트용 임시글 정리하기
임시글 미리보기와 공개 홈, 개별 글 확인을 모두 마친 뒤 테스트용 임시글을 정리합니다.
아직 발행한 글이 없다면 공개 화면 확인은 나중에 진행하고, 그때까지 테스트용 임시글을 남겨 둡니다.
관리자 화면에서 글 → 모든 글로 이동합니다.
정리할 글이 테스트용 임시글인지 제목과 상태를 확인합니다.
해당 제목에 마우스를 올리고 아래에 나타나는 휴지통을 누릅니다.
앞에서 확인한 공개 글이나 계속 작성할 임시글은 삭제하지 않습니다.
이 작업은 글을 바로 영구 삭제하는 것이 아니라 휴지통으로 이동하는 것이므로 잘못 눌렀다면 휴지통에서 복원할 수 있습니다.
최종 확인 목록
- 기본 카테고리 이름을 원하는 카테고리 이름으로 변경했는지
예:워드프레스 시작하기 - 카테고리 슬러그를 원하는 영문으로 변경했는지
예:wordpress-start - 콘텐츠 너비를 자신의 블로그에 맞게 설정했는지 (이 사이트의 예:
860px) - 넓은 너비를 의도치 않게 바꾸지 않았는지 (이 사이트의 기존 값:
1340px) - 단일 글 대표 이미지 비율이
와이드 16:9인지 - 블로그 홈 대표 이미지 비율도
와이드 16:9인지 - 임시글의 글 설정에서 16:9 대표 이미지를 별도로 지정했는지
- 미리보기에서 대표 이미지 좌우가 잘리지 않는지
- 테스트용 임시글을 실수로 발행하지 않았는지
- 공개 홈과 개별 글을 직접 열어 각각 확인했는지
- 이전 모습이 남아 있을 때 캐시를 갱신했는지
- PC와 모바일에서 본문이 화면 밖으로 넘어가지 않는지
- 위 확인을 모두 마친 뒤 테스트용 임시글만 휴지통으로 이동했는지
마무리
카테고리와 글 화면의 기본 모양은 여러 글에 반복해서 적용되므로 글을 많이 작성하기 전에 정리하는 것이 효율적입니다.
이 블로그에서는 정보성 사용법 글과 16:9 캡처 이미지를 보기 편하게 만들기 위해 카테고리 이름, 860px 콘텐츠 너비와 16:9 대표 이미지 비율을 적용했습니다.
대표 이미지가 잘린다고 무조건 이미지 파일을 다시 만들 필요는 없습니다.
원본 비율과 템플릿의 표시 비율을 비교하고, 단일 글과 블로그 홈을 각각 맞추는 것이 먼저입니다.
설정을 저장한 뒤에는 임시글 미리보기와 실제 공개 홈을 구분해서 검사하고, 이전 화면이 남아 있다면 캐시까지 확인합니다.