Blog > Page 2 sur 11

Image : Quel poids, taille, et résolution sur un site web ?

Une image destinée à être publiée sur une page web, devra avoir un poids peu important afin d’optimiser le poids de la page en elle-même. Pour faciliter ceci, il suffit de suivre les conseils suivants :

Le poids :

La taille de votre image ne doit absolument pas dépasser les 200Ko en général. Cela concernera toute image de votre site.

Pour réduire le poids de votre image, il est conseillé d’enregistrer votre image en .jpeg 80%. Cela permet d’alléger le poids de votre image sans perdre en qualité.

Si vous enregistrez vos images en .PNG, préférez le PNG 8 au PNG 24. Le PNG 24 est principalement utile si vous avez besoin d’une image avec de la transparence.

Sa résolution :

Sa résolution : un écran d’ordinateur a une résolution d’affichage de 72 dpi en général. Il est donc parfaitement inutile d’envoyer une image ayant une résolution supérieure : elle ne s’affichera pas mieux ! Par contre, elle sera plus lourde et donc plus longue à afficher.

La taille :

A l’écran, les dimensions (HxL) s’expriment en pixels (px). Pour avoir un ordre de grandeur, une image de 500 px de haut est suffisante pour être géré par la suite lors des miniatures ou des agrandissements.

Son format de fichier :

Il existe une multitude de formats de fichier, qui ne sont pas compatibles avec toutes les configurations d’ordinateurs. Si vous voulez être certain/e que votre image soit bien reçue et visible, convertissez-la en .jpg, .png ou .gif car ces trois formats sont reconnus par la majorité des logiciels de navigation.

Son nom :

De préférence en minuscules, sans accent ni ponctuation, sans espace (utilisez les caractères – ou _ pour combler les espaces).
Cela doit ressembler à : nom_image.jpg

Optimiser celle-ci à l’envoi sur votre site:

Il existe de nombreuses façon d’optimiser vos images en lignes afin de leur faire gagner encore quelques ko, toutefois une des extensions parmi les plus performantes sera « Imagify Image Optimizer« , qui optimisera encore plus le poids de l’image sans perdre en qualité. Vous pourrez retrouver cette extension dans le répertoire des extensions WordPress.

Instagram : Intégrer des badges et des posts

Ressources web

Toujours dans la lignée des intégrations de réseau social dans votre site web, nous vous montrons comment créer une interaction entre Instagram et votre site web.

Dans un premier temps, vous pouvez facilement insérer un badge Instagram à votre site :

Pour vous aider à créer des liens avec votre profil Instagram et le mettre en avant, nous avons créé des badges que vous pouvez utiliser.

Il suffit de se connecter à la partie « Badges » de votre profil et de copier coller le lien désiré :

Un exemple d’intégration de badge :

Dans un second temps, vous pouvez aussi intégrer des posts Instagram très facilement via la fonction « intégrer » qui apparaît sur chaque post :

Pour accéder à ceux-ci, vous devrez passer par votre navigateur sur Instagram. sachez que WordPress intègre nativement les post Instagram simplement en insérant l’URL de celui-ci :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

https://www.instagram.com/p/bNd86MSFv6/

[/pastacode]

Et voici un exemple d’intégration :

Code code code !

Une photo publiée par CreaZo (@creazo) le 18 Févr. 2016 à 11h02 PST

Sticky Posts ou comment mettre ses articles en avant

Tutoriel WordPress

Une fonctionnalité intéressante de WordPress est ce que l’on appelle en anglais les « Sticky Posts » ou la possibilité de mettre en avant ses articles.

Lors d’un fil d’actualité classique, les articles respecte un ordre antéchronologique (Qui va du plus récent au plus ancien) ou chronologique mais dans des cas particulier, vous pouvez avoir l’envie qu’un article spécifique apparaissent avant tout les autres sans respecter l’ordre imposé, cette fonctionnalité s’appelle « Sticky Posts » et se règle via une simple case à cocher lors de l’édition de votre article :

Vous pouvez aussi le faire à la chaîne lors de l’ édition de votre liste d’articles :

Un article ayant cette particularité aura donc sa place toujours avant les autres. Cela fonctionne très bien avec les flux d’articles automatisés de votre site (la page blog ou actualités).

Pour récupérer ces articles, vous pouvez insérer le code suivant dans votre modèle de page ou fichier php :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

$sticky = get_option('sticky_posts');
$args = array( 'post__in' => $sticky );
query_posts( $args );

[/pastacode]

Youtube : insérer vidéos et playlists

Ressources web

Intégrer une vidéo

Leader parmi la vidéo sur internet, Youtube a su s’imposer facilement. Partager ses vidéos sur son site internet est une chose relativement simple, il vous suffit simplement de récupérer vos codes d’intégration. Pour cela sous chaque vidéos Youtube, vous trouverez l’onglet « Partager » puis « Integrer »

Il ne vous reste plus qu’à copier coller le code de votre vidéo pour obtenir le résultat suivant :

Utiliser l’option spécifique de WordPress

L’autre solution à partir du CMS WordPress est de cliquer sur le bouton « Ajouter un média » puis « Insérer à partir d’une adresse web »

Intégrer une playlist

Pour intégrer une playlist, vous devez d’abord en créer une puis y accéder pour cliquer sur « Partager » puis « Intégrer » comme ci-dessus :

Des détails de configuration supplémentaire sont accessible sur la page dédié de Youtube :

Activer le mode de confidentialité avancé
Lancer automatiquement la lecture d’une vidéo intégrée
Démarrer une vidéo intégrée à un moment T
Ajouter des sous-titres à une vidéo intégrée
Désactiver l’intégration pour vos vidéos

Soundcloud : Inserer un lecteur

Ressources web

SoundCloud a été créé en 2007, sous l’impulsion de deux spécialistes allemands du son : Alex Ljung et Eric Wahlforss. L’idée, à la base, est simple : permettre aux musiciens de partager facilement n’importe quels sons sur la web.

Pour partager un morceau, rien de plus simple, il suffit de cliquer sur le bouton « share » sous chaque morceaux proposé par vos artistes favoris :

Il ne vous plus qu’à choisir l’option « embled » pour disposer du code d’intégration sachant qu’il existe deux formes de lecteur possibles :

La case à cocher « WordPress code » vous servira pour WordPress.fr et sera sous forme de shortcode.
Petit plus, vous pouvez jouer avec deux options :les couleurs et lancer la lecture automatiquement :

L’intégration d’une liste de lecture suivra la même logique.

L’exemple avec l’intégration :

Paypal : ajouter un bouton don

Ressources web

L’intérêt de Paypal est de pouvoir recevoir et envoyer de l’argent assez facilement et de façon sécurisée, vous pouvez ajouter un bouton « Don » sur votre site sans vraiment de problème via la page suivante, attention vous devez disposez d’un compte Paypal obligatoirement.

Petite précisons de Paypal :

Pas de frais d’installation, d’abonnement, ni d’annulation. Commissions sur les paiements reçus uniquement.

Les donateurs n’ont pas besoin de compte PayPal pour effectuer leurs dons.

Après avoir créé vos boutons Faire un don, vous pouvez les placer sur votre site pour lever des fonds. Cependant, pour accéder aux fonds que vous recevez, il vous faut un compte Premier ou Business.

3 étapes sont à respecter afin de disposer de votre bouton :

Étape 1 : choisissez un type de bouton et saisissez les détails de votre paiement
Étape 2 : enregistrez vos boutons (facultatif)
Étape 3 : fonctions de paiement (facultatif)

Les étapes sont relativement simples si votre compte est dèja configuré correctement. après ce petit remplissage, vous pouvez créer votre bouton sans souci.

Vous accédez enfin à l’écran vous permettant de récupérez le fameux code d’intégration pour votre bouton :

Et pour finir le fameux bouton pour l’exemple :

Pinterest : Intégrer un code dans votre site web

Ressources web

Afficher son contenu avec Pinterest reste une chose relativement simple, en effet Pinterest a faciliter les choses en intégrant cette possibilité directement depuis le menu :

Le clic sur l’élément « Créer un widget » vous permettra d’avoir le code d’intégration facilement :

Twitter : Intégrer le bouton suivre, le fil d’actualité, un #hashtag spécifique

Ressources web

Twitter propose de nombreuses intégration pour votre site web allant du bouton suivre à une recherche spécifique sur un hashtag. Vous devrez être connecté pour pouvoir utilisez ses ressources et disposez du code d’intégration, ces boutons vous permettrons d’ajoutez des boutons à votre site Web afin d’aider vos lecteurs à partager votre contenu et à vous retrouver sur Twitter.

Exemple avec le bouton « Intégrer le bouton suivre »

Pour cela, il suffit simplement d’aller sur la page dédié, d’ajouter le nom d’utilisateur et de définir vos options :

Comme vous pouvez le voir, vous pouvez ajouter des boutons sur les choses suivantes :

Partager un lien
Suivre, exemple « Suivre @CreaZo »
Hashtag, exemple Tweeter #WordPress
Mention

Insérer un Widget Twitter

L’unes des fonctionnalités les plus intéressantes reste l’ajout d’un code embarquée (sous forme de Widget Twitter) via cette page :

Vous allez devoir configurer votre Widget, les options sont relativement simple à saisir sur les différentes possibilités :

Exemple avec une recherche :

Et un exemple d’intégration avec le fil d’actualité de @CreaZo :

Tweets de @CreaZo

Linkedin : Intégrer son badge de page ou de profil

Ressources web

La page des développeurs de Linkedin dispose de quelques possibilités pour intégrer votre page ou profil :

Partage Linkedin
Suivre une société
Profil de membre
Profil de la société
Les profils de la société
Les emplois qui pourrait vous intéresser
Profil d’une école

Un exemple d’intégration avec un profil :

Google+ : Intégrer un post

Ressources web

Tout comme l’intégration de Facebook dans votre site web via un iframe ou via un code javascript et html, vous pouvez insérez vos posts Google + dans votre site de façon relativement simple.

Tout d’abord définissez le post Google+ que vous voulez voir apparaître sur votre site internet, puis cliquer sur le coin en haut à droite et cliquez sur « Integrer le post »

Vous allez donc disposez d’un code tout fait par Google+ à copier dans votre site web :

Voici donc un exemple d’un de nos post sur la page Google+ de CreaZo :

Vous pouvez donc voir que cela est complètement interactif dans votre site.

Sur Google+, vous n’aurez la possibilité que d’intégrer un badge pour inciter les visiteurs de votre site à vous suivre, sans avoir la possibilité de partager votre fil d’actualité pour donner un aperçu de votre ligne éditoriale ou des contenus partagés.

Facebook : Intégrer sa timeline, ses événements et/ou les messages

Ressources web

Depuis quelques temps Facebook a fait quelques modifications sur l’intégration du fil d’actualité ou de la « timeline », vous pouvez désormais intégrer votre fil d’actualité (comme avant) mais aussi les événements et/ou les messages sur votre site internet.

La technique via un iframe fonctionne toujours, celle-ci ne correspond plus « à l’usage » recommander par Facebook mais vous permettra d’intégrer votre fil d’actualité sans souci.

Tout d’abord, connectez-vous à la « Page Plugin » de Facebook et allez ajouter votre nom de page dans « Facebook Page URL », la partie « Tabs » va vous permettre de définir si vous souhaitez avoir la timeline, les événements ou les messages sur votre site internet avec les mots clefs suivants : « timeline », « messages » ou « events », comme toujours vous pouvez définir la taille en largeur et en hauteur pour adapter au mieux l’intégration.

En cliquant sur « Get Code » vous allez devoir insérez votre code en deux parties :

Le SDK JavaScript a insérer dans votre fichier header.php :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

<div id="fb-root"></div>
<p>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

[/pastacode]

Et enfin le code suivant dans votre page :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

<br />
<div class="fb-page" data-href="https://www.facebook.com/creazo.web" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<br />
<div class="fb-xfbml-parse-ignore">
<br />
<blockquote cite="https://www.facebook.com/creazo.web"><a href="https://www.facebook.com/creazo.web">CreaZo</a>
</p></blockquote>
<p>
</div>
<p>
</div>
<p>

[/pastacode]

Vous pouvez aussi le faire directement par un shortcode comme celui-ci [ FacebookTimeline ] (sans les espaces) :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

function FacebookTimeline_creazo( ) 
{ 
	$codehtml = '
<br />
<div id="fb-root"></div>
<p>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));</script>
<br />
<div class="fb-page" data-href="https://www.facebook.com/creazo.web" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<br />
<div class="fb-xfbml-parse-ignore">
<br />
<blockquote cite="https://www.facebook.com/creazo.web">
<a href="https://www.facebook.com/creazo.web">CreaZo</a>

</p></blockquote>
<p>
</div>
<p>
</div>
<p>
'; 
	return 
	$codehtml;
} 
add_shortcode( 'FacebookTimeline', 'FacebookTimeline_creazo' );

[/pastacode]

[FacebookTimeline]

7 plugins WordPress essentiels pour votre site

Thèmes & Plugins WordPress

Quels plugins installez-vous sur votre site WordPress ? De notre coté nous évitons d’en installer trop afin de maximiser le fonctionner de nos sites web (vitesse, nombres de requêtes, chargement…), pourtant certains sont essentielles à nos yeux et nous vous les présentons à travers nos 10 plugins WordPress qui nous semblent essentiels.

Admin Columns

Ce plugin vous permettra de personnaliser les colonnes sur les différents écrans d’administration des articles, des pages, des médias, des commentaires, des liens et des utilisateurs avec une interface facile à utiliser. Un petit plus quand on souhaite enlever ou ajouter des colonnes spécifiques

BackUpWordPress

Un outil permettant de faire vos sauvegardes automatiques de façons simples et automatisés de votre site WordPress. Bref un incontournable pour limiter l’infogérance de vos site.

Broken Link Checker

Toujours dans une optique d’automatisation et de gain de temps, ce plugin vous permettra d’automatiser la recherches de liens brisés dans votre site, pas grand chose quand vous n’avez que quelques liens dans votre sites, une bénédiction quand vous avez 5000 ! L’interface en français est très clair et intuitive. Nous ne parlions dans cet article justement.

Cresta Social Share Counter

Dans le florilège de partage vers les réseaux sociaux, nous avons pu en tester un certains nombres. Jamais satisfait, nous avons finis par nous appuyer sur ce plugin simple, en français et très clair dans sa présentation, la version Pro apporte des ajouts non négligeable lorsque que l’on souhaite aller beaucoup plus loin.

Imagify

La chasse au poids lourds des images est un tache assez longue et fastidieuse, mais avec ce plugin une grosse partie du boulot est faite, en réduisant le poids de toutes les images de votre site web, petit plus pour l’interface très ergonomique. Différentes versions existent, un premier test avec la version gratuite est très convaincante. La compression de votre image peut se faire de faocn globale et ensuite à chaque envoi.

WP Rocket

De nombreux articles existent sur cette extension, tous en font une très bon éloge et tous ont raison, un plugin de cache en français performant avec un support réactif, une interface clair, des vidéos d’explications et made in France ! Extension payante mais à n’acheter qu’une seule, nous vous conseillons celle-ci !

Google AdSense

Ajouter de la publicité dans son site est parfois un véritable casse-tête (Comment ? Dois-je le faire ? Où ? …), toutefois quand on souhaite passer le pas il est aisé de le faire avec ce plugin Made in Google. L’interface reste clair et on arrive facilement à mettre en place ces publicités la où on le souhaite, de notre coté nous avons ajouter de la publicité seulement sur les articles, coté blogging seulement ! Un compte Google AdSence est obligatoire par contre, nous en parlons plus longuement dans cet article.