Po weekendzie postanowiłem napisać kolejną część naszego kursu dotyczącego tworzenia naszego szablonu dzięki wordpress’owi.
W tym poście skupimy się na wyglądzie naszej strony głównej. W prosty sposób pokażę wam jak ostylować w podstawowy sposób nasz plik index.php tak aby wszystko było bardziej przejrzyste. Postaram się wam przybliżyć podstawy CSS’a oraz jak znaczniki div nam pomogą.
Zanim to wszystko jednak zrobimy musimy dodać kilka dodatkowych nt do strony głównej naszego szablonu. Przypomnijmy sobie jak wyglądał nasz kod do tej pory.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content() ?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Aby to wszystko miało ręce i nogi musimy dodać opcję wchodzenia w naszego pojedyńczego posta. Zrobimy to dodając link do tytułu każdego posta. Stanie się tak gdy zastosujemy funkcję the_permalink() która w elemencie funkcji wypisującej posty doda nam jego link. Jak to zrobić?
Wyszukajmy funkcję the_title(). Widzimy że znajduje się ona pomiędzy znacznikami h3. Dodajmy więc do tego jeszcze znacznik “a” odpowiadający za deklaracje linków.
Nasza linijka wygląda teraz następująco:
Kolejnym krokiem będzie dodatnie odpowiedniego adresu docelowego, co umożliwi nam funkcja wcześniejsza.
Teraz po odświeżeniu naszej stronie w przeglądarce powinien nam tytuł naszego posta zamienić się w hiperłącze do konkretnego pojedyńczego posta.
Innymi rzeczami jakie na pewno chcielibyśmy wyświetlić przy każdym poście to data napisania oraz kategoria.
Znacznik ten pozwoli nam wyświetlić datę posta. Zmienne tej funkcji można dowolnie zmieniać tak aby wyświetlać w różnej kolejności dni, miesiące, rok. Ta deklaracja pokażę nam datę w formie ”czerwiec 8, 2009″. Po więcej opcji tej funkcji polecam wejść w dokumentację wordpress’a.
Ta linijka pokaże nam w jakiej kategorii dodaliśmy naszego posta.
A ta pokaże nam jedną z 3 opcji czyli, jeśli post nie ma komentarzy “no comments” , jeżeli ma 1 komentarz “1 comment” i wreszcie jeżeli ma więcej niż 1 komentarz “X comments”, gdzie X to ilość komentarzy.
Teraz jak to wszystko poumieszczać żeby to wyglądało i można to było ostylować.
Dodamy parę div’ów które nam ułatwią stylowanie naszego kodu.
Dodamy <div id=’wrapper></div> - ten div będzie odpowiadał nam za wyśrodkowanie całej zawartości tak aby przy większych rozdzielczościach jakoś nasza strona wyglądała.
<div id=’post_container’> - który będzie nam przetrzymywał wszystkie posty czyli naszą pętlę wyświetlającą posty.
<div class=’post_box’></div>
<div class=’post_date’></div>
<div class=’post_categories’></div>
A także dodamy deklarację class=’post_title’ do linku naszego posta.
Kod będzie wyglądał tak:
<div id=’wrapper’>
<div id=’post_container’>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=’post_box’>
<a href=’<?php the_permalink() ?>’ class=’post_title’ ><h3><?php the_title(); ?></h3></a>
<div class=’post_date’><?php the_time(’F j, Y’) ?></div>
<div class=’post_categories’><?php the_category(); ?></div>
<?php the_content() ?>
<div class=’meta-data’>
<?php comments_popup_link(”No comments “, ”1 Comment “, ”% Comments “); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>
Otwieramy nasz plik style.css.
Pierwsze co powinniśmy dodać to deklarację body. Wszystkie elementy będziemy wpisywać w następującej formie:
opcja: wartosc;
}
W zależności co deklarujemy dochodzą jeszcze dodatkowe opcje przy wpisywaniu elementu. Jeżeli deklarujemy diva z elementem ID to jakis_element będziemy wywoływać div#id {} , jeżeli w elemencie występuje class=”cos” to będzie to np div.cos {}, inną natomiast wersją jest deklaracja dla wszystkich np. div’ów na naszej stronie nie ważne gdzie w kodzie się znajdują będzie po prostu div {}.
Kolejną opcją jest wywołanie np. wszystkich elementów p z danego diva o id=”jakis”. Zadeklarujemy to następująco: div#jakis p {}. I tyle! Prawda że proste?
Wypiszmy więc jakie elementy będziemy potrzebowali w naszym pliku css.
div#post_container {}
div.post_box {}
div.post_date {}
div.post_categories {}
div.meta-data {}
Chcemy aby nasza zawartość była wyświetlana na środku. Zgodnie z jednym ze standardów wyświetlania treści nadamy jej szerokość 960px, kolor tła np. czarny. Dodamy też inne deklaracje dla poszczególnych elementów.
div#post_container { background-color: #ffffff; width: 940px; margin: 0 auto; padding: 10px; }
div.post_box { background-color: #33aaff; width: 910px; padding: 10px; }
a.post_title { text-decoration: none; color: #000000; }
Co ten kod oznacza? Div z ID wrapper będzie wyśrodkowywany i będzie szeroki na 960px. Div z id post_container będzie szeroki na 940px, wyśrodkowany w elemencie div#wrapper oraz jego margines wewnętrzny będzie 10px. Div o class post_box będzie szeroki na 910px, o marginesie wewnętrznym 10px oraz jakimś losowym kolorze tła który wpisałem. Link tytułu który ma class post_title będzie wyświetlany bez podkreślenia typowego dla linków i kolor jego będzie zawsze czarny, a nie niebieski.
Po więcej opcji css polecam przeczytać kurs css’a w języku angielskim na www.w3schools.com
W kolejnej części kursu dokończymy nasze stylowanie oraz zajmiemy się kolejnymi elementami i plikami potrzebnymi dla naszego bloga.
Ten post jest 3 częścią kursu tworzenia szablonów wordpressa.
Czy przewidujesz dalsze części kursu?