KATEGORIA:

02 – Własny motyw WordPress

własny motyw wordpress

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:

moj

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.

wpiss

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.

article

 

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.

szablonik

 

Zapraszam do kolejnego artykułu.

Artykuł 03 – kurs WordPress – edycja sidebar.php

KOMENTARZE

    1. 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 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *