Répondre au commentaire

Theming: Déplacer les liens Addthis au dessus de nos nodes en Drupal 6.x

Le module Addthis de Drupal permet à l’utilisateur de notre site de partager le contenu sur différents réseaux sociaux (FaceBook, Twitter…). Par défaut, ce module place les liens sociaux au bas de notre node, juste en dessous du contenu.

Mais comment pourrions-nous placer ces liens au dessus du contenu, comme cela se fait plus généralement?

Pour cela, nous allons définir une variable (template) $addthis qui sera disponible dans notre fichier node.tpl.php et éliminer la variable $links['addthis'] créée par le module Addthis.

Par la suite, nous allons placer cette nouvelle variable dans notre fichier node.tpl.php et si nécessaire nous allons appliquer un style à cette variable.

La variable $links['addthis']

Si nous analizons le module Addthis (une des meilleures manières d’apprendre Drupal), nous voyons que le module définit ses liens grâce au hook hook_link() qui nous permet justement de créer des liens au bas de nos nodes ou commentaires.

<?php
/**
* Implementation of hook_link().
*/
function addthis_link($type, $node = NULL, $teaser = FALSE) {
 
//...
 
$links = array();
 
$links['addthis'] = array(
   
'title' => theme($addthis_widget_type, NULL, array(
     
'url' => url('node/' . $node->nid, array('absolute' => TRUE)),
     
'title' => $node->title,
    )),
   
'html' => TRUE,
  );

  return

$links;
}
?>

Les liens crées par hook_link() (ajouter un commentaire, lire plus…) se placent au dessous du contenu de nos nodes grâce à la variable $links et ce dans le fichier node.tpl.php comme suit:

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">

    <div class="content">
        <?php print $content ?>
    </div>
    <?php if ($links): ?>
       <div class="links"><?php print $links ?></div>
    <?php endif; ?>
    <?php if ($terms): ?>
       <div class="taxonomy"><?php print "<span class='lostags'>Tags:</span> ".$terms ?></div>
    <?php endif;?>
</div>
?>

Définir une nouvelle variable ($addthis) et éliminer l’ancienne ($links['addthis'])

Dans notre fichier template.php de notre thème, et en particulier dans le fonction preprocess_node hook() nous allons créer une nouvelle variable $addthis ($variables['addthis']) qui reprendra les liens créés para le module Addthis dans la variable $links['addthis'] ['title'].

Par la suite, nous allons éliminer la variable $links['addthis'] et reconstruire la variable $links sans $links['addthis'].

<?php
function mytheme_preprocess_node(&$variables) {
   
  if (!empty(
$variables['node']->links['addthis'])) {
   
// 1. Définir la variable $addthis pour notre thème
   
$variables['addthis'] = $variables['node']->links['addthis']['title'];
   
// 2. Eliminer  $links['addthis'] et re créer la variable $links
   
unset($variables['node']->links['addthis']);
   
$variables['links'] = theme_links($variables['node']->links, array('class' => 'links inline'));
  }
}
?>

N’oubliez pas de changer mytheme par le nom de votre thème.

Une fois définie notre nouvelle variable, nous devons reconstruire le theme registry. Pour cela nous devons simplement nettoyer notre cache. Nous pouvons le faire avec le module Devel, Admin Menu ou Cache Browser. Si nous n’avons pas installé ces modules, nous pouvons toujours le faire via admin/settings/performance et cliquer sur le bouton “Nettoyer le cache”. A présent notre nouvelle variable ($addthis) est disponible au niveau de notre theme layer.

Placer notre nouvelle variable $addthis dans le fichier node.tpl.php

Dans le fichier node.tpl.php nous allons ajouter notre nouvelle variable $addthis juste avant la variable $content.

...
<?php if ($addthis): ?>
  <div class="addthis">
    <?php print $addthis ?>
  </div>
<?php endif; ?>
<div class="content">
  <?php print $content ?>
</div>
...

Appliquer un style si nécessaire
Dans le fichier css de notre thème, nous pouvons ajouter un style pour que notre variable $addthis apparaisse à droite.

    <div class="content">
        <?php print $content ?>
    </div>

“Voila”. Nous avons pu déplacer les liens crées par le module Addthis au dessus de notre node.

Si vous avez des questions, n’hésitez pas à poster un commentaire.

Références:
Le module Addthis: http://drupal.org/project/addthis
Le hook_link() http://api.drupal.org/api/drupal/developer--hooks--core.php/function/hoo...
La function template_preprocess_node(): http://api.drupal.org/api/drupal/includes--theme.inc/function/template_p...
Le fichier node.tpl.php: http://api.drupal.org/api/drupal/modules--node--node.tpl.php/6

Tags:

Répondre

Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><img>
  • Vous pouvez publier du code en utilisant les balises <code>...</code> (generic) ou bien <?php ... ?> (PHP colorié).
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plus d'informations sur les options de formatage

By submitting this form, you accept the Mollom privacy policy.

Toutes les langues

A propos

En savoir plus... Karim Boudjema. Un développeur belge dans les Andes boliviennes.

Voir mon profil sur LinkedInVoir mon profil sur Twitter

>> En savoir plus...

Commentaires récents