워드프레스 이미지 간격 일괄 조정하기

워드프레스의 기본 편집기인 블록 에디터(구텐베르크)로 글을 작성할 때 이미지를 여러 개 연속하여 배치하는 경우가 있습니다. 이미지 간 간격을 일괄적으로 변경하고 싶은 경우 CSS나 자바스크립트를 사용하여 이미지 사이 간격을 일괄적으로 지정할 수 있습니다.

워드프레스 이미지 간격 일괄 조정하기

워드프레스 블록 에디터에서 블록 사이에 간격을 추가하고 싶은 경우 '여백 도구' 블록을 사용할 수 있습니다.

워드프레스 글 작성 시 여백 추가하는 방법

자바스크립트를 사용하여 이미지 간 여백 설정하기

이미지를 연속하여 2개나 3개 이상을 배치할 때, 이미지 간 간격을 일괄적으로 지정하고 싶은 경우가 있습니다. CSS를 사용하여 이미지 블록의 아래 여백(margin-bottom)을 지정하면 모든 이미지 블록에 하단 여백이 적용됩니다. 이미지가 2개 이상 연속 배치될 때에만 이미지 사이에 여백이 적용되고, 이미지가 한 개인 경우나 이미지가 두 개 이상인 경우 맨 아래 이미지에는 하단 여백을 적용하지 않아야 할 때에는 CSS로 조정하기가 쉽지 않을 수 있습니다.

이 경우 자바스크립트를 사용하여 이미지 사이에 여백을 지정할 수 있습니다.

<script>
window.onload = function() {
    var images = document.getElementsByClassName('wp-block-image');
    for (var i = 0; i < images.length - 1; i++) {
        if (images[i].nextElementSibling === images[i + 1]) {
            images[i].style.marginBottom = '30px';
        }
    }
};
</script>

위와 같은 자스를 적용하면 이미지 사이에 30px의 여백이 적용됩니다.

이미지 사이에 간격을 없애고 싶은 경우에는 숫자값을 '0'으로 지정하면 됩니다.

자바스크립트 코드는 다음 글을 참고하여 로드할 수 있습니다.

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 - 워드프레스 정보꾸

이 방법이 정석이지만 번거롭다면 WPCode와 같은 플러그인을 설치하고 푸터 영역에 상기 자스 코드를 추가하면 됩니다. 

Divi 테마, 뉴스페이퍼 테마 등 일부 테마에서는 테마 옵션을 통해 푸터에 자바스크립트를 추가할 수 있는 기능을 제공합니다. 

뉴스페이퍼 테마의 Custom Code 섹션.

GeneratePress 테마의 경우 훅을 사용하여 [**wp_footer**]에  코드를 추가할 수 있습니다.

GeneratePress 테마 후크 사용하기 - 워드프레스 정보꾸러미

쉬운 방법: CSS를 사용하여 이미지 간 여백 변경하기

CSS로는 쉽지 않을 것 같아서 위에서 자바스크립트를 이용하는 방법을 소개해드렸습니다. 그러나 조금 생각해보니 [**margin-bottom**] 대신 [**margin-top**]을 활용하면 CSS로 쉽게 될 것 같아서 다음과 같은 코드로 테스트해 보니 잘 작동하는 것 같습니다.

/* 이미지 간 여백 추가하기 */
/* Add space between consecutive images in WordPress block editor */
.wp-block-image + .wp-block-image {
    margin-top: 30px;
}

자바스크립트를 이용하는 방법보다는 이 방법을 먼저 시도해보시기 바랍니다.

커스텀 CSS는 워드프레스 알림판 » 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. 기본적인 CSS는 그리 어렵지 않고 익히는 데 시간이 많이 걸리지도 않습니다.

참고

https://avada.tistory.com/3049

GeneratePress 테마: 블로그에서 카테고리와 태그 제거하기

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)

https://avada.tistory.com/3033

티스토리에서 워드프레스로 이사하기 (티스토리 백업 이용)