Formattare i titoli dei post di WordPress: due soluzioni

Separare i titoli dei post di WordPress in parole è un compito che si può ottenere sia utilizzando PHP che jQuery. Ovviamente il nostro scopo è quello di assegnare stili differenti alle varie parole.

Utilizzare PHP

Nel file functions.php possiamo definire la seguente funzione di utility:

function split_post_title($title) {
	$parts = explode(' ', $title);
	$html = '';
	$count = 0;
	
	foreach($parts as $part) {
		$count++;
		$html .= '<span class="word-' . $count . '">' . $part . '</span> ';
	}
	
	return $html;
}

Utilizzandolo nel Loop del tema in questo modo:

<?php
$splitted_title = split_post_title(get_the_title());
?>
<h1><?php echo $splitted_title; ?></h1>

Possiamo ottenere la seguente struttura HTML:

<h1><span class="word-1">Lorem</span> <span class="word-2">ipsum</span></h1>

Non ci resta che assegnare gli stili CSS utilizzando le classi create.

Utilizzare jQuery

jQuery ci fornisce un metodo molto più veloce e performante per ottenere il nostro scopo. Possiamo definire il seguente plugin:

(function($) {
    $.fn.splitTitle = function(options) {
        options = $.extend({
            cssClass: 'firstpart'
        }, options);
        return this.each(function() {
            var str = $(this).text();
            if (str.indexOf(' ') > 0) {
                var space = ' ';
            } else {
                var space = '';
            }
            var strArray = str.split(space),
                fullLength = strArray.length,
                halfLength = Math.ceil(fullLength / 2),
                restLength = fullLength - halfLength,
                newstr = '<span class="' + options.cssClass + '">';
            for (var i = 0; i < halfLength; i++) {
                newstr += strArray[i] + space;
            }
            newstr += '</span>' + space;
            for (var i = halfLength; i < fullLength; i++) {
                newstr += strArray[i] + space;
            }
            $(this).html(newstr);
        });
    };
})(jQuery);

Con jQuery possiamo anche separare il testo all'interno dei permalink contenuti nei titoli, il che si dimostra molto utile:

$('a', 'h2').splitTitle();