WordPress: gestire gli elementi hr

I divisori (linee di divisione o regole orizzontali) vengono creati in HTML tramite l'elemento hr. Tuttavia questo elemento è difficile da gestire con i CSS per via degli stili predefiniti dei browser. Vediamo come crearli in WordPress.

Definiamo il seguente shortcode:

function my_hr( $atts ) {
	extract( shortcode_atts( array(
		'size' => 'full'
	), $atts ) );
	
	$html = '<div class="hr ' . $size .'"><hr/></div>';
	
	return $html;
}

add_shortcode( 'my-hr', 'my_hr' );

Gli stili CSS saranno i seguenti:

.hr {
	height: 1px;
	background: #ccc;
	margin: 0.3em auto;
}

.hr hr {
	display: none; /* evitiamo incompatibilità */
}

.hr.full {
	width: 100%;
}
.hr.medium {
	width: 50%;
}
.hr.small {
	width: 35%;
}

Possiamo usare lo shortcode nel seguente modo:

[my-hr size="medium"]

Ovviamente potete personalizzare il CSS e la funzione dello shortcode per aggiungere più stili.