Menambah sokongan tipografi cecair ke tema blok WordPress-tutorial css-php.cn

Menambah sokongan tipografi cecair ke tema blok WordPress

Jennifer Aniston

Lepaskan： 2025-03-10 10:59:08

asal

534 orang telah melayarinya

Adding Fluid Typography Support to WordPress Block Themes

tipografi cecair secara dinamik menyesuaikan sifat font (saiz, ketinggian garis) berdasarkan saiz viewport, meningkatkan respons. Juga dikenali sebagai tipografi responsif, jenis fleksibel, atau tipografi bersaiz viewport, ia menawarkan pengalaman pengguna yang unggul. Artikel ini memberi tumpuan kepada melaksanakan tipografi cecair di WordPress 6.1, memanfaatkan ciri editor blok terbina dalamnya.

Walaupun hanya menambah fungsi

untuk clamp() mencipta teks cecair, integrasi editor blok benar memerlukan pendekatan yang berbeza. style.css

sokongan tipografi cecair gutenberg

Banyak pemaju tema WordPress telah menggunakan

dalam tema mereka, termasuk tema blok seperti dua puluh dua puluh dua dan dua puluh tiga. Walau bagaimanapun, Gutenberg (editor blok WordPress) memperkenalkan sokongan tipografi cecair dalam versi 13.8, yang membolehkan pelaksanaan peringkat tema untuk aplikasi langsung dalam editor blok. Fungsi ini menjadi sebahagian daripada teras WordPress dalam versi 6.1. clamp()

Rich Tabor, penyumbang utama, menyoroti kuasa dan kesederhanaan ciri. Pendekatan ini memberi tumpuan kepada sokongan peringkat blok, secara dinamik menggunakan saiz fon cecair secara lalai. Manfaat termasuk:

pelaksanaan pengarang tema yang dipermudahkan.

aplikasi yang boleh dipelihara dan boleh diguna semula untuk elemen/blok tertentu.
fleksibiliti dalam unit saiz fon (PX, REM, EM, %).

blok dengan tetapan tipografi dan jarak

Gutenberg 14.1 (16 September 2022) Menambah tetapan tipografi ke pelbagai blok, menyediakan kawalan fon dan jarak terus dalam editor blok. Fungsi yang diperluaskan ini disepadukan ke WordPress 6.1.

Melaksanakan tipografi cecair dalam tema blok WordPress

tipografi cecair dilaksanakan melalui

, fail konfigurasi tema blok. Pertimbangkan fon besar, dengan

dan theme.json. Fungsi contentSize: 768px dalam CSS boleh: widesize: 1600px clamp()

WordPress 6.1 menyokong unit REM, EM, dan PX. Walau bagaimanapun, ciri jenis cecair baru menawarkan pendekatan yang lebih mudah. Dayakan tipografi bendalir:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

Salin selepas log masuk

kemudian tentukan

dengan

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

Salin selepas log masuk

untuk nilai min dan maksimum:

fontSizes fluidSize Ini menambah jenis cecair ke saiz fon "besar" (2.25rem hingga 3rem). Fon "besar" kemudiannya boleh digunakan untuk mana -mana blok dengan tetapan fon.

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

Salin selepas log masuk

WordPress Convert

sifat ke CSS:

theme.json digunakan untuk elemen seperti

tags. Kalkulator dalam talian boleh membantu dalam menentukan

<code>.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}</code>

Salin selepas log masuk

nilai.

<p></p> Contoh clamp()

Arahan ujian terperinci boleh didapati dalam permintaan tarik github yang berkaitan.

Contoh 1: Menetapkan tetapan fon cecair baru

Pastikan Gutenberg (13.8) atau WordPress 6.1 digunakan. Dayakan jenis cecair dalam theme.json:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

Salin selepas log masuk

Tambahkan Tetapan Saiz Font:

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

Salin selepas log masuk

Gunakan "normal" dalam editor blok dan sahkan markup depan dan CSS.

Contoh 2: Tidak termasuk tetapan fon dari jenis bendalir

Dayakan jenis cecair seperti dahulu. Tentukan saiz fon, melumpuhkan jenis cecair untuk satu:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

Salin selepas log masuk

WordPress menjana CSS dengan sewajarnya, tidak termasuk tetapan "tambahan besar" dari pelarasan jenis bendalir. Sahkan markup depan dan CSS.

blok tema dengan sokongan tipografi cecair

Banyak tema menggunakan clamp() untuk jenis cecair. Beberapa tema baru yang dikeluarkan menyokong ciri tipografi cecair baru.

Maklum Balas Komuniti

Ciri tipografi Fluid WordPress telah menerima maklum balas positif dari komuniti pemaju, menonjolkan manfaatnya untuk kedua -dua pemaju dan pengguna kandungan. Sesetengah pemaju mencadangkan membuat aspek tertentu opt-in dan bukannya lalai.

Kesimpulan

Ciri tipografi cecair WordPress secara aktif dibangunkan. Walaupun kini boleh digunakan, penulis tema perlu meneruskan dengan berhati -hati, memantau isu -isu github yang relevan. Banyak sumber memberikan maklumat lanjut mengenai tipografi cecair dan pelaksanaannya di WordPress.

Atas ialah kandungan terperinci Menambah sokongan tipografi cecair ke tema blok WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!