Mehrsprachige Inhalte mit WPGraphQL abfragen – Sprachfilterung und Übersetzungen

Vor dem Start

Installieren und aktivieren Sie diese Plugins:

• WPGraphQL (das Open-Source-Plugin des WPGraphQL-Projekts).
• WPML und die WPML String-Übersetzung.
• WPML GraphQL (das Add-on, das auf dieser Seite behandelt wird).

Wenn Sie auch Advanced Custom Fields verwenden:

• Advanced Custom Fields Multilingual (ACFML).
• WPGraphQL for Advanced Custom Fields (vom WPGraphQL-Projekt).

Ihre Ausgangsinhalte müssen in WPML übersetzt werden, bevor die unten stehenden Abfragen etwas zurückgeben können. Wenn Alles automatisch übersetzen aktiviert ist (die Standardeinstellung in WPML 5), werden Übersetzungen im Hintergrund erstellt, während Sie Inhalte veröffentlichen. Für eine manuelle Einrichtung senden Sie Inhalte unter WPML > Übersetzungen > Dashboard zur Übersetzung. Die übersetzten Beiträge und Begriffe sind das, was die unten stehenden GraphQL-Abfragen filtern und zurückgeben.

Die GraphQL-IDE – Wo Sie Abfragen testen können

WPGraphQL fügt dem WordPress-Admin-Bereich einen Bildschirm GraphQL > GraphQL IDE hinzu. Der Query Composer der IDE listet jedes verfügbare Feld auf, einschließlich des Arguments language und des Feldes translations von WPML, und führt Abfragen gegen Ihre Live-Website aus. Testen Sie Abfragen dort, bevor Sie sie in Ihr Frontend-Framework einbinden.

Inhalte pro Sprache abfragen

Fügen Sie where: { language: "<code>" } zu jeder Listenabfrage hinzu: Beiträge, benutzerdefinierte Beitragstypen, Taxonomie-Begriffe, Menüs, Menüpunkte, Kommentare. Der Sprachcode ist derselbe Code, den WPML überall verwendet (en, es, fr, pt-pt und so weiter). Übergeben Sie language: "all", um Inhalte aus allen Sprachen gleichzeitig zurückzugeben.

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

Wenn ein Knoten der obersten Ebene nach Sprache gefiltert wird, folgen verbundene Elemente (Kategorien, Schlagwörter, benutzerdefinierte Taxonomien) automatisch derselben Sprache. Die obige Abfrage gibt Beiträge auf Spanisch mit Kategorien auf Spanisch zurück, es sind keine zusätzlichen Argumente erforderlich.

Jede Übersetzung eines Knotens in einer Abfrage abrufen

Fügen Sie das Feld translations zu jeder Beitrags- oder Taxonomie-Abfrage hinzu, um die anderssprachigen Versionen des Knotens in derselben Payload zurückzugeben:

query PostsWithTranslations {
  posts(where: { language: "en" }) {
    nodes {
      slug
      uri
      language { code }
      translations {
        slug
        uri
        language { code }
      }
    }
  }
}

Jeder Beitrag wird mit seinen englischen Feldern sowie einem Array seiner anderssprachigen Slugs und URIs zurückgegeben. Das ist die Struktur, die ein neben dem Seiteninhalt gerenderter Sprachumschalter verwendet: eine Anfrage, jede Alternative, zu der der Besucher wechseln kann.

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

Um einen einzelnen übersetzten Beitrag direkt abzurufen (anhand seines übersetzten Slugs oder der Datenbank-ID), verwenden Sie die Singular-Abfrage post mit idType:

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

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

Beide Abfragen geben den übersetzten Beitrag (Titel, Slug, URI) ohne weitere Filterung im Frontend zurück.

Mehrsprachige Menüs

Fragen Sie Menüs und Menüpunkte pro Sprache mit demselben Argument language ab:

query NavES {
  menu(language: "es", id: "primary", idType: SLUG) {
    menuItems {
      nodes {
        label
        url
        path
      }
    }
  }
}

label und url jedes Menüpunkts werden in der abgefragten Sprache zurückgegeben. Menüpunkte, die auf übersetzte Beiträge verlinken, werden automatisch in die übersetzte URI aufgelöst. Diese Unterstützung wurde in WPML GraphQL 1.1.0 hinzugefügt.

Installierte Sprachen – Für einen Sprachumschalter

Für einen globalen Sprachumschalter (unabhängig von einem einzelnen Beitrag) verwenden Sie die Abfragen languages und defaultLanguage, um jede Sprache auf der Website aufzulisten:

query SiteLanguages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
  defaultLanguage {
    code
    native_name
  }
}

Gibt einen Knoten pro aktiver Sprache mit der Flaggen-URL, dem nativen Namen, dem übersetzten Namen und der Start-URL der Sprache zurück. Das sind genug Daten, um einen Sprachumschalter mit Flagge und Beschriftung zu rendern, ohne die Sprachenliste fest im Code einprogrammieren zu müssen.

Benutzerdefinierte ACF-Felder pro Sprache abfragen

Wenn ACFML und WPGraphQL for ACF aktiv sind, folgen ACF-Felder in Beiträgen und benutzerdefinierten Beitragstypen automatisch der Sprache des Host-Beitrags. Es ist kein zusätzliches Argument erforderlich. Für ACF-Optionsseiten, die nicht an einen einzelnen Beitrag gebunden sind, fügen Sie der Abfrage der Optionsseite das Argument language hinzu:

query Settings {
  myOptionPage(language: "de") {
    addressFieldGroup {
      addressTitle
      repeaterAddressDetails { addressDetails }
    }
  }
}

Das Argument erwartet einen Sprachcode, der mit einer der aktiven Sprachen Ihrer Website übereinstimmt.

Bekannte Einschränkungen und Problemumgehungen

• Autor- und Benutzer-Metadaten geben keine übersetzten Werte zurück. Wenn Sie Autoren-Biografien pro Sprache anzeigen, speichern Sie die übersetzte Biografie in einem ACF-Feld des Benutzers und fragen Sie stattdessen dieses Feld ab.
• Übersetzte URIs in einigen Abfragestrukturen. Wenn Sie einen übersetzten Beitrag über die URI (contentNode(id: "/de/some-slug/", idType: URI)) abrufen, überprüfen Sie, ob die zurückgegebene URI mit der in der Sprache veröffentlichten übereinstimmt – einige Abfragestrukturen geben inkonsistente Pfade zurück. Testen Sie dies in der GraphQL-IDE, bevor Sie es in das Routing einbinden.
• ACF-Optionsseiten ohne das Argument language fallen auf die Standardsprache zurück. Übergeben Sie bei Abfragen von Optionsseiten auf mehrsprachigen Websites immer language.

Wenn Sie auf ein hier nicht aufgeführtes Integrationsproblem stoßen, kümmert sich das WPML-Support-Team rund um die Uhr um die WPML-Seite des WPGraphQL-Stacks.