Navigation überspringen

Home » WPML-Dokumentation » Verwandte Projekte » WPML GraphQL – Mehrsprachige Funktionalität zum WPGraphQL Schema hinzufügen

WPML GraphQL – Mehrsprachige Funktionalität zum WPGraphQL Schema hinzufügen

WPML GraphQL erweitert die Möglichkeiten des WPGraphQL Plugins und ist damit die ideale Lösung für Entwickler, die mehrsprachige Websites mit Frontend-Technologien erstellen wollen. Erlebe, wie einfach es ist, Inhalte abzufragen und zu filtern und sprachspezifische Daten und Übersetzungen direkt aus dem WPGraphQL-Schema abzurufen.

Wichtigste Funktionen

Erweitern Sie WPGraphQL um zusätzliche Felder(Sprache, Sprachcode, Übersetzungen), um bestimmte Daten aus dem WPML Plugin abzurufen

Inhalte innerhalb des Gatsby GraphQL-Schemas filtern

Beiträge, Taxonomien und Kommentare nach Sprache filtern

Abrufen von Sprachdaten für Objekte und Knotenpunkte

Abfrage von Daten basierend auf allen installierten Sprachen oder bestimmten Sprachen

Arbeitet mit ACF, ACFML und WPGraphQL für erweiterte, maßgeschneiderte Felder

Auf dieser Seite:

Erforderliche Plugins und Einrichtung

Um loszulegen, installiere und aktiviere die folgenden Plugins:

Wenn du eine Website mit ACF oder ACF Pro betreibst und mehrsprachige Felder aus dem ACF Plugin in das WPGraphQL Schema einbinden möchtest, installiere und aktiviere es:

Erkundung des WPML GraphQL Schemas

WPML GraphQL integriert sich mit WPGraphQL und fügt neue Felder und Filter zum WPGraphQL-Schema hinzu.

Sobald du die Plugins installiert hast, kannst du zu GraphQL → GraphQL IDE gehen und den Query Composer verwenden, um Inhalte in verschiedenen Sprachen einfach abzufragen und zu filtern. Dies beinhaltet:

  • Informationen über die Sprache der abgefragten Objekte erhalten
  • Erhalte Übersetzungen für Objekte wie Inhaltstypen, Taxonomien und Kommentare.
  • Filterung der abgefragten Objekte nach Sprache

Das folgende Beispiel zeigt, wie du eine Liste aller Beiträge auf einer WordPress Website abrufen kannst, einschließlich ihres Sprachcodes, Slugs und URIs sowie ähnlicher Informationen für alle Übersetzungen der einzelnen Beiträge.

Sprachfelder im Query Composer verwenden, um Beiträge in allen Sprachen abzurufen

Um zu zeigen, wie WPML GraphQL funktioniert, haben wir eine Website mit Englisch als Standardsprache und Spanisch und Italienisch als Zweitsprachen eingerichtet. Auf dieser Dokumentations-Seite verwenden wir diese Website, um die Beiträge und die von WPML erstellten Übersetzungen der Beiträge abzufragen.

Abfrage von Sprach- und Übersetzungsinformationen

Mit WPML GraphQL kannst du Felder für Sprache und Übersetzungen in deine Abfrage aufnehmen. Mit kannst du mit Knoten und Elementen in GraphQL arbeiten, um sprachspezifische Daten und zugehörige Übersetzungen abzurufen.

  • Sie können das Feld Sprache zu Abfragen hinzufügen, um die Sprache von Beitragstypen, Taxonomien und Kommentaren anzugeben. Diese Abfrage liefert umfangreiche Sprachinformationen, wie zum Beispiel:
    • Der Sprachcode
    • Länderflaggen URLs
    • Der einheimische Name der Sprache
    • Der übersetzte Name der Sprache
    • Die URL der Startseite
  • Du kannst das Feld languageCode verwenden, um den Sprachcode für Beiträge, Taxonomie-Begriffe und Kommentare zu erfassen, ohne weitere sprachspezifische Details abzufragen.
  • Sie können das Feld Übersetzungen verwenden, um Übersetzungen von Beitragstypen und Taxonomie-Begriffen abzurufen.

Unten siehst du ein Beispiel für eine Abfrage nach Beiträgen, die diese Felder enthält.

WPML GraphQL query for posts using the language and translations fields 
query Posts{
  posts(where: {language: "en"}) {
    nodes {
      slug
      uri
      language {
        code
      }
      translations {
        slug
        uri
        language {
          code
        }
      }
    }
  }
}

Wenn du diese Abfrage ausführst, erhältst du Sprach- und Übersetzungsinformationen für jede Ressource.

WPML GraphQL outcome of the query for posts using the language and translations fields 
{
  "data": {
    "posts": {
      "nodes": [
        {
          "slug": "bye-world",
          "uri": "/bye-world/",
          "language": {
            "code": "en"
          },
          "translations": [
            {
              "slug": "adios-mundo",
              "uri": "/es/adios-mundo/",
              "language": {
                "code": "es"
              }
            },
            {
              "slug": "addio-mondo",
              "uri": "/it/addio-mondo/",
              "language": {
                "code": "it"
              }
            }
          ]
        },
        {
          "slug": "hello-world",
          "uri": "/hello-world/",
          "language": {
            "code": "en"
          },
          "translations": [
            {
              "slug": "hola-mundo",
              "uri": "/es/hola-mundo/",
              "language": {
                "code": "es"
              }
            },
            {
              "slug": "ciao-mondo",
              "uri": "/it/ciao-mondo/",
              "language": {
                "code": "it"
              }
            }
          ]
        }
      ]
    }
  }
}

Sprache filtern

Das WPML GraphQL Plugin ist mit einem Sprachfilter ausgestattet, mit dem du deine Abfragen verfeinern kannst, um genau die Sprachdaten zu erhalten, an denen du interessiert bist.

Du kannst den Sprachfilter verwenden, um Beiträge, Taxonomie-Begriffe oder Kommentare nach einer bestimmten Sprache zu filtern. Sie können Knoten einer bestimmten Sprache abfragen, indem Sie den Sprachfilter in Ihre Abfrage einbeziehen, und Sie können auch alle Elemente abrufen, unabhängig von der Sprache, indem Sie den Sprachfilter mit dem Wert all verwenden .

Hier ist eine Beispielabfrage, die Beiträge nach unserer zweiten Sprache, Spanisch, filtert:

WPML GraphQL query using the language filter 
query PostsES{
  posts(where: {language: "es"}) {
    nodes {
      slug
      uri
    }
  }
}

Wie du siehst, werden mit dieser Abfrage alle Beiträge auf Spanisch gefunden.

WPML GraphQL outcome of the query using the language filter 
{
  "data": {
    "posts": {
      "nodes": [
        {
          "slug": "adois-mundo",
          "uri": "/es/adios-mundo/"
        },
        {
          "slug": "hola-mundo",
          "uri": "/es/hola-mundo/"
        }
      ]
    }
  }
}

Abfrage von Daten aus installierten Sprachen

WPML GraphQL definiert zwei Abfragen, mit denen du Daten aus den auf deiner Website installierten Sprachen abfragen kannst:

  • Eine Sprachabfrage, um alle registrierten Sprachen zusammen mit den relevanten Daten für jede von ihnen zu erhalten.
  • Eine defaultLanguage-Abfrage, um die Sprache, die als Standardsprache festgelegt wurde, zusammen mit den entsprechenden Daten zu erhalten.

Das kann nützlich sein, wenn du z.B. einen Sprachumschalter bauen willst.

Nehmen wir an, wir wollen Daten für alle installierten Sprachen abfragen. Zu diesem Zweck führen wir die folgende Abfrage durch:

WPML GraphQL query to get all registered languages 
query Languages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
}

Die obige Abfrage ergibt das folgende Ergebnis:

WPML GraphQL outcome of the query to get all registered languages 
{
  "data": {
    "languages": [
      {
        "code": "en",
        "country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/en.svg",
        "default_locale": "en_US",
        "native_name": "English",
        "translated_name": "English",
        "url": "http://site.com"
      },
      {
        "code": "es",
        "country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/es.svg",
        "default_locale": "es_ES",
        "native_name": "Español",
        "translated_name": "Spanish",
        "url": "http://site.com/es/"
      },
      {
        "code": "it",
        "country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/it.svg",
        "default_locale": "it_IT",
        "native_name": "Italiano",
        "translated_name": "Italian",
        "url": "http://site.com/it/"
      }
    ]
  }
}

WPML GraphQL mit Gatsby und ACF verwenden

Mit dem Gatsby-Framework kannst du Daten aus verschiedenen Backend-Quellen sammeln, auch von WordPress Websites.

Wenn deine WordPress Website WP GraphQL verwendet, kannst du ihre Daten an eine Gatsby Website senden. Wenn WPML GraphQL installiert ist, kannst du Daten in verschiedenen Sprachen bereitstellen und sogar Sprachinformationen abrufen.

Um zusätzliche Funktionen bereitzustellen, verfügt WP GraphQL über ein Add-on für Advanced Custom Fields (ACF). Wenn du dieses Add-on zusammen mit dem ACF Multilingual Plugin von WPML verwendest, kannst du sowohl Kerndaten als auch maßgeschneiderte Felder auf der Grundlage bestimmter Sprachanforderungen bereitstellen.

Lassen Sie uns ein Beispielszenario betrachten: Sie haben eine Gatsby-Installation mit dem Add-on-Paketgatsby-source-graphql, das Daten aus einem WordPress Backend abruft. In diesem WordPress Backend:

  1. Du hast WPML installiert und Spanisch als zweite Sprache eingestellt.
  2. Du hast ACF installiert und eine Feldgruppe (Slug postfields) hinzugefügt, die ein Textfeld (Slug subtitle) für Beiträge enthält.
  3. Du hast einige Daten ausgefüllt.

Mit einer einfachen GraphQL-Abfrage kannst du diese Daten sammeln.

In der Beispielabfrage unten rufen wir Beiträge aus dem WordPress Backend ab, bei denen die Sprache auf Englisch eingestellt ist. Für jeden Beitrag können wir auf den Titel, den Sprachcode und die Daten der ACF-Felder, wie z.B. den Untertitel, zugreifen. Außerdem können wir die Übersetzungen der Beiträge abrufen, einschließlich ihrer Titel, Sprachcodes und ACF-Felddaten.

WPML GraphQL example query for language-specific information and ACF field data 
export const doQuery = graphql`
  {
    wordpress {
      posts(where: {language: "en"}) {
        nodes {
          title
          language {
            code
          }
          postfields{
            subtitle
          }
          translations {
            title
            language {
              code
            }
            postfields{
              subtitle
            }
          }
        }
      }
    }
  }
`;

Bekannte Probleme

WPML funktioniert gut mit diesem Plugin, es könnte aber manchmal kleinere Probleme geben, an denen wir bereits arbeiten. Dies ist zu erwarten, da beide Plugins häufige Updates bereitstellen.

Aktuell noch ungelöste Probleme:

Sie können auch alle bekannten Probleme durchsuchen, einschließlich bereits gelöste Probleme für dieses Plugin.

Unterstützung erhalten

Wenn du Hilfe bei der Verwendung von WPML GraphQL mit WPGraphQL brauchst, besuche bitte unser Support-Forum.

WPML-Dokumentation
Kathy Banach
Aktualisiert
Juni 6, 2024