워드프레스 이미지 블럭 추가시 Lightbox 설정이 활성화된 상태로 추가되게 하는 방법

Published Dec 14, 2023 | Updated Feb 2, 2024 | 0 comments

개요

워드프레스가 업데이트 되면서 기본 이미지 블럭에 Lightbox 기능을 켜고 끌 수 있는 설정이 추가되었습니다.(v6.4 이상)
기본 이미지 블럭을 추가해서 이미지를 설정한 다음 우측 블럭 설정을 보면 “Expand on click” 이라는 설정이 있습니다.
또는, 이미지를 복사한 다음 편집 영역에서 바로 붙여넣기(Ctrl+V) 해도 기본 이미지 블럭이 삽입이 됩니다.

저의 경우 이미지를 삽입해서 해당 설정을 활성화 하는 경우가 대부분 입니다.
그래서 이미지 블럭 삽입시 처음부터 활성화된 상태로 추가되는 방법을 찾아서 적용하였습니다.

워드프레스 Global Setting 수정

기본 이미지 블럭의 설정을 재정의 하기 위해서 wp-includes 폴더 하위에 있는 theme.json 파일을 수정해야 합니다.
다음과 같이 해당 파일을 열어서 core/image 를 검색한 다음 “allowEditing”: true 다음에 “enabled”: true 설정을 추가하면 됩니다.

"blocks": {
	"core/button": {
		"border": {
			"radius": true
		}
	},
	"core/image": {
		"lightbox": {
			"allowEditing": true,
			"enabled": true
		}
	},
	"core/pullquote": {
		"border": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		}
	}
}

가장 간단해 보이기는 하지만 워드프레스 버전이 업데이트가 되면 다시 덮어쓰게 되리라 생각됩니다.
그럼, 매번 업데이트 할때 마다 수정해야 하는 번거로움이 발생합니다.

Child Theme 에 Global Setting 파일 추가

워드프레스를 사용하면서 커스터마이징이 필요한 부분이 많아 워드프레스나 테마가 업데이트 되는 경우 번거로움을 해결하기 위해 Child Theme 를 사용하고 있습니다.
Child Theme 폴더에 theme.json 파일을 다음과 같이 작성해서 저장하면 이후 기본 이미지 블럭이 추가되는 경우 Expand on click 설정이 활성화 된 상태로 추가가 됩니다.

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/image": {
				"lightbox": {
					"enabled": true
				}
			}
		}
	}
}

참조

Learn more on this topic

Related Blog Posts

워드프레스 Github 플러그인

워드프레스 Github 플러그인

워드프레스에서 Github 저장소를 포함하기 위해 사용 중이던 Embed Block for GitHub 플러그인의 버그 발생과 더 이상 유지 보수가 안되는 상황에서 새로운 플러그인(Github Embed)을 소개하고 해당 플러그인으로 대체 하게 된 상황에 대해 설명합니다.

read more

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares