Ich entwerfe eine benutzerdefinierte WordPress-Vorlage für einige Freunde und möchte ein horizontal ausgerichtetes Hauptmenü. Alles wäre in Ordnung, außer dass wp_page_menu die Listenelemente alle in einer Zeile ausgibt, was (nach viel Kopfkratzen) die Formatierung zu brechen scheint und alle Leerzeichen zwischen den Elementen entfernt. Zum Beispiel die folgenden Ausgänge 1, 2 und 3 beabstandet und dann 456 alle zusammen. (Getestet in Safari, Firefox und Chrome, alle auf Mac.)
<style>
.menu {
text-align: justify;
width: 700px;
margin: 10px;
}
.menu * {
display: inline;
}
.menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
</style>
<div class="menu">
<ul>
<li><a href="http://localhost/">1</a></li>
<li><a href="http://localhost/">2</a></li>
<li><a href="http://localhost/">3</a></li>
<li><a href="http://localhost/">4</a></li><li><a href="http://localhost/">5</a></li><li><a href="http://localhost/">6</a></li>
</ul>
<span></span>
</div>
Ich habe bereits eine benutzerdefinierte Funktion, die die Ausgabe von wp_page_menu bearbeitet, um die Spanne nach dem ul hinzuzufügen. Ich denke, das Einfachste wäre, diese Funktion zu erweitern, um auch die Zeilenumbrüche einzufügen, aber wenn jemand andere Ideen hat , oder mir sagen können, warum das passiert (besonders das!), das wäre großartig.
BEARBEITEN:
Habe es jetzt behoben, indem ich eine Funktion hinzugefügt habe, die ein Leerzeichen in den HTML-Code einfügt (Code unten, wenn es jemanden interessiert oder wenn jemand in Zukunft darauf stößt). Scheint, das war alles, was nötig war! Wäre immer noch daran interessiert zu hören, ob mir jemand sagen kann, warum dies erforderlich ist.
// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');