WPROWADZENIE
W poprzednim artykule zaczęliśmy tworzyć własny szablon. Wypełniliśmy wstępnie pliki style.css, header.php i footer.php. Teraz czas na plik index.php czyli szablon strony głównej. Od teraz będziemy mogli śledzić postępy na domenie. Do dzieła!
STRONA GŁÓWNA
Przygotowaliśmy nagłówek i stopkę, sidebar przygotujemy później – te trzy elementy umieścimy na naszej stronie głównej. Skorzystamy z poniższego kodu.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Strona powinna wyglądać następująco:
WSTAWIANIE WPISÓW
Czas na najważniejszy element strony głównej – jest nim pętla wyświetlająca wpisy. Umieścimy ją przed get_footer()
w znaczniku div
z dowolnym ID – umożliwi to później ostylowanie pętli w css.
<div id="posts">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2> Nazwa wpisu/artykulu </h2>
<p> Tekst wlasciwy </p>
<?php endwhile; ?>
<div> Nawigacja </div>
<?php else : ?>
<h2> Nic nie znaleziono </h2>
<?php endif; ?>
</div>
</div> // tutaj zamykamy page-content
<?php get_footer(); ?>
A teraz ten sam kod z wyjaśnieniem.
<?php if (have_posts()) : ?> // jesli na stronie sa jakiekolwiek wpisy
<?php while (have_posts()) : the_post(); ?> // to kazdy jeden wpis
<h2> Nazwa wpisu/artykulu </h2> //wyswietl w ten sposob
<p> Tekst wlasciwy </p>
<?php endwhile; ?> // koniec petli
<div> Nawigacja </div> // pod wpisami wyswietlamy nawigacje
<?php else : ?> // w przeciwnym wypadku (czyli gdy nie ma wpisow)
<h2> Nic nie znaleziono </h2> // wyswietl to
<?php endif; ?> // koniec naszego jesli
Gdybyśmy zostawili ten kod w takiej postaci to niezależnie od tego jakie tytuły artykułów byśmy wpisywali, na stronie głównej mielibyśmy listę wpisów z tą samą nazwą „Nazwa wpisu/artykulu” i z tą samą treścią „Tekst właściwy”. Liczba artykułów by się zgadzała natomiast z treścią… trochę gorzej. Czas na kolejne funkcje PHP, które umożliwią pobieranie odpowiedniej treści z każdego wpisu.
<?php the_title(); ?>
Tę funkcję umieścimy w tagu <h2>
.
Pod spodem możemy wyświetlić cały wpis lub wstęp do wpisu.
<?php the_content(); ?> // caly wpis
<?php the_excerpt(); ?> // tylko wstep
A niżej możemy wstawić co tylko chcemy, w jakichkolwiek chcemy tagach, np.:
Efekt wstawienia „gołych” funkcji znajduje się poniżej.
OSTYLOWANIE STRONY GŁÓWNEJ
Czas nadać naszej stronie głównej charakteru. Zrobimy to za pomocą stylów css i tagów HTML.
Stworzyłam przykładowy artykuł na bazie funkcji, które wypisałam powyżej, ustawiłam je w kolejności, która mnie interesuje i nadałam odpowiednie klasy.
...
<?php while (have_posts()) : the_post(); ?>
<article>
<p class="category"><?php the_category(); ?></p>
<h2> <?php the_title(); ?> </h2>
<div class="info">
<span><?php the_author(); ?></span>|
<span><?php the_time('d-m-Y'); ?></span>
</div>
<p> <?php the_excerpt(); ?> </p>
<a class="more" href="<?php the_permalink(); ?>"> Czytaj wiecej </a>
<p class="comments"><?php comments_popup_link ('Brak komentarzy', 'Jeden komentarz', 'Komentarzy: %'); ?></p>
</article>
<?php endwhile; ?>
...
Napisałam kod css.
body{
background: #ededed;
}
article{
background-color: #fff;
padding: 25px;
margin-bottom: 30px;
position: relative;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
text-align: center;
}
.category a{
text-decoration: none;
color: black;
text-transform: uppercase;
font-size: 14px;
color: gray;
}
.category li{
list-style-type: none;
text-align: center;
}
.category ul{
padding: 0px;
}
article h2{
text-transform: uppercase;
font-size: 30px;
margin: 0px;
padding-bottom: 15px;
color: #2091c1;
}
.info span{
text-transform: uppercase;
font-size: 12px;
padding: 0px 5px;
color: gray;
}
.more{
text-decoration: none;
color: #2091c1;
}
.comments{
border-top: 1px solid lightgray;
padding-top: 20px;
}
.comments a{
color: gray;
text-decoration: none;
}
article p{
line-height: 140%;
}
Efektem tych działań jest artykuł widoczny poniżej.
NAWIGACJA
Na stronie głównej warto jeszcze dodać linki nawigacyjne do kolejnych stron z wpisami.
// Przykladowa nawigacja
<div class="navigation bottom">
<?php
next_posts_link( '<< Starsze artykuly', $the_query->max_num_pages );
previous_posts_link( 'Nowsze artykuly >>' );
?>
</div>
I ostylować je według uznania.
PODSUMOWANIE
Po dodaniu stylów do nagłówka i stopki, strona zaczyna wyglądać przyzwoicie. W następnym artykule do strony głównej dodamy sidebar. Następnie zaczniemy zajmować się pozostałymi podstronami.
Zapraszam do kolejnego artykułu.
Niestety wyświetla się „Brak arkusza stylów.” 🙁
W takim razie nie podałaś odpowiedniej ścieżki. Napisz proszę jak wygląda twój header.php i gdzie znajduje się plik style.css. Coś poradzimy 🙂