WordPress 블록 테마에서 글꼴 관리

글꼴은 모든 사이트의 디자인을 정의하는 특성입니다. 여기에는 테마 개발자가 다음과 같은 서비스를 통합하는 것이 일반적인 WordPress 테마가 포함됩니다. 구글 글꼴 "클래식" PHP 기반 테마에 대한 워드프레스 커스터마이저 설정으로. WordPress 블록 테마의 경우는 그렇지 않습니다. Google 글꼴을 클래식 테마에 통합하는 것은 잘 문서화되어 있지만 현재 블록 테마에 사용할 수 있는 것은 없습니다. WordPress 테마 핸드북.

그것이 우리가 이 기사에서 살펴볼 것입니다. 블록 테마는 실제로 Google 글꼴을 사용할 수 있지만 등록 프로세스는 이전에 클래식 테마에서 수행했을 수 있는 것과는 매우 다릅니다.

우리가 이미 알고 있는 것

내가 말했듯이, 시작하는 것까지 우리가 할 수 있는 것은 거의 없습니다. Twenty Twenty-Two 테마는 최초의 블록 기반 기본 WordPress 테마이며 다운로드한 글꼴 파일을 테마의 자산으로 사용하는 방법을 보여줍니다. 그러나 다음과 같은 몇 가지 단계가 포함되어 있기 때문에 다루기가 매우 어렵습니다. (1) 에 파일을 등록합니다. functions.php 파일 (2) 번들 글꼴 정의 FBI 증오 범죄 보고서 theme.json 파일.

그러나 Twenty Twenty-Two가 출시된 이후로 프로세스가 더 간단해졌습니다. 이제 번들 글꼴을 등록하지 않고 정의할 수 있습니다. 스물 스물셋 테마. 그러나 프로세스는 여전히 글꼴 파일을 수동으로 다운로드하고 테마에 번들로 묶어야 합니다. 이는 빠른 CDN에서 제공되는 단순하고 삽입 가능한 호스팅된 글꼴의 목적을 무산시키는 장애물입니다.

새로운 점

아직 몰랐다면 구텐베르크 프로젝트 WordPress Block 및 Site Editor용으로 개발 중인 기능을 초기 사용 및 테스트에 사용할 수 있는 실험적 플러그인입니다. 최근에 테마 셰이퍼 기사, Gutenberg 프로젝트 리드 아키텍트 마티아스 벤츄라 Google 글꼴 또는 다운로드한 다른 글꼴을 사용하여 블록 테마에 추가할 수 있는 방법에 대해 설명합니다. 블록 테마 만들기 플러그인.

이 짧은 Learn WordPress의 비디오 Create Block Theme 플러그인과 작동 방식에 대한 좋은 개요를 제공합니다. 그러나 결론은 주석에 적힌대로 블록 테마를 생성한다는 것입니다. 그러나 코드를 작성하거나 템플릿 파일을 만질 필요 없이 전체 테마, 하위 테마 또는 테마 스타일 변형을 생성할 수 있는 WordPress UI의 컨트롤을 제공하여 이를 수행합니다.

나는 그것을 시도했다! Create Block Theme는 WordPress.org에서 작성 및 유지 관리 Google Fonts를 테마에 통합하기 위한 최선의 방향이라고 말하고 싶습니다. 즉, 플러그인이 활발히 개발되고 있다는 점은 분명히 주목할 가치가 있습니다. 그것은 상황이 매우 빠르게 변할 수 있음을 의미합니다.

모든 것이 어떻게 작동하는지 알아보기 전에 먼저 Google 글꼴을 클래식 WordPress 테마에 추가하는 "전통적인" 프로세스에 대해 간단히 살펴보겠습니다.

예전에는 어떻게 했습니까?

2014년의 이 ThemeShaper 기사 기존 PHP 테마에서 이 작업을 수행하는 방법에 대한 훌륭한 예를 제공합니다. Ibad Ur Rehman의 최신 Cloudways 기사.

기억을 되살리기 위해 다음은 기본값의 예입니다. 스물세븐틴 테마 Google 글꼴이 functions.php 파일.

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $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 );
}

그런 다음 Google Fonts는 다음과 같이 테마에 미리 연결됩니다.

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

전통적인 방식이 뭐가 문제야

좋아, 그렇지? 그러나 문제가 있습니다. 2022년 XNUMX월, 독일 지방 법원은 벌금을 부과 유럽법을 위반한 웹사이트 소유자 GDPR 요구 사항. 문제? 사이트에서 Google 글꼴을 대기열에 추가하면 방문자의 IP 주소가 노출되어 사용자 개인 정보가 위험해집니다. CSS-Tricks는 얼마 전에 이것을 다루었습니다.

XNUMXD덴탈의 블록 테마 만들기 플러그인은 Google Fonts API를 활용하여 로컬 공급업체의 프록시 역할만 하므로 GDPR 개인 정보 보호 요구 사항을 충족합니다. 글꼴은 개인정보를 보호하기 위해 Google 서버가 아닌 동일한 웹사이트에서 사용자에게 제공됩니다. WP 선술집 독일 법원 판결에 대해 논의하고 자체 호스팅 Google Fonts에 대한 가이드 링크를 포함합니다.

블록 테마로 Google 글꼴을 사용하는 방법

이것은 WordPress 블록 테마와 함께 Google 글꼴을 사용하는 오늘날의 "현대적인" 방식을 제공합니다. 먼저 로컬 테스트 사이트를 설정해 보겠습니다. 저는 플라이휠을 사용합니다. 지방의 지역 발전을 위한 앱. 당신은 그것을 사용하거나 원하는 것을 사용할 수 있습니다. 테마 테스트 데이터 플러그인 더미 콘텐츠 작업을 위해 WordPress Themes 팀에서 제공합니다. 그리고 물론, 당신은 블록 테마 만들기 거기에 플러그인도 있습니다.

해당 플러그인을 설치하고 활성화했습니까? 그렇다면 다음으로 이동하십시오. 외관 → 테마 글꼴 관리 워드프레스 관리자 메뉴에서.

"테마 글꼴 관리" 화면에는 테마의 글꼴에 이미 정의된 글꼴 ​​목록이 표시됩니다. theme.json 파일. 화면 상단에는 두 가지 옵션이 있습니다.

• Google 글꼴을 추가합니다. 이 옵션은 Google Fonts API에서 Google Fonts를 테마에 직접 추가합니다.
• 로컬 글꼴을 추가합니다. 이 옵션은 다운로드한 글꼴 파일을 테마에 추가합니다.

WordPress에서 완전히 빈 테마를 사용하고 있습니다. 빈테마. 자신만의 테마를 사용해도 되지만 Emptytheme의 이름을 "EMPTY-BLANK"로 변경하고 수정했기 때문에 미리 정의된 글꼴과 스타일이 전혀 없음을 알려드리고 싶습니다.

내 테마 파일 구조의 스크린샷을 공유하고 theme.json 말 그대로 진행 중인 스타일이나 구성이 없음을 보여 주는 파일입니다.

"Google 글꼴 추가" 버튼을 클릭해 봅시다. 현재 글꼴에서 사용 가능한 글꼴을 선택할 수 있는 옵션이 있는 새 페이지로 이동합니다. 구글 F온트 API.

이 데모에서는 매장하다 옵션 메뉴에서 미리보기 화면에서 300, 일반 및 900 가중치를 선택했습니다.

선택 항목을 저장하면 선택한 Inter 글꼴 스타일이 자동으로 다운로드되어 테마의 폴더에 저장됩니다. assets/fonts 폴더 :

또한 이러한 선택 항목이 어떻게 자동으로 theme.json 해당 스크린샷의 파일입니다. Create Block Theme 플러그인은 글꼴 파일의 경로까지 추가합니다.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Create Block Theme의 메인 화면으로 이동하여 테마 글꼴 관리 버튼을 다시 누르면 Inter의 300, 400(일반) 및 900 가중치 변형이 미리보기 패널에 표시됩니다.

A 데모 텍스트 미리보기 상자 상단에는 글꼴 크기 선택 슬라이더를 사용하여 문장, 머리글 및 단락 내에서 선택한 글꼴을 미리 볼 수도 있습니다. 이 새로운 기능이 실제로 작동하는지 확인할 수 있습니다. 이 GitHub 비디오.

선택한 글꼴은 사이트 편집기에서도 사용할 수 있습니다. 글로벌 스타일 (외관 → 편집자), 특히 디자인 패널에서.

여기에서 다음으로 이동합니다. Canva의 제작된 채널아트 템플릿을 → 색인 파란색을 클릭하고 편집 버튼을 편집 index.html 주형. 우리는 글로벌 스타일 화면 오른쪽 상단에 대비 아이콘으로 표시되는 설정입니다. 클릭하면 본문 설정을 열고 글꼴 메뉴 활판 인쇄술 섹션… 우리는 인터를 참조하십시오!

동일하지만 로컬 글꼴 사용

Create Block Theme 플러그인이 해당 옵션을 제공하므로 테마에 로컬 글꼴을 추가하는 것도 살펴볼 수 있습니다. 이점은 원하는 글꼴 서비스에서 원하는 글꼴 파일을 사용할 수 있다는 것입니다.

플러그인이 없으면 글꼴 파일을 가져와서 테마 폴더 어딘가에 놓은 다음 전통적인 PHP 경로에 의존하여 functions.php 파일. 하지만 우리는 워드프레스가 그 부담을 짊어지게 할 수 있습니다. 로컬 글꼴 추가 Create Block Theme 인터페이스를 사용하는 화면. 업로드할 파일을 선택하면 글꼴 정의 상자가 자동으로 채워집니다.

아무리 사용해도 .ttf, .woff및 .woff2 파일, 나는 단순히 다운로드 Google Fonts에서 Sans 글꼴 파일 열기 이 연습을 위해. 나는 레귤러와 800의 두 가지 무게 변형을 날치기했습니다.

동일한 자동 마법 파일 관리 및 theme.json Google 글꼴 옵션에서 본 업데이트는 글꼴 파일을 업로드할 때(한 번에 하나씩 수행됨) 다시 한 번 발생합니다. 글꼴이 내 테마 폴더에 있는 위치와 글꼴이 추가되는 방법을 확인하십시오. theme.json:

글꼴 제거

플러그인을 사용하면 WordPress 관리자의 블록 테마에서 글꼴 파일을 제거할 수도 있습니다. 지난 섹션에서 설치한 Open Sans 변종 중 하나를 삭제하여 어떻게 작동하는지 살펴보겠습니다.

클릭 제거 링크는 삭제를 확인하라는 경고를 트리거합니다. 클릭하겠습니다 OK 계속합니다.

테마 폴더를 열고 확인합시다. theme.json 파일. 아니나 다를까, 우리가 플러그인 화면에서 삭제한 Open Sans 800 파일은 테마 폴더에서 글꼴 파일을 제거했고 그에 대한 참조는 사라진 지 오래입니다. theme.json.

진행중인 작업이 있습니다

이 "글꼴 관리자" 기능을 WordPress Core에 추가하는 이야기가 있습니다. 별도의 플러그인이 필요하지 않습니다.

기능의 초기 반복 레포에서 사용 가능, 이 문서에서 사용한 것과 정확히 동일한 접근 방식을 사용합니다. 그것은해야한다 GDPR 준수, 도. 특징은 WordPress 6.3과 함께 출시 예정 올해 말 출시.

최대 포장

Create Block Theme 플러그인은 WordPress 블록 테마에서 글꼴을 처리할 때 사용자 경험을 크게 향상시킵니다. 플러그인을 사용하면 GDPR 요구 사항을 준수하면서 글꼴을 추가하거나 삭제할 수 있습니다.

Google 글꼴을 선택하거나 로컬 글꼴 파일을 업로드하면 글꼴이 테마 폴더에 자동으로 배치되고 theme.json 파일. 또한 사이트 편집기의 전역 스타일 설정에서 글꼴이 사용 가능한 옵션인 방법도 확인했습니다. 글꼴을 제거해야 한다면? 플러그인은 테마 파일이나 코드를 건드리지 않고도 완전히 처리합니다.

읽어 주셔서 감사합니다! 의견이나 제안 사항이 있으면 의견에 공유하십시오. WordPress에서 글꼴 관리를 위한 가능한 방향에 대해 어떻게 생각하는지 알고 싶습니다.

추가 리소스

나는 이 기사를 작성하기 위해 많은 연구에 의존했으며 추가 컨텍스트를 제공하기 위해 사용한 기사와 리소스를 공유할 것이라고 생각했습니다.

워드프레스 글꼴 관리

GitHub 문제

유럽 ​​GDPR 요건

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/