jQuery: creare date sticky in Wordpress

jQuery ci da il controllo totale sul DOM. Possiamo creare, spostare, sostituire strutture a nostro piacimento. Un esempio pratico sono le date sticky che ho appena creato nella home page con il tema TwentyEleven. Questo tema di Wordpress inserisce la data in un elemento time HTML5 posto nell'elemento entry-meta. Questa struttura viene posta nella home page dopo il titolo di ciascun post. Vediamo la mia soluzione in puro stile jQuery.

Vogliamo creare una struttura DOM di questo tipo solo nella home page:


<div class="date">
	<span class="day-month">gg/mm</span>
	<span class="year">aaaa</span>
</div>

Vogliamo sostituire l'elemento entry-meta con questa struttura e farla apparire sempre alla sinistra del titolo di ciascun post. Definiamo quindi delle regole di stile di base:


div.date {
  width: 80px;
  position: absolute;
  padding: 0;
  color: #fff;
  font-size: 1.5em;
  text-align: center;
}

div.date span.day-month {
  display: block;
  background: #d84a38;
  padding: 5px 0 0 0;
  border-radius: 6px 6px 0 0;
}

div.date span.year {
  display: block;
  padding: 5px 0;
  background: #1b8be0;
  border-radius: 0 0 6px 6px;
}

Con jQuery creeremo la struttura, prenderemo le coordinate del titolo di ciascun post e posizioneremo tale struttura usando queste coordinate. Sostituiremo inoltre la vecchia struttura entry-meta con la nuova:


(function($) {

    var GabrieleRomanato = new function() {
    
        // ... altro codice
        
        
        this.datesHandler = function() {
    
          if($('body').hasClass('home')) {
    
              var $entryMetas = $('div.entry-meta');
        
                $entryMetas.each(function() {
        
                  var $meta = $(this);
                  var time = $('time', $meta);
                  var heading = $meta.prev();
          
                  var top = heading.position().top;
                  var left = heading.position().left;
                  var dateContent = time.text();
                  var dateParts = dateContent.split('/');
          
                  var day = dateParts[0];
                  var month = dateParts[1];
                  var year = dateParts[2];
          
                  var date = $('<div class="date"/>').
                      html('<span class="day-month">' +
                      day + '/' + month + '</span>' +
                      '<span class="year">' + year +
                      '</span>');
                  date.css({
                      top: top,
                      left: left - 100
                  });
          
                  $meta.replaceWith(date);
                       
          
          
        
                });
    
          }
        };

    
    
    }();
)(jQuery);

Potete visionare l'effetto finale nella home page.

Torna su