Quản lý phông chữ trong WordPress Block Themes

Phông chữ là một đặc điểm xác định thiết kế của bất kỳ trang web nào. Điều đó bao gồm các chủ đề WordPress, nơi các nhà phát triển chủ đề thường tích hợp một dịch vụ như Google Fonts vào cài đặt Trình tùy chỉnh WordPress cho chủ đề dựa trên PHP “cổ điển”. Điều đó không hoàn toàn đúng với các chủ đề khối WordPress. Mặc dù việc tích hợp Google Fonts vào các chủ đề cổ điển đã được ghi lại rõ ràng, nhưng hiện tại không có gì khả dụng cho các chủ đề khối trong Sổ tay chủ đề WordPress.

Đó là những gì chúng ta sẽ xem xét trong bài viết này. Các chủ đề khối thực sự có thể sử dụng Google Fonts, nhưng quá trình đăng ký chúng khác nhiều so với những gì bạn có thể đã làm trước đây trong các chủ đề cổ điển.

Những gì chúng ta đã biết

Như tôi đã nói, có rất ít điều để chúng ta tiếp tục khi bắt đầu. Chủ đề Twenty-Two-Two là chủ đề WordPress mặc định dựa trên khối đầu tiên và nó cho thấy cách chúng tôi có thể sử dụng các tệp phông chữ đã tải xuống làm nội dung trong chủ đề. Nhưng nó khá khó sử dụng vì nó bao gồm một vài bước: (1) đăng ký các tập tin trong functions.php hồ sơ và (2) xác định các phông chữ đi kèm trong theme.json hồ sơ.

Tuy nhiên, kể từ khi Twenty Twenty-Two được phát hành, quá trình này trở nên đơn giản hơn. Các phông chữ đi kèm hiện có thể được xác định mà không cần đăng ký chúng, như thể hiện trong Chủ đề Twenty Twenty-Three. Tuy nhiên, quá trình này vẫn yêu cầu chúng tôi tải xuống các tệp phông chữ theo cách thủ công và gộp chúng vào các chủ đề. Đó là một trở ngại đánh bại mục đích của các phông chữ được lưu trữ, thả xuống, đơn giản được phục vụ trên CDN tốc độ cao.

Có gì mới

Nếu bạn chưa biết, Dự án Gutenberg là một plugin thử nghiệm trong đó các tính năng đang được phát triển cho Trình chỉnh sửa trang và khối WordPress có sẵn để sử dụng và thử nghiệm sớm. Trong một thời gian gần đây Bài viết về Theme Shaper, Kiến trúc sư trưởng dự án Gutenberg Matias Ventura thảo luận về cách Google Fonts — hoặc bất kỳ phông chữ đã tải xuống nào khác — có thể được thêm vào để chặn các chủ đề bằng cách sử dụng Tạo chủ đề khối plugin.

ngắn này video tại Tìm hiểu WordPress cung cấp một cái nhìn tổng quan tốt về plugin Tạo chủ đề khối và cách thức hoạt động của nó. Nhưng điểm mấu chốt là nó làm những gì nó nói trên hộp thiếc: nó tạo ra các chủ đề khối. Nhưng nó thực hiện điều đó bằng cách cung cấp các điều khiển trong giao diện người dùng WordPress cho phép bạn tạo toàn bộ chủ đề, chủ đề con hoặc biến thể kiểu chủ đề mà không cần viết bất kỳ mã nào hoặc phải chạm vào các tệp mẫu.

Tôi đã thử nó! Và vì Tạo chủ đề khối là được tác giả và duy trì bởi WordPress.org nhóm, tôi muốn nói rằng đó là hướng tốt nhất mà chúng tôi có để tích hợp Google Fonts vào một chủ đề. Điều đó nói rằng, chắc chắn đáng chú ý là plugin đang được phát triển tích cực. Điều đó có nghĩa là mọi thứ có thể thay đổi khá nhanh.

Trước khi tôi tìm hiểu về cách thức hoạt động của tất cả, trước tiên chúng ta hãy làm mới bản thân một thời gian ngắn với quy trình “truyền thống” để thêm Google Fonts vào các chủ đề WordPress cổ điển.

Làm thế nào nó từng được thực hiện

Bài viết ThemeShaper này từ năm 2014 cung cấp một ví dụ tuyệt vời về cách chúng tôi đã sử dụng để làm điều này trong các chủ đề PHP cổ điển, cũng như bài viết mới hơn về Cloudways này của Ibad Ur Rehman.

Để làm mới bộ nhớ của chúng tôi, đây là một ví dụ từ mặc định Chủ đề Hai Mươi Mười Bảy hiển thị cách các phông chữ của Google được xử lý trong functions.php tập tin.

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 );
}

Sau đó, Google Fonts được kết nối sẵn với chủ đề như thế này:

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 );

Có gì sai với cách truyền thống

Tuyệt đúng không? Tuy nhiên, có một trở ngại. Vào tháng 2022 năm XNUMX, một Tòa án khu vực Đức phạt tiền trên một chủ sở hữu trang web vì vi phạm Châu Âu yêu cầu GDPR. Vấn đề? Xếp hàng Google Fonts trên trang web đã làm lộ địa chỉ IP của khách truy cập, gây nguy hiểm cho quyền riêng tư của người dùng. Thủ thuật CSS đã đề cập đến vấn đề này một thời gian trước.

Sản phẩm Tạo chủ đề khối plugin đáp ứng các yêu cầu về quyền riêng tư của GDPR vì nó tận dụng Google Fonts API để chỉ phục vụ như một proxy cho nhà cung cấp địa phương. Các phông chữ được cung cấp cho người dùng trên cùng một trang web thay vì trên các máy chủ của Google, bảo vệ quyền riêng tư. Quán rượu WP thảo luận về phán quyết của tòa án Đức và bao gồm các liên kết đến các hướng dẫn về Google Fonts tự lưu trữ.

Cách sử dụng Google Fonts với chủ đề khối

Điều này đưa chúng ta đến cách sử dụng Google Fonts với các chủ đề khối WordPress “hiện đại” ngày nay. Trước tiên, hãy thiết lập một trang web thử nghiệm cục bộ. Tôi sử dụng bánh đà Địa phương ứng dụng để phát triển địa phương. Bạn có thể sử dụng cái đó hoặc bất cứ thứ gì bạn thích, sau đó sử dụng Plugin dữ liệu thử nghiệm chủ đề bởi Nhóm chủ đề WordPress để làm việc với nội dung giả. Và, tất nhiên, bạn sẽ muốn Tạo chủ đề khối plugin trong đó là tốt.

Bạn đã cài đặt và kích hoạt các plugin đó chưa? Nếu vậy, điều hướng đến Xuất hiện → Quản lý phông chữ chủ đề từ menu quản trị WordPress.

Màn hình “Quản lý phông chủ đề” hiển thị danh sách bất kỳ phông chữ nào đã được xác định trong giao diện của chủ đề. theme.json tài liệu. Ngoài ra còn có hai tùy chọn ở đầu màn hình:

• Thêm phông chữ Google. Tùy chọn này thêm trực tiếp Phông chữ của Google vào chủ đề từ API phông chữ của Google.
• Thêm phông chữ cục bộ. Tùy chọn này thêm các tệp phông chữ đã tải xuống vào chủ đề.

Tôi đang sử dụng một chủ đề hoàn toàn trống của WordPress được gọi là chủ đề trống. Bạn có thể thoải mái sử dụng chủ đề của riêng mình, nhưng tôi muốn chỉ ra rằng tôi đã đổi tên Emptytheme thành “EMPTY-BLANK” và sửa đổi nó, vì vậy không có phông chữ và kiểu dáng được xác định trước nào cả.

Tôi nghĩ tôi nên chia sẻ ảnh chụp màn hình cấu trúc tệp chủ đề của mình và theme.json tệp để cho thấy rằng thực sự không có kiểu hoặc cấu hình nào đang diễn ra.

Hãy nhấp vào nút “Thêm Google Fonts”. Nó đưa chúng ta đến một trang mới với các tùy chọn để chọn bất kỳ phông chữ có sẵn nào từ phông chữ hiện tại Google FAPI hỗ trợ.

Đối với bản demo này, tôi đã chọn Liên từ menu tùy chọn và chọn trọng số 300, Thông thường và 900 từ màn hình xem trước:

Khi tôi đã lưu các lựa chọn của mình, các kiểu phông chữ Inter mà tôi đã chọn sẽ tự động được tải xuống và lưu trữ trong thư mục của chủ đề assets/fonts thư mục:

Cũng lưu ý rằng những lựa chọn đó đã được tự động ghi vào theme.json tập tin trong ảnh chụp màn hình đó. Plugin Tạo chủ đề khối thậm chí còn thêm đường dẫn đến các tệp phông chữ.

{ "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" ] } ] } ] } }
}

Nếu chúng ta đi đến màn hình chính của Tạo khối chủ đề và nhấp vào nút Quản lý phông chữ chủ đề lại, chúng ta sẽ thấy các biến thể trọng lượng 300, 400 (Thông thường) và 900 của Inter được hiển thị trong bảng xem trước.

A hộp xem trước văn bản demo ở trên cùng thậm chí còn cho phép bạn xem trước các phông chữ đã chọn trong câu, tiêu đề và đoạn văn bằng thanh trượt chọn cỡ chữ. Bạn có thể xem hoạt động của tính năng mới này trong video GitHub này.

(Các) phông chữ đã chọn cũng có sẵn trong Trình chỉnh sửa trang Phong cách toàn cầu (Xuất hiện → Biên tập viên), cụ thể là trong bảng Thiết kế.

Từ đây, điều hướng đến Templates → Chỉ số và nhấp vào màu xanh Chỉnh sửa nút để chỉnh sửa index.html bản mẫu. Chúng tôi muốn mở Phong cách toàn cầu cài đặt, được thể hiện dưới dạng biểu tượng độ tương phản nằm ở phía trên bên phải màn hình. Khi chúng ta bấm vào bản văn cài đặt và mở Font menu trong Phép in bản thạch phần… chúng tôi thấy Inter!

Điều tương tự, nhưng với phông chữ cục bộ

Chúng tôi cũng có thể xem xét việc thêm phông chữ cục bộ vào chủ đề vì plugin Tạo chủ đề khối cung cấp tùy chọn đó. Lợi ích là bạn có thể sử dụng bất kỳ tệp phông chữ nào bạn muốn từ bất kỳ dịch vụ phông chữ nào bạn thích.

Nếu không có plugin, chúng tôi sẽ phải lấy các tệp phông chữ của mình, thả chúng vào một nơi nào đó trong thư mục chủ đề, sau đó sử dụng con đường PHP truyền thống để đưa chúng vào hàng đợi functions.php tài liệu. Nhưng chúng ta có thể để WordPress mang gánh nặng đó cho chúng ta bằng cách tải lên tệp phông chữ trên Thêm phông chữ địa phương màn hình bằng giao diện Tạo chủ đề khối. Khi một tệp được chọn để tải lên, các hộp định nghĩa mặt phông chữ sẽ tự động được điền.

Mặc dù chúng ta có thể sử dụng bất kỳ .ttf, .woff, hoặc là .woff2 tập tin, tôi chỉ cần tải xuống Mở tệp phông chữ Sans từ Google Fonts cho bài tập này. Tôi đã giành được hai biến thể trọng lượng, thông thường và 800.

Quản lý tệp tự động kỳ diệu tương tự và theme.json cập nhật mà chúng tôi đã thấy với tùy chọn Google Fonts lại xảy ra khi chúng tôi tải lên các tệp phông chữ (được thực hiện từng tệp một). Kiểm tra vị trí các phông chữ nằm trong thư mục chủ đề của tôi và cách chúng được thêm vào theme.json:

Xóa phông chữ

Plugin cũng cho phép chúng tôi xóa các tệp phông chữ khỏi chủ đề khối khỏi quản trị viên WordPress. Hãy xóa một trong các biến thể Open Sans mà chúng tôi đã cài đặt trong phần trước để xem nó hoạt động như thế nào.

Nhấp vào Hủy bỏ liên kết sẽ kích hoạt cảnh báo để bạn xác nhận việc xóa. Chúng tôi sẽ nhấp vào OK để tiếp tục.

Hãy mở thư mục chủ đề của chúng tôi và kiểm tra theme.json tài liệu. Chắc chắn rồi, tệp Open Sans 800 mà chúng tôi đã xóa trên màn hình plugin đã xóa tệp phông chữ khỏi thư mục chủ đề và tham chiếu đến nó đã biến mất từ ​​​​lâu theme.json.

Có công việc đang diễn ra

Đang có cuộc thảo luận về việc thêm tính năng “Trình quản lý phông chữ” này vào WordPress Core thay vì cần một plugin riêng biệt.

Một lần lặp lại ban đầu của tính năng có sẵn trong repovà nó sử dụng chính xác cùng một cách tiếp cận mà chúng tôi đã sử dụng trong bài viết này. nó nên được Tuân thủ GDPR, cũng vậy. tính năng là dự kiến ​​​​hạ cánh với WordPress 6.3 phát hành vào cuối năm nay.

Kết thúc

Plugin Tạo chủ đề khối nâng cao đáng kể trải nghiệm người dùng khi xử lý phông chữ trong các chủ đề khối WordPress. Plugin cho phép chúng tôi thêm hoặc xóa bất kỳ phông chữ nào trong khi vẫn tôn trọng các yêu cầu GDPR.

Chúng tôi đã thấy cách chọn Phông chữ Google hoặc tải lên tệp phông chữ cục bộ sẽ tự động đặt phông chữ vào thư mục chủ đề và đăng ký nó trong theme.json tài liệu. Chúng tôi cũng đã thấy cách phông chữ là một tùy chọn khả dụng trong cài đặt Kiểu toàn cầu trong Trình chỉnh sửa trang. Và nếu chúng ta cần xóa phông? Plugin cũng hoàn toàn giải quyết vấn đề đó — mà không cần chạm vào mã hoặc tệp chủ đề.

Cảm ơn vì đã đọc! Nếu bạn có bất kỳ nhận xét hoặc đề xuất nào, hãy chia sẻ chúng trong phần bình luận. Tôi muốn biết suy nghĩ của bạn về hướng khả thi này để quản lý phông chữ trong WordPress.

Tài nguyên bổ sung

Tôi đã dựa vào rất nhiều nghiên cứu để viết bài này và nghĩ rằng tôi sẽ chia sẻ các bài viết và tài nguyên mà tôi đã sử dụng để cung cấp thêm ngữ cảnh cho bạn.

Quản lý phông chữ WordPress

Sự cố GitHub

Yêu cầu GDPR của Châu Âu

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/