Customize Image Caption in WordPress

워드프레스 이미지 캡션 변경하기

워드프레스에서 글에 이미지를 삽입할 때나 이미지를 삽입한 후에 캡션(그림 설명)을 추가할 수 있습니다. 예를 들어 글에 이미지를 삽입한 후에 캡션을 추가하려면, 해당 그림을 마우스로 클릭한 후에 편집 아이콘(연필 모양)을 클릭합니다.

워드프레스 - 이미지 캡션 추가하기

 

그런 다음 표시되는 팝업 화면에서 캡션을 추가하면 됩니다.

Add Caption in WordPress

설정을 저장(업데이트)하면 캡션이 그림에 추가됩니다.

캡션 모양은 사용하는 워드프레스 테마마다 다릅니다. 캡션이 중앙에 정렬되지 않으면 다음 코드를 스타일시트 파일에 추가하면 중앙에 정렬될 것입니다.

.post p.wp-caption-text {
text-align:center;
}
.aligncenter {
text-align:center; margin:0 auto;
}

워드프레스 이미지 캡션 모양을 CSS를 사용하여 변경할 수 있습니다. 예를 들어 다음과 같은 CSS를 사용하면:

.wp-caption {
border: 1px solid #ddd; /* Border 설정 */
text-align: center;
background-color: #f3f3f3; /* 캡션 배경색 */
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px; /* 글자 크기 */
line-height: 17px; /* 줄높이 설정 */
padding: 0 4px 5px;
margin: 0;
}
// Source: designm

그림을 중앙 정렬하면 .aligncenter 요소가 추가됩니다. 위의 CSS를 적용해보면 테마에 따라 그림이 중앙 정렬이 되지 않을 수 있습니다. 이 경우 다음 코드를 추가하면 문제가 해결될 수 있습니다.

/* 워드프레스 이미지 중앙 정렬 */
.aligncenter, img.aligncenter {
clear: both; display: block; margin-left: auto; margin-right: auto;
}

위의 CSS 코드를 적용하면 다음과 같은 모양으로 이미지 캡션이 표시됩니다.

Customize Image Caption in WordPress

테마에 따라 위의 CSS 코드가 적용되지 않을 수도 있습니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.