Dreamweaver gratuit

Tout Wordpress pour webdesigner en 5 pages !

02 novembre 2009 | Posté par caroder à 16:11

Voici un excellent guide pratique abrégé pour les développeurs de thèmes Wordpress. En 5 pages, voici réunies la totalité des commandes pour réaliser un thème Worpress (description détaillée et exemples de code).

WordPress 2.8 Visual Cheat Sheet

Pour télécharger le PDF de ces slides : http://woorkup.com/2009/11/01/wordpress-visual-cheat-sheet/

Tutorial sur les bases de la création de thème Wordpress avec Dreamweaver

31 août 2009 | Posté par caroder à 09:16

De retour de vacances ! Voici donc le billet de rentrée de Dreamweaver Gratuit.

Le site de Adobe a publié il y a quelques jours un tutorial sur répertoriant les connaissances de bases concernant la création de Theme Wordpress avec Dreamweaver. Cet article inclut l'utilisation de l'extension ThemeDreamer dont j'avais parlé ici (extension payante mais fort utile) ou bien la méthode traditionnelle dont vous trouverez l'équivalent en français dans mes billets :

• Créer ou modifier un thème Wordpress avec Dreamweaver - Part 1
• Créer ou modifier un thème Wordpress avec Dreamweaver - Part 2

Ce tutorial en anglais de Ryan Grabenstein comprendra 3 parties dont deux sont à paraître et ne manqueront pas de vous être signalés dans ce blog.

Nouveau theme wordpress gratuit e-commerce

30 juillet 2009 | Posté par caroder à 12:26

C'est assez rare pour le mentionner : le second thème Wordpress gratuit pour e-commerce est né (pour ceux qui n'ont pas lu mon précédent billet sur wordpress et e-shop, il n'en existe qu'un autre, c'est Crafty Cart)...

Il est assez joli et s'appelle SimpleCart.

Vous pouvez en voir la démo et le télécharger ici : http://www.chris-wallace.com/2009/07/17/simplecartjs-a-free-wp-e-commerce-thematic-child-theme/

Thèmes gratuits Wordpress inspirés de la typographie

14 juillet 2009 | Posté par caroder à 22:17

Dans la continuité de mon billet sur l'utilisation de la typographie dans le design web avec Dreamweaver, voici des thèmes Wordpress gratuits dont le design est essentiellement basé sur les effets de la typo. Ces designs web gratuits sont le résultat d'un concours organisé par Smashing Magazine. Le résultat est époustouflant, particulièrement pour les trois premiers lauréats dont voici une préview :

Le gagnant intitulé "T-20", d'inspiration presse quotidienne anglo-saxonne

Le 2e lauréat dont le thème est basé sur la typographie "Georgia"

Le 3e, qui a ma préférence, d'inspiration suisse : "Experimental"

Inutile de préciser que ces designs sont valides XHTML.
Pour télécharger ces thèmes : http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/

Monter un site de e-commerce avec Wordpress : boîte à outils

06 juillet 2009 | Posté par caroder à 19:11

Pour monter un site de e-commerce avec Wordpress entièrement gratuitement (excepté le prix de l'hébergement), voici un petit tutorial ou plutôt une boîte à outils :

1. Vérifiez d'abord que le résultat final correspondra à vos attentes ! Vous pouvez consulter par exemple :
   http://www.seekanddestroyclothing.com/
   http://www.imagecubes.com/
   http://www.yayforpins.com
2. Ouvrez un compte paypal si ce n'est déjà fait
3. Téléchargez Wordpress
4. Téléchargez le plugin gratuit e-commerce pour Wordpress
   NB : Ma Boutique est le hack du plugin ci-dessus afin de l'adapter au marché français. Attention : ce plugin ne semble plus maintenu. Il m' a été impossible de contacter le webmestre du site.
5. Téléchargez le thème gratuit Crafty pour le plugin Wordpress e-commerce (il existe aussi http://shoppingthemes.com/vanillacart/ mais moins bien à mon avis).
6. Consultez le tutorial vidéo ci-dessous pour installer votre site :

Concours de thèmes Wordpress

09 juin 2009 | Posté par caroder à 19:54

Depuis quelques jours, j'ai ouvert un compte Twitter que je destine à mes lecteurs anglophones (c'est la raison pour laquelle je n'en ai pas encore parlé ici). Parmi mes quelques followers, j'ai découvert le site Webitect qui a la particularité d'être animé par une jeune américaine de 19 ans.

Kayla (puisque c'est son nom) a lancé son premier site internet à l'age de 12 ans et fait donc d'ores et déjà preuve d'une jolie maturité dans sa connaissance des techniques internet, aussi bien en matière de développement, que de design, de blogging ou de référencement.

Elle a décidé de lancer un (modeste) concours de design de theme Wordpress avec les (certes petits) prix suivants :

• 1re place: 100$ via PayPal ou un an de bannière publicitaire sur Webitect.net
• 2e place: 50$ via PayPal ou 6 mois de bannière publicitaire sur Webitect.net
• 3e place: 25$ via PayPal ou un nom de domaine gratuit
• Tous les participants peuvent demander à ce que leur thème soit téléchargeable sur le site Webitect durant et après le concours, étant entendu que le thème en question peut comporter un lien vers votre site web personnel.

Quelques éléments du réglement de ce concours :

• Tous les thèmes doivent être réalisés avec la plus récente version de Wordpress (2.7)

• La sidebar doit être widgetizée.

• Les thèmes doivent êtres valides XHTML, à l'exception de certains hacks IE.

• Les thèmes, les logos et le style doivent être suffisamment généraux pour intéresser un large public.

Enfin Kayla me demande de vous préciser qu'elle ne parle malheureusement pas français et qu'il vous faudra donc communiquer avec elle en anglais :(

Toutes les informations ici : http://webitect.net/design/wordpress-theme-contest.php

4 magnifiques thèmes gratuits + nouvelle extension Dreamweaver pour Wordpress

08 juin 2009 | Posté par caroder à 09:38

En me balladant dans le très célèbre blog Smashing Magazine (lui même propulsé par Worpress), j'ai découvert ces 4 thèmes gratuits d'excellente facture. Tout l'intérêt de ces thèmes est qu'ils sont livrés avec les fichiers sources (.psd) Photoshop pour les images !!

Notepad Chaos

Vintage + Blues

Wordpress Fun

J'en profite pour vous rappeler qu'il existe une extension gratuite Dreamweaver pour travailler des thèmes Wordpress. Malheureusement, celle-ci ne permet pas de travailler ses thèmes en mode designer mais seulement en mode codeur. Vous pouvez cependant télécharger une version gratuite d'évaluation de ThemeDreamer : cette extension permet de travailler ses thèmes Wordpress en wysiwyg, donc en mode designer. Il vous faudra pour cela vous enregistrer sur le site : http://www.themedreamer.com/buy

Exemple de la prévisualisation du thème en mode Designer

Si vous souhaitez acquérir la licence complète, il vous en coûtera 29,95 $ :(

Thème Wordpress gratuits de bonne qualité

18 mai 2009 | Posté par caroder à 22:02

Voici un site qui propose 6 thèmes gratuits pour Wordpress de bonne qualité dont vous trouverez quatre exemples ci-dessous...

Pour télécharger ces thèmes Wordpress : http://www.woothemes.com/category/themes/free/

Créer ou modifier un thème de Wordpress avec Dreamweaver – Part 2

22 février 2008 | Posté par caroder à 19:12

Commencez par afficher le front office du blog en cliquant sur le lien (Afficher le site »). Personnellement pour ne pas « perdre » mon back office lors de cette opération  je fais un clic droit >> ouvrir dans un nouvel onglet, ainsi je peux aller du back au front sans problème…

Lorsque vous avez affiché le front office, aller dans le menu Affichage >> Afficher la source (pour MSIE). Copier l’intégralité de la source dans votre presse papier.

Allez dans Dreamweaver. Faites Fichier >> Nouveau >> Page vierge >> Type de page = HTML >> Mise en forme =<Aucune>. Mettez vous en affichage de la source. Supprimer le code existant et remplacez le par celui que vous avez dans votre presse-papier.

Enregistrez le dans le dossier Wordpress de votre thème avec une extension .htm ou .html. Vous pouvez conserver le nom du fichier d’origine du moment que vous avez bien modifier l’extension. Vous pouvez aussi l’appeler d’un nom différent par exemple index_html.htm !

Enregistrez tous les types de pages du blog de la même façon, à savoir : une page d’article, une page, une page de page ( !), une page de résultat du moteur, etc…

Dans chaque page, vous allez remplacer la ligne suivante :

<link rel="stylesheet" href="http://www.votre-site.com/wp-content/themes/nomdevotretheme/style.css" type="text/css" media="screen" />

par

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Le fichier des styles CSS se trouve en effet au même niveau dans le dossier. Remettez-vous maintenant en mode création dans Wordpress : la page apparaît avec le design que vous souhaitez modifier !

Ouvrez le fichier style.css : à vous de jouer ! Il vous suffit de modifier les attributs de style (et notamment les appels d’image) pour personnaliser votre blog !

Dans le prochain billet, nous entrerons dans plus de détails et nous verrons comment personnaliser votre header.

Créer ou modifier un thème de Wordpress avec Dreamweaver – Part 1

17 février 2008 | Posté par caroder à 15:49

Il existe des milliers de thèmes Wordpress gratuits ou payants. Mais pour tous ceux qui désirent créer ou modifier un thème Wordpress en utilisant Dreamweaver voici un bref tutorial pour les aider à progresser dans cette voie.

Pour ce tutorial, on supposera que vous avez installé EasyPHP en local sur votre serveur de développement. Vous pouvez avoir ou non installé l’extension Dreamweaver permettant de créer des thèmes sous Wordpress (voir notre post précédent à propos de cette extension).

Télécharger Wordpress dans sa dernière version. Décompresser les fichier en local dans votre dossier « www » de votre dossier EasyPHP. Pour comprendre comment installer Wordpress, merci de vous référer à la célèbre « installation en 5 minutes ».

Wordpress, comme vous le savez peut-être, utilise un dossier de templates nommé « theme » disponible dans le dossier wp-content. Les fichiers PHP contenu dans un sous-dossier de « theme » construisent et constituent l’aspect / design du site. Par défaut, Wordpress installe 2 sous-dossiers de base : Classic et Default (Kubrick).

Pour créer votre propre thème, nous allons employer une méthode qui n’est certes pas la plus orthodoxe mais qui permet à un débutant de très rapidement prendre en main la création de thème. Il va s’agir d’éditer un thème pour le modifier à votre goût.

Pour cela, copier le dossier du thème que vous avez choisi et donnez lui le nom que vous souhaitez donner à votre thème (par exemple « monblog »). Quant à moi, pour les grands débutant Wordpress, je vous conseille le code simple et excellent du tutoriel de fran6art dont j’ai déjà parlé (à venir très prochainement sous la forme d’un zip à télécharger).

Les éléments fondamentaux d’une page Wordpress sont le header, le maint content, la sidebar et le footer. Vous retrouvez des fichiers correspondants dans le dossier de votre thème, excepté pour le main content qui se trouve en fait dans les pages php telles que index.php, page.php, single.php, archive.php, etc. Les fichiers search.php et searchform.php gèrent le moteur de recherche de votre blog Wordpress.

Allez dans le back office de votre tout nouveau site Wordpress (celui que vous venez justement d’installer en 5 minutes !), et dans l’onglet thème cliquez sur le thème dont vous venez de copier les fichiers. Si tout se passe bien, maintenant Wordpress devrait vous indiquer que le thème est activé.

Si votre blog est vierge de tout post, créez en quelques uns avec du faux texte. Pour cela allez sur le site Lipsum (http://www.lipsum.com/)  qui vous permettra de copier un faux texte spécialement étudié pour le travail des maquettes.

Créer une blogoliste, ajouter quelques mots clés à vos posts si vous souhaitez afficher un nuage de mots-clés, poster quelques commentaires via le front. Toutes ces opérations vous serviront à designer selon votre goût ces éléments.

Voilà vous êtes maintenant prêt à commencer votre travail de design de blog via Dreamweaver. Nous rentrons donc dans le vif du sujet dans notre prochain post. ;-))