Activer les Menus Verticaux avec Joomla

Une question qui revient fréquemment est la suivante : Comment faire pour que le style de menu vertical configuré dans Artisteer s’affiche sur un site réalisé en Joomla ?

A partir de la version 2.4 du logiciel Artisteer, vous pouvez utiliser le Suffixe de classe de module art-vmenu pour appliquer le style de menu vertical Artisteer à votre module de menu dans Joomla.

Voici donc comment procéder.

Création du Menu Vertical

Pour cela, il vous faut procéder comme suite :
Connectez-vous à votre administration Joomla et allez dans le menu Extensions, puis Gestion des modules.

Sélectionnez le module que vous voulez éditer.

Dans les Paramètres du module, renseignez le champ Suffixe de classe de module avec la valeur suivante : art-vmenu

Si vous créez un menu vertical qui s’ouvre sur un clic souris, veillez à désactiver la mise en cache.

Création d’un Menu Vertical avec des sous-éléments

Pour créer un menu vertical avec des sous-éléments, voici comment procéder :
Activez les multi-niveaux dans Artisteer : Onglet Menu Vertical - Sous-éléments - Niveaux

Créez un menu avec des éléments de sous-menu dans Joomla. Les éléments de sous-menu doivent chacun avoir des éléments parent spécifiés.

Activez les niveaux multiples dans votre module menu (Style de menu – « Affichage des sous-menus – Vertical »)

Utilisez le Suffixe de classe de module : art-vmenu pour appliquer le style de menu vertical aux modules menu souhaité

Traduire automatiquement votre blog Blogger

Vous voudriez que votre blog écrit en français s'affiche, par un simple clic souris, en anglais pour vos visiteurs anglophones, en allemand, en italien, etc.

Il est possible de traduire automatiquement la page complète du blog en sélectionnant tout simplement la langue dans une liste déroulante.

Comment Procéder ?

Il vous faut ajouter un gadget de type HTML/JavaScript dans les Eléments de la page (onglet Présentation) dans lequel vous insérez ce code :

Cliquez sur l'image pour l'agrandir

puis vous enregistrez.
Cela aura pour effet d'afficher ce nouvel élément sur votre blog :



Remarque pour les Modèles Artisteer

Si vous utilisez Artisteer pour générer le thème de votre blog, votre page, une fois la langue sélectionnée, ne s'affichera pas correctement avec les navigateurs Firefox et Google Chrome.

Il vous faut alors éditer le modèle et ajouter une ligne de code.

Cette solution est applicable jusqu'à la version 2.5 build 31067 du logiciel Artisteer.

1. Ouvrez Blogger - Onglet Présentation - Modifier le code HTML - Modifier le modèle
Localisez cette ligne de code :

var widgetContent = widget.html();

2. Et juste après ajoutez cette ligne de code :

if (widgetContent.indexOf('www.gmodules.com') > -1) return true;

3. Enregistrez votre modèle

Définir le texte du pied de page du site/blog avec Artisteer

Une question qui revient en permanence est "Comment peut-on définir le texte du pied de page du site/blog avec Artisteer ?"

Pour définir/personnaliser le texte du pied de page, il vous suffit dans Artisteer de cliquer sur l'icône représentée par la palette de peinture, puis de sélectionner le menu Exporter, et le sous-menu Options d'export.
Dans la boîte de dialogue qui s'affiche, vous cliquez alors sur l'élément Propriétés pour renseigner les informations voulues, puis sur Notes de bas de page pour sélectionner les options voulues à afficher sur le pied de page de votre site/blog.

Et voilà, c'est tout simple.

Afficher les widgets Recherche, Profil... avec Artisteer et WordPress

Dans Artisteer vous avez paramétré un thème WordPress avec 2 colonnes :

une première colonne avec Recherche et une deuxième colonne avec Profil et Archive.

Il vous faut positionner ces widgets de la même manière dans WordPress, à partir de votre interface d'administration : Apparence -> Widgets


Remarque : Pour les libellés, c'est le "libellé" paramétré dans le CMS qui prend la main, comme pour le titre et le slogan de l'en-tête...

Paramétrer des pages "statiques" avec Blogger

Avec Blogger vous pouvez avoir plusieurs pages :
La Page Accueil (qui affiche automatiquement les articles que vous publiez) et des Pages dites "statiques". Vous allez pouvez naviguer entre ces pages grâce à un menu comme sur n'importe quel site Web.

Mais comment procéder ? C'est très simple !

Dans votre interface d'administration de Blogger, cliquez sur l'onglet Publication d’un message, puis l'Onglet Modifier les pages.
1 - Cliquez sur Nouvelle Page

2 - Renseignez le titre et le texte puis cliquez sur Publier la Page
Vous pouvez à tout moment éditer (modifier) le contenu de vos pages.

Ensuite Choisissez comment le gadget Page doit apparaître.

Avec la version actuelle de Blogger, on peut avoir jusqu’à 10 pages indépendantes.

Mais pourquoi avoir des Pages supplémentaires avec Blogger ?

Cela peut permettre de réduire le nombre de gadgets utilisés... Plus vous utilisez de gadgets, et plus le blog perd en lisibilité, en performance (il devient lent à charger... Rappellez-vous que tout le monde ne bénéficie pas de connexion ADSL ultra performante).

Vous pourrez créer une page pour détailler votre profil, une autre pour fournir des informations pratiques, etc.

Afficher le libellé Home en français avec Artisteer - WordPress

Pour que le libellé du premier onglet (menu) Home s'affiche en français, il vous faut recharger votre projet dans Artisteer.

Allez dans le menu Exporter -> Thème WordPress -> Bouton Options…

Dans la boîte de dialogue qui s’affiche cliquez sur WordPress et changez le libellé de la page d’accueil :
remplacez Home par Accueil.

Il vous suffit d'uploader votre thème mis à jour, et désormais vos visiteurs liront le libellé Accueil.

Paramétrage des Eléments de la Page avec Blogger

Bonsoir, Nous allons vous expliquer comment personnaliser les éléments de mise en page avec Blogger. Dans TABLEAU DE BORD au niveau de votre Profil, il vous faut cliquer sur MISE EN PAGE… Le premier onglet Éléments de la page va permettre de positionner de nouveaux éléments sur la page : on a une vue du schéma de mise en page. Il suffit de sélectionner à la souris les éléments souhaités et de les mettre à l’endroit désiré… Pour cela, on clique sur le bloc voulu, on le déplace en maintenant enfoncé le bouton de la souris et on le relâche à l’endroit voulu en lâchant le bouton de la souris… c’est ce qu’on appelle le drag-and-drop (glisser-déposer). Pour modifier un élément on clique sur « Modifier » dans le bloc voulu. Les blocs avec la mention « Ajouter un gadget » permettent d’ajouter de nouveaux blocs à la mise en page. Quand on clique dessus, une nouvelle fenêtre s’ouvre avec une liste des gadgets disponibles. Un des gadgets les plus utilisés est le Champ de Recherche ; il ajoute une fonctionnalité permettant de faire une recherche sur le blog. Si le gadget n’a pas déjà été ajouté un + est disponible. On clique dessus et on renseigne les informations demandées et on valide. Si on retourne sur le blog en mode affichage (Afficher le blog), on verra son champ de recherche qui est fonctionnel. Le gadget Libellés est également très utile car il va permettre de catégoriser les posts, c’est-à-dire les mettre dans des rubriques. Exemple : Je crée un post qui s'intitule Comment paramétrer Blogger ? Je vais le mettre dans une catégorie que j'appelle Paramétrage… (à vous de déterminer les noms de vos catégories) et sur mon blog j’aurai accès à une section Libellés qui affichera le nombre de posts liés au libellé Astuces Blog. Si je clique dessus tous les posts (articles) dépendant de la catégorie Astuces Blogs s’afficheront dans la fenêtre courante. L’intérêt c’est que votre visiteur affichera un contenu en concordance avec ce qu’il recherche. Donc il vous faut passer en revue les différents gadgets pour voir ceux qui vous seront utiles, j’ai bien dit utile ! car inutile d’avoir trop de gadgets… Pour les ajouter vous cliquez sur le bouton + et vous les paramétrez. Pour les changer de position sur la page, procédez comme indiqué précédemment. Remarque : une bannière est une image… format .jpeg, .gif… donc pour ajouter une bannière il faudra ajouter un gadget Image. Lorsque vous configurez ce gadget, en cliquant sur le +, il vous précise la taille d’affichage de l’image si vous ajustez à la page. Exemple : L’image sera réduite à 900 pixels… Veillez dans ce cas à ce que l’image que vous allez placer ne soit pas supérieure à 900 pixels… Cette image vous pourrez la récupérer directement depuis votre ordinateur (en local)... naviguez jusqu'à votre fichier image puis cliquer sur Enregistrer.

Paramétrer les URLs des pages dans WordPress pour afficher le nom de la page

Par défaut les URLs des pages d'un site/blog WordPress contiennent une valeur numérique pour les pages, comme par exemple : http://www.artisteer-france.fr/?p=83 Afin d'afficher le nom en clair de la page comme par exemple : http://www.artisteer-france.fr/achat/achat-en-ligne/ Il faut aller dans l'interface d'administration de WordPress, dans le menu Réglages -> Permaliens et renseigner la structure personnalisée : /%category%/%postname%/ Ensuite il faut mettre à jour le fichier .htaccess (fichier se trouvant à la racine du répertoire WordPress) : RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] Si le fichier .htaccess n'existe, il vous faut alors le créer. Création d’un fichier .htaccess sous Windows Les systèmes d'exploitation Windows ne permettent pas de renommer un fichier en .htaccess. Pour créer un fichier .htaccess, il faut créer un nouveau fichier à l'aide d'un éditeur de texte et sélectionner Enregistrer sous... dans le menu Fichier. Dans la boîte de dialogue, il faut saisir ".htaccess" (ne pas oublier les guillemets sinon le programme ne comprendra pas le nom du fichier et rajoutera l'extension .txt) puis cliquer sur le bouton Enregistrer. Dans le fichier .htaccess vous ajoutez tout simplement ce contenu : RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] Dans un prochain article nous reviendrons sur le fichier .htaccess qui s'avère utile pour d'autres propos comme la sécurisation d'un répertoire ou encore la redirection de page(s) ou de répertoire(s).

Créer un espace restreint sur un site WordPress

La Solution

Elle s'applique à WordPress en version 2.8 et 2.9.

Commençons par les utilisateurs. Ils sont créés par l’administrateur du site.

Dans WordPress Options -> Réglages -> Général

Inscription : l’option «Tout le monde peut s’enregistrer» est décochée

Par défaut tout nouvel utilisateur a pour rôle «Abonné» (l’abonné a des droits minimum avec aucun droit d’édition).

L’administrateur crée ses utilisateurs.

Le Widget Meta est utilisé (Options -> Apparence -> Widgets) afin que le visiteur ait accès au bouton Connexion et Déconnexion sur le site… Dommage que seul le nom de ce widget soit modifiable (éditez le Titre en renseignant Accès Client par exemple)… On ne peut pas par exemple enlever l’option Admin. du Site… Par défaut quand l’utilisateur se connecte il est dirigé sur son profil, or on préférera rediriger l’utilisateur directement sur le site/blog après la connexion. Pour cela on ajoute un bout de code dans le fichier functions.php qui se trouve dans le répertoire wp-content/themes

Au début du fichier functions.php juste après

has_cap( 'edit_posts' ) === false ) {
return get_bloginfo( 'siteurl' );
}
return $redirect_to;
}
add_filter( 'login_redirect', 'loginRedirect', 10, 3 );

Remarque : Si on regénère ultérieurement son thème (avec Artisteer) ou on utilise un nouveau thème, il faut veiller à bien ajouter manuellement ce bout de code.

Il existe un plugin, wpNamedUsers, qui va permettre de gérer les utilisateurs par groupe. Il faut installer ce plugin dans le répertoire wp-content/plugins et l’activer. Puis dans Options -> Réglages -> WPNamedUsers groups on crée un ou des groupes d’utilisateurs et pour chaque groupe on leur attribue des utilisateurs.

On crée par exemple le groupe Clients et on lui attribue les utilisateurs voulus (ceux créés au préalable).

Il ne nous reste plus qu’à créer nos pages ou posts qui ne pourront être accessibles que pour certains utilisateurs (par exemple pour ceux appartenant au Groupe Clients), en veillant à laisser l’option Visibilité à Publique, et à paramétrer l’option WPNamedUsers groups en cochant le groupe Clients.

Conclusion

Et pour conclure… L’installation du plugin role_manager s’avère utile pour gérer plus finement les droits associés à chaque rôle (type de compte).

Comment créer une barre de menu avec des sous-menus avec WordPress et Artisteer ?

La gestion des menus ne relève pas du logiciel Artisteer. Artisteer permet de configurer le design des menus et des sous-menus (c'est-à-dire leurs attributs graphiques), mais il ne permet pas de créer les menus dans la mesure où l'arborescence va se créer automatiquement au fur et à mesure que les pages vont être créées. Voici comment procéder avec WordPress... Exemple Je crée ma page "Logiciel" A droite dans l'interface de WordPress j'ai une section Attributs - Parent je laisse l'option par défaut Aucune (pas de page parente) ainsi le menu "Logiciel" sera au premier niveau Ordre : je mets 1 ce qui veut dire que "Logiciel" sera le deuxième onglet (menu) de ma barre de menu... car par défaut Accueil (Home) est toujours le premier onglet de la barre de menus. Je créé ma seconde page "Logiciel Photo" Attributs - Parent : je sélectionne "Logiciel" ainsi le menu "Logiciel Photo" sera un sous-menu de "Logiciel" Ordre : je mets 1 ce qui veut dire que "Logiciel photo" sera le premier sous-menu du menu "Logiciel" Je créé ma troisième page "Montage" Attributs - Parent : je sélectionne "Logiciel Photo" ainsi "Montage" sera un sous-menu de "Logiciel Photo" qui est un sous-menu de "Logiciel" Ordre : je mets 1 ce qui veut dire que "Montage" sera le premier sous-menu du sous-menu "Logiciel Photo" Je créé ma quatrième page "Impression" Attributs - Parent : je sélectionne "Logiciel Photo" ainsi "Impression" sera un sous-menu de "Logiciel Photo" qui est un sous-menu de "Logiciel" Ordre : je mets 2 ce qui veut dire que "Impression" sera le deuxième sous-menu du sous-menu "Logiciel Photo" etc. Paramétrer l'Accueil dans Artisteer Menu Exporter -> Options d'Export... -> Propriétés WordPress Vous pouvez renseigner si vous affichez l'élément d'Accueil et le nom qui apparaîtra sur le menu pour cet élément. Par défaut sa valeur est "Home"... à remplacer par "Accueil" pour un blog en français.

Personnalisez son Modèle pour Blogger

Une vidéo sur le logiciel Artisteer 2.3 à ne pas manquer ! Cette vidéo, mise en ligne cet après-midi, montre comment en seulement quelques clics souris on peut créer un modèle personnalisé pour Blogger et le publier.

Créez son premier "blog" avec WordPress

Il y a quelques mois maintenant, je voulais créer mon premier blog. Et comme beaucoup d’entre nous, il m’était difficile de trouver du temps à accorder à ce sujet, pour me documenter, etc.

Mais ce que je savais c’est que premièrement je voulais héberger la solution CMS retenue sur mon serveur et qu’elle soit gratuite (dans la mesure du possible), et deuxièmement utiliser Artisteer pour me créer de façon très simple et en seulement quelques clics souris un « beau» modèle (template)… après, tout est en relatif par ce qu’on entend par « beau» , « joli» , « sympa»…

Objectif n°1 : Récupérer la dernière version du CMS WordPress en français et l’installer sur mon serveur

Je trouve mon bonheur ici http://fr.wordpress.org/ avec une petite note explicative… que je fais l’effort de lire (lire prend du temps mais cela fait également gagner un temps précieux). Au préalable à l’installation il faut donc que je crée ma base de données qui sera utilisée par mon blog. Il faut que j’aille faire un petit tour sur l’interface d’administration de mon serveur et que je crée une nouvelle base avec MySQL… Je galère un peu car je rencontre des problèmes de droits, mais bon au final cela prend moins d'une minute avec l’interface pour créer la base de données, à partir du moment où on se connecte avec un utilisateur qui a TOUS les privilèges requis.

Je télécharge donc WordPress en local que je décompresse dans un nouveau répertoire /blog/ Je suis scrupuleusement la note explicative et je renomme le fichier wp-config-sample.php en wp-config.php avant de l’éditer pour renseigner les informations permettant de se connecter à ma base de données toute fraîchement créée. Ceci étant fait je lance mon client ftp préféré, et j’uploade tout le contenu de mon répertoire /blog/ sur mon serveur. C’est au final l’upload qui a pris le plus de temps.

Donc il ne me reste plus qu’à finaliser l’installation en renseignant cette URL dans mon navigateur Web http://www.monsite.com/blog/wp-admin/install.php Mais voilà que la page attendue ne s’affiche pas… j’ai un message d’erreur comme quoi j’aurais un problème de connexion Internet… alors que je suis connectée. Je vérifie donc les informations renseignées dans le fichier wp-config.php et je fais quelques modifications au cas où ; je renseigne un autre utilisateur en veillant à ce que cet utilisateur ait bien les bons droits sur la base de données. Mais rien n’y change ! Je fais une rapide recherche dans les ressources WordPress… Ah ! Le fait de nettoyer l’historique du navigateur devrait résoudre mes problèmes. Je nettoie donc Internet Explorer… et essaye à nouveau de lancer le script d’installation… Mais…

Autre message d’erreur : « Fatal Error: Allowed memory size…» Et maintenant un problème de taille mémoire sur le serveur ! Il faut que je contacte mon hébergeur pour qu’il fasse le nécessaire et augmente la taille mémoire. 4 heures plus tard la taille est augmentée et cette URL http://www.monsite.com/blog/wp-admin/install.php m’affiche enfin la page tant attendue, qui me permet de finaliser mon installation : un dernier écran à renseigner… Et voilà ! le blog est en ligne. Certes pas très joli car le modèle par défaut WordPress est vraiment « sans plus» , et bien sûr il n’y a pas encore de contenu de disponible… mais chaque chose en son temps.

Objectif n°2 : Créer un modèle (thème) avec Artisteer

Là l’opération s’avère d’une très grande simplicité et surtout très rapide. Je lance Artisteer (version 2.x) et je clique tout simplement sur le bouton « Suggérer la Conception» jusqu’à ce que je trouve une conception qui me plaise ou qui se rapproche de ce que je souhaite… La conception trouvée, je commence à éditer quelques éléments comme les couleurs, l’en-tête, etc. L’opération ne me prend que quelques minutes.

Il ne me reste plus qu’à exporter ma conception. Rien de plus simple : dans Artisteer je sélectionne le menu Exporter -> Thème WordPress. Je donne un nom à mon thème personnalisé, je renseigne le chemin du dossier dans lequel je veux enregistrer/exporter mon thème : ..\blog\wp-content\themes et je coche l’option «Exporter un dossier» . Je n’oublie pas d’enregistrer mon projet Artisteer au format .artx ce qui me permettra d’éditer ultérieurement mon thème dans Artisteer pour affiner un certain nombre de détails.

Il ne me reste plus qu’à uploader mon thème personnalisé sur mon serveur dans le répertoire \wp-content\themes de sorte à ce que dans l’interface d’administration de WordPress (menu Apparence -> Thèmes) je puisse le sélectionner dans la liste des Thèmes disponibles (en double-cliquant sur mon thème) et l’appliquer à mon blog (en haut à droite de l’interface d’administration il y a un bouton Activer sur lequel il faut cliquer).

Et voilà mon blog est en ligne et offre un thème personnalisé que je vais pouvoir facilement améliorer à tout moment avec Artisteer.

Ceci étant fait il me faut parcourir les différentes options dans l’interface d’administration de WordPress pour personnaliser mon blog : Catégories, Pages, Liens… et pourquoi pas utiliser des extensions plus tard… mais nous verrons ce dernier point plus tard...

Objectif n°3 : Créer du contenu dans mon blog

Les pages et catégories étant personnalisées/créées, il me faut écrire mon premier article…

Un peu en manque d’idées pour un premier article, et bien je me suis tout simplement proposée de vous faire part de mon « expérimentation» de l’implémentation, création et personnalisation d’un blog avec le présent article.

Et pour conclure…

1 – Je confirme qu’implémenter WordPress est d’une simplicité enfantine.

2 – Je confirme qu’Artisteer est vraiment un outil révolutionnaire dans le domaine de la conception Web pour reprendre l’expression de l’éditeur : Web design revolution. Il est très simple à utiliser et ne requiert pas de connaissance technique (n’importe qui peut l’utiliser), il permet de créer rapidement des conceptions qui vous surprendront… Certains disent que l’outil est trop cher (moins de 120 €uros H.T…), mais quand on voit le gain en productivité (conception instantanée) et en qualité (graphique et du code), je dis que l’outil est proposé à un prix vraiment très raisonnable !

3 – Il ne s’agissait que d’une première étape, d’un premier jet… Maintenant il me reste à explorer les possibilités de WordPress (un peu de lecture va donc s’imposer) et affiner mon thème avec Artisteer au fil du temps… et ce de façon très simple : je lance Artisteer, j’ouvre mon projet enregistré sous montheme.artx, je n’ai plus qu’à l’éditer par de simples clics souris, et pour finir il me suffit de l’exporter et de l’uploader sur mon serveur comme vu précédemment.