Création d’un Workflow Dreamweaver CC et WordPress

J’ai grandi en tant que nerd de la chimie et je me souviens encore très bien du frisson de saupoudrer le dépôt de fer sur mon brûleur mini Bunsen pour voir les feux d’artifice étincelants. L’idée que deux éléments puissent se combiner à un effet aussi spectaculaire était hallucinante pour moi. J’ai vécu la même joie synaptique lorsque j’ai découvert comment WordPress et Dreamweaver étaient faits l’un pour l’autre.

WordPress est, indéniablement, le CMS le plus populaire utilisé aujourd’hui. Avec la part du lion du marché (47.5% des meilleurs sites 10k, selon BuiltWith.com ), une vaste gamme de modèles et de plug-ins, sans parler d’une facilité d’utilisation en constante évolution, WordPress offre un itinéraire direct vers un large éventail de destinations de sites. Mais que se passe-t-il si vous ne voulez pas aller exactement là où un modèle WordPress vous dit de le faire? Que se passe-t—il si votre client — ou votre propre sens du design – nécessite une présence en ligne personnalisée? Alors laissez-moi vous présenter le meilleur partenaire de conception et de codage que WordPress n’ait jamais connu: Dreamweaver CC.

Je suis un grand fan du flux de travail Dreamweaver / WordPress et j’ai combiné ces deux outils électriques élémentaires pendant des années pour construire des sites pour les clients qui ont besoin de capacités de gestion de contenu avec une apparence personnalisée. Dreamweaver est, je crois, bien adapté à la tâche, non seulement en tant que moteur de conception pour perfectionner le site orienté vers l’avant, mais aussi en tant qu’environnement de codage efficace pour gérer des fonctions PHP personnalisées, inévitablement nécessaires.

Avantage WordPress: Dreamweaver CC

Qu’apporte Dreamweaver à la table qui le rend si bien adapté au développement WordPress? La clé est la combinaison de la vue en direct et du support PHP. WordPress est un framework PHP / MySQL et la capacité de Dreamweaver à traiter le langage côté serveur est essentielle. La vue en direct de Dreamweaver exécute le code PHP, intègre les données MySQL et affiche la conception HTML5 et CSS 3 de sortie avec une précision compatible avec le navigateur – tout en gardant tout interactif et modifiable.

WordPress est une application de modélisation incroyablement complexe qui dépend de près de 100 fichiers séparés inclus et entrelacés pour générer une seule page. Comment je le sais ? Il suffit d’ouvrir un index.fichier php à partir d’une racine de site WordPress et donnez le feu vert à Dreamweaver pour découvrir des fichiers liés dynamiquement. Vous verrez bientôt une multitude de fichiers disponibles — PHP, CSS, JavaScript et XML — au sommet de la fenêtre du document dans la barre d’outils des fichiers associés. Et Dreamweaver vous donne non seulement accès à chacun d’eux, mais les traite tous et présente fidèlement le résultat rendu. Très puissant.

Filtrage des fichiers essentiels

Bien sûr, la disponibilité d’un si grand nombre de fichiers peut être contre-productive lorsque vous essayez de vous concentrer sur le bon fichier CSS ou autre. Dreamweaver CC comprend l’outil idéal pour cibler certains fichiers: Filtrer les fichiers associés. Cette fonctionnalité facile permet d’afficher uniquement certains types de fichiers (comme PHP ou JavaScript) ou des fichiers individuels. J’utilise régulièrement l’option de filtre personnalisé de cette fonctionnalité pour fonctionner uniquement sur les pages CSS, index, en-tête et pied de page de mon thème, comme ceci:

*.css; index.php;en-tête *; pied de page*

https://blog.adobe.com/media_96f5f722920d6ba831d715073c8763583b6dfe1e.gif

Lorsqu’il est entré dans le champ de filtre personnalisé de la boîte de dialogue, seuls les fichiers dont j’ai besoin — y compris ceux des thèmes actifs ou des modèles enfants — sont affichés dans la barre d’outils Fichiers associés. Maintenant, je peux travailler avec du code en vue fractionnée et une actualisation rapide représente toutes les mises à jour en vue en direct.

Swift styling

L’intégration avec CSS est encore plus étroite, les modifications apportées au panneau CSS Designer de Dreamweaver prenant effet immédiatement. En plus d’offrir la palette complète de propriétés CSS, l’interface donne un accès direct à plusieurs sources, même celles utilisées dans les requêtes multimédias, afin que vous puissiez être sûr de travailler avec le fichier CSS approprié.

https://blog.adobe.com/media_504fd2693d1ae75005819cc5acb5dcf82f56ed76.gif

Mieux encore, il est assez facile avec la vue en direct nouvellement évoluée de déterminer exactement quelles zones d’écran ou quels éléments doivent être traités. Accédez simplement à la page souhaitée à l’aide de la fonction Suivre le lien, puis activez le mode Inspection. Dreamweaver traite parfaitement votre page WordPress, puis met en évidence le sélecteur CSS correspondant et ses propriétés pour la modification par pointer-cliquer. Des modifications plus approfondies ne sont qu’à un clic droit lorsque vous accédez au Code.

Suggestion de code spécifique à WordPress

En parlant de code, en plus de la compatibilité générale avec toutes les applications PHP, Dreamweaver CC prend également en charge des fonctions WordPress spécifiques. Comme tous les projets ne sont pas des sites WordPress, cette fonctionnalité ciblée est activée site par site en choisissant Site > Code spécifique au site. La boîte de dialogue suivante qui s’ouvre détecte votre installation et sélectionne automatiquement WordPress ainsi que la racine de code correspondante. Honnêtement, dans la plupart des scénarios, il vous suffit d’exécuter la commande, d’ouvrir la boîte de dialogue et de cliquer sur OK: le reste est automatique. Maintenant, des conseils pour toutes les fonctions de WordPress, avec une syntaxe et une brève description pop-up au fur et à mesure que vous codez.

http://blogs.adobe.com/creativecloud/files/2015/02/code-hint.png

Se préparer à un workflow Dreamweaver et WordPress

Alors, que faut-il pour être opérationnel avec un Dreamweaver et WordPress? Étonnamment peu. Voici les étapes clés:

Configurer Apache, PHP et MySQL

Pour servir WordPress correctement, vous aurez besoin d’un serveur Web local (généralement Apache) avec des capacités MySQL et PHP, collectivement appelées une pile AMP.Il existe deux voies de base que vous pouvez suivre pour répondre à cette exigence: des composants séparés par rapport à un ensemble de logiciels. L’installation et l’activation de composants distincts (serveur Apache, MySQL, PHP et généralement un programme de gestion de base de données comme phpMyAdmin) prend plus de temps et nécessite plus d’expertise technique mais offre plus de contrôle.L’installation d’un ensemble de logiciels tel que MAMP (Mac et Windows) ou Wampserver (Windows uniquement) est un processus simple, pointer-cliquer, mais abandonne le système détaillé management.Lynda.com offre un cours qui couvre l’ensemble du front de mer de l’AMP et l’auteur David Gassner vous guide à travers chacun des scénarios, avec dépannage. (Si vous n’êtes pas un Lynda.com membre, bénéficiez de 10 jours gratuits pour voir ce cours et tous les autres, y compris mes propres cours Dreamweaver / WordPress.)

Créer une base de données

Une fois que votre environnement de développement est en marche, vous devrez créer une base de données pour l’installation de WordPress — un jeu d’enfant avec chaque programme de gestionnaire de base de données. Vous pouvez nommer la base de données comme vous le souhaitez; Je vais généralement avec quelque chose basé sur le client car je développe beaucoup de sites WordPress localement. Et la base de données est tout ce dont vous avez besoin: toutes les tables et tous les schémas sont créés pour vous lors de l’installation de WordPress.

Définissez votre site Dreamweaver

Votre site Dreamweaver doit se trouver dans un dossier de votre racine Web locale, afin qu’il puisse être consulté via une adresse Web http://localhost/. (Remarque : selon la configuration de votre serveur Apache, vous devrez peut-être ajouter un numéro de port.). De plus, un serveur de test qui spécifie la racine web locale ainsi qu’un modèle de serveur PHP est requis.

Configurez WordPress dans votre site Dreamweaver

Je télécharge toujours la dernière version à partir de WordPress.org lors du démarrage d’un projet. Le framework est fréquemment mis à jour avec des versions mineures (orientées vers les corrections de bugs) et majeures (fonctionnalités améliorées). Se tenir à jour est particulièrement important d’un point de vue de la sécurité de nos jours; l’équipe de WordPress est assez vigilante pour renforcer les vulnérabilités perçues. Stockez le contenu de l’archive téléchargée dans votre dossier de site local Dreamweaver. Si le site est entièrement piloté par WordPress, placez les fichiers à la racine du répertoire; si vous intégrez un blog WordPress dans un site, conservez tous les fichiers WordPress dans leur propre dossier hors de la racine du site.

Installer WordPress

Même si c’est là que se déroule tout le travail réel, l’installation de WordPress est peut-être l’étape la plus facile, grâce à l’insistance du framework sur une approche infaillible, simple et facile.Accédez simplement au dossier wp-admin de votre site (avec une URL comme http://localhost/ My_WP_DW_Site/wp-admin /) et vous êtes parti.WordPress détectera l’absence de fichier de configuration et confirmera que vous souhaitez en créer un. Une fois cela fait, vous devrez entrer des informations de base, telles que le nom de la base de données et les informations d’identification. Ensuite, si vous avez correctement suivi les étapes précédentes, vous recevrez l’un des messages d’installation les plus satisfaisants jamais créés: « D’accord Sparky! »Cela me fait sourire à chaque fois. Un clic de plus et l’installation est terminée: vous êtes prêt à vous connecter et à commencer à travailler avec WordPress.Du côté de Dreamweaver, assurez-vous d’être en vue en direct et ouvrez l’index WordPress.php. BAM! Il y a votre thème WordPress par défaut et votre exemple de publication. Techno-abracadabra.

Monde des possibilités révélé

Maintenant, le vrai plaisir commence lorsque vous commencez à explorer les deux côtés du flux de travail: Dreamweaver et WordPress. Et il y a une tonne que vous pouvez faire avec les deux, y compris les thèmes enfants, les plug-ins, les pages personnalisées et même une interface d’administration WordPress personnalisée, le tableau de bord. Dreamweaver CC peut tout gérer, de la conception CSS aux fonctions PHP. Essayez-le et voyez si cela ne déclenche pas une réaction chimique de votre part.