Un guide simple pour intégrer des documents Google Drive dans WordPress

WordPress est le système de gestion de contenu (CMS) numéro un sur la planète. Google Drive est une solution de stockage cloud leader du moteur de recherche numéro un sur la planète. Compte tenu de cela, il est logique que vous souhaitiez intégrer des documents Google Drive dans WordPress. La bonne nouvelle est qu'il existe plusieurs façons de le faire.

Google a un moyen fonctionnel d'intégrer des documents de Google Drive dans votre site Web WordPress, mais il y a quelques inconvénients. Au lieu de cela, vous voudrez envisager un plugin dédié, tel que Google Drive Embedder. Cela vous donne plus de flexibilité et vous aide à adapter le flux de travail et l'approche aux besoins de votre site.

Dans cet article, nous allons vous donner un guide simple pour intégrer des documents Google Drive dans WordPress. Avant cela, parlons de la façon dont WordPress fonctionne avec Google Docs prêt à l'emploi.

Comment WordPress et Google Docs fonctionnent ensemble

Google Docs et WordPress entretiennent une relation difficile depuis un certain temps. Les entreprises s'entendent bien, mais pas le CMS et la suite de publication assistée par ordinateur. En effet, Google Docs en particulier souffre du même type de problèmes que Microsoft Word : un formatage personnalisé sous le capot.

En surface, la tâche d'obtenir une copie de votre Google Doc dans WordPress devrait être simple. Copiez le contenu et collez-le dans WordPress. Cependant, cela ne fonctionne pas souvent comme vous l'espérez lorsque vous utilisez l'éditeur classique ou certains constructeurs de pages tiers.

En effet, du code HTML caché est utilisé pour formater le texte dans Google Docs et WordPress ne sait pas quoi faire avec les balises supplémentaires.

Google Docs à l'éditeur classique

Par exemple, nous avons un document que nous aimerions importer dans notre site Web WordPress :

Le processus simple consiste à copier et coller le contenu dans WordPress, ce qui, dans l'éditeur visuel, semble correct :

Cependant, si vous jetez un coup d'œil à l'éditeur de texte, vous remarquerez quelques balises supplémentaires :

Pour vos propres documents, vous pouvez constater qu'il y a plus de balises que cela ou pas du tout. L'incohérence est un autre facteur dans la relation entre Google Docs et WordPress.

Dans la plupart des cas, vous souhaiterez rechercher et supprimer les balises suivantes :

•   . Il s'agit d'une balise HTML pour désigner un espace insécable.
• balises <span> . Ce sont des balises HTML "fourre-tout" qui vous permettent d'ajouter des éléments de style (et autres) aux blocs de HTML.
• Listez les éléments (<li>) avec un attribut aria-level=”1” . Il s'agit d'un attribut d'accessibilité qui, en soi, ne signifie pas grand-chose, c'est pourquoi nous pouvons les supprimer dans ce cas.

Comme nous avons vu WordPress évoluer, certaines de ces balises supplémentaires sont supprimées lors de l'entrée dans la plate-forme.

Google Docs à l'éditeur de blocs

L'éditeur de blocs fait un excellent travail d'analyse des informations Google Doc, avec un minimum de vos commentaires.

Même ainsi, le processus de transfert ne conservera pas toutes vos modifications. Par exemple, les en-têtes ne se rendront pas à WordPress, vous devrez donc les parcourir et les définir à nouveau.

Un élément de l'éditeur de blocs que peu de gens connaissent est la fonction d'importation d'images. Par exemple, nous avons une image dans notre document qui doit entrer dans WordPress :

Si vous effectuez un simple copier-coller, tout se présente comme prévu :

Le titre devra être défini et l'image devra bien sûr être alignée. Cependant, l'image ne fait pas encore partie de votre médiathèque. Si vous passez la souris sur l'image et cliquez sur le bouton Télécharger une image externe, cela effectuera une importation :

C'est une bonne étape pour aider les utilisateurs à intégrer Google Docs dans WordPress, mais ce n'est pas parfait. Jusque-là, vous voudrez trouver une meilleure façon de ne pas éroder votre temps.

Pourquoi intégrer des documents Google Drive dans WordPress est une bonne idée

Dans la plupart des cas, vous voudrez écrire du contenu WordPress dans un éditeur natif (ou l'éditeur de votre constructeur de page préféré, bien sûr). Cependant, il existe de nombreuses raisons pour lesquelles vous voudriez travailler dans Google Drive et intégrer ce document dans WordPress :

• Vous aurez plus de sécurité potentielle pour votre dossier. Nous ne voulons pas dire dans un sens malveillant, car WordPress est stable et solide. Dans ce cas, nous parlons du stockage basé sur le cloud de Google Drive. Avoir votre fichier ici signifie qu'il est sauvegardé et en sécurité.
• Vous pouvez annoter votre document comme s'il s'agissait d'une "liste de tâches dynamique". Cela signifie que vous pouvez collaborer avec d'autres personnes dans le document, mais également l'intégrer dans WordPress en même temps. C'est un moyen efficace et rapide de mettre votre travail en ligne.
• En parlant de cela, les aspects collaboratifs des documents Google Drive signifient que plusieurs membres de l'équipe peuvent y travailler en même temps. Avec WordPress, vous avez des restrictions sur le nombre de membres de l'équipe dans un article ou une page à la fois (souvent un).

De plus, vous pouvez conserver toute votre mise en forme et votre style à partir de Google Doc, sans avoir à travailler dans les éditeurs de code WordPress. Le temps que vous gagnez ici peut être consacré à d'autres aspects importants de votre site.

Comment intégrer des documents Google Drive dans WordPress sans plugin

La bonne nouvelle est que vous n'avez pas besoin de beaucoup pour intégrer des documents Google Drive dans WordPress. En fait, tout ce dont vous aurez besoin se trouve dans le menu Fichier > Publier sur le Web de votre fichier de document Google :

Cliquez dessus pour afficher une boîte de dialogue qui vous permet de choisir entre un lien et un code d'intégration. Nous voudrons ce dernier. Si vous cliquez sur l'onglet Intégrer , puis sur le bouton Publier , une boîte de dialogue de confirmation s'affiche :

Lorsque vous cliquez pour confirmer, cela affichera un extrait de code HTML que vous voudrez copier et coller dans WordPress :

Dans votre éditeur WordPress, vous souhaiterez accéder à l'éditeur de code à partir du menu Plus d'actions sur le côté droit :

Sur cet écran, trouvez le bon endroit pour votre intégration et collez le code dans :

De là, quittez l'éditeur de code en utilisant le lien sur le côté droit, et vous verrez l'intégration. Vous remarquerez également que le document utilise un bloc classique, bien que vous puissiez utiliser le bouton Convertir en blocs pour faire le nécessaire :

Pourtant, il y a quelques inconvénients à cette approche, malgré sa simplicité. Discutons-en maintenant.

Les inconvénients de l'intégration de documents Google Drive sans plugin

Bien que l'approche d'intégration directe soit correcte, il y a quelques mises en garde et aspects à noter concernant l'expérience :

• Vous êtes limité dans la façon dont vous pouvez présenter votre document. Pour la plupart des Docs, Sheets et autres, il n'y a aucun moyen d'adapter la visionneuse à vos besoins sans code supplémentaire.
• Le formatage et le style par défaut des documents Google Drive signifient que vous devrez toujours travailler avec des paramètres pour "homogénéiser" votre document.
• Outre les limitations de présentation de votre document Google, vous devez également travailler avec le code si vous souhaitez le placer dans une autre partie de la page. Cela peut être un processus simple, mais peut être un obstacle lors de la conception de votre page.

Il y a aussi un autre problème qui pourrait vous affecter de manière imprévue. Au cours de nos tests, nous avons rencontré des cas où l'on nous a refusé la possibilité d'intégrer le document Google. Alors que l'iFrame s'affichait correctement, notre contenu a été remplacé par une notification "Conditions d'utilisation" :

Nos recherches suggèrent qu'il existe un filtre de copyright quelconque qui analyse un document à la recherche de toute violation. Dans notre cas, le texte provenait de la page Politique de confidentialité de WordPress, mais le filtre ne le savait pas.

En tant que tel, il se peut qu'en fonction de votre document, vous ne puissiez peut-être pas intégrer le contenu malgré tout.

Présentation du plug-in Google Drive Embedder

Pour profiter d'une meilleure expérience lors de l'intégration de documents Google Drive, il faudra vous tourner vers une solution dédiée. Le plugin Google Drive Embedder est une solution unique pour intégrer presque n'importe quel document Google Drive sur votre site :

Vous pouvez accéder à vos documents via une boîte de dialogue contextuelle et configurer un accès personnalisé. Par exemple, vous pouvez utiliser une visionneuse interactive en lecture seule pour afficher des documents et également proposer un lien menant à une version modifiable. De plus, vous pouvez également proposer ces fichiers en téléchargement.

Bien que le plugin se concentre sur les intégrations Google Drive, ce n'est pas toute l'histoire. Vous pouvez également afficher un certain nombre d'autres types de fichiers. Cela signifie que si vous avez des documents Microsoft Word, des fichiers ZIP, des vidéos, des images, des PDF, etc., vous avez la possibilité de tous les intégrer.

La bonne nouvelle est que le plugin principal est gratuit. Cependant, il y a plus de fonctionnalités disponibles dans la version premium. Par exemple, vous bénéficiez d'une intégration plus étroite avec Google Drive, avec la possibilité de parcourir des dossiers spécifiques tels que les dossiers Partagé avec moi et Favoris . En parlant de cela, vous pouvez également intégrer des dossiers dans votre site.

Quoi qu'il en soit, la version gratuite du plugin est complète et simple à utiliser. Voyons maintenant comment vous lancer avec le plugin.

Comment intégrer Google Drive dans WordPress à l'aide du plugin Google Drive Embedder (en 3 étapes)

Il y a trois étapes entre vous et un document Google Drive intégré. Votre première tâche consiste à configurer deux plugins dans WordPress. Nous allons d'abord les examiner tour à tour.

1. Installez et activez le plugin de connexion Google Apps

Pour utiliser Google Drive Embedder, vous devez également installer le plug-in Google Apps Login :

C'est un plugin crucial pour aider les utilisateurs existants à se connecter à Google avec une authentification sécurisée. De plus, si vous êtes connecté à Gmail, vous n'aurez pas besoin de saisir à nouveau ces informations pour accéder aux fichiers. En tant que tel, il est nécessaire.

Le processus est simple, surtout si vous le faites depuis l'écran Plugins > Ajouter un nouveau dans WordPress :

Ici, utilisez la barre de recherche pour trouver le plug-in Google Apps Login, puis cliquez sur le bouton Installer maintenant :

Après quelques instants, vous verrez le bouton se transformer en Activer . Vous pouvez cliquer à nouveau dessus, à quel point vous reviendrez à l'écran principal des plugins .

Avant de poursuivre, rendez-vous sur l'écran Paramètres > Connexion à Google Apps :

Avant que le plugin ne fonctionne, il y a quelques tâches à accomplir ici. Vous devez lier Google Drive à votre compte WordPress via un identifiant client et un secret client dédiés. La bonne nouvelle est qu'il y a un lien vers les instructions complètes en haut de l'écran des paramètres. En tant que tel, nous ne couvrirons pas ces détails ici.

Lorsque vous êtes prêt, vous pouvez commencer à installer le plugin Google Drive Embedder.

2. Installez et activez le plugin Google Drive Embedder

Le processus pour ce plugin est similaire à Google Apps Login. La seule différence est que vous chercherez Google Drive Embedder à la place :

Encore une fois, cliquez sur Installer maintenant , puis sur Activer , et WordPress installera le plugin sur votre système. Avec la version gratuite de Google Drive Embedder, aucune configuration supplémentaire n'est nécessaire ! Cependant, si vous effectuez une mise à niveau vers la version premium, vous pouvez trouver tous les paramètres sous l'écran Paramètres > Google Drive Embedder .

3. Intégrez vos documents Google Drive dans WordPress

La dernière étape consiste à intégrer votre document dans WordPress. Pour ce faire, rendez-vous sur n'importe quel article ou page et cherchez à ajouter un nouveau bloc à votre contenu. Vous recherchez le Google Drive Embedder Block :

Une fois que vous l'avez ajouté à votre mise en page, jetez un œil au menu des paramètres de bloc dans la barre latérale de droite. Cela vous permettra de choisir votre document Google Drive :

À partir de là, vous verrez une boîte de dialogue pour vous aider à choisir votre document :

[IMAGE google-file-dialog]

Notez que la première fois que vous y accédez, vous devrez peut-être authentifier l'accès auprès de Google, bien que ce processus soit similaire à d'autres processus d'authentification :

Lorsque vous avez effectué cette opération, vous verrez une liste de vos documents Google Drive dans la boîte de dialogue contextuelle :

Une fois que vous avez choisi votre document, vous avez accès aux trois boutons radio sous la boîte de dialogue de sélection :

Ils sont tous intuitifs et rapides à utiliser ; les options Incorporer le document vous permettent de définir la largeur et la hauteur de l'incorporation, tandis que le lien Fichier de la visionneuse vous permet d'ouvrir le fichier dans une nouvelle fenêtre et d'afficher une icône. Le bouton radio Télécharger le lien du fichier vous permettra de définir des options permettant aux utilisateurs de télécharger votre fichier si ce document n'est pas un document natif de Google.

Une fois que vous avez cliqué sur le bouton Insérer un fichier, vous verrez l'espace réservé du shortcode qui se trouve sur la mise à jour de l'écran. Si vous prévisualisez la page à partir d'ici, vous verrez à quoi ressemble votre intégration. À partir de ce moment, les utilisateurs pourront interagir avec le document sur le front-end de votre site.

Conclusion

Google propose une suite d'applications exceptionnelles qui vous permettent de créer des documents texte, des feuilles de calcul, etc. Si vous êtes propriétaire d'un site WordPress, il est tentant de vouloir combiner les deux. Heureusement, cela est bien dans le domaine du possible.

Bien que vous ne souhaitiez peut-être pas vous fier à la fonctionnalité d'intégration native de Google Drive, vous souhaiterez utiliser un plug-in tel que Google Drive Embedder. Cela vous permet d'intégrer des documents Google Drive presque n'importe où sur la page. De plus, vous disposez d'options de personnalisation pour que le spectateur et l'expérience soient les vôtres.

Avez-vous besoin d'intégrer des documents Google Drive, et ce plugin vous aidera-t-il ? Partagez vos pensées dans la section des commentaires ci-dessous!