INSTALLER WORDPRESS CONNECTER SILEX & WORDPRESS

Transcription

1 INSTALLER WORDPRESS CONNECTER SILEX & WORDPRESS NB : dans ce tutoriel nous utiliserons FileZila comme client FTP; NotePad ++ ou Smultron pour éditer différents fichiers de configuration. Ces logiciels sont tous trois opensource.

2 Installer Wordpress 1.Téléchargez Wordpress 2. sur votre serveur, collez le dossier wordpress à la racine du répertoire silex

3 Dans Filezilla collez le dossier wordpress à la racine du répertoire silex

4 Dans votre navigateur web, entrez l'adresse de votre wordpress : / wordpress ou / dossier silex / wordpress

5 Cliquez sur Create a wp-config.php ou Create a configuration file Un formulaire de config apparaît, entrez les informations liées à votre base de donnée. Elles sont généralement fournies par votre hébergeur au moment de votre abonnement.

6 Pour récupérer ces infos chez l'hébergeur, ovh (par exemple), se connecter rubrique «manager»

7 Cliquez sur Gestion SQL Mes bases de données apparaissent en bas Activez la si c'est la 1ère fois. Et récupérez les identifiants dans votre boite de messagerie.

8 Retournez au formulaire de config wordpress, et entrez les info récupérées chez l'hébergeur :

9 Cliquez sur Installing Now et poursuivez les étapes : 1. Créer le titre du blog et votre 2. Le mot de passe à garder précieusement! 3. Connectez vous Passez maintenant à l'étape : Plugins

10 LES PLUG-INS WORDPRESS

11 Les plug-ins Duplicate Post Feed Wrangler Custom Field GUI for WP 2.1 Feed-customfeed

12 Installer les plug-ins Feed Wrangler dézippez et collez le fichier feed-wrangler.php dans le répertoire : silex/ wordpress/ wp-content/ plugins / Duplicate-post dézippez et collez le dossier duplicate-post dans le répertoire : silex/ wordpress/ wp-content/ plugins../..

13 Custom Field GUI dézippez et collez le dossier rc-custom-field-gui dans le répertoire : silex/ wordpress/ wp-content/ plugins feed-customfeed collez le fichier feed-customfeed.php dans le répertoire du thème utilisé dans wordpress. ex : silex/ wordpress/ wp-content/ themes/ default

14 Dans Filezilla coller les plugins

15 Avec Filezilla collez le fichier feed-customfeed.php

16 Activez les plugins retournez à votre interface wordpress rubrique Extensions Activez Duplicate Post Activez rc-custom-field-gui Activez Feed Wrangler rubrique Réglage,onglet Feed Wrangler notez : Feed Slug : customfeed Notes : rss personnalisé

17 Préparer les balises personnalisées dans l'édition d'1 article Wp il ya : le champ de texte avec mise en forme le choix de la catégorie les champs personnalisés = les balises ou clés on retrouve ces balises dans les sources de notre flux RSS customisé de Wp. pour afficher les articles Wp dans Silex on utilise ces fameuses balises avec des accesseurs.

18 ouvrir le fichier rc-custom-field-gui/ conf-sample.ini utiliser un éditeur de texte tel que smultron, ou notepad++ Modifiez les clefs, et ajoutez en tant que vous voulez sur le modèle qui est proposé Testez : champ de texte éditable, check list, choix multiples, ou juste une ligne..

19 à gauche : le fichier conf-sample.ini à droite : mon fichier modifié

20 Enregistrez sous : conf.ini Collez sur le server silex/ wordpress/ wp-content/ plugins/ rccustom-field-gui/ conf.ini

21 EDITER DANS WORDPRESS

22 Créer des catégories Wordpress Pour l'exemple nous distinguerons 2 catégories Work Non classée

23 Créer un article Wordpress > Rubrique Work

24 Remplir les champs de texte des clefs Publier (position du bouton publier)

25 GENERER LE FLUX RSS customisé pour Silex

26 Flux RSS de la catégorie Work Quittez le mode d'administration. Visualisez votre site : domaine.com/ dossier.silex/ wordpress/ dans la colonne de droite, repérez les catégories.

27 -> cliquez sur Work

28 Ce qui est à noter ici est le numéro de la catégorie affiché à la fin de l'adresse :..&cat=3

29 construisez votre flux Rss de cette façon : mon.domaine.com/ dossier silex/ wordpress/? feed=customfeed&cat= derrière cat= noter le chiffre qui correspond à la catégorie work : mon.domaine.com/ dossier silex/ wordpress/? feed=customfeed&cat=3 soit :

30 Vérifier les balises du customfeed entrez l'adresse du customfeed : silex/wordpress/?feed=customfeed&cat=3 affichez la source de la page repérez les balises personnalisées : les fameuses clefs, certaines sont crées automatiquement, telles que : description = qui correspond à un résumé du texte, content:encoded = qui correspond au texte mis en forme, title = le titre...

31

32 Encoder le Flux RSS Encoder votre feed pour être compatible avec Silex. Utilisez l'outil en ligne gratuit : dans le champ Plain, entrez l'adresse: cliquez sur Encoded, copiez la nouvelle adresse générée http%3a%2f%2fmon.domaine.com%2fdossier.silex%2fwordpress %2F%3Ffeed%3Dcustomfeed%26cat%3D3 et mettez la de coté :

33 RECUPERER LES ARTICLES WORDPRESS DANS SILEX

34 Créer une liste OOF dans Silex Cette liste va accueillir tous les articles de la catégorie Work qui seront édités dans Wordpress Posez les composants Rss de OOF sur la scène. répertoire : media/components/oof/ RssConnector.cmp.swf RichTextList.cmp.swf ListUi.cmp.swf DataSelector.cmp.swf

35 Paramétrez les composants RSS Entrez les données dans la boite à outils propriétés de chaque composants RssConnector.cmp.swf nom : connector url base : <<silex.rooturl>>cgi/scripts/proxy.php?url= RichTextList.cmp.swf nom : list ListUi.cmp.swf list name : list

36 Paramétrez les composants RSS DataSelector.cmp.swf nom: selector connector name : connector source : l'adresse Rss encodée du blog. ex : http%3a%2f%2fmon.domaine.com%2fdossier.silex%2fwordpress %2F%3Ffeed%3Dcustomfeed%26cat%3D3 list name : list cell content : ((<<title>>)) deeplink format : <<title>> Onglet <nav> du composant icone : Yes nom de la page : workpage

37 redimensionnez la list comme vous souhaitez sauver et raffraichir vos articles apparaissent dans la liste. Selectionnez l'un d'eux. La page workpage apparaît dans la boite à outil page/calque

38 Construire les accesseurs La page workpage est une page type (template), qui affichera les articles et clefs de la catégorie Work. Les infos vont s'afficher grâce aux accesseurs.

39 Ces accesseurs sont constitués du nom du selector de la liste Work, d'une base fixe : selecteditem, et d'une clef wordpress (balise) selectorname.selecteditem.clefwordpress ex : selectorwork.selecteditem.title Ajoutez la syntaxe ((<<selectorwork.selecteditem.title>>))

40 ((<<selectorwork.selecteditem.title>>)) ((<<selectorwork.selecteditem.content:encoded>>)) ((<<selectorwork.selecteditem.adressembeded>>)) ((<<selectorwork.selecteditem.namecontact>>)) ((<<selectorwork.selecteditem. >>)) ((<<selectorwork.selecteditem.httpimage>>)) ((<<selectorwork.selecteditem.httplink>>)) ((<<selectorwork.selecteditem.tarifs>>)) ((<<selectorwork.selecteditem.diaporamaembeded>>)) ((<<selectorwork.selecteditem.pubdate>>)) ((<<selectorwork.selecteditem.dc:creator>>))...

41 Poser les accesseurs sur la page workpage Créer un champ texte dans label posez les accesseurs et faire la mise en page : ((<<selectorwork.selecteditem.title>>)) ((<<selectorwork.selecteditem.content:encoded>>)) Auteur : ((<<selectorwork.selecteditem.namecontact>>)) [[mailto:((<<selectorwork.selecteditem. >>)) Répondre par mail]] Website :

42

43 Afficher le widget google maps posez 1 bouton qui ouvre la page "adresse" sur la page "adresse" cliquez sur le bouton Widget de la boite à outils "Library" dans ces propriétés, widget = ((<<selectorwork. selecteditem.adressembeded>>)) décochez la propriété "fond"

44 Afficher le widget google docs diaporama sur la page workpage, posez 1 bouton qui ouvre la page diaporama sur la page diaporama cliquez sur le bouton Widget de la boite à outils "Library" dans ces propriétés, widget = ((<<selectorwork. selecteditem.diaporamaembeded>>)) décochez la propriété fond

45 Affichez l'image de la clefs "httpimage" Posez le composant Oof imagedisplay.cmp.swf Cochez la propriété keep proportions Pour single media Url noter l'accesseur : ((<<selectorwork.selecteditem.httpimage>>))