Forum Informatique

Insérer 2 printscreen reprenant la légende suivante : “Ce site www.dietetique-sante.com s’ouvre sur une page d’accueil personnalisée, comportant un diaporama faisant défiler des pages et les articles récents. Ci-dessus, deux articles avec leur vignette photo et un extrait d’article.”

La page d’accueil, c’est évidemment la vitrine de votre site. Plus que toutes les autres, elle mérite votre attention. Elle doit donner le ton et surtout l’envie d’aller fouiller plus avant. Voici quelques conseils et réglages pour vous guider.

La page d’accueil n’est pas forcément la première que verront les internautes puisque, de plus en plus, si le site est correctement indexé, ils tomberont sur des pages internes via une recherche dans Google ou un autre moteur. Seuls les grands sites connus de tous, par exemple lemonde.fr, fnac.com ou doctissimo.fr attirent les visiteurs par la grande porte. Mais ce n’est pas une raison pour négliger la page d’accueil, au contraire, car elle est à la fois la vitrine et le centre d’aiguillage général. Si elle est peu élégante, mal conçue, peu claire, trop ou pas assez remplie, les visiteurs iront voir ailleurs. Ce serait dommage, non ? Nous négligerons l’aspect esthétique, qui mérite un livre entier à lui seul, pour nous attarder sur quelques points plus techniques.

CE N’EST JAMAIS PARFAIT

Commençons par un problème de fond auquel vous n’échapperez pas si vous n’êtes pas programmeur. En effet, votre site – plus exactement son thème – est une série de fichiers écrits en language PHP, articulés entre eux selon des règles précises et contenant des fonctions, des commandes, des variables, etc. WordPress lui-même est de cet acabit, un gros paquet de fichiers PHP auxquels il ne faut jamais toucher ! Or, quand vous dénicherez un thème qui semble adapté à vos besoins, vous serez satisfait à 90 % de ses possibilités (on vous le souhaite !), et vous pesterez contre le reste : par exemple, vous auriez préféré que la page d’accueil affiche des vignettes ici et pas là, que les extraits des articles soient plus longs, etc. Certes, il y a moyen, sans programmer, de pallier certains manques, mais il y a aussi le risque de se heurter à la manière dont le thème a été programmé, par exemple la page d’accueil. Un exemple : vous aurez beau insérer des extraits dans les articles, ils ne s’afficheront pas forcément, parce que le développeur du thème a choisi une autre manière de faire, imposant son choix.

UTILISER DES EXTRAITS

L’aspect et l’organisation de votre site dépend du sujet. S’il s’agit d’un site traitant de photographie, la page d’accueil et les autres seront sans doute beaucoup plus visuelles, comportant des vignettes de photos que s’il s’agit d’un site consacré à la balalaïka où l’info sur cet instrument, ses maîtres et les concerts à venir, apparaîtra davantage sous forme de texte. Quoi qu’il en soit, les articles de la “home” doivent être courts et inciter à lire l’article complet en cliquant sur un lien à la fin de l’extrait. C’est pourquoi les développeurs de WordPress ont conçu une fonction “the_excerpt()” que l’on utilise très fréquemment. Du côté utilisateur, donc vous, il y a deux possibilités. Vous ne faites rien et les 55 premiers mots des articles seront affichés suivis de […] sur lequel on clique pour afficher la page de l’article complet. Remarquez que dans l’image ci-dessous, l’extrait se termine plus loin que le même extrait ci-dessus, et que ce dernier se termine par un lien avec l’intitulé “Lire la suite”. Ces différences illustrent le fait que les deux autres versions sont issues de codes PHP différents. L’autre manière d’utiliser les extraits consiste à rédiger soi-même un résumé au lieu de s’en tenir au début de l’article. Encore une fois, tout dépend du type de site que vous réalisez. Précisons aussi que vous pouvez rédiger un extrait pour certains articles et pas pour d’autres. Par défaut, WordPress affiche le début.

Insérer printscreen

RÉDIGER UN EXTRAIT

C’est très simple ! Dans la page d’édition de l’article figure en-dessous de l’article un champ appelé “Extrait”. Tapez votre résumé dedans et n’oubliez pas de cliquer sur le bouton “Mettre à jour”. Si le champ “Extrait” n’apparaît pas dans la page de saisie, déroulez les options de l’écran via le bouton éponyme situé en haut, et cochez la case devant “Extrait” pour afficher le champ.

Insérer printscreen

Insérer 2 encarts reprenant les textes suivants :

1. Premier encart :

“Penser aux images

Un site uniquement composé de textes risque d’être tristounet et peu aguichant. Même si vous souhaitez faire sérieux, des images lui donneront plus d’allure. C’est bien le cas des magazines actuels, copieusement illustrés de photos, parfois trop. A l’inverse, si vous jetez un coup d’oeil à un exemplaire du quotidien “Le Monde” des années 80 ou 70, vous vous apercevrez qu’il était bourré de textes. N’hésitez pas à mettre des dessins et des photos, personne ne vous le reprochera, bien au contraire.”

2. Second encart :

“Comment … Gérer les miniatures

Les miniatures sont des versions réduites des images de la bibliothèque, elles servent généralement à illustrer les articles du site. WordPress les crée automatiquement chaque fois que vous “uploadez” (transférez) une image dans la bibliothèque.

Modifier la taille des miniatures

Rendons-nous à la page “Medias” via le menu “Réglages” du Tableau de bord. Dans la partie “Taille des images”, indiquons la largeur et la hauteur, en pixels, des miniatures. Par défaut, elle est fixée à 150 x 150 pixels. Evitez les valeurs trop grandes …

Insérer printscreen

Des vignettes sur la page d’accueil

Tous les thèmes n’affichent pas des miniatures d’images avec les extraits d’articles. Donc, première chose, vérifiez de visu si des vignettes sont présentes au moment de choisir le thème. Autre vérification : dans le thème, ouvrez la page de gestion d’un article et regardez si le champ “Image à la une” figure en bas à droite. Si oui, c’est gagné. Cliquez sur le lien. Cliquez ensuite sur Bibliothèque, choisissez une image, cliquez sur le bouton devant Miniature, cliquez sur le lien “Utiliser comme image à la une”, fermez la fenêtre et mettez la page de l’article à jour.

WordPress fournit d’emblée tout le nécessaire pour créer des menus simples, déroulants et même des sous-menus.

Les systèmes de menus déroulants datent de la préhistoire de l’informatique, le premier Macintosh du début des années 80 en étant doté. Et ils sont toujours là, très pratiques pour assurer la navigation dans les différentes parties d’un système, d’un logiciel ou d’un site Web. Justement, WordPress a prévu le coup et offre un plateau de gestionnaire de menus très bien conçu et intuitif. Mais avant de voir comment l’utiliser, quelques conseils généraux s’imposent.

PENSER L’ORGANISATION

Votre site est organisé en pages et catégories thématiques qui en forment la structure ? C’est cette structure que devra refléter votre menu. Mais vous disposez d’une totale liberté d’action, notamment pour définir l’ordre des intitulés du menu (de gauche à droite) et aussi des sous-menus. Nous verrons qu’il est très simple de modifier cet ordre si vous vous apercevez qu’il ne vous convient pas. Mais autant réfléchir avant de se lancer dans la création effective du menu en couchant sur papier son organisation.

RESTER AUSSI SIMPLE QUE POSSIBLE

Attention à ne pas surcharger votre menu de trop nombreux items et de sous-menus à quatre niveaux, eux-mêmes bardés d’items : vos visiteurs seront vite perdus, ils ne sont pas là pour se balader sans cesse et risqueront de quitter votre site. Faites aussi simple que possible en ne mettant au premier niveau que les intitulés les plus importants et les plus généraux (en principe ceux de vos catégories). Et, si possible, ne créez qu’un seul sous-niveau (celui qui permet de dérouler un menu). Au-delà, ça devient le bazar.

BIEN CHOISIR LES INTITULES

C’est une évidence : vous connaissez votre site par coeur. Vos visiteurs le découvrent. Donc, facilitez leur visite en les guidant par une hiérarchie, mais aussi en utilisant des termes directs et compréhensibles comme “Chats”, “Chiens” plutôt que “Canidés”, évitez les termes trop abstraits, quitte à réduire le sens général : par exemple, employez “Médicaments” plutôt que “Pharmacologie”.

Insérer printscreen avec la légende suivante :

“Les gestionnaires de menus de WordPress. 1. Zone de création d’un menu. 2. Création d’un lien personnalisé permettant d’indiquer un lien fixe ou externe, par exemple l’adresse d’un site. 3. Zone d’activation des pages à mettre en options de menu. 4. Pareil que précédemment mais pour les catégories. 5. Zone de placement et de hiérarchisation des items du menu avec possibilité de créer des sous-menus à la volée.

A insérer :

1) Un encart reprenant le texte suivant :

“Un menu via un Widget

Parmi les Widgets standards, vous pouvez utiliser celui intitulé “Menu personnalisé” qui créera et affichera un menu dans la barre latérale. Dans les faits, ce Widget utilise le gestionnaire de menus de WordPress (voir ci-après).”

2) Un deuxième encart reprenant le texte suivant :

” Comment … installer une barre de menus

Insérer printscreen

Le thème utilisé ici est Twenty Eleven, l’un des deux proposés par défaut. Il affiche systématiquement un menu, au départ réduit à l’essentiel : Accueil. Nous allons l’enrichir.

1. NOMMER ET CRÉER LE MENU

Rendons-nous à la page du gestionnaire de menu via l’option “Menus” du Tableau de bord (voir l’image ci-dessus). Dans la zone “Nom du menu”, tapons un nom, par exemple “Menu principal” et cliquons sur “Créer un menu”.

Insérer printscreen

2. CHOISIR LE MENU

Dans la partie “Emplacements du thème”, nous devons préciser quel menu sera actif. Ici, il n’y en a qu’un seul, nous le choisissons et cliquons sur “Enregistrer”.

Insérer printscreen

3. RECRÉER L’ACCUEIL

Il nous faut recréer l’intitulé Accueil sans quoi il n’apparaîtra pas. Dans “Liens personnalisés”, nous tapons l’adresse du site, et dans “Titre”, nous indiquons “Accueil”. Nous cliquons sur le bouton “Ajouter au menu”. La partie droite du gestionnaire affiche désormais le premier élément “Accueil”.

Insérer printscreen

4. AJOUTER DES ELEMENTS

WordPress mâche le travail puisqu’il nous propose d’emblée la liste des catégories créées par nos soins. Nous prenons soin de cliquer sur “Afficher tout” dans la zone “Catégories” de manière à les voir toutes. Nous cliquons sur chaque catégorie et validons via le bouton “Ajouter au menu”. Précisons que nous ne sommes pas obligés de tout choisir.

Insérer 2 printscreen

5. ORGANISER LE MENU

Les éléments du menu apparaissent dans la partie droite. Nous pouvons cliquer sur “Enregistrer le menu”. Mais nous pouvons le réarranger en déplaçant les blocs vers le haut ou le bas à la souris par glisser-déposer. Nous pourrons créer un sous-menu en déplaçant un élément vers la droite.

Voilà, le menu est fin prêt. A tout moment, nous pouvons le modifier en ajoutant de nouveaux éléments et en réarrangeant ceux existants.”

Insérer 2 printscreen

3) Un troisième encart reprenant le texte suivant :

“Renommer les intitulés

Par défaut, WordPress va nommer les intitulés en s’appuyant sur les noms des catégories ou des pages. Mais vous pouvez les modifier en cliquant sur la flèche vers le bas placée à droite des éléments. Dans la partie “Titre de la navigation”, tapez le nouvel intitulé et n’oubliez pas d’enregistrer le menu.”



La communauté des développeurs de WordPress propose des Widgets en tous genres dont votre site peut profiter.

Les Widgets standards permettent d’ajouter des possibilités aux sites et blogs mais ils restent limités. Ainsi, si vous souhaitez ajouter des diaporamas ou des vidéos en tant que Widget pour rendre la vitrine plus alléchante et attirer le regard des visiteurs, vous allez devoir installer et activer des Widgets proposés par la communauté WordPress. Autres exemples de Widget : un bloc spécial qui fait défiler tous vos tweets. Le meilleur endroit pour faire votre marché est le site wordpress.org de la communauté WordPress, qui regroupe toutes les ressources disponibles.

CHOISIR LES WIDGETS

Une fois sur le site wordpress.org (en anglais), les (petits) ennuis vont commencer parce que la profusion de ressources (thèmes, extensions, Widgets. ..) rend la recherche difficile. Si vous cliquez sur le lien Widget dans la colonne de gauche, vous aurez droit à une liste sans fin d’extensions dont le nom n’est pas toujours évident à comprendre. Une autre façon de chercher un Widget est de passer par le lien Ajouter du menu Extensions du Tableau de bord. Là, vous pouvez taper des termes en rapport avec la fonction que doit assurer le futur Widget. Au fait, sachez qu’un Widget est d’abord une extension, c’est-à-dire un programme particulier qui s’ajoute à ceux de WordPress. Donc ajouter un Widget revient à ajouter une extension. Cette extension est un programme écrit en PHP. Il est placé dans un dossier qui lui-même doit être placé dans le dossier plug-in du dossier wp-content de votre espace en ligne. Voilà une façon d’installer une extension (donc un Widget) qui oblige à passer par un logiciel FTP tel que FileZilla.

INSTALLATION AUTOMATIQUE

L’autre façon de procéder à l’installation d’un Widget consiste à passer directement par la page “Installer des extensions” (c’est celle dans laquelle vous avez effectué une recherche). Sous le nom du Widget apparaissent des liens “Détails” et “Installer maintenant”. En cliquant sur ce dernier, WordPress va se charger de tout. Franchement mieux vaut utiliser cette procédure beaucoup plus simple, c’est d’ailleurs celle que nous utilisons ci-après.

Insérer printscreen

A insérer :

1) Un encart reprenant le texte suivant :

“Attention au changement de thème

Vous avez activé plusieurs Widgets. Et vous décidez un jour de changer de thème. Sachez qu’il est possible que certains Widgets ne réagissent pas correctement avec le nouveau thème. Mais, magnanime, WordPress vous le signalera et vous devrez soit régler le Widget soit vous en passer.”

2) Un deuxième encart reprenant le texte suivant :

“Comment … installer un nouveau Widget

Insérer printscreen

Nous allons poursuivre la personnalisation du site, avec des Widgets, à partir de notre exemple, dans lequel nous avions ajouté un Widget standard. Ici, nous allons installer le Widget “NextGEN Gallery Sidebar” qui affichera dynamiquement les photos du site en diaporama miniature dans la barre latérale.

1. TELECHARGER LE WIDGET

Rendez-vous à la page d’ajout des extensions en cliquant sur Extensions puis Ajouter depuis le tableau de bord du site. Dans cette page, visez le module Rechercher et tapez dans la zone “NextGEN Gallery Sidebar”.

Insérer printscreen

2. INSTALLER LE WIDGET

Son nom apparaît en haut de la liste des résultats, cliquons sur le lien Installer. Un message demande confirmation. WordPress charge les fichiers dans le bon dossier. Nous cliquons sur le lien Activer.

Insérer printscreen

3. ACTIVER LE WIDGET

Maintenant, il reste à ouvrir la page du gestionnaire des Widgets où nous découvrons le bloc du Widget NextGEN parmi les autres. Pour l’activer, nous procédons à la souris.

Insérer printscreen

4. PARAMÉTRER LE WIDGET

Le travail n’est pas fini, loin de là. Car ce Widget doit encore obtenir les informations nécessaires à son fonctionnement, notamment savoir quelles photos nous souhaitons afficher, où elles se trouvent et comment les afficher. En l’état, le Widget est opérationnel, aucune erreur n’étant signalée. Mais il ne fonctionnera pas tant que nous n’aurons pas installé l’extension générale qui, elle seule, est capable de nous permettre d’envoyer les fichiers images au bon endroit. Donc, nous devons installer l’extension NextGEN Gallery et la régler correctement. Et nous obtiendrons le résultat escompté, comme ci-dessous.”

Insérer 2 printscreen

3) Un troisième encart reprenant le texte suivant :

“Désactiver un Widget

Quand vous souhaitez ne plus faire apparaître un Widget sur votre site, vous devez le désactiver en glissant son bloc (celui de la page des Widgets) hors de la zone de droite. Le mieux est de le glisser et de le lâcher au-dessus de la zone “Widgets désactivés” parce que les paramètres personnalisés du Widget seront conservés, donc utilisables si vous décidez plus tard de réutiliser le Widget.”



La bibliothèque de WordPress assure une gestion globale des différents médias utilisés sur le site.

WordPress centralise les fichiers médias dans une bibliothèque. Les fichiers sont stockés dans le dossier wp-content/uploads et organisés par défaut dans des dossiers annuels et mensuels (option modifiable dans Réglages Médias).

DÉCOUVRIR LA BIBLIOTHÈQUE

Pour accéder à la bibliothèque médias, sélectionnez Médias, Bibliothèque, dans la colonne de gauche. Tous les médias ajoutés à la bibliothèque (directement ou via un article ou une page)
sont listés, les photos profitant d’une prévisualisation. Pour chaque entrée sont précisés l’auteur (celui qui a transféré le fichier), la date, l’attachement à une page ou un article (un clic permet de s’y rendre) et les commentaires associés. Cliquez sur un de ces éléments dans le bandeau supérieur pour forcer le tri (par défaut : nom du fichier).

FILTRER LA BIBLIOTHÈQUE

Par défaut, tous les médias sont listés. Les liens surmontant la liste assurent le filtrage pour un certain nombre de types de fichiers images, fichiers audio et vidéos. Un dernier lien retient les fichiers non attachés : très utile pour localiser les fichiers qui remplissent inutilement de l’espace d’hébergement. Si vous avez opté pour un classement par dossier annuel/mensuel, vous pourrez encore filtrer par mois/année.

Insérer printscreen

RECHERCHER UN FICHIER

Les filtres peuvent ne pas suffire si la bibliothèque est abondante. Vous pourrez alors exploiter la recherche. Celle-ci porte sur le nom du fichier ainsi que sa description. En revanche, le texte alternatif et la légende des photos ne sont pas pris en compte. Autre précision : cette recherche s’effectue toujours sur la totalité des fichiers médias, sans prendre en compte un éventuel filtre actif.

Insérer printscreen

GÉRER PAR LOT

Cochez les cases à gauche des fichiers concernés puis déroulez le menu Actions groupées. Vous pourrez ainsi supprimer plusieurs fichiers en une opération ou les joindre à un article s’ils n’étaient pas attachés.

MODIFIER UN MÉDIA

Placez le pointeur sur une entrée pour faire apparaître de nouveaux liens. En cliquant sur Modifier, vous pouvez moduler le texte alternatif, légende et description. Les images, elles, profitent d’un outil de retouche simplifié.

A insérer :

1) Un premier encart reprenant le texte suivant :

Adieu doublons

Grâce à la bibliothèque, vous pourrez exploiter un même fichier média dans plusieurs articles ou pages. En revanche, WordPress ne vous empêchera pas de transférer plusieurs fois le même fichier. Pour éviter cela, installez l’extension Overwrite Uploads (vous devrez rajouter deux lignes dans le fichier wp-admin/includes/file.php). Consultez l’onglet Installation pour connaître la procédure : tout nouveau fichier identique écrasera simplement le précédent.

2) Un deuxième encart reprenant le texte suivant :

Tous les fichiers

De par son nom, la bibliothèque Médias laisse supposer qu’elle n’accepte que des fichiers multimédias (images ou vidéos). En réalité, vous pouvez y transférer des PDF, des documents Word et autres.

3) Un printscreen avec la légende suivante :

La bibliothèque de WordPress autorise une gestion aisée des fichiers médias. Les fichiers non attachés sont repérés et le traitement par lot s’avère bien pratique. On regrettera seulement que la gestion des doublons ne soit pas assurée en standard, cette lacune étant aisément comblée avec une extension.

La gestion des vidéos est assez limitée pour une insertion directe dans la page, il faut ajouter des codes et vérifier le résultat.

La gestion multimédia de WordPress ne se limite pas aux images. Vous pourrez ainsi proposer des vidéos, mais il faudra ruser pour qu’elles s’affichent directement dans l’article.

EXPLOITER UNE VIDÉO DE LA BIBLIOTHÈQUE

Du fait des contraintes de taille de fichier à télécharger, cette solution n’est envisageable que pour des vidéos de faible poids. Pour ajouter une vidéo à la bibliothèque, cliquez sur le lien Envoyer/Insérer de l’éditeur de l’article ou sélectionnez Médias, Ajouter, dans la colonne de gauche. Tout comme pour les photos, vous pourrez utiliser l’outil de téléchargement multifichiers ou passer par le navigateur pour un téléchargement un à un. Pour insérer une vidéo dans un article, positionnez le curseur à l’endroit de l’insertion, cliquez sur Envoyer /Insérer et sélectionnez l’onglet Bibliothèque. Pour plus de facilité, cliquez sur Vidéos en haut pour ne retenir que les médias de ce type. Cliquez sur le lien Afficher en regard de la vidéo idoine, renseignez au besoin les champs Légende, Description et cible du lien pour les vidéos cliquables et validez d’un clic sur Insérer dans l’article. Contrairement aux photos, la vidéo ne sera pas directement affichée (même si l’option Affichage automatique est cochée dans les réglages des médias), seul un lien est visible. Un clic sur le lien permet de lancer la vidéo, à condition toutefois que les plug-in correspondants soient installés. Il convient donc de ne recourir qu’à des formats passe-partout, lisibles sur toutes les plates-formes.

Insérer printscreen

AJOUTER UN LIEN VERS UNE VIDÉO DU WEB

Vous pouvez exploiter les liens des articles pour ouvrir une vidéo du Web. Pour cela, sélectionnez une portion de texte de l’article et cliquez sur l’icône lien. Dans le champ Adresse Web, renseignez l’adresse de la vidéo ou de la page affichant cette vidéo (voir plus loin). Vous pourrez éventuellement choisir d’ouvrir le lien dans une nouvelle fenêtre ou un nouvel onglet. Pour connaître l’adresse de la vidéo, cliquez dessus avec le bouton droit et sélectionnez Copier l’URL de la vidéo dans le menu contextuel. A défaut, copiez l’adresse de la page apparaissant dans le champ adresse du navigateur.

Insérer printscreen

INSÉRER LE CODE EMBED

Pour afficher directement la vidéo au sein d’un article, il faut user du code Embed. Copiez ce code depuis la page du service de diffusion (voir ci-après comment le récupérer), sélectionnez l’onglet HTML dans l’éditeur de l’article et collez par Ctrl + V le code Embed récupéré. Il est important de vérifier sur l’aperçu le rendu final pour éviter les déformations fixées aux limites de format.

Insérer printscreen

A insérer :

1) Un encart reprenant le texte suivant :

Vidéo sans limite

En exploitant le transfert FTP, vous pourrez circonvenir la limite d’upload de WordPress. Toutefois, les vidéos ainsi téléchargées sur votre site n’apparaîtront pas dans la bibliothèque WordPress. Pour les exploiter, il faudra procéder comme pour un lien vers une vidéo du Web et pointer vers l’adresse de votre vidéo, dans votre espace d’hébergement.

2) Un deuxième encart reprenant le texte suivant :

RÉCUPÉRER … UNE VIDÉO YOUTUBE OU DAILYMOTION

Tous les grands services de partage vidéo (YouTube, Dailymotion, INA, etc.) proposent désormais un code pour intégrer leurs vidéos au sein d’une page Web. Nous détaillerons la procédure pour ces trois services, la démarche étant similaire avec les autres.

1. ACCÉDER AU CODE EMBED

Rendez-vous sur la page de la vidéo. La procédure dépend ensuite du site. Sur YouTube, cliquez sur le bouton Partager (sous la barre de lecture) puis sur le bouton Intégrer de l’onglet qui est apparu.

Sur Dailymotion, sélectionnez l’option Exporter dans le menu Partager sous la barre de lecture.

Sur INA.fr, il faudra cliquer sur le bouton Exporter, sous la vidéo. Mais seuls les visiteurs identifiés pourront en profiter. Il faudra donc renseigner vos identifiant et mot de passe ou vous inscrire préalablement si vous ne disposez pas encore d’un compte.

Insérer 3 printscreen

2. AJUSTER LES PARAMÈTRES

Dans tous les cas, une boîte dédiée s’ouvre, permettant d’ajuster les paramètres du lecteur vidéo. Sur YouTube, vous pourrez sélectionner l’une des tailles d’image prédéfinies ou rentrer la vôtre, afficher ou non les suggestions de vidéos du même type à la fin de la lecture de la vidéo, utiliser le mode protégé ou générer l’ancien code (qui ne lisait que les vidéos Flash, le nouveau lisant les vidéos Flash et HTML 5).

Sur Dailymotion, vous pourrez choisir la taille de la vidéo (prédéfinie ou personnalisée), la couleur du lecteur et la compatibilité avec les smartphones et tablettes IOS et Android. Diverses possibilités se dévoilent en cliquant sur “Autres options” : démarrage automatique de la vidéo, démarrage à un moment précis, réglage de la qualité, ajout d’une introduction, d’un titre et d’un résumé, etc.

Sur INA.fr, les possibilités sont un peu plus limitées, mais vous pourrez tout de même paramétrer la taille de la vidéo (trois formats prédéfinis et taille personnalisée) et disposer d’un code d’export compatible avec les smartphones et tablettes.

Insérer 3 printscreen

3. LE CODE EMBED

Ce code est mis à jour en fonction des options retenues. Un clic dans la fenêtre du code suffit à le sélectionner en totalité. Copiez-le dans le presse-papiers par Ctrl + C ou via la commande Copier du navigateur. Les utilisateurs parlant HTML pourront l’adapter au besoin.

3) Un troisième encart reprenant le texte suivant :

A savoir

Toutes les vidéos de ces sites ne sont pas partageables. C’est le cas des vidéos sous copyright, mais aussi des vidéos privées que les internautes ne veulent pas partager. Pour ces vidéos, seule la méthode du lien reste utilisable.

4) Un quatrième encart reprenant le texte suivant :

Autres méthodes

Les méthodes d’exploitation des vidéos présentées ici ne requièrent pas d’extensions. Mais certaines peuvent apporter de nouvelles solutions : par exemple, avec Ultimate TinyMCE, l’insertion de vidéos au sein de la page sans passer par le code Embed.



Grâce à la bibliothèque de médias, vous disposez d’une gestion avancée des photos, avec des options de retouche et galeries d’images.

WordPress permet d’insérer aisément des images dans un article et offre un large panel de possibilités pour les retravailler. Ces images peuvent provenir de la bibliothèque de WordPress ou être directement téléchargées depuis Internet.

ENRICHIR LA BIBLIOTHÈQUE

Pour enrichir la bibliothèque de nouveaux médias, cliquez sur le lien Envoyer/Insérer, au-dessus de la barre d’icônes, puis sélectionnez l’onglet “Depuis votre ordinateur”. Vous pouvez aussi passer par l’option Médias, Ajouter, de la colonne de gauche. Copiez/Collez les fichiers voulus dans la fenêtre ou cliquez sur Parcourir pour les localiser via l’Explorateur de fichiers. L’outil par défaut permet de gérer le téléchargement multiple. En cas de problème, cliquez sur le lien “méthode du navigateur” pour un téléchargement fichier par fichier. La taille maximale de chaque fichier est précisée sous la fenêtre.

Insérer printscreen

AJOUTER UNE PHOTO DE LA BIBLIOTHÈQUE

Positionnez le curseur dans l’article à l’endroit où l’image doit s’insérer, cliquez sur le lien Envoyer/Insérer, sélectionnez l’onglet Bibliothèque et cliquez sur le lien. Affichez en regard de la photo idoine (vous pouvez aussi cliquer sur ce même lien à l’issue du téléchargement de l’étape précédente). Vous pourrez compléter le titre d’un texte alternatif, d’une légende et d’une description. La cible du lien gère les images cliquables. En choisissant Adresse Web du fichier, un clic sur l’image l’ouvre dans le navigateur. Avec l’option Adresse de l’article du fichier joint, le clic sur l’image l’ouvre dans un article dédié. Vous pouvez aussi pointer vers une adresse de votre choix en tapant son URL dans le champ Cible du lien. Enfin, “Aucun” désactive cette fonction. Vous pourrez ajuster l’alignement de la photo et choisir la taille de la vignette. Précisons que l’option Taille originale est en fait bridée par la taille maximale d’affichage du thème. Cliquez sur le bouton “Insérer dans l’article” pour boucler les opérations.

Insérer printscreen

AJOUTER UNE PHOTO DU WEB

La procédure est similaire. Positionnez le curseur à l’endroit où la photo doit s’insérer, cliquez sur le lien Envoyer/Insérer et sélectionnez l’onglet Depuis le Web. Vérifiez que le choix Image est bien coché, puis renseignez l’adresse Web de l’image et donnez-lui un titre (ces deux informations sont impératives). Pour connaître l’adresse Web d’une image, cliquez avec le bouton droit dessus et sélectionnez Copier l’adresse de l’image (ou équivalent) dans le menu contextuel.

Insérer printscreen

Vous pourrez aussi ajouter un texte alternatif, légender l’image, régler l’alignement de l’image dans la page et définir le lien si vous voulez que l’image soit cliquable.

MODIFIER LES PARAMÈTRES DE L’IMAGE

Dans l’éditeur, en cliquant sur une photo insérée dans un article, deux icônes apparaissent pour modifier ou supprimer l’image. En cliquant sur l’icône de modification, vous pouvez déjà changer les informations associées : taille (redimensionnement limité), alignement, titre, légende et cible. L’onglet Options avancées permet d’aller plus loin : redimensionnement libre, ajout d’une bordure, marge horizontale ou verticale. La section leur permet de définir précisément la cible d’une image cliquable et de l’ouvrir dans une nouvelle fenêtre.

Insérer printscreen

RETOUCHER L’IMAGE

Sélectionnez Médias, puis Bibliothèque dans la colonne de gauche. Ouvrez l’image d’un clic sur son titre et cliquez sur Modifier l’image. Vous pourrez redimensionner l’image, la recadrer, la faire pivoter et l’inverser. Une fois sauvegardées, les modifications s’appliqueront aux nouvelles insertions de la photo, mais pas à celles déjà réalisées.

Insérer printscreen

AFFICHER UNE GALERIE

Les photos liées à un article peuvent être affichées sous forme de galerie (onglet disponible dans Envoyer/Insérer). Vous pourrez choisir le classement et le nombre de colonnes, mais pas les images elles-même (toutes les images liées à l’article seront affichés).

Insérer printscreen

A insérer :

1. Un encart reprenant le texte suivant :

Illustrer les pages avec vos photos

Avec le thème par défaut Twenty Eleven, toutes les pages du site sont illustrées d’un bandeau supérieur affichant des images aléatoires livrées avec WordPress. Pour utiliser les vôtres, allez dans la bibliothèque, affichez l’image voulue et choisissez l’option Utiliser comme une image à la une.

2. Un deuxième encart reprenant le texte suivant :

Effet sympa

Dans une page ou un article, le visiteur peut cliquer sur une image pour l’afficher dans sa taille réelle. Avec une extension comme Easy Fancybox, l’image s’affiche avec un effet très sympa. Essayez. Il suffit de l’installer puis de cliquer sur une photo dans l’un de vos articles.

3. Un troisième encart reprenant le texte suivant :

Redimensionner les photos avant leur transfert

WordPress peut assurer le redimensionnement des images, mais il est plus judicieux d’effectuer cette opération avant, pour éviter de longs délais d’upload et ne pas dépasser la limite de taille d’envoi. Vous pouvez utiliser pour cela un outil dédié tel que Light Image Resizer que nous utiliserons ici, à télécharger sur http://www.obviousidea.com/fr/windows-software/light-image-resizer. Sélectionnez les photos à redimensionner en cliquant sur Fichiers ou Dossiers, ou encore en copiant/collant les images dans la fenêtre du programme. Cliquez sur Suivant pour sélectionner les paramètres : résolution, type de traitement, niveau de compression, etc. (les options par défaut conviennent bien). Via l’onglet Effets, vous pourrez intégrer un filigrane, ajouter une bordure ou jouer sur les couleurs. Lancez le traitement d’un clic sur OK. Ce programme pour Windows travaille vite et ne requiert que quelques secondes pour redimensionner de nombreuses grosses photos.

Insérer printscreen

