Menambah sokongan tipografi cecair ke tema blok WordPress

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, %).
WordPress 6.1 membolehkan pengarang tema melaksanakan tipografi cecair yang konsisten tanpa kod tersuai.

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>

kemudian tentukan

dengan

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

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>

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>

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>

Tambahkan Tetapan Saiz Font:

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

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>

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!