HTML

Des Titres Custom dans WordPress

J’en ai eu besoin hier pour faire le π dans mon titre parce que celui-ci n’était pas lisible avec la typo de base.

En fait c’est assez simple car le champ titre accepte gentiment les balises html.

Du coup, j’ai fait un retour au codage d’antan de type HTML4 Strict (avant les CSS…):

<span style="text-transform:none;font-size:25px; color: #999"> Des </span>
<span style="font-size:35px; color: #24890d"> Titres</span>
<span style="font-size:35px;font-weight:bold; color: #24890d"> Custom</span>
<span style="text-transform:none;color: #999; font-style:italic"> dans </span>
<span style="font-family: 'Times New Roman', Times, serif; font-size:35px; color: #f77600">Wordpress</span>

 

Tableaux responsives

= tableaux qui s'adaptent à la taille du support. Ce soir, le support sera le smartphone. Par défaut, mon thème WordPress, comme beaucoup d'autre, ne traite pas la responsivité des tableaux:

Defaut: pas responsive

Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6
Ligne 1 c2l1 texte 1 c3l1 texte 2 c4l1 texte 3 c5l1 texte 4 c6l1 texte 5
Ligne 2 c2l2 texte 1 c3l2 texte 2 c4l2 texte 3 c5l2 texte 4 c6l2 texte 5
Ligne 3 c2l3 texte 1 c3l3 texte 2 c4l3 texte 3 c5l3 texte 4 c6l3 texte 5
Ligne 4 c2l4 texte 1 c3l4 texte 2 c4l4 texte 3 c5l4 texte 4 c5l4 texte 5
Ce qui donne sur un smartphone, un tableau "mangé" sur la droite (il manque un bout de la colonne 5 + la colonne 6)*: Il existe plusieurs manière d'adapter les tableaux aux smartphone; en voici 2 qui ont retenu mon attention:

1/ La plus simple: ajouter class="responsive" au tableau

@media only screen and (max-width: 840px) {
table.responsive {
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
}
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6
Ligne 1 c2l1 texte 1 c3l1 texte 2 c4l1 texte 3 c5l1 texte 4 c6l1 texte 5
Ligne 2 c2l2 texte 1 c3l2 texte 2 c4l2 texte 3 c5l2 texte 4 c6l2 texte 5
Ligne 3 c2l3 texte 1 c3l3 texte 2 c4l3 texte 3 c5l3 texte 4 c6l3 texte 5
Ligne 4 c2l4 texte 1 c3l4 texte 2 c4l4 texte 3 c5l4 texte 4 c5l4 texte 5
Le résultat donne un tableau affublé d'une scrollbar horizontale*:

2/ Plus compliqué: ajouter class="responsive-table-line" au tableau + data-title="nomdelacolonne" aux <td>

	
	@media (max-width: 500px) {
	
	.responsive-table-line td:before { content: attr(data-title); }
	
	.responsive-table-line table, 
	.responsive-table-line thead, 
	.responsive-table-line tbody, 
	.responsive-table-line th, 
	.responsive-table-line td, 
	.responsive-table-line tr { 
	display: block; 
	}
	 
	.responsive-table-line thead tr { 
	display:none;
	}
	
	.responsive-table-line td { 
	position: relative;
	border: 0px solid transparent;
	padding-left: 50% !important; 
	white-space: normal;
	text-align:right; 
	}
	 
	.responsive-table-line td:before { 
	position: absolute;
	top: 0px;
	left: 0px;
	width: 45%; 
	padding-right: 15px; 
	height:100%;
	white-space: nowrap;
	text-overflow: ellipsis !important;
	overflow:hidden !important;
	text-align:left;
	background-color:#f8f8f8;
	padding:2px;
	}
	
	}
+ dans chaque ligne du tableau:
<tr>
<td data-title="Colonne 1">Ligne 1</td>
<td data-title="Colonne 2">c2l1 texte 1</td>
<td data-title="Colonne 3">c3l1 texte 2</td>
<td data-title="Colonne 4">c4l1 texte 3</td>
<td data-title="Colonne 5">c5l1 texte 3</td>
<td data-title="Colonne 6">c6l1 texte 3</td>
</tr>
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6
Ligne 1 c2l1 texte 1 c3l1 texte 2 c4l1 texte 3 c5l1 texte 3 c6l1 texte 3
Ligne 2 c2l2 texte 1 c3l2 texte 2 c4l2 texte 3 c5l2 texte 3 c6l2 texte 3
Ligne 3 c2l3 texte 1 c3l3 texte 2 c4l3 texte 3 c5l3 texte 3 c6l3 texte 3
Ligne 4 c2l4 texte 1 c3l4 texte 2 c4l4 texte 3 c5l4 texte 3 c6l4 texte 3
Le résultat est étonnant *: *Tous les résultats peuvent être vus dynamiquement à partir d'un smartphone ou en réduisant à la taille d'un smartphone la fenêtre du navigateur si l'écran est grand.