Cara Membuat Variasi Gaya Dalam Tema Blok WordPress 6.0

Gaya global, ciri tema blok, adalah salah satu bahagian kegemaran saya untuk membuat tema blok. Konsep variasi gaya global dalam WordPress diperkenalkan di Gutenberg 12.5 yang membolehkan pengarang tema membuat variasi alternatif tema blok dengan kombinasi warna, fon, tipografi, jarak, dan lain -lain.

Panel Global Gaya Global berada dalam lelaran pembangunan aktif. Maklumat lanjut mengenai perkembangan ciri ini boleh didapati dan dikesan di sini di tiket GitHub ini (#35619).

Dalam artikel ini, saya akan berjalan melalui membuat variasi gaya global bukti-konsep menggunakan fail alternatif /styles/theme.json dan membuat tema kanak-kanak dengan mod warna yang berbeza dengan menukar palet warna sahaja.

Jadual Kandungan

• Jadual Kandungan
• Prasyarat
• Variasi gaya global
• Bahagian 1: Membuat Variasi Gaya Tema
• Bahagian 2: Contoh kes penggunaan
• Contoh tema blok dengan variasi gaya tema
• Membungkus
• Sumber

Prasyarat

Artikel ini bertujuan untuk mereka yang mempunyai pemahaman asas tentang tema blok WordPress dan beberapa kebiasaan menggunakan antara muka editor tapak penuh (FSE). Jika anda baru menyekat tema dan FSE, anda boleh memulakan di sini pada trik CSS dengan pengenalan yang mendalam ini kepada tema blok WordPress dan dokumentasi editor tapak. Laman web penyuntingan laman penuh ini adalah salah satu panduan tutorial yang paling terkini untuk mempelajari semua ciri FSE termasuk tema blok dan variasi gaya yang dibincangkan dalam artikel ini.

Variasi gaya global

Untuk beberapa latar belakang, mari kita gambarkan secara ringkas variasi gaya global. Twenty Twenty-Two (TT2) pengarah reka bentuk dan pengarah reka bentuk automatik Kjell Reigstad memperkenalkan variasi gaya global dengan tweet ini dan tiket GitHub #292 sebagai tema kanak-kanak. Dalam tiket, Kjell menyatakan bahawa mereka pada mulanya dimaksudkan sebagai corak warna alternatif dan kombinasi fon, tetapi mereka boleh digunakan untuk membina tema kanak -kanak yang mudah.

Contoh ini dari Kjell menunjukkan bagaimana kombinasi gaya yang berbeza boleh dipilih dari pilihan yang terdapat di bar sisi.

Sejak itu, pasukan tema automattic telah bereksperimen dengan konsep untuk mewujudkan tema kanak -kanak yang berubah -ubah (warna dan fon yang berubah -ubah sahaja), termasuk yang berikut:

• ahli geologi dengan variasi biru, krim, batu tulis, kuning
• Quadrat dengan versi hitam, hijau, merah, putih, dan kuning

Global Style Switcher

Pelepasan Gutenberg 12.5 telah memperkenalkan Switcher Gaya Global yang akan membolehkan pengguna dengan cepat dan mudah beralih antara penampilan yang berbeza dalam tema yang sama melalui tema yang berbeza. Fail -fail yang disimpan di bawah folder A /Styles.

Konsep yang membolehkan menukar variasi gaya global melalui tema.json telah dibincangkan di GitHub untuk seketika sekarang. Jurutera utama Gutenberg Matias Ventura memberikan kepentingan yang diperbaharui dengan menambahkannya kepada Roadmap WordPress 6.0 baru -baru ini.

EMBRACE gaya pengganti yang didorong oleh variasi JSON. Ini digoda dalam pelbagai video di sekitar tema lalai baru dan harus dilancarkan sepenuhnya dan dibentangkan dalam 6.0. Salah satu matlamat selari adalah untuk mewujudkan beberapa variasi TT2 yang berbeza yang dibuat dengan gaya. (35619)

Matias Ventura, "Roadmap awal hingga 6.0"

Penyebaran pembangunan terbaru Variasi Variasi Gaya Tema boleh didapati dengan Gutenberg 13.0 dan dimasukkan ke dalam WordPress 6.0. Dalam video meneroka WordPress 6.0 ini, penghubung produk automatik Anne McCarthy memberikan gambaran keseluruhan ciri -ciri utamanya, termasuk Variasi Gaya dan Webfonts API (bermula 5:18) yang dibincangkan dalam artikel ini.

Variasi gaya tema berbanding tema kanak -kanak

Dalam artikel terdahulu saya, saya secara ringkas meliputi tema kanak -kanak blok bangunan. Variasi gaya global telah mengaburkan garis antara Theme.json dan tema kanak-kanak. Sebagai contoh, satu-satunya perbezaan antara tema kanak-kanak Alante-Dark yang baru-baru ini dan tema induknya adalah fail alternate.json dalam tema kanak-kanak yang mengatasi gaya tema global seperti ini:

Begitu juga, kedua -dua tema kanak -kanak Alara baru -baru ini dalam direktori WordPress - Framboise dan Richmond - hanya berbeza dalam fail tema.json tunggal mereka.

Bahagian 1: Membuat Variasi Gaya Tema

Pada akar folder tema anak anda, buat folder A /Styles, yang memegang variasi gaya sebagai fail JSON. Untuk contoh demo ini, saya mencipta tiga variasi tema Twenty Twenty-Two.

Berikut adalah hasil akhir selepas mengklik ikon gaya dari papan pemuka admin (terletak di penampilan → editor ):

Klik butang Gaya Lain (baru -baru ini disemak semula ke gaya penyemak imbas), yang memaparkan ikon gaya warna "Maroon", dan "Pink" selain gaya asalnya.

Untuk menukar dan memilih gaya, pilih variasi pilihan anda dan klik butang Simpan (atas kanan), yang dipaparkan di hujung depan penyemak imbas anda.

Menambah label ke variasi gaya alternatif dan nama fail dengan kesan animasi hover boleh didapati di Gutenberg 13.0.

Langkah 1: Persediaan dan Pemasangan

Pertama, pasang dan sediakan tapak WordPress dengan beberapa kandungan dummy. Untuk demo ini, saya membuat pemasangan WordPress segar, diaktifkan dua puluh dua tema, dan menambah data ujian Gutenberg.

Variasi gaya tema dan API WebFonts yang dibincangkan dalam artikel ini memerlukan pemasangan dan pengaktifan plugin Gutenberg 13.0 atau WordPress 6.0.

Langkah 2: Buat tema kanak -kanak TT2

Dalam contoh tema kanak -kanak demo ini, mari kita sedikit mengubah warna badan dari warna header dan footer, dengan semua kandungan tapak berpusat:

Langkah 3: Buat fail JSON

Buat /Gaya dalam Folder Root Tema Anak Anda dengan Fail Biru, Maroon, dan Pink.Json:

 __ style.css
__ Tema.json
__ fungsi.php
__ index.php
__ Templat
__ ...
__ Bahagian
__ ...
__ Gaya
__ Blue.json
__ Maroon.json
__ Pink.json

Langkah 4: Buat fail json tema alternatif

Seterusnya, buat fail alternatif-Theme.json anda dengan palet warna yang dikehendaki di bawah /folder Styles. Untuk contoh demo ini, saya mencipta tiga palet warna (biru, maroon, dan merah jambu). Inilah kod untuk maroon.json:

 {
  "Versi": 2,
  "Tajuk": "Maroon",
  "Tetapan": {
    "Warna": {
      "Palet": [
        {"slug": "latar depan", "warna": "#7c290f", "nama": "latar depan"},
        {"slug": "latar belakang", "warna": "#fffff", "name": "latar belakang"},
        {"slug": "latar depan-gelap", "warna": "#000000", "name": "latar depan gelap"},
        {"slug": "latar belakang-badan", "warna": "#ffd8be", "name": "body body"},
        {"slug": "primary", "color": "#000000", "name": "primary"},
        {"slug": "sekunder", "warna": "#ffe2c7", "name": "menengah"},
        {"slug": "tertiary", "color": "#55acee", "name": "tertiary"}
      ]
  },
  "Typography": {}
},
"Gaya": {
  "Warna":
      {
        "Latar Belakang": "Var (-WP-Preset-berwarna-Body-Body)",
        "Teks": "var (-WP-Preset-warna-forground-dark)"
      },
  "Elemen": {
      "pautan": {
        "warna": {"teks": "var (-wp-preset-warna-primary)"}
      }
    }
  }
}

Dua lagi alternatif Blue.json dan Pink.json fail menukar nilai latar depan dan latar belakang, latar depan-gelap dan sifat warna primer dengan nilai warna hex biru dan merah jambu masing-masing.

Bahagian 2: Contoh kes penggunaan

Seperti yang saya nyatakan dalam artikel saya yang terdahulu, saya telah mengusahakan tema blok dan menggunakannya untuk tapak projek peribadi saya sendiri. Diilhamkan oleh Variasi Gaya Tema dan Ciri-ciri API Web

Dalam bahagian ini, saya akan membimbing anda melalui bagaimana saya mencipta blok TT2 Gopher , saudara demo tema blok kerja saya yang dibuat untuk artikel ini. Tema ini termasuk mod maroon, gelap, dan cahaya yang dibuat menggunakan variasi gaya tema dan API Webfonts yang tersedia dengan pelepasan Gutenberg 12.8.

Beberapa sorotan tema TT2 Gopher termasuk paparan kandungan berpusat, satu lajur, header dan footer yang berbeza, arkib yang lebih mesra pengguna dan halaman carian.

Salinan blok TT2 Gopher boleh didapati di repositori GitHub, yang boleh anda lakukan dan menyesuaikan diri.

Membuat Mod Gelap di WordPress

Pertama, beberapa latar belakang pada mod gelap. Mod gelap adalah keutamaan peribadi dan pemaju menawarkan suis togol mod atau mod lain seperti di laman web ini, yang bukan pekerjaan kecil untuk kebanyakan pemaju biasa. Mewujudkan Mod Gelap diliputi dengan baik di sini di CSS-Tricks, termasuk panduan lengkap ini untuk mod gelap dan tipografi mod gelap.

Dalam laman web WordPress, kami boleh menambah togol mod gelap menggunakan plugin Mode WP Dark. Erin Myers dari WP Engine dan WPBeginner menerangkan cara menggunakan plugin WP Dark Mode, manakala Brenda Barron menyenaraikan pilihan plugin Mode Dark yang lain dalam jawatan WPExplorer ini.

Mewujudkan mod gelap dalam tema blok WordPress tanpa plugin melibatkan beberapa langkah. Lebih setahun yang lalu, Ari Stathopoulos mencipta sokongan gelap untuk tema Blok TT1 di GitHub. Melihat contoh di sini, ia melibatkan beberapa pengetahuan JavaScript untuk membuat aset (contohnya, toggler, menyesuaikan, sokongan editor-mod), pembolehubah CSS warna gelap, dan fail fungsi yang diperluas.

Dalam video pendek ini, Anne McCarthy dari Automattic menunjukkan betapa mudahnya untuk mencipta mod gelap tema blok TT2 dengan variasi gaya global dengan menambah coretan JSON KLLEJR dalam folder TT2 /Styles.

Membuat Demo TT2 Gopher Blocks Tema

TT2 Gopher adalah versi yang sangat mudah dan diubahsuai dari dua puluh dua tema lalai. Ia termasuk tiga variasi gaya tema - maroon, gelap, dan putih.

Menggambarkan setiap langkah penyesuaian adalah di luar skop artikel ini, tetapi anda boleh mengetahui lebih lanjut dari pengenalan saya yang mendalam kepada tema blok WordPress serta Buku Panduan Editor Blok di WordPress.org.

Gambaran ringkas mengenai warna tema TT2 Gopher dan kombinasi fon termasuk:

• Mod cahaya
  • Header berwarna putih dan footer mempunyai warna latar belakang badan yang berasap.
  • Buka sans adalah font utama.
• Mod gelap
  • Header dan footer hitam dengan warna gelap yang lebih ringan untuk latar belakang badan.
  • Sumber Serif Pro adalah font utama.
• Mod Maroon
  • Header dan footer adalah kedua -dua warna maroon gelap, dengan latar belakang badan kekuningan yang lebih ringan.
  • Kerja sans adalah font utama.

Biarkan saya secara ringkas memandu anda melalui bagaimana saya mencipta variasi gaya tema.

Menambah dan Mengkonfigurasi Webfonts

Plugin Gutenberg 12.8 memperkenalkan API Webfonts baru yang membolehkan penulis memuat fon tempatan (dibundel) "dalam cara yang mesra, mesra privasi, dan masa depan." Ciri ini boleh dilaksanakan dalam tema blok cara PHP atau tema.json cara.

Pada masa ini ciri ini hanya berfungsi dengan fon yang dibundel dengan tema blok dan tidak menyokong fon host Google kerana kebimbangan privasi. Maklumat lanjut mengenai status semasa pembangunan API WebFonts diliputi dalam artikel Core Buat WordPress ini dan artikel WP Tavern ini.

Langkah 1: Muat turun dan tambahkan fon dalam tema blok

Tema TT2 menambah fail Serif Pro Font ke folder aset/fon tema. Dua fon tambahan - kerja sans dan sans awam - juga disediakan di repositori github.

Langkah 2: Mendaftar Webfonts

Dalam tema TT2, sumber tempatan Serif Pro Webfonts didaftarkan dengan PHP dalam fail functions.phpnya:

 fungsi TwentyTwentyTwo_get_font_face_styles () {
  kembali "
  @font-face {
    font-family: 'Source Serif Pro';
    Font-Weight: 200 900;
    gaya font: normal;
    Font-Stretch: Normal;
    Font-diname: swap;
    src: url ('".
  }
  @font-face {
    font-family: 'Source Serif Pro';
    Font-Weight: 200 900;
    gaya font: italic;
    Font-Stretch: Normal;
    Font-diname: swap;
    src: url ('".
  }
  ";
}

Gutenberg 12.8 memperkenalkan keupayaan untuk mendaftarkan fon web tempatan dengan fail tema.json. Tema berikut. Coretan Json dari Demo TT2 Gopher Tema menunjukkan bagaimana kerja tempatan sans fon web didaftarkan dalam variasi gaya tema maroon:

 "Typography": {
  "Fontfamilies": [
    {
      "fontfamily": "'kerja sans', -apple-system, blinkmacsystemfont, 'Helvetica neue', 'Helvetica', sans-serif",
      "slug": "kerja-sans",
      "Nama": "kerja sans",
      "Fontface": [
        {"fontfamily": "kerja sans", "fontdisplay": "block", "fontweight": "400", "fontstyle": "normal", "fontstretch": "normal", "src": ["file:.
        {"fontfamily": "kerja sans", "fontdisplay": "block", "fontweight": "700", "fontstyle": "normal", "fontstretch": "normal", "src": ["file:.
        {"fontfamily": "kerja sans", "fontdisplay": "block", "fontweight": "400", "fontstyle": "italic", "fontstretch": "normal", "src": ["
        {"fontfamily": "kerja sans", "fontdisplay": "block", "fontweight": "700", "fontstyle": "italic", "fontstretch": "normal", "src": ["
      ]
    }
  ]
}

Maklumat tambahan tentang cara mendaftar dan menggunakan webfonts tempatan dalam tema blok diterangkan dalam tutorial ini dan artikel WP Tavern ini.

Membuat Variasi Gaya Tema

Berikutan langkah -langkah yang diterangkan dalam bahagian sebelumnya, saya mencipta dua versi alternatif tema.json fail - White.json dan Black.json - dengan kombinasi warna dan fon yang berbeza di dalam folder tema /gaya kanak -kanak.

Ciri ini memerlukan versi 2 tema.json. Oleh kerana Gutenberg 12.5, tajuk juga boleh ditambah di tema.json untuk memaparkan label gaya dalam editor tapak atau nama fail (tanpa sambungan) akan dipaparkan secara lalai.

Berikut adalah contoh White.json:

 {
  "Versi": 2,
  "Tajuk": "Putih",
  "Tetapan": {
    "Warna": {
      "Palet": [
        {"slug": "latar depan", "warna": "#000000", "nama": "latar depan"},
        {"slug": "latar belakang", "warna": "#f2f2f2", "name": "latar belakang"},
        {"slug": "header latar belakang", "warna": "#ffffff", "name": "header latar belakang"},
        {"slug": "primary", "color": "#0d0d0d", "name": "primary"},
        {"slug": "sekunder", "warna": "#f0eae6", "name": "menengah"},
        {"slug": "tertiari", "warna": "#eb3425", "name": "tertiary"},
        {"Slug": "Quaternary", "Color": "#7c7e83", "Nama": "Quaternary"}
      ]
    },
    "Typography": {
      "Fontfamilies": [
        {
        "fontfamily": "\" public sans \ ", sans-serif",
        "Nama": "Awam Sans",
        "slug": "awam-sans",
        "Fontface": [
          {"fontfamily": "public sans", "fontdisplay": "block", "fontstyle": "normal", "fontstretch": "normal", "src": ["file: .assets/fonts/publicsans/publicsans-variablefont_wght.ttf.woff2"]
          {"fontfamily": "public sans", "fontdisplay": "block", "fontstyle": "italic", "fontstretch": "normal", "src": ["file:.
        ]
      }
    ]
  }
},
"Gaya": {
  "Blok": {
    "teras/imej": {
      "penapis": {"duotone": "var (-wp-preset-duotone-default-filter)"}
    },
    "Core/Post-Title": {
      "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "700", "fontsize": "var (-wp--custom-typography-font-saiz-gigantic)"}
    },
    "Core/Query-Title": {
      "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "300", "fontsize": "var (-wp--custom-typography-font-saiz-gigantic)"}
    },
    "Imej teras/post-featured": {
      "penapis": {"duotone": "var (-wp-preset-duotone-default-filter)"}
    },
    "Core/Site-Logo": {
      "penapis": {"duotone": "var (-wp-preset-duotone-default-filter)"}
    },
    "Core/Site-Title": {
      "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontsize": "var (-wp-preset-font-saiz-normal)", "fontweight": "normal"}
    }
    },
    "warna": {"latar belakang": "var (-wp-preset-warna-rebor)", "teks": "var (-wp-preset-warna-forground)"},
    "Elemen": {
      "H1": {
        "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "600", "fontsize": "var (-wp--custom-typography-font-saiz-kolossal)"}
      },
      "H2": {
        "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "600", "fontsize": "var (-wp--custom-typography-font-saiz-gigantic)"}
      },
      "H3": {
        "tipografi": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "300", "fontsize": "var (-wp--custom-typography-font-saiz-huge)"}
      },
      "H4": {
        "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "300", "fontsize": "var (-wp-preset-font-saiz--besar)"}
      },
      "H5": {
        "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "700", "textTransform": "grascase", "fontsize": "var (-wp-preset-size-medium)"}
      },
      "H6": {
        "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontweight": "400", "textTransform": "grascase", "fontsize": "var (-wp-preset-size-medium)"}
      },
      "pautan": {
        "warna": {"teks": "var (-wp--custom-color-forground)"}
      }
    },
    "Typography": {"fontfamily": "var (-wp-preset-font-family-public-sans)", "fontsize": "var (-wp-preset-fon-saiz-normal)"}
  }
}

Kod ini menukar palet warna dari tema.json dan juga mendaftarkan dan mentakrifkan fail font sans awam tempatan.

Black.json juga sangat serupa dan menggunakan sumber fon Serif Pro yang didaftarkan dalam fail Functions.php.

Contoh tema blok dengan variasi gaya tema

• Dua puluh dua puluh dua-tema lalai pertama untuk memasukkan variasi gaya. Dikemaskini 1.2 yang dikemas kini dengan WordPress 6.0 termasuk tiga variasi gaya - "biru", "merah jambu", dan "swiss" - membolehkan pengguna dengan cepat menukar antara gaya visual yang berbeza.
• Frost - Tema blok eksperimen dengan variasi gaya tema gelap.
• Alara - mempunyai lebih daripada 100 pemasangan aktif dan termasuk 7 variasi gaya.
• Wabi- yang menguasai laman web Rich Tabor mengandungi 3 varian gaya dan 300 pemasangan aktif.
• Brisky - mempunyai lebih daripada 600 pemasangan dan satu variasi gaya tema gelap.
• Loket - Tema oleh pasukan tema automatik yang sedang dibangunkan di GitHub mengandungi 3 variasi gaya tema.

Dalam artikel WP Tavern ini, Justin membuat spekulasi bahawa ciri baru ini boleh digunakan oleh penulis tema dengan mengikat ke tetapan pelawat laman web, sementara sesetengah pengguna mungkin lebih suka tweak laman web mereka memberikan rupa reka bentuk bermusim atau berasaskan acara. Ini mungkin sedikit awal, tetapi hanya masa yang akan memberitahu bagaimana ciri kuat ini akan digunakan oleh kedua -dua penulis dan pengguna tema.

Membungkus

Mewujudkan variasi gaya tema blok dengan tipografi dan kombinasi warna yang berbeza telah dipermudahkan, tanpa menggunakan plugin. Ini adalah salah satu ciri kegemaran saya dari editor blok yang saya merancang untuk memohon dalam projek peribadi saya.

Pada pendapat saya, variasi gaya tema pasti penukar permainan untuk tema blok dan dengan ciri berguna ini mungkin tidak memerlukan tema kanak-kanak atau banyak tema blok pemotong masak. Beberapa tema blok asas yang direka dengan baik, sama seperti blok-canvas pasukan tema automatik atau blokbase (tema blok asas kerja di GitHub), boleh disesuaikan dengan variasi gaya tema.

Sumber

• Pratetap Gaya Global (Buku Panduan Editor Blok)
• Benarkan menukar Variasi Gaya Global #35619 (GitHub)
• Tambahkan versi awal Enjin Gaya #37978 (GitHub)
• Variasi gaya global, "kulit" untuk tema, telah mendarat di Gutenberg (WP Tavern)
• Switcher Gaya Global (Critterverse.blog)
• Panel Gaya Global: Mengetepikan pada butang "Layari Gaya" #40478 (GitHub)
• Melihat Variasi Gaya Global yang akan datang Twenty Twenty Twenty (WP Tavern)
• Meneroka WordPress 6.0: Variasi Gaya, Blok Mengunci UI, Menulis Penambahbaikan (Anne McCarthy - Video)
• Apa yang Baru di WordPress 6.0: Blok Baru, Beralih Gaya, dan banyak lagi (Aleksandar Savkovic - Cloudways)

Mod gelap

• Beri mata rehat, tambahkan mod gelap ke laman WordPress anda (Erin Myers)
• Panduan Lengkap untuk Mod Gelap di Web (Adhuham)
• Katakan anda akan menulis catatan blog mengenai Dark Mode (Chris Coyier)

Atas ialah kandungan terperinci Cara Membuat Variasi Gaya Dalam Tema Blok WordPress 6.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!