Menambah bayang -bayang kotak ke blok dan elemen WordPress

Tambah bayang -bayang kotak dalam fail json tema WordPress 6.1

Baru -baru ini, Ana Segota bertanya di Twitter bagaimana untuk menambah bayang -bayang kotak CSS ke keadaan hover butang dalam fail tema.json tema WordPress. Ini kerana WordPress mahu kita mula menggunakan tema.json dalam tema blok untuk menetapkan gaya asas. Secara tradisinya, kami menggunakan gaya.css dalam tema "kelas" untuk semua gaya. Tetapi dengan pelepasan baru-baru ini tema dua puluh dua puluh tiga (TT3) dengan WordPress 6.1 memindahkan semua gaya untuk tema.json, kita semakin dekat dan lebih dekat untuk dapat melakukan perkara yang sama dalam tema kita sendiri.

Walau bagaimanapun, tema.json masih tidak menyokong banyak sifat CSS dan pemilih. Sebagai contoh, pada masa ini mustahil untuk menggunakan

dan sifat -sifat lain dalam tema.json ke gaya. perspective-origin

bernasib baik, bermula dengan WordPress 6.1, tema.json menyokong atribut

. Berikut adalah cara memohon kotak bayang -bayang dalam tema.json untuk blok tertentu (seperti blok imej yang diketengahkan): box-shadow

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

sintaks warna baru

nampaknya tidak disokong lagi. rgb(0 0 0 / 0.66)

Begitu juga, kita boleh memohon bayang -bayang kotak ke satu "elemen" (seperti butang). Butang itu sendiri adalah blok, tetapi ia juga boleh bersarang di blok lain. Untuk memohon secara global ke kotak bayang -bayang untuk semua butang, anda boleh melakukan perkara berikut dalam tema.json:

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

ana mahu menambah bayangan ke status

butang. Syukurlah, WordPress 6.1 juga menyokong gaya untuk keadaan interaktif unsur-unsur tertentu seperti butang dan pautan menggunakan kelas pseudo (termasuk :hover, :hover, :focus, dan :active). :visited

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

Jika anda menggunakan tema induk, anda boleh mengatasi gaya tema dalam tema kanak -kanak. Kod berikut sepenuhnya meliputi gaya butang TT3:

Lihat kod penuh

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

cara lain ialah menggunakan gaya tersuai, seperti atribut yang ditakrifkan dalam tema PIXL.

Di samping itu, atribut .settings.custom.shadow juga menyokong tema.json dan boleh digunakan untuk butang dan keadaan interaksi mereka.

Semua dalam semua, terdapat banyak cara untuk menetapkan bayang-bayang kotak untuk tema blok di WordPress 6.1, termasuk tetapan yang disokong secara rasmi, kaedah gaya tersuai, dan kaedah untuk menimpa gaya dalam sub-tema. Untuk maklumat lanjut, sila rujuk pautan yang disenaraikan dalam artikel. outline

Atas ialah kandungan terperinci Menambah bayang -bayang kotak ke blok dan elemen WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!