22 février 2008
Créer ou modifier un thème de Wordpress avec Dreamweaver – Part 2
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.
17 février 2008
Créer ou modifier un thème de Wordpress avec Dreamweaver – Part 1
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. ;-))
05 février 2008
Wordpress - Extension gratuite dreamweaver pour créer ses propres thèmes
J'inaugure ici une nouvelle catégorie de ce blog concernant Wordpress. En effet, pourquoi "réinventer la roue" quand Wordpress propose un blog si performant à tout point de vue qu'il s'apparente presque à un CMS ! Je réalise professionnellement de plus en plus de sites avec ce moteur de blog dont la redoutable efficacité en matière de référencement et l'infinie variété des plugins autorisent à (presque !) tous les fonctionnels désirés.
Voici donc une extension gratuite permettant de réaliser ses propres thèmes grâce à des menus proposant la syntaxe Wordpress prédéfinie. Plus d'erreur de frappe donc via cette extension !
http://vikiworks.com/2007/08/22/dw-extension-for-wordpress-template-build/
Attention cette extension ne fonctionne qu'avec Dreamweaver 8 et CS3 !
Pour les néophytes, il vous faudra cependant vous initier à comment créer un thème Wordpress "from scratch". Pas de panique ! Fran6art vous donne toutes les explications nécéssaires dans son excellent tuto "Créer un thème Wordpress de A à Z"
Vous souhaitez parfaire votre blog avec quelques plugins : voici une des bases de données les plus complètes de plugins Wordpress
Enfin, vous bloquez sur un problème en particulier de votre blog (mais pas concernant un problème spécifique àl'extension citée plus haut) : allez faire un petit tour sur le forum de la communauté française !
