웹 사이트 디자인은 타이포그래피에 달려 있습니다. WordPress 테마는 종종 클래식 PHP 테마를 위해 커스터마이저 내에서 쉽게 관리하는 Google Fonts와 같은 서비스를 통합합니다. 그러나 이것은 블록 테마에 대해 간단하지 않습니다. 클래식 테마 통합은 잘 문서화되어 있지만 블록 테마 글꼴 관리에도 비슷한 지침이 부족합니다. 이 기사는 그 차이를 다룹니다. 블록 테마
Google 글꼴을 사용할 수 있지만 등록 프로세스는 기존 방법과 크게 다릅니다.
기존 지식
글꼴을 블록 테마에 통합하기위한 리소스는 처음에는 거의 거의 없었습니다. 최초의 기본 블록 기반 테마 인 22 개의 22 개는 다운로드 된 글꼴 파일을 테마 자산으로 사용하여 시연했습니다. 여기에는 에 파일을 등록하고 번들 글꼴을 정의하는 것이 포함되어 있습니다.-번거로운 2 단계 프로세스.
이후의 테마는 203 명과 마찬가지로 명시 적 등록없이 번들 글꼴을 정의하여이를 단순화했습니다. 그러나 수동 글꼴 다운로드 및 번들링은 남아있어 CDN을 통해 제공되는 호스팅 글꼴의 편의성을 무시합니다.
최근 발전
다가오는 블록 및 사이트 편집기 기능을 테스트하기위한 플러그인 인 Gutenberg 프로젝트는 솔루션을 제공합니다. Gutenberg의 리드 아키텍트 인 Matias Benedetto는 Create Block 테마 플러그인을 통해 블록 테마에서 Google Fonts (또는 다운로드 된 글꼴)를 사용하여 강조했습니다.
Learn WordPress는이 플러그인의 비디오 개요를 제공하여 WordPress UI 컨트롤을 제공하여 테마 생성을 단순화합니다. 템플릿 파일을 코딩하거나 수정하지 않고 전체 테마, 하위 테마 또는 스타일 변형을 만들 수 있습니다. WordPress.org 팀이 작성하고 유지하고 있으며 현재 블록 테마에서 Google 글꼴 통합을위한 최상의 접근 방식입니다. 그러나 활발한 개발 중이므로 변경 사항을 기대하십시오.
이 새로운 방법을 탐색하기 전에 고전적인 테마에 대한 전통적인 접근 방식을 검토해 봅시다.
전통적인 방법
Themeshaper (2014) 및 Cloudways와 같은 기사는 고전적인 방법을 보여줍니다. 스물 17 개의 테마는 : 의 Google 글꼴을 흡수합니다.
Google 글꼴을 사전 연결 :
전통적인 방법의 단점
이 방법은 중요한 단점이 있습니다. 2022 년 독일 법원 판결은 Google 글꼴을 수용 할 때 방문자 IP 주소의 노출로 인해 GDPR 위반을 강조했습니다. 이 문제는 Create Block 테마 플러그인에서 다루어집니다. functions.php
블록 테마가있는 Google 글꼴을 사용합니다 (현대적인 방법)
최신 접근 방식은 블록 테마 플러그인 만들기를 사용합니다. 로컬 개발 환경 (예 : 플라이휠 로컬 사용)을 설정하고 테마 테스트 데이터를 설치하고 블록 테마 플러그인을 만듭니다. 로 이동하여 테마 글꼴 관리 로 이동하십시오. 이 화면은 정의 된 글꼴을 나열하고 다음과 같은 옵션을 제공합니다
Google 글꼴 추가 : Google 글꼴 API에서 직접 글꼴을 추가합니다.
로컬 글꼴 추가 :
업로드 된 글꼴 파일을 추가합니다
빈 테마를 사용하여 (예 : 빈도, 명확성을 위해 이름이 바뀌 었음) Google 글꼴을 추가하여 (Inter)를 자동으로 다운로드하여 테마의 - 폴더에 저장하고 : Theme.JSON 코드
-
그런 다음 사이트 편집기의 글로벌 스타일에서 글꼴을 사용할 수 있습니다.
로컬 글꼴을 추가하는 것도 비슷하게 작동하여 수동 수정과 비교하여 프로세스를 단순화합니다. 글꼴 제거는 플러그인의 인터페이스 내에서 처리됩니다
미래의 발전
"Font Manager"기능은 WordPress Core를 위해 계획되어 있으며 유사한 기능을 제공합니다.
결론
Create Block 테마 플러그인은 WordPress 블록 테마에서 글꼴 관리를 간소화하여 사용자 친화적이고 GDPR 호환 솔루션을 제공합니다. 직접 코드 상호 작용없이 글꼴을 추가, 제거 및 관리하는 것을 단순화합니다.
추가 읽기
(리소스 목록은 동일하게 유지되며, 더 나은 가독성을 위해 재구성) assets/fonts
theme.json
WordPress 글꼴 관리 :
WordPress 블록 테마에 타이포그래피 글꼴을 추가하는 방법 (테마 셰이퍼)
WordPress 테마에 Google 글꼴을 추가하는 방법 (테마 셰이퍼)
WordPress와 함께 Google 글꼴을 사용하는 방법은 무엇입니까? (Cloudways)
블록 테마를 사용하여 블록 테마를 관리하십시오 (WordPress 학습)
작성 블록 테마를 사용하여 (WordPress.tv)
github 문제 : function twentyseventeen_fonts_url() {
$fonts_url = '';
$libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
if ( 'off' !== $libre_franklin ) {
$font_families = array();
$font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
$query_args = array(
'family' => urlencode( implode( '|', $font_families ) ),
'subset' => urlencode( 'latin,latin-ext' ),
);
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
}
return esc_url_raw( $fonts_url );
}
로그인 후 복사
글로벌 스타일/타이포그래피 : 글꼴 세트 관리 (#45271)
글꼴 관리자 (#46332)
유럽 GDPR 요구 사항 :
Google 호스팅 글꼴 (wptavern)을 사용하여 GDPR을 위반 한 독일 법원 Fines 웹 사이트 소유자
Google Fonts를 사용할 때 GDPR 준수 (WordPress 테마 만들기)
Google Fonts (eprivacy Blog) 사용에 대한 웹 사이트 운영자에 대한 손상으로 독일 법원 Awards 사용자 € 100
토끼 글꼴 (CSS- 트릭)
functions.php
위 내용은 WordPress 블록 테마의 글꼴 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!