var Phenix = function () {
Troll du Web depuis 1996

Blog

Mon avis sur tout (même si on ne me le demande pas) et surtout sur n’importe quoi !

Menu responsive avec foundation

Depuis la version 6 du framework SASS/CSS Foundation, le composant qui sert à créer le menu principal du site, à savoir la « top bar » n’est plus un menu responsif « out of the box ».

C’est a vous d’en construire un avec les composants, comme l’explique la documentation.

Voici une structure html qui devrait couvrir la majorité des besoins. N’ont pas que c’est bien compliqué à réaliser, mais j’en ai marre de la refaire encore et toujours.

  1. <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  2.         <button class="menu-icon" type="button" data-toggle></button>
  3.         <div class="title-bar-title">Menu</div>
  4. </div>
  5. <div class="top-bar" id="main-menu">
  6.         <div class="top-bar-left">
  7.                 <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-parent-link="true">
  8.                         <li>
  9.                                 <a href="#">Lien</a>
  10.                                 <ul class="menu vertical">
  11.                                         <li>
  12.                                                 <a href="">Lien</a>
  13.                                                 <ul class="menu vertical">
  14.                                                         <li>
  15.                                                                 <a href="">Lien</a>
  16.                                                         </li>
  17.                                                         <li>
  18.                                                                 <a href="">Lien</a>
  19.                                                         </li>
  20.                                                         <li>
  21.                                                                 <a href="">Lien</a>
  22.                                                         </li>
  23.                                                 </ul>
  24.                                         </li>
  25.                                         <li>
  26.                                                 <a href="">Lien</a>
  27.                                         </li>
  28.                                         <li>
  29.                                                 <a href="">Lien</a>
  30.                                         </li>
  31.                                 </ul>
  32.                         </li>
  33.                         <li><a href="#">Lien</a></li>
  34.                         <li><a href="#">Lien</a></li>
  35.                         <li><a href="#">Lien</a></li>
  36.                         <li><a href="#">Lien</a></li>
  37.                         <li><a href="#">Lien</a></li>
  38.                 </ul>
  39.         </div>
  40. </div>

Trier par date dans les métas

Voici un exemple de $args qui permet d’ordonner une liste de post selon une date stocker dans les métas de Wordpress (table wp_postmeta). C’est pratique pour tout un tas de plus de calendrier !

  1. <?php
  2. // Agenda
  3. $args = array(
  4.         'post_type' => 'events',
  5.         'meta_query' => array(
  6.                 // Exclure les éléments du passé
  7.                 array(
  8.                         'key' => '_EventStartDate',
  9.                         'value' => current_time( 'Y-m-d h:m:s' ),
  10.                         'compare' => '>',
  11.                 ),
  12.         ),
  13.         'orderby' => '_EventStartDate',
  14.         'posts_per_page' => 3,
  15. );
Voir en ligne : Ordering custom posts by meta field date


Trouver la traduction d’un objet #SPIP

Une fonction bien pratique quand on travaille avec des squelettes multilingues. Avant j’utilisais un assemblage de boucles et de critères, un peu illisible.

Cette fonction simplifie grandement le travail en retrouvant automatiquement une traduction en fonction d’un couple id_objet/objet.
Cela devrait fonctionner avec n’importe quel objet utilisant le système de traduction de SPIP.

  1. <?php
  2. /**
  3.  * Récupère la traduction d'un objet via la langue et l'id_objet
  4.  *
  5.  * @param int $id_objet
  6.  * @param string $objet
  7.  * @param string $lang
  8.  * @access public
  9.  * @return int
  10.  */
  11. function objet_trouver_traduction($id_objet, $objet, $lang) {
  12.  
  13.         // Pas de lang, on sort
  14.         if (!isset($lang)) {
  15.                 return $id_objet;
  16.         }
  17.  
  18.         // Table
  19.         $table = table_objet_sql($objet);
  20.         $cle_primaire = id_table_objet($objet);
  21.         // On récupère l'éventuelle traduction
  22.         $id_traduction = sql_getfetsel(
  23.                 $cle_primaire,
  24.                 $table,
  25.                 array(
  26.                         'id_trad='.intval($id_objet),
  27.                         'lang='.sql_quote($lang),
  28.                         'statut='.sql_quote('publie')
  29.                 )
  30.         );
  31.  
  32.         return $id_traduction;
  33. }
  34.  
  35. function article_trouver_traduction($id_article, $lang) {
  36.         return objet_trouver_traduction($id_article, 'article', $lang);
  37. }
  38.  
  39. // Si le plugin Traduction entre rubriques est activé
  40. // http://contrib.spip.net/Traduction-des-rubriques
  41. function rubrique_trouver_traduction($id_article, $lang) {
  42.         return objet_trouver_traduction($id_article, 'rubrique', $lang);
  43. }

Je l’utilise surtout pour les liens directs dans les squelettes :

  1. <a href="#URL_ARTICLE{[(#EVAL{_ID_ARTICLE_CONTACT}|article_trouver_traduction{#ENV{lang}})]}" class="button large">
  2.         Nous contacter
  3. </a>

Sass-convert memo

Petit mémo pour la commande sass-convert qui permet de convertir un fichier CSS existant en fichier .scss (ou .sass, il suffit d’adapter le paramètre —to)

Convertir tout un répertoire de fichier css

  1. sass-convert --from css --to scss --trace -R .

Convertir un fichier

  1. sass-convert --from css --to scss --trace perso.css > perso.scss