Menguruskan fon dalam tema blok WordPress

Reka bentuk laman web bergantung pada tipografi. Tema WordPress sering mengintegrasikan perkhidmatan seperti Google Fonts, dengan mudah diuruskan dalam Customizer untuk tema PHP klasik. Walau bagaimanapun, ini tidak semestinya untuk tema blok. Walaupun integrasi tema klasik didokumentasikan dengan baik, pengurusan fon tema blok tidak mempunyai panduan yang sama. Artikel ini membahas jurang itu. Tema Blok

boleh menggunakan fon Google, tetapi proses pendaftaran berbeza dengan ketara dari kaedah tradisional.

Pengetahuan sedia ada

Sumber untuk mengintegrasikan fon ke dalam tema blok pada mulanya terhad. Dua puluh dua puluh dua, tema berasaskan blok lalai pertama, ditunjukkan menggunakan fail fon yang dimuat turun sebagai aset tema. Ini melibatkan pendaftaran fail dalam

dan menentukan fon yang dibundel dalam functions.php-proses dua langkah yang rumit. theme.json

Tema-tema kemudian, seperti dua puluh dua puluh tiga, memudahkan ini dengan menentukan fon yang dibundel tanpa pendaftaran eksplisit. Walau bagaimanapun, muat turun fon manual dan bundling kekal, menafikan kemudahan fon yang dihoskan yang disajikan melalui CDN.

Perkembangan terkini

Projek Gutenberg, plugin untuk menguji ciri blok dan editor tapak yang akan datang, menawarkan penyelesaian. Matias Benedetto, arkitek utama Gutenberg, diserlahkan menggunakan fon Google (atau mana -mana fon yang dimuat turun) dalam tema blok melalui plugin tema blok.

Belajar WordPress menyediakan gambaran video mengenai plugin ini, yang memudahkan penciptaan tema dengan menawarkan kawalan WordPress UI. Anda boleh membuat keseluruhan tema, tema kanak -kanak, atau variasi gaya tanpa pengekodan atau memodifikasi fail templat. Dikenali dan dikekalkan oleh pasukan WordPress.org, kini merupakan pendekatan terbaik untuk integrasi font Google dalam tema blok. Walau bagaimanapun, perhatikan bahawa ia berada di bawah pembangunan aktif, jadi mengharapkan perubahan.

Sebelum meneroka kaedah baru ini, mari kita semak pendekatan tradisional untuk tema klasik.

Kaedah tradisional

artikel seperti dari Themeshaper (2014) dan Cloudways menggambarkan kaedah klasik. Tema Twenty Seventeen mencontohkan fon Google dalam

: functions.php

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

Pra-menghubungkan font Google:

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

kelemahan kaedah tradisional

Kaedah ini mempunyai kelemahan yang ketara. Ketetapan Mahkamah Jerman 2022 menyerlahkan pelanggaran GDPR kerana pendedahan alamat IP pelawat ketika memupuk fon Google. Isu ini ditangani oleh Plugin Tema Create Block.

menggunakan fon Google dengan tema blok (cara moden)

Pendekatan moden menggunakan plugin tema Buat Blok. Sediakan persekitaran pembangunan tempatan (mis., Menggunakan Flywheel Local) dan pasang data ujian tema dan buat plugin tema blok.

Navigasi ke penampilan → Urus fon tema . Skrin ini menyenaraikan fon yang ditetapkan dan menawarkan pilihan untuk:

• Tambah font Google: menambah fon terus dari API Google Fonts.
• Tambahkan fon tempatan: menambah fail fon yang dimuat naik.

Menggunakan tema kosong (mis., Kosongkan, dinamakan semula untuk kejelasan), menambah font Google (seperti Inter) secara automatik memuat turun dan menyimpannya dalam folder assets/fonts tema, mengemas kini theme.json:

Lihat tema.JSON CODE

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

Font kemudian tersedia dalam gaya global editor laman web.

Menambah fon tempatan berfungsi sama, memudahkan proses berbanding dengan pengubahsuaian

manual. Penyingkiran fon juga dikendalikan dalam antara muka plugin. functions.php

Perkembangan Masa Depan

Ciri "Pengurus Font" dirancang untuk WordPress Core, menawarkan fungsi yang sama.

Kesimpulan

Plugin Tema Create Block menyelaraskan pengurusan font dalam tema blok WordPress, menyediakan penyelesaian yang mesra pengguna dan GDPR. Ia memudahkan menambah, mengeluarkan, dan menguruskan fon tanpa interaksi kod langsung.

bacaan selanjutnya

(senarai sumber tetap sama, diperbaharui untuk kebolehbacaan yang lebih baik)

Pengurusan Font WordPress:

Cara menambah fon tipografi ke tema blok WordPress (pembentuk tema)
Cara Menambah Font Google ke Tema WordPress (Pembentuk Tema)
Bagaimana menggunakan font Google dengan WordPress? (Cloudways)
Urus fon tema blok anda dengan membuat tema blok (belajar WordPress)
Menggunakan Tema Create Block (WordPress.tv)

isu -isu github:

Gaya/Tipografi Global: Menguruskan Set Font (#45271)
Pengurus Font (#46332)

Keperluan GDPR Eropah:

Pemilik laman web Denda Mahkamah Jerman kerana melanggar GDPR dengan menggunakan Font Hosted Google (WPTAVern)
mematuhi GDPR semasa menggunakan font Google (membuat tema WordPress)
Pengguna Pengguna Mahkamah Jerman € 100 dalam ganti rugi terhadap pengendali laman web untuk menggunakan Google Fonts (Blog Eprivacy)
fon bunny (css-tricks)

Atas ialah kandungan terperinci Menguruskan fon dalam tema blok WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!