TOP 10 Hebergeurs - Comparatif des hebergeurs, articles et avis sur l'hebergement

Comment protéger votre blog : lutte contre le spam et le hack

Un site risque tôt ou tard d’être hacké : commentaires, inaccessibilité du site, redirections… bien des techniques risquent de porter atteinte à vos pages web.

Des commentaires malintentionnés = danger!

Que votre blog publie des commentaires en russe ou d’autres invitant à se rendre sur tel site : cela est particulièrement nuisible à votre lectorat. Il est donc intéressant de n’autoriser la mise en ligne de commentaires qu’après relecture et validation. Oui mais, quand votre boite mail s’inonde de demande de confirmation pour ces messages spammy, vous aussi êtes gênés et même agacés. Heureusement, il est possible en ajoutant un peu de code d’empêcher les visiteurs qui ne lisent pas le blog de commenter. On évite ainsi une quantité phénoménale de « déchets ». Dans le fichier htaccess, indiquez ceci :

RewriteCond %{REQUEST_METHOD} POST

RewriteCond %{REQUEST_URI} .wp-comments-post\.php*

RewriteCond %{HTTP_REFERER} !.*yourdomainname.* [OR]

RewriteCond %{HTTP_USER_AGENT} ^$

RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

Faire copier un code pour permettre de commenter

C’est le principe qui agace beaucoup de personnes : en effet parfois nous mettons plus de temps à copier le code exigé qu’à rédiger le commentaire lui-même! Captcha est à l’origine de cette génération de codes qui protègent vos sites. Cependant, il peut être contourné par les spammeurs qui mettent en place les moyens humains pour recopier ces codes.

 Le hack : que votre site ne soit plus…

Effectivement, à y réfléchir il ne faut pas grand chose pour détruire un site, se l’approprier ou le rendre inaccessible! Il suffit par exemple d’obtenir les codes d’accès au ftp pour pouvoir y transférer tous les fichier que l’on veut, on peut même changer de CMS… Bref, si les identifiants et mot de passe sont généralement complexes et donc impossible à trouver par un inconnu malintentionné, la moindre des prudences du webmaster consiste à garder ces codes confidentiels, et lorsque c’est possible de les modifier de temps à autre, en gardant la complexité maximum. C’est à dire qu’ils doivent être composés de Majuscules et minuscules, chiffres et lettres. La logique ne doit surtout pas être au rendez-vous pour que personne ne découvre les données.

Les sites qui risquent le plus d’être hackés

Les sites officiels sont la proie des groupes rebelles voire terroristes, ceux qui brassent de l’argent victimes des voyous prêts à tout pour s’enrichir… Toutes les thématiques sont à risques mais plus on fait intervenir des génies de l’informatique, plus le risque s’accroît.

Enfin, plus votre site est ambitieux et fructueux, plus il doit être protégé : qu’il s’agisse de spam ou de hack! Tous à vos codes!

Créer un forum sur WordPress : un simple plugin suffit!

En effet, vous n’aurez pas besoin de bien longtemps pour rendre votre forum actif sur votre site WordPress : voyons quel plugin choisir, et comment le paramétrer.

BB Press : le forum pour WordPress

Installez ce plugin dans sa dernière version. Pour faciliter votre utilisation du forum mais surtout celles des futurs participants, nous allons d’emblée intégrer une version française dans le dossier langage de BB Press (dans le ftp : wp-content, plugins, BB Press, langage). Après cette installation, vous apercevez un onglet Forum, à l’instar de Articles ou Pages. Commencez par ajouter un forum, en cliquant sur Nouveau forum. Il doit avoir un titre général car ce sera la page principale dont découlera ensuite des thématiques différentes. Vous créerez ensuite un autre forum, qui aura pour parent le premier : déclinez ainsi ces étapes pour obtenir une hiérarchisation de votre plateforme. 

La création de topics

De la même manière on va créer les sujets de discussion, afin de stimuler les internautes à participer! Ils seront bien évidemment placés dans un forum de thématique adaptée. Tout y est! Oui mais, comment vont faire vos lecteurs pour connaître la présence de cette nouveauté de taille? Et bien dans le menu, ou dans le widget vous avez la possibilité de mettre en avant votre forum, ou simplement l’onget de connexion/inscription, nommé BB Press Login Widget. 

Permettre à vos visiteurs de s’inscrire

Dans Réglages–> Général, cochez la case Tout le monde peut s’enregistrer. Juste en dessous choisissez les droits attribués à vos participants : l’idéal est Abonné. En effet, si vous choisissez Participant au Forum les internautes ont accès aux commentaires, et fonctions qui pourraient vous nuire. Soit vous intégrez le widget de connexion, soit vous créez une page login ou une page normale avec un lien vers l’adresse d’inscription (url/wp-admin). Reste encore un détail : pour un peu plus d’animations, il faut que chacun puisse personnaliser son avatar, et là, cela se corse… 

Mettre un avatar personnalisé dans BB Press

Pour WordPress, beaucoup recommande Gravatar, qui permet à partir de votre adresse mail de charger une image au choix. Cependant la manoeuvre est bien plus périlleuse que sur d’autres forums où il suffit de cliquer sur « charger l’image » pour avoir sa photo affiliée au profil… Soit, il y a donc la solution Gravatar, mais si vous trouvez mieux, dites-nous tout!

Est-ce que BB Press convient à tous les thèmes?

S’il se marie parfaitement avec Twenty Eleven, il convient moins à d’autres. Il est néanmoins appréciable de constater que le style correspond à celui que vous avez imposé à votre site (couleur des hn, des liens etc). Le mieux est donc de tester, en sachant que pour les abonnés à Elegant Themes,  nous avons pu noter la compatibilité sympathique avec le thème The Style, qui plus est, assez élégant!

Allons allons! Tous à vos forums!

Créer vos propres logos pour la création de vos sites avec Gimp

Ce logiciel simple d’utilisation permet de personnaliser votre site en produisant votre propre image : vous pouvez y mettre du texte, le rendre transparent pour qu’il se fonde à votre background… Evitez donc de charger les mêmes fichiers que tout le monde, faites-vous artiste!

Un logo avec juste quelques lettres

Parfois pour mettre en valeur une page d’accueil ou un article, on souhaite partager une expression qui signifie quelque chose à nos yeux : pour attirer les regards, nous allons donner à ces lettres un peu de couleur et de style. Ouvrez donc Gimp, et choisissez une image plus ou moins large selon la longueur de la phrase à intégrer. Par exemple 500×150 : ce fichier pourra ainsi être placé en guise de logo dans le header. Cliquez sur l’outil d’édition, symbolisé par un A et définissez l’espace où vous allez écrire. Choisissez une police qui varie de celle de vos textes, tout en s’y harmonisant. Pour donner de l’allure, vous pouvez écrire votre expression en 2 fois : la première lettre, en majuscule, assez grande et d’une couleur identique à celle du titre de l’article par exemple, puis le reste en minuscule dans une couleur plus neutre (blanc si vous avez un fond en couleur, ou noir/gris sur blanc).  Pour être sûr que ce logo s’adapte à votre background ,nous allons rendre le fond transparent.

Rendre transparent le fond d’une image avec Gimp

Grâce à la pipette multicolore (à côté de la paire de ciseau), sélectionnez l’arrière plan de votre logo puis cliquez sur : couleur–>couleur vers alpha. Indiquez le code correspondant au fond de l’image (pour blanc le code est ffffff) et validez. Si tout c’est bien passé, les mots surplombent désormais des cases grises. Vous pouvez sauvegarder votre fichier, en format png et en cochant toutes les cases pour conserver les calques etc. Intégrez votre image dan le header et admirez votre création!

Personnaliser une image empruntée sur le web…

Certes, ce n’est pas très élégant, mais si vous travaillez bien, personne ne pourra reconnaître l’image que vous avez utilisé pour créer la vôtre. Ouvrez ce fichier que vous avez téléchargé dans Gimp. Vous pouvez personnaliser ses couleurs : avec la pipette multicolore sélectionnez celle de votre choix, puis à l’aide du pot de peinture, vous pouvez modifier en un clic le coloris selon vos goûts. Vous pouvez faire de même pour tous les éléments de l’image, à moins que vous ne préfériez supprimer des parties. Grâce à l’outil de sélection manuelle (le petit bonhomme bleu!), vous pouvez faire le contour de l’élément que vous souhaitez enlever, puis cliquez sur Edition–>effacer.

Vous avez donc la possibilité d’intervertir les différentes parties de l’image, de supprimer des mots ou encore d’ajouter un dégradé… En 2 minutes, vous avez une image unique qui colle à votre site et votre personnalité.

Accélérer la vitesse d’affichage d’un site WordPress : astuces N°3!

La feuille de style contient par défaut de nombreux détails que l’on n’utilise plus une fois l’apparence optimisée. Il est intéressant de supprimer tout ceci afin de maximiser la rapidité d’affichage de vos pages. Mais que peut-on définitivement exclure?

Nettoyer la feuille CSS

On n’imagine pas à quel point certains thèmes WordPress peuvent perdre du poids si on a le courage de mettre les mains dans le cambouis. Par défaut, de nombreuses possibilités d’apparence sont indiquées dans le CSS, permettant ainsi au blogueur de bénéficier d’une large palette de polices, de couleur et autres mises en page. La balise « quote » par exemple, n’est parfois pas utile, selon l’usage qui est fait du site : dans la feuille de style on va donc pouvoir supprimer tous les codes qui s’y réfèrent. De même que les données relatives aux commentaires lorsqu’ils ne sont pas activés. Bien sûr, il convient de sauvegarder le fichier original avant de faire un tel ménage, car peut-être l’évolution du site vous amènera-t-elle à ouvrir les commentaires un peu plus tard…

Suppression des indications? Oui!

Afin de mieux se repérer dans le fichier CSS, des annotations sont positionnées tout au long du code : pour faire perdre du poids à tout cela, on peut les effacer, en sachant que ce sera un peu plus difficile de faire des modifications par la suite… Mais chaque code indique l’élément auquel il est lié (footer, sidebar…). Vous pouvez aussi gagner en légèreté en supprimant les espaces vides : là aussi on perdra en lisibilité mais c’est pour la bonne cause. Cette étape doit donc vraiment intervenir lorsque l’apparence du site est définitive, et surtout sans oublier de conserver le fichier initial. Car il arrive toujours un moment où un rafraîchissement s’impose!

Regrouper les codes CSS

On le constate généralement dès les premières lignes de la feuille de style, par exemple :

h1,h2,h3,h4,h5,h6,p,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

Ici on indique que tous ces champs suivront le même style (c’est-à-dire les annotations en bleu). Ainsi on évite de devoir répéter séparément l’information pour chaque élément. Ensuite, la majorité des textes ne contiennent pas de balises h4, h5 et h6 : si vous n’êtes pas partisan de ces dernières, pourquoi les conserver? Autant les ôter du CSS, dans lequel elles sont semées du début à la fin… A vous donc de repérer ce qui vous est utile ou pas, et de faire le tri en conséquence.

Ce sont ainsi des paragraphes entiers qui vont disparaître : les navigateurs perdront moins de temps à parcourir le CSS, de même que les fichiers php si toutefois vous avez pris soin de les optimiser eux-aussi!

Accélérer la vitesse d’affichage d’un site WordPress : astuces N°2!

Nous avions vu comment alléger le chargement des pages dans un premier numéro : aujourd’hui nous allons utiliser des fonctions et plugins qui permettent en quelques clics d’aller encore plus loin dans ce challenge!

Le plugin Debug Objects

Cet outil permet de revaloriser les fonctions utiles en mettant en veilleuse celles qu’on n’utilise pas. On peut observer l’impact du travail effectué dans le but d’accélérer l’affichage des pages. Il suffit de l’installer via l’onglet Extension de l’administration WordPress et d’affiner les réglages selon vos souhaits. Toutefois, pour ceux qui craignent les conflits avec d’autres outils, il est possible en ajoutant un peu de code dans le fichier wp-config.php d’obtenir un résultat similaire au plugin, et de ne pas utiliser ce dernier :

if ( isset($_GET['debug']) && $_GET['debug'] == 'debug') define('WP_DEBUG', true);

La méthode des Transient

De quoi parle-t-on? Il s’agit là d’une fonction qui permet de conserver des données en cache : ainsi lors de prochains passages, la lecture sera moins copieuse et l’affichage plus rapide. Nous allons donc inclure ce genre de code :

function masuperfonction() {
    $count=get_transient (‘nomdutransient‘);
    if ( false === $count){
    
      $counti = ’ce-que-vous-voulez-mettre-en-cache‘;
      set_transient ($count, $counti, 86400);}
    echo get_transient ($count);}

En bleu sont les codes à adapter selon vos objectifs. Vous pouvez ainsi choisir de mettre en Transient la description de votre thème qui apparaît systématiquement sur toutes vos pages : l’avantage est bel et bien d’éviter la lecture des codes redondants. Mais vous pouvez aller au-delà et choisir d’affilier au Transient ce qui vous semble judicieux!

Modifier vos images

Lorsqu’on indique le format de l’image sous ce type de code, on alourdit l’affichage de la page :
<img width= »150px » height= »150px » alt= »votre image »
src= »nomdudossier/mon-image.jpg »/>
Il est préférable de jongler avec le CSS pour ne pas être confronté à ce problème. On préférera donc y noter :
.mon-image{ background-image : url(‘nomdudossier/votre-image.jpg’) no-repeat; width: 150px; height: 150px; }.
Le problème est le même pour toute apparence finalement. Ce deuxième exemple peut être adapté à la feuille de style aussi:
<p style= »text-align: left; color: black; font-weight: bold; size: 12px; »>BlaBla</p>
On peut supprimer ces détails du fichier php ou du texte pour le lier au CSS de la sorte :
.paragraphe-noir{ text-align: center; color: #000000; font-weight: bold; size: 12px;}.

Le problème ensuite est de faire le tri dans cette de feuille de style : car certes, vous y ajoutez des données pour optimiser la vitesse d’affichage de votre site, mais vous pouvez aussi en supprimer des éléments inutiles, pour ainsi maximiser encore cette optimisation! Un travail de longue haleine donc…