Archives du blog

ParThibault HEINRICH

Comment intégrer une vidéo YouTube à mon site ?

YouTube est une plateforme d’hébergement de vidéos permettant de publier, regarder, commenter, évaluer mais aussi partager des vidéos.

WordPress, au même titre que bien d’autres outils d’aide à la construction de site Web, permet d’intégrer le lecteur YouTube à votre site, vous permettant ainsi de diffuser des vidéos sur votre site. Votre site offre alors une fenêtre sur la plateforme YouTube où est hébergée la vidéo diffusée.

Récupérer le code d’intégration de la vidéo

  1. Rendez-vous sur la page YouTube de la vidéo à intégrer.
  2. Cliquez « Partager » sous la vidéo.
  3. Dans la nouvelle fenêtre, sous « Partager un lien », cliquez « Intégrer ».
  4. Copier le code commençant par <iframe... .

Intégrer la vidéo à ma page ou mon article

Par défaut, l’éditeur de votre page/article est en mode « visuel », ce qui vous permet de rédiger votre page/article avec une mise en forme assez proche du rendu publié. Le code récupéré précédemment doit être intégré via le mode « texte » de l’éditeur.

  1. Dans votre page/article, cliquez à l’endroit où vous souhaitez intégrer votre vidéo.
  2. Basculer l’éditeur en mode « texte » (dans le coin supérieur-droit de l’éditeur). Si vous utilisez un constructeur de page (Page Builder), sélectionnez un widget « HTML personnalisé ».
  3. Collez le code que nous avons récupéré plus haut.
  4. (optionnel) rebasculez sur le mode visuel de l’éditeur.
  5. Enregistrez la page.

La vidéo devrait désormais apparaître dans votre page/article.

D’autres plateforme comme DailyMotion ou Vimeo vous permettrons également de diffuser leurs vidéos depuis votre site suivant la même logique d’intégration.

Héberger mes vidéos sur mon site

Vous pourriez tout aussi bien choisir d’héberger la vidéo sur votre site, mais vous risquez de vous heurter rapidement à des problème de capacité : pour une vidéo de 3 minutes de qualité acceptable, comptez environ 200Mo.

Si vous tenez tout de même à héberger vous même votre vidéo, il faut la charger dans la bibliothèque de média comme n’importe quelle image. Les formats acceptés sont ‘mp4’, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’ et ‘flv’.

ParThibault HEINRICH

Comment ajuster la trame générale de mes pages (layout) ?

Le framework Genesis de StudioPress offre la possibilité d’ajuster la trame générale de vos pages (layout).

choisir une trame / layout

Le choix de la trame (layout) permet de positionner le contenu et la barre latérale.

Ce paramétrage permet de choisir la position du contenu de la page et du bandeau latéral correspondant à la zone de widget « Primary Sidebar ».

La trame générale par défaut des pages peut être ajustée à la rubrique « Genesis>>Theme Settings », section « Default Layout » (ou rubrique « Apparence>>Personnaliser>Site layout »).

La trame de chaque page peut ensuite être ajustée au cas par cas via la section « Layout Settings » de son interface d’édition.

ParThibault HEINRICH

Comment fournir un sitemap de mon site à Google Search Console ?

Le sitemap de mon site

En complément de l’enregistrement de votre site auprès de Google Search Console, il est judicieux de fournir à Google SC ce que l’on appelle un « sitemap », ou plan de site en français. Il s’agit d’une page spéciale à destination des « robots indexeurs » des moteurs de recherche. Cette page fournie une liste de toutes les pages présentes sur le site (sauf si vous avez paramétré des restrictions).

Cela offre à Google la possibilité de mettre à jour régulièrement sa base de données en tenant compte des évolutions de votre site. En conséquence, Google Search Console peut vous fournir une analyse poussée du référencement de votre site.

Mon sitemap généré par Yoast SEO

L’extension Yoast SEO pour WordPress est incontournable pour appuyer le référencement de son site. Parmi les outils proposés, Yoast permet notamment de générer une page de sitemap à destination des robots d’indexation.

Afin de bénéficier de ce service, il faut activer les réglages avancés de Yoast. Pour ce faire, à la rubrique SEO>>Tableau de bord, sous l’onglet « Fonctionnalités », basculez « Pages de réglages avancés » sur « activer », puis enregistrez les modifications.

Fournir un sitemap de mon site à Google Search Console

À la rubrique SEO>>Régalges généraux, sous l’onglet « Fonctionnalités », cliquez le « ? » à côté de « Plan de site XML », et copiez le lien ancré sur le texte « Voir le plan de site XML » ( ou cliquez le lien pour visualiser la page de sitemap).

Maintenant que vous savez récupérer votre sitemap, il vous faut le fournir à Google Search Console pour la « propriété » (c’est le nom que donne Google SC à chacun de vos sites) correspondante.

 

Retrouvez plus d’explications (en anglais) sur le sitemap de Yoast, ainsi que des copies d’écrans ici : https://yoast.com/what-is-an-xml-sitemap-and-why-should-you-have-one/

 

ParThibault HEINRICH

Comment valider la propriété de mon site demandée par Google Search Console ?

Valider la propriété de mon site auprès de Google avec Yoast SEO

Google Search Console (Google SC) est un outil intéressant pour optimiser le référencement de son site auprès de Google. Pour bénéficier de cet outil, il est nécessaire d’enregistrer son site Web via l’interface de l’outil. Afin de retourner les conseils à la bonne personne, la Google SC vous demande de valider la propriété des sites que vous lui soumettez.

L’extension Yoast SEO permet, entre autres choses, de faciliter la validation de propriété de votre site.

Pour cela, rendez-vous à la rubrique SEO>>Tableau de bord. Sous onglet « Outils pour les webmasters », ouvrez le lien (dans un nouvel onglet avec [Ctrl] + clic) « Google Search Console »

Sur la page de Google SC, sélectionnez « HTML Tag », puis copiez le contenu révélé ( <meta ... ).

Webmaster Tool validation

validation de la propriété d’un site auprès de Webmaster Tool

De retour dans votre interface WordPress (l’onglet de navigation précédent), collez le contenu copié précédemment dans le champs « Google Search Console »

Yoast SEO et Google Search Console

Validation Google Search Console avec Yoast SEO

Pour mieux comprendre la manipulation, en haut de cette rubrique, consultez la section « Besoin d’aide? » (vidéo en anglais).

ParThibault HEINRICH

Comment forcer l’ouverture d’un lien dans une nouvelle fenêtre de navigation ?

Pour des raisons de référencement, il est très intéressant d’insérer, dans vos pages ou vos articles, des liens vers d’autres sites Web. Mais vous offrez par là même une porte de sortie à l’internaute qui consulte votre site.

C’est pourquoi il est judicieux de forcer l’ouverture des liens externes (ceux qui pointent d’autres sites) dans une nouvelle fenêtre de navigation. Ainsi l’internaute peut consulter le site que vous lui suggérez sans interrompre définitivement la lecture du votre.

Paramétrer un lien dans l’éditeur WordPress

Une fois que vous avez cliqué le lien à modifier, cliquez le bouton « crayon » sur la droite. Un nouveau bouton apparait.

modifier un lien

Modifier un lien avec l’éditeur de texte TinyMCE

Dans les options du lien, cochez la case « Ouvrir le lien dans un nouvel onglet ».

Lien externe vers nouvel onglet

Demander l’ouverture d’un lien dans un nouvel onglet.

Il ne vous reste qu’à valider puis enregistrer votre page / article.

ParThibault HEINRICH

Comment exploiter exploiter un site multilingue ?

Pour le site multilingue, je ne saurais que trop vous recommander de lire l’article de WP Marmite à ce sujet.

L’article paraît (très) long parce qu’il y a beaucoup de commentaires.

ParThibault HEINRICH

Comment modifier l’agencement de mes widgets ?

L’extension PageBuilder offre un widget de mise en page : Mise en Page Builder. Par exemple, on peut « empiler » des widgets sur la même colonne d’une rangée.

Mise en page Builder

Page Builder offre un widget passepartout.

ParThibault HEINRICH

Comment modifier le comportement du menu de navigation (« collant ») ?

À la rubrique [Apparence >> CSS personnalisé] (cf. rappels sur l’extension SiteOrigin CSS)
Une fois le sélecteur de votre menu repéré, modifiez le paramètre suivant :
Mise en page > Position : fixe

CSS personnalisé

Un bon outil pour personnaliser le style de sa page : SiteOrigin CSS .

La règle CSS résultante est très synthétique. La maîtrise du CSS est incontournable pour le web designer.

règle CSS d'en-tête "collant" (sticky)

Le CSS est un langage de haut niveau (intelligible) et performant.

ParThibault HEINRICH

Comment faire apparaitre un menu de navigation sous une première partie (bannière, logo…) ?

Par défaut, votre thème intègre des emplacements prédéfinis pour vos menus de navigation. Vous pouvez toute fois insérer l’un de vos menus de navigation (créé préalablement à la rubrique [Apparence>>Menus]) à l’aide d’un widget de type « Menu de navigation ».

Rendez-vous dans votre gestionnaire de widgets  [Apparence>>Widgets] et voyez si votre thème propose une zone « Before Header »…

ParThibault HEINRICH

Comment insérer les icones-liens des réseaux sociaux en tant que widget ?

Le thème WordPress par défaut prévoit un emplacement pour le menu des liens vers les réseaux sociaux. Mais il se peut que votre thème n’en prévoie pas. Dans ce cas :

Simple Social Icons

Ajouter un lien vers une page Facebook via le widget Simple Social Icons

L’extension Simple Social Icons (Chloé, Amandine et Florie) offre le widget Simple Social Icons. Une fois inséré, il suffit de le paramétrer en ajoutant les liens vers vos pages de réseaux sociaux.

Activer les boutons média sociaux

Activer le widget Social Media Button pour le rendre disponible.

L’extension Site Origin Widget Bundle offre une alternative avec son widget Social Media Buttons. Une fois activé, il suffit de l’insérer à la section souhaitée.