Mur social 
Analyse des flux 
Hier, ton fil d'actualité affichait correctement tes publications. Aujourd'hui, ça ne semble pas fonctionner correctement.
Peut-être que les colonnes se sont fondues en une seule. Peut-être que vos images semblent écrasées ou étirées. Peut-être que l'espacement a disparu, ou que l'ensemble s'affiche sans mise en forme pendant une seconde avant de se remettre en place. Votre contenu s'affiche toujours. Mais l'affichage n'est pas correct, surtout sur mobile.
Si vous rencontrez ce problème, ne vous inquiétez pas. Il ne s'agit presque jamais d'un véritable bug. C'est un problème de paramètres, et vous pouvez le résoudre sans toucher à une seule ligne de code, même si vous n'êtes pas développeur.
Une fois que vous avez identifié la cause correspondant à votre symptôme, la solution se résume souvent à un simple clic.
Voyons donc comment faire correspondre ce que vous voyez au paramètre qui permet de corriger le problème. Nous allons aborder les colonnes, l'espacement et l'affichage sur mobile dans cet ordre, afin que vous puissiez d'abord modifier le paramètre correspondant et passer directement au CSS dont vous n'avez probablement pas besoin.
- Pourquoi mon fil d'actualité semble-t-il défectueux ou sans mise en page ? (Réponse rapide)
- Identifiez la cause de votre symptôme (Commencez ici)
- Définir le nombre de colonnes et leur espacement
- Résoudre les problèmes de mise en page spécifiques aux appareils mobiles
- Lorsque votre thème remplace la mise en forme du flux
- Résolvez le problème grâce à la solution pour le chargement des thèmes AJAX
- Des modifications CSS personnalisées sans risque qui n'endommageront pas votre thème
- Un flux qui correspond vraiment à votre site
Pourquoi mon fil d'actualité semble-t-il défectueux ou sans mise en page ? (Réponse rapide)
Votre flux ne présente pas de dysfonctionnement. Il s'agit presque toujours d'un problème lié à l'un des trois paramètres suivants.
- La mise en page n'a jamais été adaptée à l'espace disponible. Le nombre de colonnes et l'espacement restent ceux par défaut, ce qui fait que les articles s'entassent ou s'affaissent.
- Votre thème remplace les styles du flux. Le CSS de votre thème prend le dessus, et le flux perd l'apparence prévue.
- Un conflit lors du chargement des thèmes empêche l'application des styles. C'est ce qui provoque l'effet « affichage instantané sans style, puis mise en place immédiate ».
Voici ce qui est rassurant : vous pouvez configurer ces paramètres directement dans les paramètres du flux lui-même, et la plupart des utilisateurs n'ont jamais besoin de modifier une feuille de style. Aucune connaissance en programmation n'est requise.
Identifiez la cause de votre symptôme (Commencez ici)
Avant de changer quoi que ce soit, mettez des mots sur ce que vous voyez.
Chaque problème de mise en page a une cause la plus probable. Identifiez le symptôme correspondant, et vous passerez directement à la seule solution qui compte.
Voici les causes les plus courantes, classées par ordre de priorité.
| Ce que vous voyez | Cause la plus probable | Où aller ? |
|---|---|---|
| Trop ou pas assez de colonnes, espacement trop serré | Les paramètres de mise en page n'ont pas été modifiés | Définir le nombre de colonnes et leur espacement |
| Ça s'affiche correctement sur ordinateur, mais pas sur mobile | Le paramétrage de la colonne mobile distincte n'a pas été modifié | Résoudre les problèmes de mise en page spécifiques aux appareils mobiles |
| Les styles du fil d'actualité semblent avoir été modifiés ou ne correspondent pas à l'identité visuelle de la marque | Conflit de spécificité CSS entre thèmes | Lorsque votre thème remplace la mise en forme du flux |
| Il clignote sans style défini, puis se met en place | Conflit entre le thème et JavaScript | Résolvez le problème grâce à la solution pour le chargement des thèmes AJAX |
Bon, passons à la commande.
Vérifiez d'abord les paramètres. Il s'agit des deux premières lignes. Les colonnes de la version bureau et l'affichage mobile se trouvent tous deux dans les paramètres. Ensuite, vérifiez s'il y a un conflit entre les thèmes. Puis, vérifiez s'il y a un conflit de chargement. Le CSS personnalisé vient en dernier, si tant est qu'il soit en cause.
Cet ordre n'est pas aléatoire. Il va de la solution qui résout le plus grand nombre de cas à celle qui en résout le moins.
Voici où la plupart des gens se trompent. Ils constatent un affichage défectueux et se précipitent directement vers le code personnalisé. Ils se mettent à écrire du CSS pour forcer la mise en page à s'afficher correctement.
N'en arrivez pas encore là. Dans la plupart des cas, un paramètre intégré ou une simple case à cocher permet de résoudre exactement le même problème. En procédant dans cet ordre, vous éviterez d'écrire du CSS dont vous n'avez pas besoin.
Recherchez donc votre symptôme dans le tableau. Rendez-vous dans la section correspondante. Résolvez-le à cet endroit.
Définir le nombre de colonnes et leur espacement
Trop de colonnes ? Pas assez ? Des articles entassés les uns sur les autres, sans aucun espace entre eux ?
La plupart du temps, ce sont le nombre de colonnes et l'espacement qui restent sur leurs valeurs par défaut, et il est assez facile d'y remédier à l'aide du personnalisateur en ligne fourni avec chaque plugin Smash Balloon.
Vous définissez le nombre de lignes et de colonnes, vous observez la mise à jour du flux dans un aperçu en temps réel, puis vous enregistrez vos modifications.
Voici comment configurer vos colonnes et vos espacements.
- Dans votre tableau de bord WordPress, ouvrez votre flux et cliquez sur « Personnaliser ».
- Cliquez sur l'onglet « Mise en page ».
- Recherchez le paramètre de nombre de colonnes. Définissez le nombre de colonnes pour les ordinateurs de bureau, les tablettes et les mobiles. Chaque taille d'écran dispose de son propre paramètre.
- Pour les fils d'actualité Instagram, définissez la valeur « Padding » pour modifier l'espacement entre les publications.
- Cliquez sur « Enregistrer ».
Vous voulez une grille bien ordonnée avec 3 colonnes sur votre bureau ? Réglez le nombre de colonnes du bureau sur 3. C'est tout ce qu'il y a à faire.
L'onglet « Mise en page » permet également de contrôler la forme des images. Vous pouvez définir le format de vos publications sur un carré (1:1), un format portrait (4:5) ou un format 3:4. Cette fonctionnalité est pratique lorsque vos images semblent écrasées ou étirées, car un format adapté permet de les recadrer proprement.
Résoudre les problèmes de mise en page spécifiques aux appareils mobiles
Votre fil d'actualité peut paraître parfait sur un ordinateur. Sur votre téléphone, il risque d'être complètement désorganisé.
Voici pourquoi. La configuration des colonnes sur mobile est indépendante de celle sur ordinateur. Modifier la disposition des colonnes sur ordinateur n'a aucun effet sur la version mobile.
Ainsi, un flux configuré sur 4 colonnes sur un ordinateur de bureau tente de faire tenir ces 4 colonnes sur l'écran étroit d'un téléphone. Chaque image n'est alors plus qu'une minuscule bande. L'ensemble donne une impression d'étroitesse et d'encombrement.
Pour résoudre ce problème, il suffit de définir les colonnes mobiles séparément. Rendez-vous dans l'onglet « Mise en page » que vous avez utilisé précédemment.
- Ouvrez votre fil d'actualité, cliquez sur « Personnaliser », puis sur l'onglet « Mise en page ».
- Repérez les commandes de la colonne « Tablette et mobile ». Elles se trouvent juste à côté de la commande « Ordinateur de bureau ».
- Définissez-les à une valeur inférieure à celle de l'ordinateur de bureau, puis cliquez sur « Enregistrer ».
L'écran d'un téléphone étant étroit, un nombre réduit de colonnes donne presque toujours un meilleur rendu. Si la version pour ordinateur de bureau comporte 4 colonnes, réduisez ce nombre à 1 ou 2 pour la version mobile, et non à 4.
Cette seule modification résout immédiatement la plupart des problèmes de mise en page sur mobile.
Lorsque votre thème remplace la mise en forme du flux
Il arrive parfois que vous ayez défini vos colonnes et ajusté vos espacements, mais que le résultat ne corresponde toujours pas à ce que vous voyez dans l'aperçu du Personnalisateur.
Voici ce qui se passe. Votre thème dispose de son propre CSS, c'est-à-dire le code qui détermine l'apparence des éléments. Il en va de même pour votre flux. Lorsque les deux tentent d'appliquer un style au même élément, l'un des deux doit prévaloir.
Et si le CSS de votre thème l'emporte, votre flux perdra son aspect.
Voici les signes qui indiquent que votre thème est en cause.
- L'aperçu dans le Customizer s'affiche correctement, mais l'affichage en direct semble incorrect.
- Les polices, les couleurs ou les bordures ne correspondent pas à vos paramètres.
- Le problème persiste même après avoir modifié les paramètres et enregistré les changements.
Si vous vous reconnaissez dans cette description, ne vous précipitez pas sur le code pour l'instant. Le CSS personnalisé est la dernière étape, pas la première.
Commencez par vérifier vos paramètres, puis appliquez la solution proposée dans la section suivante pour le chargement du thème via AJAX. La plupart des conflits entre thèmes se résolvent ainsi. Ce n'est que si ces deux solutions échouent que vous devrez recourir à du CSS personnalisé.
Et lorsque vous en aurez besoin, placez-le au bon endroit. Ajoutez-le dans « Apparence » → « Personnaliser » → « CSS supplémentaire », et non dans les fichiers de votre thème.
Si vous utilisez un thème à blocs, rendez-vous dans Apparence » Éditeur » Styles, cliquez sur le menu à trois points (⋮), puis sélectionnez « CSS supplémentaire » pour y coller votre code.
Cela permet de préserver votre correction, de sorte qu'une mise à jour du thème ne l'effacera pas.
Je vous proposerai quelques solutions de contournement sans risque un peu plus loin. Pour l'instant, gardez le CSS en réserve. Il servira à peaufiner le résultat, une fois que les corrections les plus simples auront été effectuées.
Résolvez le problème grâce à la solution pour le chargement des thèmes AJAX
Le fil d'actualité s'affiche sans mise en page pendant une fraction de seconde, puis se remet en place ?
C'est un conflit entre les thèmes. Et il existe une option à activer d'un simple clic pour y remédier. Pas besoin de code.
Voici ce qui se passe. Votre thème et votre flux chargent tous deux leurs styles dès l'ouverture de la page. Il arrive parfois que le processus de chargement du thème vienne perturber ce processus. Le flux s'affiche donc tel quel pendant un instant, le temps que les styles s'appliquent.
Vous avez deux possibilités pour régler ce problème.
La méthode manuelle consiste à passer au crible les scripts de votre thème. Il vous faudrait repérer le code à l'origine du conflit et modifier la façon dont il se charge. Cela demande du temps, de la patience et une aisance avec le code que la plupart des gens n'ont pas.
La solution la plus simple consiste à utiliser un paramètre intégré appelé « correction du chargement du thème AJAX ». Il charge le flux de manière à contourner les conflits liés à la transition entre thèmes, ce qui permet aux styles de s'appliquer correctement dès le premier affichage. Il suffit de cocher une case.
Voici où le trouver.
- Ouvrez le fil d'actualité Instagram » Paramètres » Avancé (ou le fil d'actualité Facebook » Paramètres » Avancé).
- Activez la correction relative au chargement du thème AJAX.
- Cliquez sur « Enregistrer les modifications ».
Pour la plupart des gens, ça résout d'emblée le problème du flash.
Vous rencontrez vous aussi des problèmes de dimensions d'images inhabituelles ou incorrectes ? Il existe une version plus complète de cette solution.
Dans le même écran « Paramètres » » « Avancé », activez ces trois paramètres en même temps.
- Correction du chargement du thème AJAX
- Ajouter le code JavaScript dans la balise
- Chargement d'images avec JavaScript
Cliquez sur « Enregistrer les modifications ». Videz ensuite le cache du plugin dans l'onglet « Flux » à l'aide de l'option « Vider tous les caches ».
Cela permet au flux de recharger ses images correctement en appliquant les nouveaux paramètres.
Une petite remarque concernant le chargement différé. Si un conflit lié au chargement différé empêche l'affichage de vos images, la solution consiste à procéder autrement. Rendez-vous dans Paramètres » Avancé et désactivez plutôt l'option « Chargement des images via JavaScript ».
Ces deux options sont donc diamétralement opposées. Activer le chargement des images via JavaScript résout certains problèmes. Le désactiver en résout d'autres. Testez-les une par une et vérifiez votre flux après chaque modification pour déterminer celle dont votre site a besoin.
Des modifications CSS personnalisées sans risque qui n'endommageront pas votre thème
Ça ne marche toujours pas après tout ça ? Il est temps de passer au CSS.
Commençons par la bonne nouvelle. On en arrive rarement à ce stade. Un réglage ou la solution AJAX suffit généralement à résoudre le problème pour la plupart des utilisateurs. Si vous lisez ces lignes, c'est que vous faites partie des exceptions, et non de la règle.
Et ces extraits de code n'entreront pas en conflit avec votre thème. Ils sont courts, ciblés et sans risque.
Il s'agit de la méthode manuelle, ce qui demande donc un peu plus d'efforts. Vous devez coller du code au lieu de modifier une valeur. Mais chaque extrait de code ci-dessous effectue une tâche simple, et vous pouvez les copier tels quels.
Voici quatre solutions alternatives à faible risque que vous pouvez essayer.
- Réduisez l'espace entre les poteaux. Utilisation
#sb_instagram .sbi_photo { padding: 4px; }pour réduire l'écart. Diminuez la valeur pour resserrer, augmentez-la pour élargir. - Imposer une hauteur d'image constante. Utilisation
#sb_instagram .sbi_photo { height: 200px; }pour que tous les montants soient alignés. Cela permet de corriger les rangées qui semblent irrégulières ou déséquilibrées. - Veillez à ce que la forme de l'image reste cohérente. Ajouter
#sb_instagram .sbi_photo { background-size: cover; }pour que les photos soient recadrées proprement, sans être étirées. - Ajuster l'espacement entre les colonnes sur mobile. Encadrez votre règle d'espacement dans
@media (max-width: 480px) { ... }pour modifier uniquement l'affichage sur mobile, et non celui sur ordinateur.
Il vous suffit d'ouvrir « Apparence » → « Personnaliser » → « CSS supplémentaire », puis de saisir le code CSS que vous souhaitez utiliser et de tester le fonctionnement de votre flux.
Si vous utilisez un thème basé sur des blocs, vous pouvez également ouvrir « Apparence » → « Éditeur » → « Styles », cliquer sur le menu à trois points (⋮), puis sur « CSS supplémentaire ».
Une dernière étape. Une fois que vous avez enregistré, videz le cache du plugin dans l'onglet « Flux » à l'aide de l'option « Vider tous les caches ». Cela permettra à vos nouveaux styles de s'afficher immédiatement.
Et voilà. Modifiez un extrait, enregistrez, vérifiez votre flux, puis recommencez uniquement si nécessaire.
Questions fréquemment posées
Pourquoi mon fil d'actualité affiche-t-il un nombre de colonnes erroné sur mobile ?
La configuration des colonnes sur mobile est distincte de celle sur ordinateur. Rendez-vous dans « Personnaliser » > « Mise en page » et définissez séparément le nombre de colonnes pour le point de rupture mobile. Réglez-le sur 1 ou 2 pour un écran de téléphone étroit.
Puis-je personnaliser entièrement la mise en page de mon fil d'actualité avec du CSS ?
Oui, c'est possible, mais vous n'en aurez généralement pas besoin. L'éditeur en ligne intégré à Smash Balloon couvre la plupart des cas de figure. Réservez le CSS pour les ajustements de dernière minute si l'éditeur en ligne ne vous offre pas l'option dont vous avez besoin.
Pourquoi mon fil d'actualité s'affiche-t-il sans mise en page pendant une seconde au chargement de la page ?
Ce clignotement est dû à un conflit lors du chargement du thème, et non à un bug. Activez la correction du chargement AJAX du thème dans Paramètres » Avancé, puis cliquez sur « Enregistrer les modifications ». Cela résout le problème de clignotement pour la plupart des utilisateurs.
Le fait de changer de thème réinitialise-t-il mes paramètres de mise en page du flux ?
Non, les paramètres de votre flux restent enregistrés lorsque vous changez de thème. Cependant, le CSS du nouveau thème peut modifier l'apparence du flux. Vérifiez à nouveau s'il y a des conflits de spécificité et réappliquez la correction pour le chargement du thème via AJAX si nécessaire.
Faut-il avoir des connaissances en programmation pour résoudre un problème de mise en page ?
Non, ce n'est pas nécessaire. Presque tous les réglages de mise en page se font à l'aide d'un bouton ou d'un curseur dans l'outil de personnalisation du fil d'actualité. Pas besoin d'écrire la moindre ligne de code, même si vous n'êtes pas un as de l'informatique.
Un flux qui correspond vraiment à votre site
Un flux qui semble ne pas fonctionner n'est en réalité que très rarement défectueux. Il s'agit presque toujours d'un problème de paramétrage.
Commencez par identifier la cause de votre problème. Corrigez le paramètre avant de modifier la feuille de style. Et pour la plupart des utilisateurs, la solution tient en un seul clic, sans avoir à écrire la moindre ligne de code.
Vous disposez de commandes de mise en page intégrées pour les colonnes et l'espacement. Vous disposez de paramètres mobiles spécifiques pour les écrans de téléphone. Et vous disposez de la correction AJAX pour le chargement des thèmes, qui élimine ce flash d'une fraction de seconde. Le CSS personnalisé est également disponible, mais uniquement pour les rares ajustements de dernière minute.
Vous souhaitez que vos éléments intégrés s'affichent avec la même qualité partout ailleurs sur votre site ? Ces guides vous expliquent comment procéder étape par étape :
- Ajouter un élément intégré Instagram adaptatif à WordPress
- Ajouter une vidéo Facebook intégrée et adaptative
- Ajouter un widget Twitter adaptatif
Commencez dès maintenant à améliorer la mise en page de votre fil d'actualité
Procurez-vous Instagram Feed Pro ou Facebook Feed Pro et bénéficiez de flux adaptés à votre site, quel que soit l'écran utilisé.
