Salta la navigazione

Home » Documentazione di WPML » Progetti correlati » WPML GraphQL – Aggiungi funzionalità multilingue allo schema WPGraphQL

WPML GraphQL – Aggiungi funzionalità multilingue allo schema WPGraphQL

WPML GraphQL estende le funzionalità del plugin WPML GraphQL, rendendolo la soluzione ideale per gli sviluppatori che desiderano creare siti web multilingue utilizzando le tecnologie frontend. Prova la facilità di interrogare e filtrare i contenuti e di recuperare dati e traduzioni specifiche per ogni lingua direttamente dallo schema WPGraphQL.

Funzionalità principali

Estendi WPGraphQL con campi aggiuntivi(lingua, codice lingua, traduzioni) per recuperare dati specifici dal plugin WPML

Filtrare i contenuti dello schema GraphQL di Gatsby

Filtrare i post, i tassonomi e i commenti in base alla lingua

Recuperare i dati linguistici per gli oggetti e i nodi

Interrogare i dati in base a tutte le lingue installate o a lingue specifiche

Funziona con ACF, ACFML e WPGraphQL per i campi personalizzati avanzati

In questa Pagina:

Plugin e configurazioni richieste

Per iniziare, installa e attiva i seguenti plugin:

  • Il plugin principale WPML e il componente aggiuntivo Traduzione di stringhe
  • Plugin WPGraphQL
  • Plugin WPML GraphQL

Se gestisci un sito con ACF o ACF Pro e vuoi esporre i campi multilingue del plugin ACF allo schema WPGraphQL, installalo e attivalo:

Esplorare lo schema WPML GraphQL

WPML GraphQL si integra con WPGraphQL e aggiunge nuovi campi e filtri allo schema WPGraphQL.

Una volta installati i plugin, puoi andare su GraphQL → GraphQL IDE e utilizzare il Query Composer per interrogare e filtrare facilmente i contenuti in diverse lingue. Quindi per esempio:

  • Ottenere informazioni sulla lingua degli oggetti interrogati
  • Ottenere traduzioni per oggetti come tipi di entrata, tassonomie e commenti.
  • Filtro degli oggetti interrogati per lingua

A titolo di esempio, l’immagine sottostante mostra come è possibile recuperare un elenco di tutti i post di un sito WordPress, compresi il codice della lingua, lo slug e l’URI, oltre a informazioni simili per le eventuali traduzioni di ogni post.

Usare i campi della lingua nel Query Composer per recuperare i post in tutte le lingue

Per dimostrare il funzionamento di WPML GraphQL, abbiamo creato un sito con l’inglese come lingua di default e lo spagnolo e l’italiano come lingue secondarie. In questa pagina di documentazione, utilizziamo questo sito di prova per interrogare i post e le traduzioni dei post create da WPML.

Interrogazione delle informazioni sulla lingua e sulla traduzione

WPML GraphQL ti permette di includere i campi della lingua e delle traduzioni nelle tue query. Questo ti permette di lavorare con i nodi e gli elementi in GraphQL per recuperare i dati specifici della lingua e le traduzioni associate.

  • Puoi aggiungere il campo lingua alle query per indicare la lingua dei tipi di contenuto, delle tassonomie e dei commenti. Questa ricerca fornisce informazioni linguistiche complete, come ad esempio:
    • Il codice della lingua
    • URL delle bandiere dei paesi
    • Il nome nativo della lingua
    • Il nome tradotto della lingua
    • L’URL della home page
  • Puoi usare il campo languageCode per raccogliere il codice della lingua per i post, i termini della tassonomia e i commenti, senza richiedere altri dettagli specifici sulla lingua.
  • Puoi utilizzare il campo traduzioni per recuperare le traduzioni dei tipi di contenuto e dei termini della tassonomia.

Qui di seguito puoi vedere un esempio di query per i post che include questi campi.

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
        }
      }
    }
  }
}

L’esecuzione di questa query restituisce informazioni sulla lingua e sulla traduzione per ogni risorsa.

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"
              }
            }
          ]
        }
      ]
    }
  }
}

Filtro della lingua

Il plugin WPML GraphQL è dotato di un filtro per la lingua, che ti permette di affinare le tue query per ottenere i dati esatti sulla lingua che ti interessa.

Puoi usare il filtro lingua per filtrare i post, i termini della tassonomia o i commenti in base a una lingua specifica. Puoi richiedere i nodi di una determinata lingua includendo il filtro lingua nella tua query; puoi anche recuperare tutti gli elementi, indipendentemente dalla lingua, utilizzando il filtro lingua con il valore impostato su tutti.

Ecco un esempio di query che filtra i post in base alla nostra lingua secondaria, lo spagnolo:

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

Come puoi vedere, questa query recupera tutti i post in spagnolo.

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/"
        }
      ]
    }
  }
}

Interrogare i dati delle lingue installate

WPML GraphQL definisce due query che ti permettono di interrogare i dati delle lingue installate sul tuo sito:

  • Una query sulle lingue per ottenere tutte le lingue registrate e i relativi dati per ciascuna di esse.
  • Una query defaultLanguage per ottenere la lingua impostata come default, con i relativi dati.

Questo può essere utile se vuoi, ad esempio, costruire un selettore delle lingue.

Supponiamo di voler interrogare i dati di tutte le lingue installate. A tal fine, eseguiamo la seguente query:

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

La query precedente produce il seguente risultato:

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/"
      }
    ]
  }
}

Utilizzare WPML GraphQL con Gatsby e ACF

Il framework Gatsby ti permette di raccogliere dati da diverse fonti backend, compresi i siti WordPress.

Se il tuo sito WordPress utilizza WP GraphQL, puoi servire i suoi dati a un sito Gatsby. Con WPML GraphQL installato, puoi servire dati in diverse lingue e persino recuperare informazioni sulla lingua.

Per fornire ulteriori funzionalità, WP GraphQL dispone di un add-on per i campi personalizzati avanzati (ACF). Utilizzando questo add-on insieme al plugin ACF Multilingual di WPML, puoi servire sia i dati core che i dati dei campi personalizzati in base ai requisiti linguistici specifici.

Consideriamo un esempio di scenario: Hai un’installazione di Gatsby con il pacchetto add-ongatsby-source-graphql, che recupera i dati da un backend di WordPress. In questo backend di WordPress:

  1. Hai installato WPML con lo spagnolo impostato come lingua secondaria.
  2. Hai installato ACF e hai aggiunto un gruppo di campi (slug postfields) che include un campo di testo (slug subtitle) per i post.
  3. Hai popolato alcuni dati.

Con una semplice query GraphQL, puoi raccogliere questi dati.

Nell’esempio di query che segue, recuperiamo i post dal backend di WordPress in cui la lingua è impostata in inglese. Per ogni post, possiamo accedere al titolo, al codice della lingua e ai dati dei campi ACF, come il sottotitolo. Inoltre, possiamo recuperare le traduzioni dei post, compresi i titoli, i codici linguistici e i dati del campo ACF.

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
            }
          }
        }
      }
    }
  }
`;

Problemi noti

WPML funziona bene con questo plug-in, ma a volte potrebbero verificarsi dei problemi secondari su cui stiamo lavorando. Lo si prevede perché entrambi i plug-in vengono aggiornati frequentemente.

Problemi attuali irrisolti:

È anche possibile cercare tutti i problemi noti, compresi quelli risolti in precedenza per questo plug-in.

Ottenere supporto

Se hai bisogno di aiuto per utilizzare WPML GraphQL con WPGraphQL, visita il nostro forum di supporto.

Documentazione di WPML
Aggiornato
Giugno 6, 2024