Conflitto WordPress – Bootstrap

Devo dire che questa cosa mi stava facendo impazzire. Già partire dalla nascita di questo sito, quando ancora era tutto in locale, c’era qualcosa che non andava con i menù a tendina delle “impostazioni schermata” e dell'”aiuto“.

Tutta colpa di una classe CSS

Subito ho pensato fosse un problema del mio server locale… e allora prova con MAMP poi con Local e niente: i menù a tendina non si muovono. Come sempre in questi casi Google e in particolare Stack Overflow vengono in soccorso. Qualche ricerca dopo scopro che è tutta colpa del CSS! Avrei pensato a tutto ma non all’infido CSS che di soppiatto mi rovina tutto.

Il problema

I due menù a tendina, che hanno come id contextual-help-wrap e screen-options-wrap, hanno una classe, assegnata di default da WordPress, chiamata hidden. Bootstrap con la sua classe hidden sovrascrive la precedente usando:

!important

La soluzione

Una volta capito il problema la soluzione è stata molto semplice e veloce

jQuery(document).ready(function ($) {
	$("#contextual-help-link").click(function () {
		if ($(this).hasClass("click-mwd")) {
			$("#contextual-help-wrap").removeAttr("style");
			$("#screen-meta").removeAttr("style");
			$(this).removeClass("click-mwd");
		} else {
			$("#screen-meta").css("cssText", "display: block !important;");
			$("#contextual-help-wrap").css("cssText", "display: block !important;");
			$("#contextual-help-link").addClass("click-mwd");
		}
	});

	$("#show-settings-link").click(function () {
		if ($(this).hasClass("click-mwd")) {
			$("#screen-options-wrap").removeAttr("style");
			$("#screen-meta").removeAttr("style");
			$(this).removeClass("click-mwd");
		} else {
			$("#screen-meta").css("cssText", "display: block !important;");
			$("#screen-options-wrap").css("cssText", "display: block !important;");
			$("#show-settings-link").addClass("click-mwd");
		}
	});
});

Con questa funzione sono riuscito a farli aprire al click e nel caso fossero già stati aperti a farli richiudere.

PS Anche l’elemento #screen-meta è stato modificato allo stesso modo per permettere il funzionamento dei due menu