Mengelola Font di Tema Blok WordPress | Trik CSS – Beragampengetahuan

Font adalah fitur yang menentukan dari setiap desain situs web. Ini termasuk tema WordPress, di mana pengembang tema sering mengintegrasikan layanan seperti Google Fonts ke dalam pengaturan Penyesuai WordPress dari tema berbasis PHP “klasik”. Tidak demikian halnya dengan tema blok WordPress. Sementara mengintegrasikan Google Fonts ke dalam tema klasik didokumentasikan dengan baik, saat ini tidak ada dalam manual tema WordPress yang tersedia untuk tema blok.

Itulah yang akan kita lihat di artikel ini. Blokir tema berfungsi dengan Google Fonts, tetapi proses untuk mendaftarkannya sangat berbeda dari yang biasa Anda lakukan di tema klasik.

apa yang sudah kita ketahui

Seperti yang saya katakan, kami memiliki sangat sedikit untuk melanjutkan dalam hal memulai. Tema Twenty-Twenty-Two adalah tema WordPress berbasis blok default pertama yang menunjukkan bagaimana kita dapat menggunakan file font yang diunduh sebagai aset dalam tema.Tapi itu sangat rumit karena melibatkan beberapa langkah: (1) masuk functions.php file dan (2) tentukan font yang dibundel di theme.json dokumen.

Namun, sejak rilis Twenty Two, prosesnya menjadi lebih mudah. Sekarang dimungkinkan untuk menentukan font yang dibundel tanpa mendaftarkannya, seperti yang ditunjukkan oleh tema dua puluh tiga. Namun, proses ini tetap mengharuskan kita mengunduh file font secara manual dan menggabungkannya ke dalam tema. Ini adalah penghalang yang mengalahkan tujuan memiliki font yang sederhana, disematkan, dan dihosting yang disajikan pada CDN cepat.

apa yang baru

Jika Anda belum tahu, Project Gutenberg adalah plugin eksperimental di mana fitur yang dikembangkan untuk blok WordPress dan editor situs tersedia untuk akses dan pengujian awal. Dalam artikel Pembentuk Tema baru-baru ini, Matias Ventura, Arsitek Utama untuk Proyek Gutenberg, membahas cara menambahkan Google Font (atau font unduhan lainnya) ke tema blok menggunakan plugin Buat Tema Blok.

Video singkat tentang Belajar WordPress ini memberikan ikhtisar bagus tentang plugin Buat Tema Blok dan cara kerjanya. Tapi yang paling penting, itu melakukan apa yang tertulis di toples: itu membuat tema blok. Tapi itu dilakukan dengan menyediakan kontrol di dalam UI WordPress yang memungkinkan Anda membuat seluruh tema, subtema, atau variasi gaya tema tanpa menulis kode apa pun atau harus menyentuh file template.

Saya mencoba! Karena Buat Blok Tema ditulis dan dikelola oleh tim WordPress.org, menurut saya ini adalah arah terbaik bagi kami untuk mengintegrasikan Google Fonts ke dalam tema. Karena itu, perlu dicatat bahwa plugin sedang dalam pengembangan aktif. Ini berarti banyak hal dapat berubah dengan sangat cepat.

Sebelum kita masuk ke cara kerjanya, mari tinjau secara singkat proses “tradisional” untuk menambahkan Google Fonts ke tema WordPress klasik.

bagaimana hal itu dilakukan di masa lalu

Artikel ThemeShaper dari tahun 2014 ini memberikan contoh yang baik tentang bagaimana kami biasa melakukan ini dalam tema PHP klasik, seperti halnya artikel Cloudways yang lebih baru oleh Ibad Ur Rehman.

Untuk menyegarkan ingatan kita, berikut adalah contoh dari tema default Twenty 17 yang menunjukkan cara kerja Google Fonts functions.php dokumen.

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, ' );
  }
  return esc_url_raw( $fonts_url );
}

Kemudian Google Fonts ditautkan sebelumnya ke tema seperti ini:

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

apa yang salah dengan cara tradisional

Hebat, bukan? Namun, ada halangan. Pada Januari 2022, pengadilan distrik Jerman mendenda pemilik situs web karena melanggar persyaratan GDPR Eropa. pertanyaan? Mengantri Google Fonts di situs web membahayakan privasi pengguna dengan memaparkan alamat IP pengunjung. beragampengetahuan membahas ini beberapa waktu lalu.

Plugin Create Block Theme memenuhi persyaratan privasi GDPR karena menggunakan Google Fonts API hanya sebagai proxy untuk penyedia lokal. Font ini disajikan kepada pengguna di situs web yang sama, bukan di server Google, sehingga melindungi privasi. WP Tavern membahas putusan pengadilan Jerman dan menyertakan tautan ke pedoman untuk menghosting sendiri Google Fonts.

Cara Menggunakan Font Google di Blok Tema

Ini membawa kita ke cara “modern” menggunakan Google Fonts dengan tema blok WordPress hari ini. Pertama, mari siapkan situs pengujian lokal. Saya menggunakan aplikasi asli Flywheel untuk pengembangan lokal. Anda dapat menggunakannya atau apa pun yang Anda suka, lalu gunakan plugin Theme Test Data dari Tim Tema WordPress untuk menangani konten dummy. Tentu saja, Anda juga membutuhkan plugin Create Block Theme.

Sudahkah Anda menginstal dan mengaktifkan plugin ini?Jika demikian, silakan arahkan ke penampilan → Kelola font tema Dari menu Admin WordPress.

Layar Kelola Font Tema menampilkan daftar font apa pun yang telah ditentukan dalam tema theme.json dokumen. Ada dua opsi lagi di bagian atas layar:

• Menambahkan Google Font. Opsi ini menambahkan Google Fonts langsung ke tema dari Google Fonts API.
• Tambahkan font lokal. Opsi ini menambahkan file font yang diunduh ke tema.

Saya menggunakan tema yang benar-benar kosong untuk WordPress bernama Emptytheme. Anda dipersilakan untuk menggunakan tema Anda sendiri, tetapi saya ingin menunjukkan bahwa saya mengganti nama Emptytheme menjadi “EMPTY-BLANK” dan memodifikasinya sehingga tidak ada font dan gaya yang telah ditentukan sama sekali.

Saya pikir saya akan membagikan tangkapan layar dari struktur file tema saya dan theme.json file untuk menunjukkan bahwa sebenarnya tidak ada gaya atau konfigurasi yang terjadi.

Mari klik tombol “Tambahkan Font Google”. Ini akan membawa kita ke halaman baru dengan opsi untuk memilih font apa pun yang tersedia dari Google Fonts API saat ini.

Untuk demonstrasi ini, saya memilih Inter Milan Dari menu Opsi, dan pilih Bobot 300, Normal, dan 900 dari layar pratinjau:

Setelah menyimpan pilihan, gaya font Inter yang saya pilih secara otomatis diunduh dan disimpan di tema assets/fonts map:

Perhatikan juga bagaimana pilihan ini ditulis secara otomatis theme.json file dalam tangkapan layar ini. Plugin Create Block Theme bahkan menambahkan jalur ke file font.

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

Jika kita pergi ke layar utama Buat Tema Blok dan klik Kelola font tema Tekan tombol lagi dan kita akan melihat varian berat Inter 300, 400 (reguler), dan 900 di panel pratinjau.

Kotak pratinjau teks presentasi di bagian atas bahkan memungkinkan Anda untuk mempratinjau font yang dipilih dalam kalimat, judul, dan paragraf menggunakan penggeser pemilihan ukuran font. Anda dapat melihat fitur baru ini beraksi di video GitHub ini.

Font yang dipilih juga tersedia di editor situs gaya global (penampilan → sunting), terutama di panel Desain.

Dari sini, arahkan ke templat → indeks lalu klik yang berwarna biru sunting edit tombol index.html templat.kami ingin membuka gaya global Pengaturan, direpresentasikan sebagai ikon kontras yang terletak di sudut kanan atas layar.saat kita klik teks atur dan buka font menu di penyusunan huruf Bagian… kita lihat Inter Milan!

Hal yang sama, tetapi dengan font lokal

Kami mungkin juga mempertimbangkan untuk menambahkan font lokal ke tema, karena plugin Create Block Theme menyediakan opsi itu. Keuntungannya adalah Anda dapat menggunakan file font apa pun dari layanan font apa pun yang Anda suka.

Tanpa plugin, kita harus mengambil file font kita, menempatkannya di suatu tempat di folder tema, dan kemudian beralih ke rute PHP tradisional, memasukkannya ke dalam functions.php dokumen.Tapi kita bisa memberi tahu WordPress untuk mengunggah file font ke Tambahkan font lokal Layar menggunakan antarmuka buat blok tema. Setelah memilih file untuk diunggah, kotak definisi font diisi secara otomatis.

Padahal kita bisa menggunakan apapun .ttf, .woffatau .woff2 file, untuk latihan ini saya baru saja mengunduh file font Open Sans dari Google Fonts. Saya melakukan dua perubahan berat badan, reguler dan 800.

Manajemen file ajaib otomatis yang sama dan theme.json Saat kami mengunggah file font (satu per satu), pembaruan opsi Google Fonts yang kami lihat terjadi lagi.Lihat di mana font berada di folder tema saya dan bagaimana font ditambahkan theme.json:

hapus font

Plugin ini juga memungkinkan kita untuk menghapus file font dari tema blok di admin WordPress. Mari hapus salah satu varian Open Sans yang kita pasang di bagian sebelumnya dan lihat cara kerjanya.

klik menghapuskan Tautan memicu peringatan bagi Anda untuk mengonfirmasi penghapusan.kita akan klik OKE Lanjutkan.

Mari buka folder tema kita dan periksa theme.json dokumen.Benar saja, file Open Sans 800 yang kami hapus di layar plugin menghapus file font dari folder tema, dan referensi untuk itu sudah lama hilang theme.json.

pekerjaan sedang berlangsung

Ada pembicaraan untuk menambahkan fungsionalitas “pengelola font” ini ke inti WordPress daripada memerlukan plugin terpisah.

Iterasi awal fitur tersedia di repo, dan menggunakan pendekatan yang sama persis seperti yang kami gunakan di artikel ini. Itu juga harus sesuai dengan GDPR. Fitur ini dijadwalkan untuk dikirimkan dengan WordPress 6.3 akhir tahun ini.

bungkus

Plugin Create Block Theme secara signifikan meningkatkan pengalaman pengguna saat berhadapan dengan font di tema blok WordPress. Plugin ini memungkinkan kami untuk menambah atau menghapus font apa pun sambil mematuhi persyaratan GDPR.

Kami melihat cara memilih font Google atau mengunggah file font lokal untuk menempatkan font secara otomatis di folder tema dan mendaftarkannya theme.json dokumen. Kami juga melihat bagaimana font merupakan opsi yang tersedia dalam pengaturan gaya global di editor situs. Bagaimana jika kita perlu menghapus font? Plugin juga menanganinya sepenuhnya – tidak perlu menyentuh file tema atau kode.

Terima kasih sudah membaca! Jika Anda memiliki komentar atau saran, silakan bagikan di komentar. Saya tertarik untuk mengetahui pendapat Anda tentang kemungkinan arah manajemen font WordPress ini.

sumber daya tambahan

Saya mengandalkan banyak penelitian untuk menulis artikel ini dan berpikir saya harus membagikan artikel dan sumber daya yang saya gunakan untuk memberi Anda lebih banyak informasi latar belakang.

Manajemen font WordPress

Masalah GitHub

Persyaratan GDPR Eropa