Tutoriels Joomla!
- Détails
- Écrit par : Stéphane Bourderiou
- Temps de lecture: 11 mins
Il existe beaucoup d'extensions permettant d'afficher des boutons de partage vers les réseaux sociaux (Facebook,Twitter,Blogger...), mais il n'est pas toujours simple de les mettre en oeuvre selon les sites et encore moins de les personnaliser selon ses choix. Nous vous proposons aujourd'hui des astuces que nous utilisons grâce aux scripts fournit par Addthis. Avant de commencer vous nous direz mais Addthis propose un plugin d'intégration pour Joomla! 1.5, oui effectivement mais si l'on souhaite utiliser différentes versions d'affichage, là le plugin ne le propose pas comme cela est possible avec la duplication des modules. Nous allons donc ajouter quelques lignes de codes dans les fichiers php concernés pour l'affichage des différents boutons. Si vous débutez sous Joomla! ne vous inquiétez pas nous irons étape par étape, cela n'a rien de compliqué en fait si l'on prend bien le temps de lire les informations fournies. Une archive avec une base des fichiers modifiés sera disponible en annexes de l'article.
Selon votre choix d'affichage dans les articles de vos catégories et l'affichage en Frontpage, il faut dans un premier temps récupérer deux fichiers php dont vous prendrez le soin d'en faire une sauvegarde.
- default.php dans le répertoire /components/com_content/views/article/tmpl/ (affichage des articles dans les catégories)
- default_item.php dans le répertoire /components/com_content/views/frontpage/tmpl (affichage des articles en frontpage)
Une fois cette opération réalisée nous allons créer un répertoire à la racine du site, ce dossier contiendra le fichier php avec le script fournit par Addthis et un fichier index.html. Pour l'exemple de ce tutoriel nous avons choisit d'utiliser le mot social, mais vous pouvez en changer à votre guise en respectant bien le principe de construction. Munissez-vous pour commencer d'un éditeur de texte (Context, Notepad++ sous Windows ou Gedit sous Ubuntu ...) . Nous allons créer en local un dossier que l'on nommera social pour notre exemple, dans lequel nous ajoutons un fichier index.html (le plus simple est de faire un copier/coller de l'un de ceux présent dans les répertoires de Joomla).
Sinon la ligne de code à utiliser dans ce fichier:
<html><body bgcolor="#FFFFFF"></body></html>
Dans ce même dossier nous allons préparer notre fichier php qui contiendra le script fournit par Addthis, pour cela ouvrir une page vierge avec votre éditeur et ajouter les lignes suivantes :
<?php
// Dont allow direct linking
defined( '_JEXEC' ) or die();
?>
<!-- French Google +1 -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'fr'} </script>
<!-- End-->
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4eac88b70959b020"></script>
<!-- AddThis Button END -->
Puis enregistrer le fichier sous le nom addthis.php. Nous avons notre base auquel nous ferons appel pour l'affichage des boutons.Petite précision par rapport aux lignes suivantes, cela permet l'affichage du bouton Google+ en français.
<!-- French Google +1 --><script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'fr'} </script><!-- End-->
L'appel au fichier addthis.php se fera via la ligne suivante :
<div id="socialshare"><?php require(JPATH_BASE.DS.'social'.DS.'addthis.php') ?></div>
C'est donc cette ligne de code que nous ajouterons au fichier default.php et/ou default_item.php. Dans notre exemple les boutons ne vous conviendrons peut-être pas, ou vous souhaiterez avoir un affichage différent pour la frontpage et dans les articles des catégories, nous développerons cette partie plus tard.
Revenons à notre base, nous allons éditer le fichier default.php pour inclure la ligne d'appel. Pour un affichage en bas de l'article chercher la ligne 137
<span class="article_separator"> </span>
Les commentaires avant et après la ligne de code vous serons utile pour retrouver rapidement les modifications, mais ne sont pas obligatoires. Ou pour un affichage en début d'article la ligne 121
<div id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis.php') ?></div>
et ajouter juste en dessous les lignes:
<!-- AddThis Button BEGIN --><br><div id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis.php') ?></div><br><!-- AddThis Button END -->
Valider votre modification en sauvegardant le fichier. Nos fichiers sont donc prêt et il nous reste plus qu'à effectuer le transfert et visualiser le résultat. Transfert du répertoire social et ses fichiers à la racine du site
Transfert du fichier default.php dans le répertoire /components/com_content/views/article/tmpl/ Logiquement vous pouvez visualiser les boutons dans vos articles, si vous avez activé le cache dans votre Joomla, pensez à le vider.
Si vous souhaitez avoir un affichage des boutons en frontpage, il faut inclure le code dans le fichier default_item.php Affichage en haut de l'article après la ligne 115
<!-- AddThis Button BEGIN --> <div id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis.php') ?></div> <!-- AddThis Button END -->
ou au bas de l'article (qui sera avant le formulaire de commentaire le cas échéant) ligne 149
<!-- AddThis Button BEGIN --> <div id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis.php') ?></div> <!-- AddThis Button END -->
Puis transférer le fichier dans le répertoire /components/com_content/views/frontpage/tmpl
Adaptation au template et personnalisation
Mise en forme
Selon le template utilisé il vous faudra peut-être ajuster la position des boutons, deux possibilités vous serons offerte.
- Soit en ajoutant des balises HTML dans le fichier addthis.php.
<?php
// Dont allow direct linking
defined( '_JEXEC' ) or die();
?>
<!-- French Google +1 -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'fr'} </script>
<!-- End-->
<br />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<!-- AddThis Button END -->
<br />
- Soit en faisant appel à une classe CSS de votre template.
Récuperer le fichier template.css (exemple du template ( dans nos captures le rhuk_milkyway natif de Joomla) et créer une nouvelle classe.
/* Bouton social */
div.social {
float:right;
margin-left:20px;
margin-bottom:20px;
}
Dans ce cas pour faire appel à cette classe, vous devez modifier le code en ajoutant la classe CSS
<div class="social" id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis.php') ?></div>
L'override
Depuis la version 1.5 de Joomla, il est possible de ne plus modifier les fichiers du noyau par la fonction override (surcharge d'un template) via le dossier html d'un template. Cette possibilité permet d'éviter la mise à jour des personnalisations des fichiers default.php et default_item.php lors d'une nouvelle version de la branche 1.5.Structure de template Joomla à utiliser Pour les articles affichés dans une catégorie
- /template-joomla/
- /template-joomla/html/
- /template-joomla/html/com_content/
- /template-joomla/html/com_content/article/default.php
Pour les articles affichés en frontpage
- /template-joomla/
- /template-joomla/html/
- /template-joomla/html/com_content/
- /template-joomla/html/com_content/frontpage/default_item.php
Comme nous l'avons évoqué plus haut, vous pouvez être intéressé par l'utilisation de plusieurs versions du script ou fonctionnalités. Si tel est le cas il vous faudra créer dans le répertoire social une version différente du fichier php de base. Dans notre exemple nous avons choisi de nommer le fichier addthis.php, vous pourrez donc utiliser comme nom addhtis_bis.php et de modifier le code en conséquence
<!-- AddThis Button BEGIN -->
<div id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis_bis.php') ?></div>
<!-- AddThis Button END -->
Le script de Addthis que nous avons utilisé est une version simple, une fois inscrit sur le site de l'éditeur (les services sont gratuit), vous pouvez avoir l'accès à un service de statistiques.
Une seule ligne est à modifier dans ce cas.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4eac88b70959b020"></script>
Comme ceci
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=votrepseudo"></script>
Annexes
En guise de bonus pour cloturer cet article nous vous proposons l'intégration pour composant de forum Kunena (version 1.7.1) du code que nous utilisons.
Créer une version addhtis_forum.php et ajouter les lignes suivantes:
<?php
// Dont allow direct linking
defined( '_JEXEC' ) or die();
?>
<!-- French Google +1 -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'fr'} </script>
<!-- End-->
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_email" title="Envoyer à un ami"></a>
<a class="addthis_button_print" title="Imprimer"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook" title="Partargez-le sur Facebook"></a>
<a class="addthis_button_twitter" title="Partargez-le sur Twitter"></a>
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c77ced865dac619" class="addthis_button_expanded" title="Plus d'options"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_google_plusone" g:plusone:size="small"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4eac8876262823d7"></script>
<!-- AddThis Button END -->
Récupérer en local le fichier view.php présent dans le répertoire /components/com_kunena/template/default/view
Après la ligne 36
<h2><span><?php echo JText::_('COM_KUNENA_TOPIC') ?> <?php echo $this->escape($this->kunena_topic_title) ?></span></h2>
Ajouter
<!--Addthis Button BEGIN--> <div id="socialshare"><?php require(JPATH_BASE .DS.'social'.DS.'addthis_forum.php') ?><br /></div> <!--Addthis Button END-->
- Transférer le fichier addthis_forum.php dans le réperoire social
- Transférer le fichier view.php dans le répertoire /components/com_kunena/template/default/view
Consulter l'API pour personnaliser le code
Télecharger le pack de fichiers modifiés
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
- Détails
- Écrit par : Stéphane Bourderiou
- Temps de lecture: 3 mins
Présentation
La réécriture d'URLs (en anglais URL Rewriting) consiste à réécrire à la volé sur un serveur Web Apache les adresses très peu lisibles que le CMS Joomla! génère afin de les simplifier.
Par exemple, une URL du type :
http://www.domaine.tld/index.php?option=com_content&task=view&id=1&Itemid=2
en une adresse bien plus explicite pour les lecteurs et particulièrement pour les moteurs de recherche:
http://www.domaine.tld/section/article/votre-article.html
Pour que la réécriture d'URLs fonctionne sur un site Joomla!, il faut que le module mod_rewrite du serveur soit chargé, c'est le cas chez la plupart des hébergeurs car il est quasiment toujours en standard avec les serveurs Web Apache.
Renseignez-vous auprès de votre hébergeur si ce n'est pas le cas, en principe cela ne pose pas de problème. Attention sur certains hébergements gratuits le module d’URL Rewriting n'est pas souvent activé (voir ne sera jamais activé), par exemple cela ne fonctionne pas chez Free.
Nous avons délibérément choisi de n'aborder dans ce tutoriel que le système proposé nativement avec Joomla! , il est souvent considéré comme basique mais il a l'avantage d'être fiable.
Configuration
Pour bien comprendre le fonctionnement des différentes options, nous prendrons un exemple issu de l'installation de base de Joomla! avec les données d'exemples.
http://www.domaine.tld/index.php?view=newsfeed&catid=4%3Ajoomla&id=1-joomla-official-news&option=com_newsfeeds&Itemid=49
Pour commencer, il vous faut activer l'option URLs explicites (SEF) --> (Search Engine Friendly) et utiliser le module Apachemod_rewrite dans le panneau de Configuration Globale onglet Site.
L'option Ajouter un préfixe aux urls, n'est pas obligatoire, sauf si vous souhaitez avoir un .html à la fin de vos urls.
Attention si n'activer pas le paramètre utiliser le module Apachemod_rewrite, vous obtiendrez l'url suivante:
http://www.domaine.tld/index.php/news-feeds/4-joomla/1-joomla-official-news.html
Nous allons maintenant mettre en place un fichier .htaccess sur la base du fichier htaccess.txt fourni nativement avec Joomla!
Deux lignes nous intéresse pour la mise en place des paramètres de réécriture.
Rechercher la ligne :
#RewriteBase /
Que vous devez dé-commenter comme ceci:
RewriteBase /
Attention si votre site se trouve dans un répertoire et que vous accédez à votre site via cette url :
http://www.domaine.tld/joomla/
RewriteBase / joomla
L'autre ligne qui nous intéresse fonctionne différemment selon les hébergements et peut créer chez certains une erreur dès l'activation des paramètres :
#Options +FollowSymLinks
Cela fonctionne bien chez o2switch ou 1&1 , mais attention cela générera une erreur sur un hébergement mutualisé chez OVH.
Si vous avez un doute sur cette fonction chez votre hébergeur, nous vous conseillons de la laisser commenté.
Pour finir vous devez renommer le fichier htaccess.txt en .htaccess ( soit en local, soit sur le serveur ).
Ce fichier devra être placé (via votre client de FTP) à la racine de votre site. Attention de ne pas oublier le point devant htaccess
Une fois les paramètres activés, vous devriez obtenir l'url suivante :
http://www.domaine.tld/news-feeds/4-joomla/1-joomla-official-news.html
Les moteurs de recherche apprécient ce genre d'URLs et vous devriez constater une légère augmentation du nombre de vos pages indéxées, il faut compter au moins 3 à 4 semaines pour avoir les premiers résultats.
Ce petit tutoriel que nous avons voulu simple sans trop de termes techniques ne demande qu'à être enrichi via la partie Annexes.
Toutes les contributions (documents et liens web) sont à proposer sur le sujet dédié du forum.
[Administrer] Gérer l'URL Rewritting avec Joomla!
Annexes
Documentation externe
Présentation de l'URL Rewriting
L' URL Rewriting - APACHE mod_rewrite
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
- Détails
- Écrit par : Pierre Sempé
- Temps de lecture: 2 mins
Afin de comprendre et essayer de maitriser le framework T3 de Joomlart, notre ami Lomart réalisé cette traduction d'une partie du wiki de Joomlart. Je mets ce travail à disposition sous forme d'un PDF en espérant qu'il vous aide à apprécier ce bel outil que nous offre Joomlart.
Dans cette section, nous allons couvrir l'ensemble du processus d'élaboration d'un template avec T3 Framework 2.0: ja_purity_iii avec exactement le même design que celui du très connu ja_purity_ii.
En général, nous expliquerons les étapes du développement, les bases de personnalisation des styles, des fichiers et la gestion des dossiers et les principes.
Cette section explore les procédures du concepteur de modèle pour créer un nouveau modèle avec les configurations, les thèmes et les paramètres de base. Tous les fichiers créés et les thèmes doivent utiliser le dossier core, que l'utilisateur final peut utiliser comme exemples pour sa conception.
- Détails
- Écrit par : Scottux
- Temps de lecture: 1 min
Comment faire apparaître la liste déroulante pour le choix de la langue avec CB lors de l'inscription d'un nouveau membre :
Panneau d'administration de joomla
Menu "Composants"
Community Builder / Onglet "Champs"
Editer le champ nommé "params"
Puis, modifier les paramètres comme ceci :
