WPML GraphQL - Mehrsprachiges WPGraphQL für Headless-WordPress

Inhalte pro Sprache von Ihrem Frontend abfragen

Jede WPGraphQL-Abfrage erhält ein language-Argument. Filtern Sie Beiträge, benutzerdefinierte Beitragstypen, Taxonomie-Begriffe, Menüs, Menüelemente und Kommentare nach Sprache in einem einzigen Feld – kein Filtern nach der Abfrage im Frontend, keine Verdoppelung des Anfragevolumens, kein Erraten der Sprache.

query PostsES {
  posts(where: { language: "es" }) {
    nodes { slug uri title }
  }
}

Wenn Sie einen Knoten auf der obersten Ebene nach Sprache filtern, folgen verbundene Elemente (Kategorien, Schlagwörter, benutzerdefinierte Taxonomien) automatisch derselben Sprache. Die Ergebnisse sind konsistent, ohne dass zusätzliche Argumente pro verschachteltem Feld erforderlich sind.

Möchten Sie alles unabhängig von der Sprache für eine Sitemap oder eine Gesamtzählung? Übergeben Sie language: "all".

Jede Übersetzung eines Knotens in einer einzigen Abfrage abrufen

Das Feld translations bei Beiträgen und Taxonomie-Begriffen gibt jede anderssprachige Version eines Knotens zurück: Slug, URI, Sprachcode und alle verschachtelten Felder, die Sie anfordern. Eine Abfrage, ein Roundtrip, jede Sprachversion einer Seite.

Das sind die Daten, die Sie für einen Sprachumschalter benötigen, der neben dem eigentlichen Seiteninhalt gerendert wird, ohne dass das Frontend einer Kette verwandter Abfragen folgen muss.

Mehrsprachige Menüs, Taxonomien, Kommentare und Sprachdaten

Über Beiträge hinaus erweitert WPML GraphQL dasselbe language-Argument und die Übersetzungsbehandlung auf:

Menüs und Menüelemente. menus(where: { language: "fr" }) und menuItems(where: { language: "fr" }) für die Navigation pro Sprache.
Taxonomie-Begriffe. Kategorien, Schlagwörter und benutzerdefinierte Taxonomien folgen standardmäßig der Sprache ihres Beitrags und können direkt pro Sprache abgefragt werden.
Kommentare. Geben Sie Kommentare zurück, die mit Beiträgen in einer bestimmten Sprache verknüpft sind.
languages- und defaultLanguage-Abfragen. Listen Sie jede auf der Website installierte Sprache mit Code, Gebietsschema, muttersprachlichem Namen, URL der Länderflagge und Home-URL auf. Das richtige Datenformat für einen benutzerdefinierten Sprachumschalter.

Einen bestimmten Beitrag nach ID oder Slug in einer beliebigen Sprache abfragen

Zwei Abfrageformen rufen einen einzelnen übersetzten Beitrag anhand seines sprachspezifischen Identifikators ab:

query PostBySlug {
  post(id: "hola-mundo", idType: SLUG) {
    title slug uri
  }
}

query PostById {
  post(id: "2", idType: DATABASE_ID) {
    title slug uri
  }
}

Beide Formen geben den übersetzten Beitrag mit seinem übersetzten Titel, Slug und URI zurück – ohne separate „Ist dies eine Übersetzung?“-Logik im Frontend.

Für die aktuelle WPGraphQL-Version gepflegt

Wir haben WPML GraphQL 5.2.0 mit WPGraphQL 2.24.1 und WPGraphQL for ACF 3.0.0 getestet. Das Team, das WPGraphQL pflegt, arbeitet mit uns zusammen, sodass sich die mehrsprachige Ebene mit dem Schema weiterentwickelt. Wenn WPGraphQL eine neue Version veröffentlicht, zieht WPML GraphQL direkt nach.

Funktioniert mit ACF, wenn Sie ACFML und WPGraphQL for ACF hinzufügen

Viele Headless-Websites erstellen ihr Inhaltsmodell in Advanced Custom Fields und stellen es über WPGraphQL bereit. Fügen Sie ACFML und WPGraphQL for ACF hinzu, und Ihre ACF-Daten folgen denselben Sprachregeln wie der Rest des Schemas.

Eine ACF-Optionsseite in einer beliebigen Sprache abfragen

Optionsseiten befinden sich außerhalb jedes Beitrags, daher nehmen sie ein eigenes language-Argument an. Unterfelder innerhalb von Repeatern und flexiblen Inhalten werden ebenfalls in dieser Sprache zurückgegeben. Die folgende Abfrage liest den Repeater offices und das flexible Inhaltsfeld promos. Seit WPGraphQL for ACF 3.0.0 ist eine Optionsseite nur dann im Schema enthalten, wenn Sie show_in_graphql dafür aktivieren.

query StoreSettingsES {
  storeSettings(language: "es") {
    storeContact {
      heading
      offices { city openingHours }
      promos {
        ... on StoreContactPromosBannerLayout { bannerText }
      }
    }
  }
}

Beziehungsfelder geben den übersetzten Beitrag zurück

ACF-Felder bei Beiträgen und benutzerdefinierten Beitragstypen nehmen kein eigenes language-Argument an. Sie folgen der Sprache der Anfrage. In der folgenden Abfrage legt where: { language: "es" } diese Sprache für die gesamte Abfrage fest.

Ein Beziehungsfeld, das auf Kopieren gesetzt ist, enthält bereits übersetzte IDs. Wenn WPML das Feld in die Übersetzung kopiert, tauscht ACFML jede ID gegen ihre Übersetzung aus. Es behält die ursprüngliche ID bei, wenn die Übersetzung noch nicht existiert. Sie legen diese Einstellung pro Feld im ACF-Feldgruppen-Editor unter Übersetzungseinstellungen fest. Siehe Relationale Felder in unserem Leitfaden zur Übersetzung von benutzerdefinierten ACF-Feldern.

query BlendsES {
  posts(where: { language: "es" }) {
    nodes {
      title
      postExtras {
        relatedGuide {
          nodes { ... on Post { title languageCode } }
        }
      }
    }
  }
}

Der spanische Beitrag gibt den spanischen Leitfaden zurück.

Legen Sie die Sprache bei jeder Anfrage fest. Eine Abfrage, die einen Beitrag nach ID oder Slug liest, enthält keinen language-Filter. Sie wird dann in der Standardsprache ausgeführt, und die verwandten Beiträge werden ebenfalls in der Standardsprache zurückgegeben.

Wie Sie die Sprache festlegen, hängt von Ihrem Sprach-URL-Format in WPML ab. Bei einer Domain pro Sprache rufen Sie den Endpunkt dieser Sprache auf: https://es.example.com/graphql. Beim Sprachparameter fügen Sie ihn dem Endpunkt hinzu: /graphql?lang=es. Das Verzeichnisformat hat keinen Endpunkt pro Sprache, filtern Sie also innerhalb der Abfrage nach Sprache.

Wenn eine Übersetzung fehlt

WPML greift nicht auf die Standardsprache zurück. Wenn ein verwandter Beitrag keine Übersetzung in der Sprache der Anfrage hat, fällt er aus dem Ergebnis heraus:

{
  "data": {
    "posts": {
      "nodes": [
        {
          "title": "Nuestras mezclas de la casa",
          "postExtras": {
            "relatedGuide": {
              "nodes": [
                { "title": "Guía de compra de espresso", "languageCode": "es" }
              ]
            }
          }
        }
      ]
    }
  }
}

Das Feld verweist auf zwei Leitfäden. Nur einer davon ist ins Spanische übersetzt, daher gibt die spanische Abfrage einen zurück. Ihr Frontend erhält eine kürzere Liste, niemals eine Mischung aus Sprachen. Übersetzen Sie den fehlenden Beitrag und er erscheint in derselben Abfrage.

Die Liste bleibt in einer Sprache, wenn der Beitragstyp übersetzbar ist. Wenn Sie den Beitragstyp auf Als übersetzt anzeigen setzen, gibt WPML den unübersetzten Leitfaden in der Standardsprache zurück. Die Liste mischt dann die Sprachen.

WPML GraphQL – Mehrsprachiges WPGraphQL für Headless-WordPress