한국어
한국어
WordPress Gutenberg Block은 WordPress 버전 5.0에서 소개 된 편집기 기능으로 콘텐츠 편집 모듈화 및 효율적입니다. 개발자의 경우 Gutenberg 블록은 사용하기 쉽뿐만 아니라 사용자 지정 스타일 및 스크립트를 통해 블록의 외관 및 상호 작용 효과를 조정하는 것을 지원합니다. 이 기사는 웹 사이트의 전문성과 사용자 경험을 향상시키기 위해 Gutenberg 블록을위한 개인화 된 스타일을 만드는 방법을 단계별로 안내합니다.
시작하기 전에 WordPress 5.0 이상을 사용하고 기본 CSS 및 JavaScript 지식을 사용하여 맞춤형 스타일을 더 잘 이해하고 적용하는 데 도움이됩니다.
사용자 정의 스타일의 핵심은 테마의 functions.php 파일을 수정하고 새 CSS 파일을 편집기에로드하는 것입니다. functions.php를 열고 파일 끝에 다음 코드를 추가합니다.
function my_custom_block_style() {
wp_enqueue_style(
'my-custom-block-style', // 스타일 이름
get_stylesheet_directory_uri() . '/css/my-block-style.css', // 스타일 파일 경로
array( 'wp-blocks' ),
filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // 캐시를 자동으로 새로 고치십시오
);
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );그중 "My-Custom-Block 스타일"은 스타일의 로고 이름이며 필요에 따라 수정할 수 있습니다. 스타일 파일은 테마 디렉토리의 CSS 폴더에 배치되고 파일 이름은 my-block-style.css라고 가정합니다. FileMtime 함수는 캐시 문제를 피하기 위해 스타일 파일이 업데이트 될 때마다 브라우저가 최신 버전을 자동으로로드 할 수 있도록합니다.
다음으로 테마의 CSS 폴더에 "my-block-style.css"를 작성하면 모든 사용자 정의 스타일이 파일에 기록됩니다.
스타일 파일이 준비되면 WordPress 편집기를 열고 사용자 정의 할 블록을 추가하거나 선택하십시오. 블록 설정에서 사용자 정의 스타일 기능을 찾아 해당 블록의 CSS 선택기를 입력하십시오.
예를 들어, 단락 블록의 텍스트 색상을 수정하려면 다음을 쓸 수 있습니다.
.wp-block-paragraph {
color: red;
}".wp-block-paragraph"는 단락 블록의 기본 CSS 클래스 이름입니다. 여러 블록을 스타일링하려면 선택기 상자에 동시에 여러 선택기를 입력하면 모든 해당 블록에 스타일이 적용됩니다.
스타일 입력을 완료 한 후 "스타일 추가"버튼을 클릭하여 저장하십시오. 편집기를 새로 고치면 선택한 블록에 웹 사이트의 외관에 맞춤형 스타일이 적용됨을 알 수 있습니다.
WordPress Gutenberg 블록의 사용자 정의는 테마 파일에 맞춤 CSS를 소개하고 특정 블록의 스타일링을 통해 유연하고 강력 해집니다. 위의 기술을 마스터하면 웹 사이트의 전문성과 사용자 경험을 향상시키기 위해 고유 한 컨텐츠 모듈을 쉽게 만들 수 있습니다. 이 기사가 Gutenberg 블록의 스타일을 설계하는 데 도움이되기를 바랍니다.
