WordPress – link_before

Od verze 2.7 nabízí WordPress dva nové parametry pro funkci wp_list_pages() a to link_before a link_after. Tyto parametry umí před odkaz vložit nějaký text nebo html. Co však neumí (a nebo se mi to nepovedlo najít nebo vymyslet) je vložení entity. Takovým vhodným využitím by bylo vložení např. nezalomitelných mezer, pokud máme text v menu vycentrován, doplněn grafickými odrážkami a je nastaveno pozadí odkazu. Pak je sice text vycentrován, ale použití grafické odrážky způsobí to, že celý blok (tj. odkaz a odrážka) nepůsobí vycentrovaně. V tu chvíli jediná možnost jak zarovnat odkaz i s grafickou odrážkou na střed je právě parametr link_before a odsazení si musíme dodělat pomocí html.

Celá konstrukce bude vypadat nějak následovně:

<?php wp_list_pages('depth=1&title_li=&exclude=57&link_before=<span class="odsazeni"> </span>'); ?>

Span musí být párový, pokud ho uděláme jako <span /> tak do něj WordPress uzavře text odkazu, což je nežádoucí. A styl pro třídu .odsazeni bude následující

.odsazeni
{
display: inline-block;
width: 10px;
}

Je to opravdu provizorní řešení.

Horizontální CSS menu – „space bug“

Při tvorbě horizontálního CSS menu pomocí unordered listu jsem narazil na chybu, která vzniká kvůli použití display: inline, popř. inline-block nad list-itemem unordered listu. Ten má nastaveno display: inline kvůli tomu, aby se položky listu zobrazovaly v řádku. Jenže to je právě příčinou vzniku malé mezery mezi jednotlivými list-itemy. Řešením je nenastavovat list-itemu display: inline, ale místo toho mu dát float: left. Pak už funguje tak jak má.