Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Fügen Sie Box Shadows in WordPress 6.1 Theme JSON -Datei

hinzu

Kürzlich fragte Ana Segota auf Twitter, wie man dem Schwebstatus der Schaltfläche in der Datei thema.json eines WordPress -Themas einen CSS -Box -Schatten hinzufügt. Dies liegt daran, dass WordPress möchte, dass wir mit themen.json in Blockthemen beginnen, um grundlegende Stile festzulegen. Traditionell verwenden wir Style.css im Thema "Klasse" für alle Stile. Aber mit der jüngsten Veröffentlichung des Standard-Tt3-Themas mit WordPress 6.1, der sein gesamtes Styling auf thema.json migriert, kommen wir uns immer näher daran, dasselbe in unseren eigenen Themen zu tun.

thema.json unterstützt jedoch immer noch nicht viele CSS -Eigenschaften und -Sektoren. Zum Beispiel ist es derzeit unmöglich, perspective-origin und andere Eigenschaften in thema.json zum Stil zu verwenden.

Zum Glück unterstützt themen.json das box-shadow Attribut. Hier erfahren Sie, wie Sie Box Shadowing in thema.json für einen bestimmten Block anwenden (z. B. Bildblock):

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

Neue Farbsyntax rgb(0 0 0 / 0.66) scheint noch nicht unterstützt zu werden.

In ähnlicher Weise können wir Boxschatten auf ein einzelnes "Element" (wie z. B. Schaltflächen) anwenden. Ein Knopf selbst ist ein Block, kann aber auch in einem anderen Block verschachtelt werden. Um weltweit auf Boxschatten für alle Schaltflächen anzuwenden, können Sie Folgendes in thema machen.json:

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

Ana möchte dem Status :hover den Schaltstein hinzufügen. Zum Glück unterstützt WordPress 6.1 auch Stile für den interaktiven Zustand bestimmter Elemente wie Schaltflächen und Links unter Verwendung von Pseudoklassen (einschließlich :hover, :focus, :active und :visited).

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

Wenn Sie ein übergeordnetes Thema verwenden, können Sie den Themenstil im Kinderthema überschreiben. Der folgende Code deckt den Schaltflächenstil von TT3 vollständig ab:

Zeigen Sie den vollständigen Code

an

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

Eine andere Möglichkeit besteht darin, benutzerdefinierte Stile zu verwenden, wie das in einem Pixl -Thema definierte .settings.custom.shadow -attribut.

Außerdem unterstützt das outline Attribut auch themen.json und kann auf Schaltflächen und deren Interaktionszustände angewendet werden.

Insgesamt gibt es viele Möglichkeiten, den Box-Schatten für Blockthemen in WordPress 6.1 zu setzen, einschließlich offiziell unterstützter Einstellungen, benutzerdefinierten Stilmethoden und Methoden, um Stile in Unterthemen zu überschreiben. Weitere Informationen finden Sie in den im Artikel aufgeführten Links.

Das obige ist der detaillierte Inhalt vonHinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!