동기화 블록 패턴 만들기
워드프레스에서 동기화 블록 패턴으로 인용 박스를 만들어봅시다.
스타일 에디터
관리자 페이지 – 모양 – 패턴에서 동기화 패턴을 생성합니다. (도대체 누가 Appearence를 디자인으로 번역했는지 참…🤬)
빈 패턴 문서가 열리면 주소 표시줄에서 postId를 확인할 수 있습니다.
DB의 wp_posts 테이블에서 해당 postId를 찾은 후, 그 레코드의 post_content 컬럼에 아래 HTML 코드를 삽입합니다.
<!-- wp:group {"metadata":{"categories":["text"]},"className":"pcss-quote1","borderColor":"primary"} -->
<div class="wp-block-group pcss-quote1 has-border-color has-primary-border-color"><!-- wp:paragraph {"metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"제목"},"className":"pcss-header has-large-font-size"} -->
<p class="pcss-header has-large-font-size"></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"metadata":{"name":"내용","bindings":{"__default":{"source":"core/pattern-overrides"}}},"className":"pcss-body","style":{"elements":{"link":{"color":{"text":"var:preset|color|link-font"}}}},"textColor":"foreground","fontSize":"medium"} -->
<p class="pcss-body has-foreground-color has-text-color has-link-color has-medium-font-size"></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->style.css
테마의 스타일시트 파일에 아래 코드를 붙여 넣습니다.
div.pcss-quote1 {
border-radius: 10px;
border-width: 2px;
padding-bottom: 16px;
margin-top: 26px;
border-color: var(--wp--preset--color--primary);
justify-content: left;
background: linear-gradient(to bottom, var(--wp--preset--color--primary) 60px, transparent 0%);
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
div.pcss-quote1:after {
content: "“";
font-size: 60px;
font-weight: 700;
font-family: arial;
background: var(--wp--preset--color--link-hover);
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
line-height: 90px;
position: absolute;
top: -25px;
left: 20px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--wp--preset--color--primary);
}
div.pcss-quote1 p.pcss-header{
margin: 0 0 16 28px;
padding-left:100px;
height:60px;
}
div.pcss-quote1 p.pcss-body{
margin:0px;
padding-left:20px;
line-height:1;
}editor-style.css
스타일 편집기에서도 적용하려면 테마의 에디터 스타일 시트에 아래 코드를 붙여넣습니다.
.editor-styles-wrapper div.pcss-quote1 {
border-radius: 10px;
border-width: 2px;
padding-bottom: 16px;
margin-top: 26px;
border-color: var(--wp--preset--color--primary);
justify-content: left;
background: linear-gradient(to bottom, var(--wp--preset--color--primary) 60px, transparent 0%);
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.editor-styles-wrapper div.pcss-quote1:after {
content: "“";
font-size: 60px;
font-weight: 700;
font-family: arial;
background: var(--wp--preset--color--link-hover);
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
line-height: 90px;
position: absolute;
top: -25px;
left: 20px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--wp--preset--color--primary);
}
.editor-styles-wrapper div.pcss-quote1 p.pcss-header{
margin: 0 0 16 28px;
padding-left:100px;
height:60px;
}
.editor-styles-wrapper div.pcss-quote1 p.pcss-body{
margin:0px;
padding-left:20px;
line-height:1;
}그다음 페이지를 새로고침하면 에디터에서 세부 내용을 편집할 수 있습니다.
미리보기
동기화 패턴을 현재 문서에 삽입
에디터에서 캡처한 이미지
글 보기에서 캡처한 이미지
이렇게 나와야 정상입니다.