Turbūt tikriausiai visi esate matę knygose, kai skyrius pradedamas didžiąją raide. Kad aiškiau būtų parodysiu kaip tai atrodo:
Tą patį galima padaryti ir WordPress šablone (maniškiame tai yra). Pvz:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem augue, sodales eu, ornare vitae, imperdiet a, nulla. Donec sodales, lectus sit amet porta congue, massa enim imperdiet diam, sed tempor nisl diam nec est. Vestibulum luctus porta libero. Quisque aliquet lorem vitae arcu. Integer dui dolor, sodales in, sagittis.
Na, o dabar kaip tai padaryti:
HTML
Pirmosios “didžiosios” raidės kodas gan paprastas ir aiškus, jame naudojama “span” klasė kuri naudoja keletą eilučių iš CSS šablono. Ji atrodo štai taip:
CSS
Float. LygiavimasLaikas nustatyti didžiosios raidės stilių ir dizainą. Visų pirma reikėtu nustatyti tai, kad jūsų raidė būtų vienoje pusėje ir, kad ją apgaubtu jūsų turinys. Viską sutvarkys lygiavimo funkcija “float”:
Teksto dydis. Dabar reikia nustatyti teksto dydį.
font-size: 35px; /* Teksto dydis */
line-height: 35px;
line-width: 35px;
}
Papildomos stiliaus funkcijos. Dabar reikėtu parinkti jūsų teksto stilių ir nustatyti jo spalvą.
float: left; /* Jūsų tekstą lygiuos į kairę */
font-size: 35px; /* Teksto dydis */
line-height: 35px;
line-width: 35px;
font-family: Arial, Verdana; /* Raidės stilius */
border: 1px solid #000000; /* Linija aplink raidę bus juodas ir 1px storio */
color: #000000; /* Teksto spalva bus JUODA */
font-weight: bold; /* Tekstas bus paryškintas */
}
Automatizacija
Kai jau įrašėt papildomą CSS “span” klasės šabloną laikas padaryti taip, kad Jums nereikėtu pastoviai uždėti “span” klasės rankiniu būdu.
Atsidarykite šablono functions.php failą ir įterpkite šį kodą:
function pirmoji_didzioji_raide($content){ $searchfor = '/>(<a [^>]+>)?([^<s])/'; $replacewith = '>$1<span class="pirmadidzioji">$2</span>'; $content = preg_replace($searchfor, $replacewith, $content, 1); return $content; } add_filter('the_content', 'pirmoji_didzioji_raide');
Štai nuo šiol Jūsų pirmoji teksto raidė bus didžioji.
ĮSPĖJIMAS. Jeigu virš turinio visada talpinate paveikslėlį Jums pirmąją raidę teks padaryti “didžiąją” rankiniu būdu, nes sugadinsit paveikslėlio kodą + neterpkite aukščiau pavaizduoto kodo į functions.php. :)
Tai gal mes šitą jamsim ir panaudosim ;)
semantiškai aprašytasis būdas nėra _gražus_ ir _teisingas_, nes bet koks tag’as žodžio viduryje jį nematomai suskaido. būtent todėl egzistuoja toks dalykas, kaip CSS2 selector’ius :first-letter (http://www.w3.org/TR/CSS21/selector.html#first-letter).
todėl visą šitą aprašytą negražią ir nepatogią procedūrą galima supaprastinti iki .post-entry:first-letter { /* čia norimas css’as */ }
p.s. taip, ie6 to nepalaiko. bet jau pats laikas pradėti ignoruoti tą fosiliją bent CSS2 selector’iais.
Kaip žinia IE6 vis dar naudoja 50% internautų, todėl tas būdas nėra labai naudingas. :)
taip. grubiai 50%. ir už tai, kad jie vis dar naudojasi nesaugiu ir nepatikimu IE6, juos reikia bent taip bausti.