PROTUTS.net » Wordpress

30 thèmes WordPress à télécharger gratuitement

Rainbow — Sat, 13 Jun 2009 08:00:43 +0000

A la recherche d’un nouveau thème graphique pour égayer votre blog WordPress ? Ne cherchez plus, vous êtes au bon endroit ! Cet article regroupe plus de 30 thèmes WordPress à télécharger gratuitement : magazine, portfolio, blog, etc… Bref, il n’y a en a pour tous les goûts, alors servez-vous !

#1 - Simple Indy

Capture d'écran du thème Simple Indy

Démo : Simple Indy

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#2 - Pongal Red

Capture d'écran du thème Pongal Red

Démo : Pongal Red

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#3 - Gandhi

Capture d'écran du thème Gandhi

Démo : Gandhi

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#4 - Pranav

Capture d'écran du thème Pranav

Démo : Pranav

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#5 - Blu Mag

Capture d'écran du thème Blumag

Démo : Blu Mag

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#6 - Indy Premium

Capture d'écran du thème Indy Premium

Démo : Indy Premium

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#7 - WP Elegance 2

Capture d'écran du thème WP Elegance 2

Démo : WP Elegance 2

Site officiel : Free WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#8 - CryBook

Capture d'écran du thème Crybook

Démo : CryBook

Site officiel : Themetation

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#9 - ClearPress

Capture d'écran du thème ClearPress

Démo : ClearPress

Site officiel : Blog Oh Blog

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#10 - WP ESP Theme

Capture d'écran du thème WP ESP

Démo : WP ESP Theme

Site officiel : WP ESP

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#11 - Bonus : Vodpod

Capture d'écran du thème VodPod

Démo : Vodpod

Site officiel : Press 75

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#12 - Epsilon

Capture d'écran du thème Epsilon

Démo : Epsilon

Site officiel : web2feel.com

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#13 - Fholio

Capture d'écran du thème Fholio

Démo : Fholio

Site officiel : Eliseos

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#14 - CorporateMag

Capture d'écran du thème Corporate

Démo : CorporateMag

Site officiel : TopWPThemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#15. IsoTherm News

Capture d'écran du thème IsoThermNews

Démo : IsoTherm News

Site officiel : Bizzartic

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#16 - Milano

Capture d'écran du thème Milano

Démo : Milano

Site officiel : web2feel.com

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#17 - Gamezine

Capture d'écran du thème Gamezine

Démo : Gamezine

Site officiel : web2feel.com

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#18 - Fotofolio

Capture d'écran du thème Fotofolio

Démo : Fotolio

Site officiel : Pupung Budi Purnama

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#19 - DesignMagz

Capture d'écran du thème DesignMagz

Démo : DesignMagz

Site officiel : Pupung Budi Purnama

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#20 - Meta-Morphosis

Capture d'écran du thème Meta-morphosis

Démo : Meta-Morphosis

Site officiel : WooThemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#21 - The Latest

Capture d'écran du thème The Latest

Démo : The Latest

Site officiel : WP Theme Designer

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#22 - Scarlett

Capture d'écran du thème Scarlett

Démo : Scarlett

Site officiel : Web2feel.com

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#23 - Portfolio Press

Capture d'écran du thème Portfolio Press

Démo : Portfolio Press

Site officiel : BlogOhBlog

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#24 - Blue Diamond

Capture d'écran du thème Blue Diamond

Démo : Blue Diamond

Site officiel : SkinPress

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#25 - Coffee Desk

Capture d'écran du thème Coffee Desk

Démo : Coffee Desk

Site officiel : TemplateLite

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#26 - Autofocus

Capture d'écran du thème Autofocus

Démo : Autofocus

Site officiel : Allancole

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#27 - Vector Flower

Capture d'écran du thème Vector Flower

Démo : Vector Flower

Site officiel : EZ WP Themes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#28 - Photo Madness

Capture d'écran du thème Photo Madness

Démo : Photo Madness

Site officiel : WPThemeDesigner

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#29 - Fusion

Capture d'écran du thème Fusion

Démo : Fusion

Site officiel : DigitalNature

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#30 - WildDreams

Capture d'écran du thème Wilddreams

Démo : WildDreams

Site officiel : Productive Dreams

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

Des thèmes de bonnes qualités même si certains ont besoin d’être fignolés.

MailPress, solution ultime de gestion de newsletters sous WordPress

Maigret — Fri, 12 Jun 2009 16:00:16 +0000

Énervés par FeedBurner et son système peu performant pour gérer vos newsletters ? Envie d’en offrir plus à vos abonnés ? Découvrez MailPress, LA solution par excellence pour des newsletters taillées sur mesure. Apprenez à gérer vous-mêmes vos abonnements et gagnez en indépendance !

Installation de MailPress

MailPress est un plugin WordPress développé par André Renaut. Disponible aussi bien en français qu’en anglais, vous pouvez le télécharger à l’adresse suivante:

Note: There is a file embedded within this post, please visit this post to download the file.

Configuration de base

Concernant l’installation du plugin, il faut prendre en compte plusieurs points capitaux - pour éviter une ou plusieurs erreurs :

Commencez par décompresser l’archive téléchargée dans le dossier de votre choix ;
A l’intérieur du dossier figurent plusieurs fichiers ZIP contenant des plugins additionnels pour MailPress - l’add-on de l’add-on en somme ;
Choisissez donc ceux qui vous intéressent en fonction de leurs descriptions. Pour débuter, je vous recommande :
- MailPress_filter_img : pour appliquer un filtre sur les images contenus dans vos mails (positionnement, styles HTML / CSS, etc.) ;
- MailPress_import : offre des outils d’importation depuis d’autres plugins WordPress - nous y reviendrons plus tard ;
- MailPress_mail_custom_fields : pour ajouter des champs personnalisés lors de l’envoi de mail ;
- MailPress_upload_media : autorise l’insertion d’images dans votre newsletter ;
Décompressez ceux qui vous intéressent dans de nouveaux dossiers ;
Mettez en ligne le plugin source MailPress puis les add-ons dans le dossier /wp-content/plugins de votre blog WordPress ;
Vérifiez que le dossier /wp-content/plugins/mailpress/tmp est en 777 pour le CHMOD ;
Connectez-vous à votre panneau d’administration WordPress puis cliquez sur le module Extensions. Là, activez dans un premier temps, le plugin MailPress, sans quoi les autres ne fonctionneront pas puis, dans un second temps, les add-ons ;
Un nouveau module Mails a fait son apparition. Déroulez ce dernier puis cliquez sur Réglages ;
Paramétrez les différentes options à votre guise puis faites Enregistrer les modifications ;
Un nouvel onglet SMTP est désormais accessible. Il va nous permettre de configurer le serveur de mail. Ces paramètres sont propres à tout un chacun et il est donc impossible d’en détailler les différentes options ici. En règle générale, il suffit d’indiquer ceux que vous utilisez pour accéder à votre compte mail depuis un client mail ;
Pour finir, n’oubliez pas de cliquer sur le bouton Enregistrer les modifications ;

Ajout du formulaire d’abonnement

MailPress offre 3 possibilités de souscription :

Le widget MailPress : pour l’activer, ouvrez le menu Apparence puis cliquez sur Widgets ;
L’ajout d’un code PHP dans le code de votre thème WordPress :
```
					
```
L’utilisation d’un shortcode à insérer dans une page de votre choix entre crochets : mailpress

Félicitations, MailPress fait désormais parti intégrante de votre blog WordPress !

Importation de vos abonnés FeedBurner

Voyons à présent comment transférer en quelques clics vos abonnés FeedBurner. En effet, n’oublions pas que le service est toujours en place et que MailPress ne dispose d’aucun abonnés dans sa base de données.

Exportation de votre liste d’abonnés depuis FeedBurner

Pour générer un fichier CSV, connectez-vous donc à votre compte FeedBurner puis rendez-vous dans l’onglet Publicize. Dans le panneau latéral gauche, cliquez sur Email Subscriptions. Descendez en bas de page puis cliquez sur View Subscriber Details.

Pour obtenir le fichier, faites Export : CSV puis sauvegardez-le sur votre ordinateur.

Importation de votre liste d’abonnés sous MailPress

Pour débuter, vérifiez que l’add-on MailPress_import est activé. Ensuite, déroulez le menu Mails puis cliquez sur Importer.

Capture d'écran - Importation d'un fichier CSV

N.B : avant toute opération d’importation, faites une sauvegarde de votre base de données par mesure de sécurité.

Là, optez pour csv puis suivez les différentes étapes. Il se peut que l’écran final ne fonctionne pas. Ce n’est pas grave car l’importation a malgré tout réussi, comme vous pouvez le constater dans le module Abonnés, qui répertorie l’ensemble des inscrits.

Notez que d’autres plugins WordPress sont aussi supportés par MailPress. Ainsi, il est possible d’importer une liste d’abonnés depuis subscribe2 ou xmlsample. De même, la prise en charge de subscribe to comments permet de se passer de ce plugin et de confier cette tâche à MailPress.

N’oubliez pas de passer le service de newsletters sur FeedBurner en inactif… ceci évitera que vos abonnés ne reçoivent des doublons.

Autres fonctionnalités pratiques

On retiendra la possibilité de :

Choisir entre plusieurs thèmes graphiques pour vos e-mails ;
D’ajuster en fonction de vos besoins les options du plugin à l’aide d’add-ons ;
D’envoyer un mail à vos abonnés ou à une personne en particulier ;
De tester le service avec divers paramètres pour se donner un aperçu final ;

Autant dire que si vous cherchez une solution efficace de gestion de vos newsletters, ne cherchez pas plus loin ! MailPress est LE plugin indispensable pour ce genre d’opérations. C’est d’ailleurs celui que nous utilisons sur Protuts comme vous pouvez le constater sur la page Abonnements ou dans le pied de page !

Créer une sidebar widgétisée dans WordPress

Rainbow — Thu, 28 May 2009 15:34:57 +0000

La plupart des thèmes WordPress dispose d’une ou plusieurs sidebars (barres latérales) widgétisées - c’est à dire, que vous pouvez la modifier en y ajoutant des gadgets via le menu Widgets de WordPress, et ce très facilement. Alors plutôt que de changer votre thème graphique pour un autre dit widgétisé, lisez la suite de l’article pour pallier cette absence.

Commencez par ouvrir le fichier contenant votre sidebar. En général, il se nomme sidebar.php ou second.php. Puis, ajoutez cette ligne de code à l’emplacement de votre choix.

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?>

Ensuite, il nous faut déclarer en quelque sorte notre sidebar widgétisée dans le fichier functions.php. Si ce dernier n’existe pas, créez-le. Ajoutez-y ces lignes de code :

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar',
'before_widget' => '
',
'after_widget' => '
',

'before_title' => '

',

'after_title' => '',

));

Vous remarquerez que notre barre latérale widgétisée s’appelle ici Sidebar mais vous pouvez l’appeler comme bon vous semble. Toutefois, si vous souhaitez la nommer autrement, n’oubliez pas de modifier son nom dans les deux morceaux de code précédemment utilisés.

Quelques explications sur ces lignes de code :

‘before_widget’ et ‘after_widget’ : permettent d’encadrer votre sidebar d’une balise div pour la styliser ;
‘before_title’ et ‘after_title’ : permettent d’appliquer un style aux différents intitulés de vos widgets (par exemple, articles récents ou articles populaires) ;

Sauvegardez vos modifications puis rendez-vous sur la page Widgets où vous devriez voir apparaître dans une liste déroulante le nom de votre sidebar. Il ne vous reste plus qu’à y ajouter des widgets.

Notez que vous pouvez créer autant d’emplacements widgétisés que vous nécessaire en prenant soin de les nommer différemment. De plus, tout emplacement de votre site peut widgétisé comme un footer, ce qui le cas de Protuts.

Liste déroulante des sidebars disponibles

Désormais, vous n’aurez plus à vous soucier de savoir si le thème est widgétisé ou non .

Supprimer des champs personnalisés (custom fields) dans WordPress

Maigret — Mon, 25 May 2009 10:18:47 +0000

Un champ personnalisé - custom field en anglais, contient des informations spécifiques concernant un article dont le but est d’afficher un contenu. Ils permettent, entre autres, de renseigner des URL pour une miniature, des mots-clés pour le référencement, etc et sont générés par des plugins ou l’utilisateur final. Par conséquent, il arrive fréquemment que d’anciens champs personnalisés ne s’effacent pas de la liste et sont donc toujours présents dans votre base de données.

Sauvegarde de la base de données

Pour faire un peu de ménage, il est nécessaire d’effectuer au préalable une sauvegarde de votre base de données. La méthode la plus simple consiste à utiliser le plugin WordPress Database Backup, téléchargeable à l’adresse suivante :

Note: There is a file embedded within this post, please visit this post to download the file.

Une fois installé, rendez-vous dans le menu Outils de votre panneau d’administration WordPress puis cliquez sur Backup. Pour faire une sauvegarde immédiate, sélectionnez l’ensemble des tables puis cliquez sur Download to your computer.

Capture d'écran - Procédure de sauvegarde de la base de données

La sauvegarde effectuée, modifiez n’importe quel article. Identifiez à présent le nom de la clé à supprimer de votre base de données. Dans notre exemple, nous allons supprimer la clé forumlink.

Capture d'écran - Choix du champ personnalisé à supprimer

Exécution d’une requête MySQL

Ouvrez maintenant phpMyAdmin puis cliquez sur le nom de votre base WordPress dans la colonne de gauche.

Dans le module SQL, exécutez la requête suivante :

DELETE FROM wp_postmeta WHERE meta_key = ‘forumlink’

Modifiez le préfixe de la base selon votre cas - par défaut, il s’agit de wp_, ainsi que l’intitulé de la clé à supprimer.

Capture d'écran - Exécution de la requête de suppression du champ inutile

Validez le message d’avertissement en cliquant sur OK.

Une fois la requête lancée, un message vous indiquera le nombre d’entrées supprimées.

Retournez dans l’onglet de modification de votre article, actualisez la page puis déroulez la liste des champs personnalisés. Le champ forumlink a disparu !

Une méthode simple à mettre en oeuvre pour faire le vide dans cette masse de clés invalides !

32 thèmes WordPress à télécharger gratuitement

Rainbow — Sat, 16 May 2009 15:20:43 +0000

A la recherche d’un nouveau thème graphique pour égayer votre blog WordPress ? Ne cherchez plus, vous êtes au bon endroit ! Cet article regroupe plus de 30 thèmes WordPress à télécharger gratuitement : magazine, portfolio, blog, galerie, etc… Bref, il n’y a en a pour tous les goûts, alors servez-vous !

#1. Deskspace

Capture d'écran du thème Deskspace

Démo : Deskspace

Site officiel : Free Themes Layouts

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#2. Color Paper

Capture décran du thème Color Paper

Démo : Color Paper

Site officiel : Free Themes Layouts

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#3. DarkForest

Capture d'écran du thème DarkForest

Démo : DarkForest

Site officiel : Free Themes Layouts

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#4. Seabreeze

Capture d'écran du thème Seabreeze

Démo : Seabreeze

Site officiel : Free Theme Layouts

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#5. Scruffy

Capture d'écran du thème Scruffy

Démo : Scruffy

Site officiel : Fresh01

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#6. Mortgages

Capture d'écran du thème Mortgages

Démo : Mortgages

Site officiel : AZ Money Web Design

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#7. ModernOak

Capture d'écran du thème ModernOak

Démo : ModernOak

Site officiel : Dr Web

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#8. Librio

Capture d'écran du thème Librio

Démo : Librio

Site officiel : Deniart

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#9. Devart

Capture d'écran du thème Devart

Démo : Devart

Site officiel : Deniart

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#10. Upstart Blogger July07

Capture d'écran du thème July07

Démo : July07

Site officiel : Upstart Blogger July07

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#11. Upstart Blogger Futurosity Mag

Capture d'écran du thème Futurosity

Démo : Futurosity

Site officiel : Upstart Blogger Futurosity Mag

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#12. Upstart Blogger Modicus

Capture d'écran du thème Modicus

Démo : Modicus

Site officiel : Upstart Blogger Modicus

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#13. Upstart Blogger Modio

Capture d'écran du thème Modio

Démo : Modio

Site officiel : Upstart Blogger Modio

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#14. Upstart Blogger Minim

Capture d'écran du thème Minim

Démo : Minim

Site officiel : Upstart Blogger Minim

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#15. Upstart Blogger Purus

Capture d'écran du thème Purus

Démo : Purus

Site officiel : Upstart Blogger Purus

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#16. Upstart Blogger Swiss

Capture d'écran du thème Swiss

Démo : Swiss

Site officiel : Upstart Blogger Swiss

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#17. Curious

Capture d'écran du thème Curious

Description : arrière plan alternatif pour les commentaires, guide d’installation, feuille de style spécial pour l’impression, site validé CSS et XHTML…

Démo : Curious

Site officiel : WebRevolutionary

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#18. SandDollar

Capture d'écran du thème Sand Dollar

Description : widget ready, adsense ready, guide d’installation, site validé CSS et XHTML…

Démo : SandDollar

Site officiel : WebRevolutionary

Téléchargement :Note: There is a file embedded within this post, please visit this post to download the file.

#19. ColdBlue

Capture d'écran du thème ColdBlue

Description : thème minimaliste, champ de recherche intégré, guide d’installation, site validé CSS et XHTML…

Démo : ColdBlue

Site officiel : WebRevolutionary

Téléchargement :Note: There is a file embedded within this post, please visit this post to download the file.

#20. Sharpfolio

Capture d'écran du thème Sharpfolio

Description : thème portfolio, guide d’installation, site validé CSS et XHTML…

Démo : Sharpfolio

Site officiel : WebRevolutionary

Téléchargement :Note: There is a file embedded within this post, please visit this post to download the file.

#21. The Original Premium News

Original News

Description : 7 styles différents, spécial journal, menu animé pour les catégories, animations, Jquery pour afficher/masquer les articles, fonctionnalités incluses pour personnaliser le thème facilement…

Démo : Original News

Site officiel : WooThemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#22. Snapshot

Snapshot

Description : 3 styles différents, spécial photo/portfolio, nombreuses fonctionnalités incluses pour personnaliser le thème facilement

Démo : Snapshot

Site officiel : WooThemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#23. Typebased

Typebased

Description : 5 styles différents, spécial blog, nombreuses fonctionnalités incluses pour personnaliser le thème facilement

Démo : Typebased

Site officiel : WooThemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#24. Blogtheme

Blogtheme

Description : 5 styles différents, spécial blog, nombreuses fonctionnalités incluses pour personnaliser le thème facilement

Démo : Blogtheme

Site officiel : WooThemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#25. Elegant Grunge par Michael Tyson

Preview du thème Elegant Grunge pour WordPress

Description : photoblog, panneau d’administration pour personnaliser le thème facilement, footer widgétisé, afficher les derniers articles sous forme de Images…

Démo : Element Grunge

Site officiel : Michael Tyson

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#26. Christmas WordPress theme par Instant Shift

Preview du thème Christmas pour WordPress

Description : spécial noël, widgétisé, 100% CSS et XHTML valide, 2 colonnes…

Démo : Christmas WordPress theme

Site officiel : InstantShift

#27. Designredux par BlogDesignBlog

Capture d'écran du thème Designredux pour WordPress

Description : panneau d’administration pour personnaliser le thème facilement (Google Adsense, Google Analytics…), boutons pour le flux RSS et l’inscription à la newsletter, page spéciale archives…

Démo : Designredux

Site officiel : BlogDesignBlog

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#28. WP Candy par Michael Castilla

Capture d'écran du thème WP Candy

Description :
Sidebar widgetisée, respectueux totalement des standards W3C (CSS et XHTML), boutons de navigation animés, formulaire de contact intégré, modèles de page pour les archives et les liens…

Démo : WP Candy

Site Officiel : WP Candy (v2)

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#29. Thème NYC par Jean Baptiste Jung

Capture d'écran du thème New York City

Description :
Sidebar widgetisée, footer widgétisé, système de pagination intégré, possibilité d’afficher une image pour chaque article sur la page d’accueil (clé : Image), page d’archives personnalisée…

Démo : NYC

Site Officiel : JBJ’s Blog

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#30. MassivePress par Jason Schuller

Screenshot du thème MassivePress

Description : 3 colonnes, Images pour les articles, emplacement pour une description du site, aperçu des articles populaires par des images, 3 sidebars différentes, fichier source du logo fourni…

Démo : MassivePress

Site officiel : jDidIt

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#31. Mimbo par Darren Hoyt

Screenshot du thème Mimbo

Description : type magazine, 1 sidebar, 1 article principal, 1 colonne affichant sous forme d’image la catégorie Features (ou une autre), 1 colonne affichant des catégories (à définir soi même) sous forme de texte plus une Image…

Démo : Mimbo

Site officiel : DarrenHoyt.com

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#32. Agregado Lifestream by Darren Hoyt

Screenshot du thème Agregado Lifestream

Description : type blog perso (lifestream : vie en continue), nombreuses options pour paramétrer simplement le thème notamment la sidebar de droite (flickr, facebook, flux rss, twitter…), profil de l’auteur avec son gravatar, formulaire de contact intégré à la page d’accueil…

Démo : Agregado

Site officiel : DarrenHoyt.com

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

Téléchargement (fichiers sources) : Note: There is a file embedded within this post, please visit this post to download the file.

Et vous, c’est lequel votre préféré ?

50 thèmes WordPress à télécharger gratuitement

Rainbow — Sat, 16 May 2009 14:50:58 +0000

A la recherche d’un nouveau thème graphique pour égayer votre blog WordPress ? Ne cherchez plus, vous êtes au bon endroit ! Cet article regroupe 50 thèmes WordPress à télécharger gratuitement : magazine, portfolio, blog, galerie, etc… Bref, il n’y a en a pour tous les goûts, alors servez-vous !

#1. Galerie

Capture d'écran du thème Galerie

Démo : Galerie

Site officiel : Christopher Wallace (Smashing Magazine)

#2. Folio Elements

Capture d'écran du thème Folio Elements

Démo : Folio Elements

Site officiel : Press75

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#3. ZinePress

Capture d'écran du thème ZinePress

Démo : ZinePress

Site officiel : WellMedicated

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#4. Grass Roots

Capture d'écran du thème Grass Roots

Démo : Grass Roots

Site officiel : WellMedicated

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#5. Twitheme

Capture d'écran du thème Twitheme

Démo : Twitheme

Site officiel : Izzataziz

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#6. Dusk

Capture d'écran du thème Dusk

Démo : Dusk

Site officiel : Freebiethemes

Téléchargement (inscription gratuite nécessaire) : Note: There is a file embedded within this post, please visit this post to download the file.

#7. Swiss

Capture d'écran du thème Swiss

Démo : Swiss

Site officiel : Freebiethemes

Téléchargement (inscription gratuite nécessaire) : Note: There is a file embedded within this post, please visit this post to download the file.

#8. Pristine

Capture décran du thème Pristine

Démo : Pristine

Site officiel : Freebiethemes

Téléchargement (inscription gratuite nécessaire) : Note: There is a file embedded within this post, please visit this post to download the file.

#9. Atlantic

Capture d'écran du thème Atlantic

Démo : Atlantic

Site officiel : Smashing Magazine

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#10. I can watch movies

Capture d'écran du thème I can watch movies

Démo : I can watch movies

Site officiel : Acosmin

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#11. TypographyWP

Capture d'écran du thème Typography

Démo : TypographyWP

Site officiel : Acosmin

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#12. Chrome Tweaks

Capture d'écran du thème Chrome Tweaks

Démo : Chrome Tweaks

Site officiel : Acosmin

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#13. Written

Capture d'écran du thème Written

Démo : Written

Site officiel : ScribbleScratch

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#14. Bright Spring

Capture d'écran du thème Bright Spring

Démo : Bright Spring

Site officiel : ScribbleScratch

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#15. Simply

Capture d'écran du thème Simply

Démo : Simply

Site officiel : ScribbleScratch

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#16. Imprezz

Capture d'écran du thème Imprezz

Démo : Imprezz

Site officiel : Smashing Magazine

Téléchargement :Note: There is a file embedded within this post, please visit this post to download the file.

#17. Magazeen

Capture d'écran du thème Magazeen

Démo : Magazeen

Site officiel : Smashing Magazine

#18. Black Magic

Capture d'écran du thème Black Magic

Démo : Black Magic

Site officiel : Smashing Magazine

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#19. Cellar Heat

Capture d'écran du thème Cellar Heat

Démo : Cellar Heat

Site officiel : Smashing Magazine

#20. Simply Ornate

Capture d'écran du thème Simply Ornate

Démo : Simply Ornate

Site officiel : Smashing Magazine

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file. Note: There is a file embedded within this post, please visit this post to download the file. Note: There is a file embedded within this post, please visit this post to download the file. Note: There is a file embedded within this post, please visit this post to download the file. Note: There is a file embedded within this post, please visit this post to download the file.

#21. Out of the Box

Capture d'écran du thème Out of the Box

Démo : Out of the Box

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#22. Underwater

Capture d'écran du thème Underwater

Démo : Underwater

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#23. Inverted Headline

Capture d'écran du thème Inverted Headline

Démo : Inverted Headline

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#24. Choice

Capture d'écran du thème Choice

Démo : Choice

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#25. Just Lucid

Capture d'écran du thème Just Lucid

Démo : Just Lucid

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#26. The Brothers Karamazov

Capture d'écran du thème The Brothers Karamarov

Démo : The Brothers Karamazov

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#27. Neapolitan

Capture d'écran du thème Neapolitan

Démo : Neapolitan

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#28. Faulkner

Capture d'écran du thème Faulkner

Démo : Faulkner

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#29. Bipolar

Capture d'écran du thème Bipolar

Démo : Bipolar

Site officiel : DemusDesign

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#30. Pixeled

Capture d'écran du thème Pixeled

Démo : Pixeled

Site officiel : Samk

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#31. Mahusay

Capture d'écran du thème Mahusay

Démo : Mahusay

Site officiel : Pad IT Solutions

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#32. Outdoorsy

Capture d'écran du thème Outdoorsy

Démo : Outdoorsy

Site officiel : WeFunction

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#33. Luvin Grunge

Capture d'écran du thème Luvin Grunge

Démo : Luvin Grunge

Site officiel : Padd IT Solutions

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#34. Absynthe

Capture d'écran du thème Absynthe

Démo : Absynthe

Site officiel : Chris Wallace

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#35. Annexation

Capture d'écran du thème Annexation

Démo : Annexation

Site officiel : Chris Wallace

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#36. Rusty Grunge

Capture d'écran du thème Rusty Grunge

Démo : Rusty Grunge

Site officiel : Chris Wallace

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#37. Holiday

Capture d'écran du thème Holiday

Démo : Holiday

Site officiel : Chris Wallace

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#38. WP Smashing

Capture d'écran du thème WP Smashing

Démo : WP Smashing

Site officiel : BustaTheme

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#39. Purple Fever

Capture d'écran du thème Purple Fever

Démo : Purple Fever

Site officiel : WordPressThemesMarket

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#40. The Stars

Capture d'écran du thème The Stars (thème Premium)

Démo : The Stars

Site officiel : PremiumWP

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#41. Charred

Charred - Thème WordPress

Démo : Charred

Site officiel : Press75

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#42. Skyye News

Skyye News - Thème WordPress

Démo : Skyye News

Site officiel : Elevatethemes

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#43. Vostok

Vostok - Thème WordPress

Démo : Vostok

Site officiel : Vostok

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#44. RockSolid

RockSolid - Thème WordPress

Démo : RockSolid

Site officiel : Forthelose

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#45. Brightness

Brightness - Thème WordPress

Démo : Brightness

Site officiel : Dailywp

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#46. One Room

One Room - Thème WordPress

Démo : One Room

Site officiel : Web-kreation

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#47. Insic

Insic - Thème WordPress

Démo : Insic

Site officiel : Insic Designs

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#48. MaroonKing

MaroonKing - Thème WordPress

Démo : MaroonKing

Site officiel : SkinPress

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#49. Crafty Cart

CraftyCart - Thème WordPress

Démo : Crafty Cart

Site officiel : King Cart

Téléchargement : Note: There is a file embedded within this post, please visit this post to download the file.

#50. Notepad Chaos

Capture d'écran du thème Notepad Chaos

Démo : Notepad Chaos

Site officiel : Evan Eckard (Smashing Magazine)

Et vous, c’est lequel votre préféré ?

Guide d’optimisation pour WordPress - Partie 7

Rainbow — Sat, 16 May 2009 12:43:50 +0000

Après les optimisations, l’analyse des résultats ! Vous avez pendant 6 jours essayer d’accroitre les performances de votre blog : diminuer les temps de chargement, le nombre de requêtes, etc… Grâce à cet article vous serez comment allez encore plus loin dans le processus complexe et technique de l’optimisation…

photo credit: Hyperfinch

Plan du dossier

1. Utiliser Firebug

Firebug est une extension Firefox absolument indispensable pour tout webmaster. Elle permet de modifier en temps réel le design de son site, mais également d’analyser les temps de chargement des différents objets d’une page (images, css, scripts…) sous forme de ligne du temps. Pour cela, installer Firebug, cliquez sur le petit icône en forme d’insecte dans la barre d’état du logiciel, puis sur l’onglet Réseau. Faites CTRL+F5 pour vider le cache et actualiser la page : admirez le résultat !

Extension Firebug, onglet Réseau

En savoir plus pour utiliser Firebug dans IE et autres navigateurs

2. Utiliser YSlow

YSlow est également une extension à Firefox qui vient se rajouter à Firebug (il convient donc d’installer en premier lieu Firebug). Elle a été développée par les ingénieurs de Yahoo et est spécialement conçue pour analyser en profondeur les performances de votre blog. Après l’analyse, une note allant de A à F vous est attribué (A étant la meilleure note). Cette note est une moyenne de plusieurs autres notes sur le CSS, le contenu, les cookies, les JS, le serveur et les images soit 22 points au total. Cliquez sur l’une des notes obtenues pour avoir une explication simple du résultat, ou sur Read More, pour en savoir d’avantage sur ce point d’analyse de manière plus détaillée.

Extension YSlow de Yahoo, onglet Grade (note)

Parcourez les différents onglets de l’extension pour obtenir des tas d’informations sur votre blog :

Extension YSlow de Yahoo, onglet Statistics

3. Liens utiles

Je vous conseille vivement de consulter la totalité de ces liens pour compléter et terminer cette semaine dédiée à l’optimisation de WordPress. Les différents points que j’ai abordé durant ces derniers jours ne sont qu’une partie infime de l’optimisation d’un site.

Best Practices for Speeding Up Your Website par Yahoo

Speed Up Your Pages And Improve Your YSlow Score With The Coral Content Distribution Network par Haacked

WordPress Optimization Bible par Wladimir Prelovac (disponible sur Homo Sapiens Internetus en Français)

How to Minimize Load Time for Fast User Experiences par UxBooth

The Mystery of CSS Sprites : Techniques, tools and tutorials par Smashing Magazine

Conclusion

Pour terminer cette semaine, voici la check list finale du projet “7 Jours pour Optimiser les Performances de son blog WordPress” :

Optimiser l’administration WordPress
- Mettre à jour WordPress
- Supprimer les plugins inutiles
- Mettre à jour les extensions restantes
- Supprimer tout ce qui est inutile dans la sidebar
- Activer Gears
Optimiser la Base De Donnée (BDD)
- Supprimer les résidus de tables d’anciens plugins
- Supprimer les post revisions
- Optimiser le tout
Optimiser les images
- utilisez les bonnes dimensions
- réduire le nombre d’images (prenez Google comme exemple !)
- toujours héberger les images sur son serveur
- choisir le bon format (très important)
- utiliser la technique du CSS Sprites (très efficace)
Optimiser la feuille de style en cascade (CSS)
- Supprimez les commentaires
- Supprimez les styles sans propriété
- Fusionnez les propriétés
- Ne pas répétez du code inutilement
- Bien positionner l’appel à votre fichier CSS
- Héberger sur votre FTP le(s) fichier(s)
- Compressez la feuille de style pour une optimisation maximale
Optimiser les scripts
- Supprimez les scripts inutiles
- Bien positionner ces scripts
- Externaliser vos scripts
- Héberger sur son serveur le maximum de scripts
- Compresser les scripts
Optimisations diverses
- Choisir un bon hébergeur (2 critères importants)
- Utiliser des URLs complètes
- Mettez un / à la fin d’un lien
- Installer WP Super Cache (en fonction de votre site)
Analyser les performances
- Utiliser Firebug
- Utiliser YSlow
- Consulter les liens utiles

Un souci, un problème, une remarque, votre avis sur le dossier, n’hésitez pas à vous exprimer ! Bonne optimisation à tous

Guide d’optimisation pour WordPress - Partie 6

Rainbow — Sat, 16 May 2009 12:38:11 +0000

La semaine du projet touchant à sa fin, vous allez vivre aujourd’hui vos dernières tâches d’optimisation. Ceux sont elles qui vous permettront de réduire encore de quelques secondes le temps de chargement de vos pages.

photo credit: chrisdlugosz

Plan du dossier

1. L’hébergeur

Mot qui revient souvent dans le projet, l’hébergeur est très important : il est en grande partie responsable des performances de votre site. Deux critères sont en prendre en compte pour accroître les temps de chargement :

la bande passante : illimitée de préférence (cas de Protuts).
emplacement géographique du serveur : le plus près de chez vous ! Pourquoi ? Si votre site est tout en français, ce seront des visiteurs français qui le visiteront, donc ils seront situés en France, c’est pourquoi, il vaut mieux que le serveur soit situé le plus près possible de vos visiteurs. Dans mon cas, j’ai choisi un serveur suisse (Kreativmedia) qui offre d’excellentes prestations de services à un prix très raisonnable. Les serveurs américains, qui en apparence offrent de meilleurs services, ne sont pas forcément les plus performants.

2. Indiquez l’emplacement exacte

Au lieu d’utiliser une requête php pour indiquer une URL, écrivez là réellement :

Par défaut :

<link rel="stylesheet" type="text/css" href="" />

Ecrivez plutôt :

<link rel="stylesheet" type="text/css" href="http://www.protuts.net/xxx/style.css" />

Seul inconvénient, si vous changez de thème, vous devrez refaire tous les liens.

3. Améliorer vos URLs

Une astuce toute simple mais qui accélère la vitesse de chargement consiste à écrire une adresse suivie d’un slash :

En général :

<a href="http://www.protuts.net">a>

Écrivez plutôt :

<a href="http://www.protuts.net/">a>

4. WP Super Cache

WP Super Cache est un plugin WordPress qui a pour but d’optimiser les performances de votre blog : il génère des pages HTML statiques et les mets en cache pour éviter d’avoir à réexécuter le processus de scripts php. Ce plugin est vraiment utile sur des sites à fortes fréquentations, en manque de bande passante. Toutefois, mon avis est partagé sur cette extension :

conflits avec d’autres plugins
erreurs dans son utilisation
si vous mettez souvent à jour vos pages, ce n’est pas une bonne solution
…

Pour en savoir plus sur WP Super Cache :

Article de Lyxia.org sur Optimiser les performances de votre blog WordPress avec WP Super Cache : installation et utilisation du plugin y sont détaillées

Conclusion

Voici vos tâches à effectuer pour aujourd’hui :

Choisir un bon hébergeur (2 critères importants)
Utiliser des URLs complètes
Mettez un / à la fin d’un lien
Installer WP Super Cache (en fonction de votre site)

Ne ratez pas demain la dernière journée du projet 7 jours pour optimiser les performances de votre blog WordPress. Il y sera question d’analyses des résultats et de bien plus encore…

Guide d’optimisation pour WordPress - Partie 5

Rainbow — Sat, 16 May 2009 12:28:17 +0000

En ce 5ème jour du projet 7JOPW, nous allons continuer à réduire les temps de chargement en allégeant le nombre de requêtes et le poids des pages de votre blog. Aujourd’hui, nous nous concentrerons sur les scripts.

Plan du dossier

1. Supprimez les scripts inutiles

Les scripts sont très utile dans WordPress, et dans tout site web en général. Mais, il ne faut pas en abuser. De la même façon que pour les plugins, supprimez tout ce qui n’est pas absolument indispensable pour le visiteur puis ensuite pour le site lui-même. En principe, les scripts sont situés, soient dans l’un des fichiers php de votre blog comme sidebar.php, soient dans un fichier externe js auquel vous faites appel via une ligne de code comme ceci :

<script type="text/javascript" src="http://www.votresite.com/xxx/javascript/tabs.js">script>

2. Positionnement des scripts

Alors que la ligne de code pour appeler votre fichier CSS doit être placée dans le header, c’est l’inverse pour les scripts. Ces derniers doivent être placés dans le footer juste avant la balise et après la balise pour qu’ils soient chargés après le contenu de la page.

3. Externaliser vos scripts

Plutôt que de placer la totalité du code d’un script dans la sidebar par exemple, il est préférable de créer un fichier externe, fichier auquel vous ferez appel par la suite via une ligne de code. Les thèmes bien conçus ont normalement un dossier js ou javascript créé avec tous les fichiers de scripts à l’intérieur. Si ce n’est pas le cas, dans un but purement de “rangement”, créer un dossier javascript à l’intérieur du dossier de votre thème.

Exemple de dossier Javascript

Ensuite, ouvrez le bloc-note Windows, collez-y le code du script, puis enregistrer le fichier. Fermez le bloc-note et renommez l’extension du fichier .txt en .js via l’explorateur Windows. Uploadez le(s) fichier(s) sur votre serveur FTP. Pour appeler votre script, ouvrez, via WordPress, le pied de page (footer.php) et appelez le script comme ceci :

<script type="text/javascript" src="http://www.votresite.com/xxx/javascript/xxx.js">script>

4. Hébergement des scripts

Dans une très grande majorité des cas, le fichier du script n’est pas situé sur votre serveur ce qui augmente le nombre de requêtes et ralentit le chargement de votre site. Là encore, le mieux est d’héberger le maximum des scripts sur son propre serveur. Par exemple, si vous avez inséré un module Twitter sur votre site, il est préférable de placer les deux lignes encadrées par des balises scripts d’une part dans le footer, et d’autre part, de télécharger puis d’uploader dans le dossier javascript le fichier blogger.js pour accroitre considérablement la vitesse de chargement du module.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/rainbowgeek.json?callback=twitterCallback2&count=5">script>

Attention : le deuxième script ne doit pas être hébergé sur votre propre serveur : en effet, il contient vos tweets ! Il vous faudrait le mettre constamment à jour.

5. Minifier les scripts

Les CSS peuvent être compressés, et bien les scripts aussi ! Grâce au site web Javascript Compressor, vous allez pouvoir minifier tous vos scripts en deux clics de souris. Pour ce faire, copiez le code de votre script puis collez le dans le champ Paste your code. Cliquez sur Compress et admirez le résultat.

Javascript Compresseur : d'après le ratio, le poids du fichier vient d'être divisé par 2 !

Il ne vous reste plus qu’à collez le nouveau code dans votre fichier .js.

Conclusion

Petit récapitulatif des tâches à effectuer en ce jour de la fête du travail :

Supprimez les scripts inutiles
Bien positionner ces scripts
Externaliser vos scripts
Héberger sur son serveur le maximum de scripts
Compresser les scripts

Si vous avez des questions, n’hésitez pas ! Je vous donne rendez-vous dès demain pour continuer à optimiser votre blog WordPress !

Guide d’optimisation pour WordPress - Partie 4

Rainbow — Sat, 16 May 2009 12:15:52 +0000

Nous voici déjà arrivé à mi-chemin du projet “7 jours pour optimiser les performances de votre blog WordPress”. Vous le savez probablement, la feuille de style en cascade (ou en Anglais Cascading Style Sheet, soit en abrégé CSS) est un fichier de code contenant la mise en forme du site, autrement dit, le design. Il est donc crucial de réduire le poids du fichier CSS. C’est l’objet de ce 4ème jour.

Afin d’effectuer une comparaison, relever le poids du fichier CSS avant puis après les différentes optimisations, et indiquez le dans les commentaires ;). Effectuez une copie du fichier avant toutes modifications : on ne sait jamais !

Plan du dossier

1. Supprimer les commentaires

Tout fichier CSS et en particulier si c’est un thème graphique réalisé par des designers, est parsemé de commentaires pour aider à s’y retrouver notamment lorsque l’on met à jour le design. Pour autant, ces commentaires occupent pas mal de place dans le poids du fichier : ils peuvent être supprimés sans aucun risque. Pour les repérer, c’est très simple, ils sont encadrés par /* Exemple */.

Attention : les premières lignes du fichier CSS sont dites des commentaires mais elles sont indispensables pour WordPress : ne les supprimez pas !

2. Supprimer les styles sans propriété

Un style sans propriété ne sert strictement à rien dans votre fichier. Il se présente sous cette forme :

.style 1 {
}

3. Fusionnez les propriétés

Il existe plusieurs façons d’écrire certaines propriétés CSS. Mais certaines “façons” sont plus courtes que d’autres, et par conséquent, alourdissent moins le fichier. Par exemple, au lieu d’écrire :

.style 1 {
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
padding-top:10px;
padding-bottom:15px;
padding-left:20px;
padding-right:0px;
color:#FFFFFF;
border-color:#CCCCCC;
border-style:solid;
border-width:1px;
font-size:10px;
font-family:arial;
}

Écrivez plutôt :

.style 1 {
margin:10px 5px;
padding:10px 0 15px 20px;
color:#FFF;
border:1px solid #CCC;
font:10px arial;
}

4. Ne répétez pas du code inutilement

J’ai utilisé cette technique pour les boutons dans le header (Twitter, Demande de Tutoriel, Email et RSS). Plutôt que de recréer pour chacun d’entre-eux, le style a:link, a:hover… j’ai procédé comme ceci :

#rss {
margin:20px auto;
}
#rss a img, #rss a:visited img, #mail a img, #mail a:visited img, #twitter2 a img, #twitter2 a:visited img, #tuto a img, #tuto a:visited img {
opacity:0.5;
}
#rss a:hover img, #mail a:hover img, #twitter2 a:hover img, #tuto a:hover img {
opacity:1;
}
#mail {
margin:-75px auto;
padding-right:80px;
}
#twitter2 {
margin:25px auto;
padding-right:160px;
}
#tuto {
margin:-85px auto;
padding-right:240px;
}

5. Le positionnement du fichier CSS

Placez toujours la ligne de code d’appel du fichier CSS dans le header et en tête de liste des autres appels de fichiers. Ainsi, ce sera la première chose que le navigateur chargera. La ligne de code pour appeler le fichier CSS se présente ainsi :

<link rel="stylesheet" type="text/css" href="http://www.votresite.com/xxx/style.css" />

6. L’hébergement

De la même façon que pour les images, héberger toujours les feuilles de styles sur votre propre FTP.

Bonus : compressez votre fichier CSS

Le site CSS Drive propose un outil en ligne pour compresser au maximum votre feuille de style. Toutefois, même si le poids s’en trouvera fortement réduit, vous perdrez toute clarté dans votre fichier : plus de hiérarchies, de commentaires, de sauts de lignes… A vous de voir…

CSS Drive, compresseur de fichiers CSS

Conclusion

Aujourd’hui, vous devez :

Supprimez les commentaires
Supprimez les styles sans propriété
Fusionnez les propriétés
Ne pas répétez du code inutilement
Bien positionner l’appel à votre fichier CSS
Héberger sur votre FTP le(s) fichier(s)
Compressez la feuille de style pour une optimisation maximale

Voilà de quoi vous occuper jusqu’à demain, où nous verrons comment optimiser les scripts de votre blog