Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?

przez: Paweł Duda → dodano: 2019-01-25 → 4

Witaj na szkoleniu wideo pod tytułem: Tworzenie szablonów WordPress w RWD pod SEO.

Poznaj zaawansowane metody tworzenia szablonów WordPress, których nie znajdziesz w większości serwisów oferujących sprzedaż płatnych szablonów.

Zobacz, jak zbudować w pełni profesjonalny szablon WordPress:

wykonany w technologii Responsive Web Design
przyjazny dla wyszukiwarek od strony danych strukturalnych kodu

[jwplayer mediaid=”1102″]

Kupując szablony WordPress z innych serwisów w głównej mierze płacisz za funkcjonalność szablonu i responsywność. Dobre i to, zważywszy na fakt, że od 21 kwietnia 2015 wdrażany jest nowy algorytm dla urządzeń mobilnych. Oznacza to promocję serwisu, który poprawnie jest wyświetlany na technologiach mobilnych oraz nie zawiera elementów technologii Flash.

Istnieje jednak wiele detalów w szablonie, które w wyjątkowy sposób są traktowane przez wyszukiwarki. Szczegóły, które poznasz w tym kursie są rekomendowane przez Google, a co więcej.. są bardzo istotne z punktu widzenia SEO i mają wpływ na pozycje Twojego bloga w wynikach wyszukiwania.

W efekcie otrzymasz gotowy szablon na start dla Twojego biznesu internetowego, który funkcjonalnie i strukturalnie pozwoli Ci zrobić krok do przodu w stosunku do Twojej konkurencji.

Szablon do WordPressa w RWD pod SEO, zrobisz gdy:

Zbudujesz szablon strony w HTML5 i CSS3
Poznasz metody PHP i WordPress – wystarczy zaledwie kilka metod do zbudowania własnego motywu
Masz wiedzę na temat hierarchii plików w technologii WordPress
Posiadasz niezbędne kwalifikacje z zakresu SEO
Odkryjesz niezbędne narzędzia do zbudowania i testowania szablonu

Zaczynamy!

[jwplayer mediaid=”1059″]

Stwórz szablon w HTML5 i CSS3

Zanim rozpoczniesz kodowanie szablonu rozpocznij do zainstalowania darmowego i profesjonalnego programu – Aptana Studio 3.

[jwplayer mediaid=”1061″]

Po zainstalowaniu środowiska Atpana Studio 3 – rozpocznij kodowanie szablonu w HTML5 i CSS3.

Lekcja 1 – tworzenie nagłówka (header)

[jwplayer mediaid=”1064″]

Lekcję pierwszą możesz pobrać tutaj.

Szablon został nazwany: pracabezszefa i zawiera strukturę plików jak na grafice poniżej:

Katalog images zawiera zbiór wszystkich grafik współtworzących szablon WordPress:

logo-230px-64px.png – logo strony o wymiarach: 230px szerokości i 64px wysokości
menu-responsive.png – grafika do uruchomienia menu głównego strony pod urządzeniami mobilnymi
thumb.png – ikona wpisu o wymiarach 625px szerokości i 320px wysokości
facebook.jpg – grafika do przekierowania na profil Facebook
youtube.jpg – grafika do przekierowania na adres kanału YouTube
google-plus.jpg – grafika do przekierowania na adres profilu Google+
twitter.jpg – grafika do przekierowania na profil Twitter
rss.jpg – grafika subskrypcji przez kanał RSS
bulets.png – grafika będąca dodatkiem wizualnym do wypunktowań kategorii

Katalog js w szablonie jest niezbędny do uruchomienia menu responsywnego i składa się z dwóch plików:

jquery-1.11.3.min.js – najnowsza biblioteka jQuery z maja 2015 roku, tutaj pobierzesz najnowszą wersję jQuery.
index.js – autorski plik jQuery wywołujący menu pod urządzeniami mobilnymi (siedem linijek kodu).

Zawartość pliku index.js:

[php]
jQuery(document).ready(function()
{
jQuery("#menu-responsive").click(function()
{
jQuery("header#header .web nav").fadeToggle(400);
});
});
[/php]

Plik index.js działa jako wyzwalacz menu responsywnego i w skrócie działa następująco:

po pierwszym kliknięciu w ikonę menu responsywnego (#menu-responsive) – pokaż główne menu.
po drugim kliknięciu w ikonę menu responsywnego – ukryj główne menu.

Tak właśnie działa metoda fadeToggle() w jQuery.

Lekcja 2 – główna treść strony

[jwplayer mediaid=”1067″]

Lekcję drugą możesz pobrać tutaj.

Lekcja 3 – stopka (footer)

[jwplayer mediaid=”1069″]

Lekcję trzecią możesz pobrać tutaj.

Lekcja 4 – tworzenie wersji mobilnej szablonu

[jwplayer mediaid=”1073″]

Lekcję czwartą możesz pobrać tutaj.

Plik index.html – pełna struktura HTML5 strony głównej szablonu:

[html]
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Fizyka dla każdego – Blog LubieFizyke.pl</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
<!–TAG RESPONSIVE WINDOW–>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
for(var e,l=’footer header nav article section aside figure’.split(’ ’);e=l.pop();document.createElement(e));
</script>
</head>

<!–MENU RESPONSIVE–>
<div id="menu-responsive">
<img src="images/menu-responsive.png" alt="Menu" />
</div>

<!–LOGO–>
<div id="logo" itemtype="http://schema.org/Organization" itemscope="">
<a itemprop="url" title="Strona główna" href="/">
<img itemprop="logo" src="images/logo-230px-64px.png" alt="Logo LubieFizyke.pl" />
</a>
</div>

<!–MENU POZIOME–>
<nav>
<ul>
<li>
<a href="#">Start</a>
</li>
<li>
<a href="#">O nas</a>
</li>
<li>
<a href="#">Kursy</a>
</li>
<li>
<a href="#">Zapytaj</a>
</li>
</ul>
</nav>
<div class="clearfix"></div>
</div>
</header>

<div class="web">
<!–LEWY PANEL–>
<section class="home">
<!–WPISY–>
<article>
<h1>
<a href="#" title="#">
Link do 1 artykułu
</a>
</h1>
<a href="#" title="#">
<img src="images/thumb.png" alt="" />
</a>
<p>
Zajawka treści 1 artykułu
</p>
<a href="#" class="more-link">Czytaj dalej</a>
</article>

<!–WPISY–>
<article>
<h1>
<a href="#" title="#">
Link do 2 artykułu
</a>
</h1>
<a href="#" title="#">
<img src="images/thumb.png" alt="" />
</a>
<p>
Zajawka treści 2 artykułu
</p>
<a href="#" class="more-link">Czytaj dalej</a>
</article>
</section>

<!–SIDEBAR – PRAWY PANEL–>
<aside>
<h4>O mnie</h4>
<p>
<img class="author" src="images/autor-80px-80px.jpg" alt="Marek Duda">
<strong>Marek Duda</strong> – pozycjoner stron www i twórca blogów WordPress.
Zobacz, jak zarabiać w internecie przy pomocy najlepszych narzedzi
marketingowych.
</p>

<div class="widget">
<h4>Kategorie</h4>
<ul>
<li>
<a href="#">Kategoria 1</a>
</li>
<li>
<a href="#">Kategoria 2</a>
</li>
<li>
<a href="#">Kategoria 3</a>
<ul>
<li>
<a href="#">Podkategoria 3.1</a>
</li>
<li>
<a href="#">Podkategoria 3.2</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
<div class="clearfix"></div>
</div>

<!–FOOTER–>
<footer id="footer">
<p>
© Copyright 2015 || <a href="https://pracabezszefa.pl" rel="nofollow">PracaBezSzefa</a>
</p>
</footer>
</body>
</html>
[/html]

Plik style.css zawiera kaskadowe arkusze stylów odpowiadające za wygląd szablonu w wyszukiwarce.

[css]
*
{
margin: 0;
padding: 0;
}

body
{
font-family: 'Open Sans’, sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 29px;
color: #23232A;
background: #F7F5F5;
}

/*GLOBALNE*/
header, footer, nav, section, article, aside, hgroup, img, label
{
display: block;
}

fieldset, input
{
border: none;
outline: none;
}

input[type="text"],
input[type="email"],
textarea
{
border: 1px solid #d1d1d1;
padding: 10px 5px;
border-radius: 7px;
width: 65%;
}

input[type="submit"]
{
width: 200px;
background: #37bc82;
border-radius: 8px;
font-family: 'Open Sans’, sans-serif;
font-weight: 300;
font-size: 16px;
cursor: pointer;
color: #fff;
padding: 10px 0;
}

p, h1, h2, h3, h4, article, ul li, ol li, form, .widget
{
margin-bottom: 20px;
}

a
{
color: #2c5c88;
text-decoration: none;
font-weight: 400;
}

a:hover
{
color: #F8AA13;
text-decoration: underline;
}

ul
{
list-style: none;
margin: 0;
padding: 0;
}

.wp-smiley
{
display: inline !important;
margin: 0 !important;
}

.clearfix
{
clear: both;
}

.web
{
width: 960px;
margin: 0 auto;
}

/*HEADER*/
header#header
{
background: #31323d;
padding: 10px 0;
}

header#header .web #menu-responsive
{
display: none;
}

header#header .web div#logo
{
float: left;
}

header#header .web nav
{
float: right;
}

header#header .web nav ul
{

}

header#header .web nav ul li
{
float: left;
margin: 0 3px 0 0;
border-bottom: 3px solid #9D9DA0;
}

header#header .web nav ul li:hover,
header#header .web nav ul li a:hover
{
color: #FFF;
border-color: #FFF;
background: #F8AA13;
transition: background .27s ease-in-out;
-moz-transition: background .27s ease-in-out;
-webkit-transition: background .27s ease-in-out;
}

header#header .web nav ul li a
{
color: #D1D1D1;
text-decoration: none;
text-transform: uppercase;
padding: 16px 15px;
font-size: 15px;
font-weight: 700;
display: block;
}

/*LEWY PANEL*/
.web section.home
{
width: 625px;
float: left;
margin-top: 20px;
}

.web section.home article
{
border-bottom: 1px dashed #9D9DA0;
}

.web section.home article:last-child
{
border: 0;
}

.web section.home article h1
{
font-size: 30px;
line-height: 34px;
font-weight: 700;
}

.web section.home article h2,
.web section.home article h3,
.web section.home article h4,
.web section.home article h5
{
font-size: 18px;
}

.web section.home article img
{
margin: 0 0 20px 0;
}

.web section.home article ul
{
padding-left: 35px;
list-style: disc;
}

.web section.home article ol
{
padding-left: 35px;
}

a.more-link
{
display: block;
width: 100px;
background: #2c5c88;
color: #FFF;
padding: 7px 15px;
margin: 20px 0;
border-radius: 5px;
text-align: center;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

a.more-link:hover
{
background: #F8AA13;
color: #FFF;
text-decoration: none;
}

/*SIDEBAR – PRAWY PANEL*/
.web aside
{
width: 270px;
float: right;
margin-top: 20px;
padding: 0 20px;
}

.web aside h4
{
padding: 10px 20px;
margin: 0 -20px 20px -20px;
background: #9D9DA0;
color: #FFF;
}

.web aside p
{
font-size: 14px;
line-height: 22px;
}

.web aside img.author
{
float: left;
border: 2px solid #EDE7E7;
margin-right: 15px;
}

.web aside ul.social
{

}

.web aside ul.social li
{
float: left;
padding-right: 7px;
}

/*ASIDE – SEARCHFORM*/
.web aside form
{

}

.web aside form fieldset
{

}

.web aside form fieldset input[name=s]
{
width: 182px;
padding-left: 5px;
border: 1px solid seagreen;
font-family: 'Open Sans’, sans-serif;
font-size: 14px;
border-radius: 7px 0 0 7px;
color: #31323d;
}

.web aside form fieldset input[type=submit]
{
width: 70px;
font-weight: 700;
font-size: 14px;
font-family: 'Open Sans’, sans-serif;
background: seagreen;
border: 1px solid seagreen;
color: #FFF;
border-radius: 0 7px 7px 0;
cursor: pointer;
opacity: .9;
}

.web aside form fieldset input[type=submit]:hover
{
opacity: 1;
}

/*SIDEBAR – WIDGET – KATEGORIE*/
.web aside .widget
{

}

.web aside .widget ul
{

}

.web aside .widget ul li
{
margin-bottom: 0px;
}

.web aside .widget ul li:last-child
{
margin-bottom: 20px;
}

.web aside .widget ul li:hover a
{
color: #F8AA13;
}

.web aside .widget ul li ul li
{
margin-left: 20px;
margin-bottom: 0 !important;
}

.web aside .widget ul li a
{
padding-left: 25px !important;
background: url(images/bulets.png) 0 5px no-repeat;
margin-bottom: 5px;
color: #2c5c88;
}

.web aside .widget ul li a:hover
{
background-position: 0 -70px;
}

/*FOOTER*/
footer#footer
{
background: #31323d;
color: #FFF;
text-align: center;
padding: 20px 0;
min-width: 960px;
}

footer#footer p
{
margin: 0;
}

footer#footer a
{
color: #FFF;
font-weight: 300;
}

/*RESPONSIVE*/
@media all and (max-width: 959px)
{
.web
{
width: 85%;
}

header#header
{
padding: 10px 0 0;
background: #FFF;
}

header#header .web div#logo
{
display: none;
}

header#header .web #menu-responsive
{
display: block;
background: #FFF;
}

header#header .web #menu-responsive img
{
margin: 0 auto;
padding: 0 0 10px 0;
cursor: pointer;
}

header#header .web nav
{
float: none;
border-top: 2px solid #31323d;
display: none;
margin-bottom: 10px;
}

header#header .web nav ul
{

}

header#header .web nav ul li
{
float: none;
text-align: center;
border-bottom: 2px solid #31323d;
background: #1f476c;
border-left: 2px solid #31323d;
border-right: 2px solid #31323d;
margin: 0;
}

header#header .web nav ul li.active,
header#header .web nav ul li.active a,
header#header .web nav ul li:hover,
header#header .web nav ul li a:hover
{
border-color: #31323d;
}

.web section.home
{
float: none;
width: 100%;
}

.web section.home article img
{
max-width: 100%;
height: auto;
}

.web aside
{
padding: 0;
float: none;
width: 100%;
}

.web aside h4
{
margin: 0 0 20px 0;
}

.web aside p
{
font-size: 18px;
line-height: 28px;
}

.web aside .widget ul li:last-child
{
margin-bottom: 20px;
}

.web aside form fieldset input[name=s]
{
width: 40%;
}

footer#footer
{
min-width: 100%;
}
}

/*RESPONSIVE: 481px – 959px*/
@media all and (min-width: 760px) and (max-width: 959px)
{
.web section.home article img.wp-post-image
{
width: 100%;
}
}

/*RESPONSIVE: 480px*/
@media all and (max-width: 480px)
{

}
[/css]

Zbudowałem osobne filtry Media Quariers, czyli zbiór stylów CSS skalujących serwis na urządzeniach mobilnych w zależności od szerokości urządzenia. Twoim zadaniem jest stworzyć szablon w taki sposób, aby motyw przeszedł pomyślną weryfikację w narzędziu Mobile Friendly.

Stworzyłem trzy filtry skalujące serwis w zależności od szerokości urządzenia i działają wg schematu poniżej:

[css]
@media all and (max-width: 959px){/*Nazwa klasy*/{/*właściwości*/}}

@media all and (min-width: 760px) and (max-width: 959px){/*Nazwa klasy*/{/*właściwości*/}}

@media all and (max-width: 480px){/*Nazwa klasy*/{/*właściwości*/}}
[/css]

Lekcja 5 – zakup serwera i domeny

Po stworzeniu szablonu w HTML5 i CSS3 nie pozostaje Ci nic innego jak wykupić swoją domenę i serwer, gdzie zainstalujesz bloga na WordPress i podłączysz szablon.

Domenę i serwer możesz zakupić w polskiej firmie eHost – zobacz ofertę.

[jwplayer mediaid=”1086″]

Lekcja 6 – instalacja bloga WordPress

[jwplayer mediaid=”1088″]

Lekcja 7 – instrukcja kokpitu WordPress

[jwplayer mediaid=”1092″]

Serwisy pingujące możesz pobrać tutaj.

Lekcja 8 – instalacja programu do połączenia z serwerem WinSCP

[jwplayer mediaid=”1097″]

Podłożenie metod WordPress w szablonie HTML5 i CSS3

Po zbudowaniu szablonu w HTML i CSS należy w odpowiednich miejscach szablonu podłożyć funkcje charakterystyczne dla technologii WordPress. W praktyce będziesz mógł zarządzać treścią w 100% przez panel CMS, zwany kokpitem WordPressa.

Gotowy szablon w HTML5 i CSS3 wykonywany na potrzeby kursu możesz pobrać tutaj.

Podłożenie metod WordPress wykonasz krok po kroku bezpośrednio na serwerze.

Krok 1 – umieść szablon na serwerze

Wgraj zakodowany przed chwilą szablon pracabezszefa na serwerze w katalogu themes. W tym katalogu znajdziesz wszystkie aktualne i domyślne motywy WordPressa, na przykład: twentythirteen, twentyfourteen, twentyfifteen. Aktualnie nasza skórka zawiera tylko i wyłącznie kod HTML5, CSS3 i elementy jQuery.

[jwplayer mediaid=”1105″]

Krok 2 – spróbuj włączyć szablon w kokpicie WordPress

W kokpicie WordPress sprawdź, czy możesz włączyć szablon pracabezszefa? Jak widzisz na grafice poniżej tworzony motyw jest niekompletny.

[jwplayer mediaid=”1107″]

Krok 3 – nadaj nazwę szablonu, nazwę autora i opis motywu

Na początku pliku style.css obowiązkowo dopisz poniższy fragment kodu:

[php]
/*
Theme Name: pracabezszefa
Author: Paweł Duda
Description: Przekonaj się, że zarabianie na własnym blogu przez internet jest możliwe!
*/
[/php]

Theme name: wpisz nazwę motywu.

Author: wpis nazwę autora.

Description: wpisz krótki opis szablonu, który zostanie wyświetlony w szczegółach motywu kokpitu WordPress.

[jwplayer mediaid=”1111″]

Krok 4 – index.php

Plik index.html zamień na plik index.php. Wystarczy zmienić rozszerzenie plików .html na .php

Dzięki zamianie rozszerzeń plików będziesz mógł swobodnie korzystać z języka PHP oraz wszystkich metod charakterystycznych dla technologii WordPress.

[jwplayer mediaid=”1113″]

Krok 5 – screenshot.png

Wgraj do szablonu plik o nazwie screenshot.png o rekomendowanych wymiarach 880px x 660px, który będzie grafiką reklamową szablonu. Grafikę możesz wykonać bezpośrednio po zakodowaniu szablonu pracabezszefa w HTML5 i CSS3. Do wykonania obrazku skorzystaj z darmowych narzędzi graficznych: Paint, Gimp.

[FMP]

[jwplayer mediaid=”1115″]

[/FMP]

Krok 6 – włącz szablon

Ponownie odśwież kokpit WordPress i spróbuj włączyć szablon, który tym razem powinien być aktywny razem z grafiką reklamową – screenshot.png. Klikając w szczegóły motywu, zobaczysz wartości, które dodałeś przed chwilą w pliku style.css: nazwa motywu, nazwa autora, opis szablonu.

[FMP]
[jwplayer mediaid=”1118″]

[/FMP]

Krok 7 – odśwież stronę internetową / bloga

Po włączeniu szablonu i odświeżeniu bloga zauważysz, że serwis nie obsługuje szaty graficznej bloga. Jest to zjawisko jak najbardziej naturalne, ponieważ utraciłeś poprawne ścieżki na serwerze do zaczytania stylów CSS oraz grafik. W praktyce każda strona internetowa w tym momencie wyświetla tylko zawartość kodu HTML.

[FMP]
[jwplayer mediaid=”1121″]

[/FMP]

Krok 8 – dodaj funkcje wp_head() i wp_footer()

Musisz zająć się podłożeniem odpowiednich metod WordPress w pliku index.php, dlatego rozpocznij od samego początku.

Szablon WordPress prawidłowo zakodowany powinien obsługiwać poprawnie wtyczki, które będziesz mógł instalować i konfigurować w kokpicie.

W tym celu w pliku index.php wystarczy umieścić dwie funkcje:

wp_head() przed znacznikiem </head>
wp_footer() przed znacznikiem </body>

Dodatkowo w sekcji head umieść jeszcze jedną funkcję związaną z komentarzami.

W praktyce będzie to wyglądało następująco:

[php]
<?php wp_enqueue_script( 'comment-reply’ ); ?>
<?php wp_head(); ?>
</head>
[/php]

oraz

[php]
<?php wp_footer(); ?>
</body>
[/php]
[FMP]
[jwplayer mediaid=”1123″]

[/FMP]

Krok 9 – dynamiczny tytuł

Statyczny kod znacznika title:

[html]

<title>Fizyka dla każdego – Blog LubieFizyke.pl</title>

[/html]

zamień na:

[php]

[/php]
[FMP]
[jwplayer mediaid=”1125″]

[/FMP]
Powyższa metoda będzie generowała dynamiczne tytuły z kokpitu WordPressa. Do tworzenia unikalnych tytułów dla wyszukiwarek lepszym rozwiązaniem są instalacje pluginów WordPress, jak na przykład wtyczka WordPress SEO.

Krok 10 – zaktywuj arkusze stylów CSS3

W pliku index.php zaktywuj plik style.css. Wystarczy wykonać bardzo proste działanie!

Kod zamieszczony poniżej:

[html]

[/html]

zamień na:

[php]

[/php]
[FMP]
[jwplayer mediaid=”1127″]

[/FMP]

Krok 11 – odśwież szablon ze stylami CSS3

Odśwież stronę w przeglądarce. Zauważysz, że szablon poprawnie wczytuje plik style.css odpowiedzialny za warstwę prezentacji Twojego bloga. Do pełnego wczytania szablonu strony w przeglądarce w pliku index.php musisz poprawnie wczytać skrypty jQuery oraz obrazki z serwera: logo, ikona responsywnego menu, obraz autora, grafiki mediów społecznościowych oraz ikony wpisu.

[FMP]
[jwplayer mediaid=”1129″]

[/FMP]

Krok 12 – wczytaj skrypty jQuery

Utraciłeś poprawną ścieżkę do wczytania skryptów jQuery, które odpowiedzialne są w szablonie za uruchomienie responsywnego menu.

Poniższy fragment kodu:

[html]
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
[/html]

zamień na:

[php]
<script src="<?=get_template_directory_uri();?>/js/jquery-1.11.3.min.js"></script>
<script src="<?=get_template_directory_uri();?>/js/index.js"></script>
[/php]
[FMP]
[jwplayer mediaid=”1131″]

[/FMP]

Krok 13 – wczytaj ikonę menu responsywnego

Ikona menu responsywnego jest widoczna w szablonie pracabezszefa, gdy szerokość urządzenia jest mniejsza od 960px.

Poniższy fragment kodu odpowiedzialny za wyświetlenie grafiki menu responsywnego:

[html]

[/html]

zamień na:

[php]

<div id="menu-responsive">
<img src="<?=get_template_directory_uri();?>/images/menu-responsive.png" alt="Menu" />
</div>

[/php]

[FMP]
[jwplayer mediaid=”1133″]

[/FMP]

Krok 14 – wczytaj logo

Musisz teraz poprawnie zaczytać z serwera wszystkie grafiki, które znajdują się w pliku index.php.

Poniższy fragment odpowiedzialny za wyświetlenie grafiki logo jest umieszczony w przyjaznych dla Google mikroformatach:

[html]
<!–LOGO–>

[/html]

powyższy kod zamień na poniższy:

[php]
<!–LOGO–>

<div id="logo" itemtype="http://schema.org/Organization" itemscope="">
<a itemprop="url" title="Strona główna" href="<?php bloginfo( 'home’ ); ?>">
<img itemprop="logo" src="<?=get_template_directory_uri();?>/images/logo-230px-64px.png" alt="Logo LubieFizyke.pl" />
</a>
</div>

[/php]
[FMP]
[jwplayer mediaid=”1135″]

[/FMP]

Krok 15 – wczytaj grafiki ikon wpisu

Identyczną czynność w pliku index.php wykonuj dla grafik przyszłych ikon wpisu.

Poniższy fragment kodu odpowiedzialny za wyświetlenie przyszłych ikon wpisu:

[html]
<img src="images/thumb.png" alt="" />
[/html]

zamień na:

[php]
<img src="<?=get_template_directory_uri();?>/images/thumb.png" alt="" />
[/php]
[FMP]
[jwplayer mediaid=”1137″]

[/FMP]

Krok 16 – wczytaj ikonę autora

Podobnie jak powyżej do zaczytania grafiki autora z katalogu images wykorzystamy funkcję get_template_directory_uri().

Poniższy fragment kodu w pliku index.php odpowiedzialny za wyświetlenie ikony autora:

[html]
<img class="author" src="images/autor-80px-80px.jpg" alt="Marek Duda">
[/html]

zamień na:

[php]
<img class="author" src="<?=get_template_directory_uri();?>/images/autor-80px-80px.jpg" alt="Marek Duda">
[/php]
[FMP]
[jwplayer mediaid=”1139″]

[/FMP]

Krok 17 – wczytaj ikony społecznościowe i pobierz kanał RSS

Do pobrania grafik grafik społecznościowych wykorzystaj po raz ostatni funkcję get_template_directory_uri().

Poniższy fragment kodu odpowiedzialny za wyświetlenie ikon społecznościowych:

[html]
<ul class="social">
<li>
<a href="#" title="Facebook" target="_blank">
<img src="images/facebook.jpg" alt="Facebook" />
</a>
</li>
<li>
<a href="#" title="Youtube" target="_blank">
<img src="images/youtube.jpg" alt="YouTube" />
</a>
</li>
<li>
<a href="#" title="Google+" target="_blank">
<img src="images/google-plus.jpg" alt="Google+" />
</a>
</li>
<li>
<a href="#" title="Twitter" target="_blank">
<img src="images/twitter.jpg" alt="Twitter" />
</a>
</li>
<li>
<a href="#" title="RSS" target="_blank">
<img src="images/rss.jpg" alt="RSS" />
</a>
</li>
</ul>
[/html]

zamień na:

[php]
<ul class="social">
<li>
<a href="#" title="Facebook" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/facebook.jpg" alt="Facebook" />
</a>
</li>
<li>
<a href="#" title="Youtube" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/youtube.jpg" alt="YouTube" />
</a>
</li>
<li>
<a href="#" title="Google+" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/google-plus.jpg" alt="Google+" />
</a>
</li>
<li>
<a href="#" title="Twitter" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/twitter.jpg" alt="Twitter" />
</a>
</li>
<li>
<a href="<?php bloginfo_rss( 'rss_url’ ); ?>" title="RSS" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/rss.jpg" alt="RSS" />
</a>
</li>
</ul>
[/php]

Jeżeli posiadasz już profil na Facebook, YouTube, Google+, czy Twitterze możesz je podlinkować.
[FMP]
[jwplayer mediaid=”1141″]

[/FMP]

Krok 18 – odśwież szablon ze stylami i grafikami

Odśwież bloga w przeglądarce. Zauważ, że szablon od strony warstwy prezentacji jest już kompletny. Style CSS3 i grafiki zaczytywane są poprawnie z serwera.

[FMP]
[jwplayer mediaid=”1143″]

[/FMP]

Krok 19 – aktywacja i dodanie poziomego menu

Zobacz, jak zrobić poziome menu w szablonie? Menu będzie zawierać aktualnie cztery podstrony: Start, O nas, Kursy, Zapytaj.

Stwórz w szablonie nowy, pusty plik o nazwie: functions.php. Platforma WordPress będzie wywoływać z tego pliku funkcje szablonu odpowiedzialne między innymi za tworzenie menu, paginacji, miniaturek wpisu, itp.

W pliku functions.php musisz stworzyć nowe poziome menu, dlatego do wnętrza pustego pliku wklej następujący kod:

[php]
<?php
/*REJESTRACJA POZIOMEGO MENU*/
function register_my_menus() {

register_nav_menus(

array(

'poziome-menu’ => __( 'Poziome menu’ )

)

);

}

add_action( 'init’, 'register_my_menus’ );
?>
[/php]

Powyższa funkcja jest odpowiedzialna za rejestrację w WordPress menu, które w kokpicie będzie wyświetlane pod nazwą: Poziome menu.

Do szczęścia potrzeba nam jeszcze wywołać menu w pliku index.php podmieniając fragment kodu:

[html]
<!–MENU POZIOME–>
<nav>
<ul>
<li>
<a href="#">Start</a>
</li>
<li>
<a href="#">O nas</a>
</li>
<li>
<a href="#">Kursy</a>
</li>
<li>
<a href="#">Zapytaj</a>
</li>
</ul>
</nav>
[/html]

na kod:

[php]

<nav>
<?php wp_nav_menu( array( 'theme_location’ => 'poziome-menu’, 'depth’ => 2)); ?>
</nav>

[/php]

Zauważ, że po odświeżeniu szablonu – WordPress już domyślnie pokazał w menu przykładową podstronę: Sample Page. Jest to domyślna strona, która została utworzona świeżo po instalacji WordPress.

Teraz należy w kokpicie WordPress dodać nowe strony: Start, O nas, Kursy, Zapytaj, a także przypisać je do „Poziomego menu” 🙂

Po odświeżeniu strony internetowej menu powinno zawierać wyjściowe podstrony, które są już dodane z kokpitu WordPress.

[FMP]
[jwplayer mediaid=”1145″]

[/FMP]

Krok 20 – uruchomienie klasy .active w menu

Dodaj do menu aktywną zakładkę.
W tym celu do pliku functions.php wklej następujący kod, który uruchomi klasę .active

[php]
/*URUCHOMIENIE KLASY ACTIVE*/
function special_nav_class($classes, $item){
if( in_array(’current-menu-item’, $classes) ){
$classes[] = 'active ’;
}
return $classes;
}
add_filter(’nav_menu_css_class’ , 'special_nav_class’ , 10 , 2);
[/php]

W pliku style.css musisz odnaleźć styl:

[css]
header#header .web nav ul li:hover,
header#header .web nav ul li a:hover
{
color: #FFF;
border-color: #FFF;
background: #F8AA13;
transition: background .27s ease-in-out;
-moz-transition: background .27s ease-in-out;
-webkit-transition: background .27s ease-in-out;
}
[/css]

i dodać jeszcze klasę .active tak jak poniżej:

[css]
header#header .web nav ul li:hover,
header#header .web nav ul li a:hover,
header#header .web nav ul li.active,
header#header .web nav ul li.active a
{
color: #FFF;
border-color: #FFF;
background: #F8AA13;
transition: background .27s ease-in-out;
-moz-transition: background .27s ease-in-out;
-webkit-transition: background .27s ease-in-out;
}
[/css]

Po odświeżeniu szablonu możesz już podziwiać aktywną zakładkę w poziomym menu 🙂

aktywna zakładka
[FMP]
[jwplayer mediaid=”1147″]

[/FMP]

Krok 21 – wyświetlanie wpisów i stron

Wyświetlanie wpisów i stron z kokpitu jest możliwe przy pomocy Pętli WordPress, określanej fachowo WordPress Loop.

W pliku index.php aktualnie umieściłem dwa przykładowe wpisy z ikonami wpisu. Zrobiłem to celowo, aby pokazać Ci dynamikę tworzenia wpisów z kokpitu WordPressa. Będziesz mógł pisać wpisy do woli, bez kodowania HTML tak jak poniżej.

Tak na prawdę z dwóch artykułów znajdujących się w pliku index.php

[html]
<!–WPISY–>
<article>
<h1>
<a href="#" title="#">
Link do 1 artykułu
</a>
</h1>
<a href="#" title="#">
<img src="images/thumb.png" alt="" />
</a>
<p>
Zajawka treści 1 artykułu
</p>
<a href="#" class="more-link">Czytaj dalej</a>
</article>

pozostaw tylko jeden wpis, tak jak poniżej:

[html]
<!–WPISY–>
<article>
<h1>
<a href="#" title="#">
Link do 2 artykułu
</a>
</h1>
<a href="#" title="#">
<img src="images/thumb.png" alt="" />
</a>
<p>
Zajawka treści 2 artykułu
</p>
<a href="#" class="more-link">Czytaj dalej</a>
</article>
[/html]

Teraz należy uruchomić Pętlę WordPress zastępując powyższy kod na poniższy 🙂

[php]
<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<article>
<h1>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?>
</a>
</h1>
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'post-icon’ ); } ?>
</a>
<?php the_content(’czytaj dalej’); ?>
</article>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>
[/php]

Po odświeżeniu strony głównej został wyświetlony domyślny wpis Hello world! Jeżeli masz więcej wpisów napisanych w kokpicie, one też zostaną wyświetlone.

Tak naprawdę tutaj znajdują się najważniejsze funkcje szablonu:

the_permalink() – funkcja pobiera adres URL wpisu
the_title() – funkcja pobiera tytuł wpisu
get_template_directory_uri() – funkcja pobiera właściwą ścieżkę z serwera, np: do zaczytania grafik szablonu
the_content() – funkcja pobiera treść wpisu – zobacz, jak alternatywnie działa funkcja the_excerpt()

Podczas dodawania nowych wpisów możesz umieszczać obrazki, które mogą reagować na zmianę położenia w edytorze.

Obrazki we wpisie mogą być położone:

przy lewej krawędzi wpisu
przy prawek krawędzi wpisu
wyśrodkowane

Funkcjonalność z edytora możesz uruchomić w pliku style.css dodając nowe style CSS, a dokładnie:

[css]
.alignleft
{
float: left;
padding-right: 20px;
}

.alignright
{
float: right;
padding-left: 20px;
}

.aligncenter
{
display: block;
margin: auto !important;
}
[/css]
[FMP]
[jwplayer mediaid=”1158″]

[/FMP]

Krok 22 – tworzenie ikony wpisu

W szablonie utworzę ikony wpisu o wymiarach 625px szerokości i 320px wysokości.

Umieść w pliku functions.php trzy linie kodu:

[php]
/*MINIATURY WPISÓW*/
add_theme_support( 'post-thumbnails’ );
set_post_thumbnail_size( 625, 320 );
add_image_size( 'post-icon’, 625, 320, true );
[/php]

Pierwsza funkcja inicjuje miniaturki w WordPress.

Druga metoda ustawia domyślne wartości miniaturek.

Trzecia funkcja odwołuje się do nazwy ustawienia ikony wpisu post-icon o podanych powyżej wymiarach.

Naszą ikonę wpisu musisz uruchomić w pliku index.php, a dokładnie w Pętli WordPress.

Odszukaj fragment kodu:

[php]
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?=get_template_directory_uri();?>/images/thumb.png" alt="" />
</a>
[/php]

i zamień na:

[php]
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'post-icon’ ); } ?>
</a>
[/php]

W tym momencie podczas dodawania wpisów w kokpicie masz możliwość dodawania obrazka wyróżniającego – ikony wpisu.

ustaw obrazek wyróżniający

Uwaga 1!

Jeżeli wgrasz ikonę wpisu mniejszą od zadeklarowanych wymiarów miniaturki, wówczas ikona wpisu nie zostanie utworzona.

Uwaga 2!

Jeżeli wgrasz ikonę wpisu równą lub większą od zadeklarowanych wymiarów miniaturki, wówczas ikona wpisu zostanie utworzona.

Uwaga 3!

Jeżeli będziesz modyfikował wielkość ikon wpisu w pliku functions.php musisz zainstalować plugin Regenerate Thumbnails i zregenerować wszystkie grafiki. Aktualnie jest to niezbędna operacja do wygenerowania nowych miniaturek wpisu.

[FMP]
[jwplayer mediaid=”1160″]
[/FMP]

Krok 23 – uruchom wyszukiwarkę treści na blogu

W prawym pasku strony znajduje się wyszukiwarka, która nie działa. W związku z tym wyszukiwarkę WordPress należy odpowiednio uruchomić.

Poniższy fragment kodu:

[html]
<form action="/" method="get" accept-charset="UTF-8">
<fieldset>
<input name="s" type="text" placeholder="Szukaj…" value="" /><input type="submit" value="Szukaj" />
</fieldset>
</form>
[/html]

zamień na:

[php]
<form class="szukaj" action="<?php bloginfo(’url’); ?>" method="get" accept-charset="UTF-8">
<fieldset>
<input name="s" type="text" placeholder="Szukaj…" value="<?php the_search_query(); ?>"/><input type="submit" value="Szukaj"/>
</fieldset>
</form>
[/php]
[FMP]
[jwplayer mediaid=”1162″]
[/FMP]

Krok 24 – rozbudowa szablonu o widget z kategoriami

Możliwość dodawania, edycji i usuwania kategorii powinna być dostępna z poziomu kokpitu WordPressa. Uruchom funkcjonalność widgety w Twoim CMS.

W pliku functions.php wklej następujący kod, który zaktywuje widgety w kokpicie WordPress.

[php]
/*WIDGETY*/
if ( function_exists (’register_sidebar’)) {
register_sidebar(array(
'name’ => 'Widget Prawa Kolumna’,
'before_widget’ => '<div class="widget %2$s">’,
'after_widget’ => '</div>’,
'before_title’ => '<h4>’,
'after_title’ => '</h4>’,
));
}
[/php]

Widget należy jeszcze wywołać w pliku index.php. Możesz go wywołać w dowolnym miejscu szablonu.

W miejscu klasy widget w pliku index.php:

[html]
<div class="widget">
<h4>Kategorie</h4>
<ul>
<li>
<a href="#">Kategoria 1</a>
</li>
<li>
<a href="#">Kategoria 2</a>
</li>
<li>
<a href="#">Kategoria 3</a>
<ul>
<li>
<a href="#">Podkategoria 3.1</a>
</li>
<li>
<a href="#">Podkategoria 3.2</a>
</li>
</ul>
</li>
</ul>
</div>
[/html]

wklej następujący kod:

[php]
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?>
[/php]

W tym momencie po odświeżeniu kokpitu możesz już dodawać nowe widgety z zakładki Wygląd.

Kategorie wpisów zostaną zaimplementowane w widgecie: Kategorie.

Tak wygląda teraz szablon – pracabezszefa po uruchomieniu widgetu kategorie.

Jeżeli instalowałeś świeżego WordPressa, to pojawi Ci się tylko jedna kategoria: Uncategorized. Jest to domyślna kategoria, która tworzona jest automatycznie podczas instalacji WordPress.
Dodaj z kokpitu własne kategorie wpisów, a szablon automatycznie zostanie zaktualizowany o nowe kategorie.
[FMP]
[jwplayer mediaid=”1164″]
[/FMP]

Krok 25 – demontaż pliku index.php na mniejsze pliki

Wykonując powyższe kroki implementowania szablonu możesz przekonać się, że szablon pracabezszefa już działa poprawnie pod najpopularniejszymi przeglądarkami: Chrome, Mozilla, Opera, czy IE. Sprawdź!

Platforma WordPress udostępnia logiczną hierarchię plików, która pozwala rozwinąć szablon zarówno funkcjonalnie, jak i wizualnie od strony CSS. Tworzony motyw zostanie wzbogacony o elementy przyjazne wyszukiwarkom, między innymi o okruszki.

W tym momencie rozdzielisz razem ze mną plik index.php na mniejsze pliki.

Tam, gdzie zawartość kodu zostanie przeniesiona do innego pliku, w index.php będziesz musiał zaczytać zawartość tego pliku przy pomocy konkretnych funkcji.

Zobacz, jak to zrobić w praktyce?

Utwórz w szablonie nowe pliki.
[FMP]
Plik header.php

[php]
<!DOCTYPE html>
<html lang="pl">
<head>
<title><?php wp_title(); ?> <?php bloginfo(’name’); ?></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url’ ); ?>" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script src="<?=get_template_directory_uri();?>/js/jquery-1.11.3.min.js"></script>
<script src="<?=get_template_directory_uri();?>/js/index.js"></script>
<!–TAG RESPONSIVE WINDOW–>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
for(var e,l=’footer header nav article section aside figure’.split(’ ’);e=l.pop();document.createElement(e));
</script>
<?php wp_enqueue_script( 'comment-reply’ ); ?>
<?php wp_head(); ?>
</head>

<!–MENU RESPONSIVE–>
<div id="menu-responsive">
<img src="<?=get_template_directory_uri();?>/images/menu-responsive.png" alt="Menu" />
</div>

<!–LOGO–>
<div id="logo" itemtype="http://schema.org/Organization" itemscope="">
<a itemprop="url" title="Strona główna" href="<?php bloginfo( 'home’ ); ?>">
<img itemprop="logo" src="<?=get_template_directory_uri();?>/images/logo-230px-64px.png" alt="Logo LubieFizyke.pl" />
</a>
</div>

<!–MENU POZIOME–>
<nav>
<?php wp_nav_menu( array( 'theme_location’ => 'poziome-menu’, 'depth’ => 2)); ?>
</nav>
<div class="clearfix"></div>
</div>
</header>
[/php]

Plik sidebar.php

[php]
<!–SIDEBAR – PRAWY PANEL–>
<aside>
<h4>O mnie</h4>
<p>
<img class="author" src="<?=get_template_directory_uri();?>/images/autor-80px-80px.jpg" alt="Marek Duda">
<strong>Marek Duda</strong> – pozycjoner stron www i twórca blogów WordPress.
Zobacz, jak zarabiać w internecie przy pomocy najlepszych narzedzi
marketingowych.
</p>

<ul class="social">
<li>
<a href="#" title="Facebook" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/facebook.jpg" alt="Facebook" />
</a>
</li>
<li>
<a href="#" title="Youtube" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/youtube.jpg" alt="YouTube" />
</a>
</li>
<li>
<a href="#" title="Google+" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/google-plus.jpg" alt="Google+" />
</a>
</li>
<li>
<a href="#" title="Twitter" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/twitter.jpg" alt="Twitter" />
</a>
</li>
<li>
<a href="<?php bloginfo_rss( 'rss_url’ ); ?>" title="RSS" target="_blank">
<img src="<?=get_template_directory_uri();?>/images/rss.jpg" alt="RSS" />
</a>
</li>
</ul>
<div class="clearfix"></div>

<form class="szukaj" action="<?php bloginfo(’url’); ?>" method="get" accept-charset="UTF-8">
<fieldset>
<input name="s" type="text" placeholder="Szukaj…" value="<?php the_search_query(); ?>"/><input type="submit" value="Szukaj"/>
</fieldset>
</form>

<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?>

</aside>
<div class="clearfix"></div>
[/php]

Plik footer.php

[php]
<!–FOOTER–>
<footer id="footer">
<p>
© Copyright 2015 || <a href="https://pracabezszefa.pl" rel="nofollow">PracaBezSzefa</a>
</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
[/php]

Plik index.php

[php]
<?php get_header(); ?>

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

W pliku index.php wykorzystałem trzy funkcje:

get_header() – do pobrania pliku header.php, gdzie wyświetlone jest logo, wyszukiwarka i poziome menu
get_sidebar() – do pobrania pliku sidebar.php, gdzie wyświetlone jest menu pionowe i baner reklamowy
get_footer() – do pobrania pliku footer.php, gdzie wyświetlona jest stopka serwisu

Zauważ, że plik index.php aktualnie jest odpowiedzialny za wyświetlanie stron z menu poziomego, wpisów oraz kategorii.

Szablon pracabezszefa należy rozbudować, dodając nowe pliki w powstającym motywie:

Plik page.php odpowiedzialny za wyświetlanie pojedynczej strony
Plik category.php odpowiedzialny za wyświetlenie pojedynczej kategorii
Plik single.php odpowiedzialny za wyświetlenie pojedynczego wpisu

[jwplayer mediaid=”1166″]

Krok 26 – breadcrumbs

Breadcrumbs – lokalizator linków nawigacyjnych pomocnych dla użytkownika, jak i robota wyszukiwarki poznać hierarchię witryny. Lokalizator powinien znajdować się nad treścią strony / wpisu / kategorii .

Kategorie z poprawnie zaimplementowanego lokalizatora wyświetlają się także w wynikach wyszukiwania. Zobacz specyfikację Google dotyczącą tworzenia breadcrumb w mikrodanych.

W pliku functions.php wklej następujący kod, który w zależności od strony, wpisu, czy kategorii będzie uruchamiał odpowiedni lokalizator w mikrodanych:
[FMP]
[php]
/*BREADCRUMBS*/
function schema_breadcrumb() {

global $post;

$home_url = get_bloginfo(’url’);
$separator = ’ » ’;

if (is_home()) {

}

else {

echo ’
<div id="breadcrumb">’;
echo ’
<div class="web">’;
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . $home_url . '">’ . '<span itemprop="title">Start</span>’ . '</a></span>’ . $separator . ’ ’;

if (get_page_by_path(’blog’)) {

if (!is_page(’blog’)) {
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . get_permalink(get_page_by_path(’blog’)) . '">’ . '<span itemprop="title">Blog</span></a></span>’ . $separator . ’ ’;
}

}

if (is_category()) {
$this_category = get_category(get_query_var(’cat’), false);

if ($this_category->parent != 0) {
$category_url = get_category_link($this_category->parent);
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . $category_url . '">’ . '<span itemprop="title">’ . get_cat_name($this_category->parent) . '</span>’ . '</a></span>’ . $separator . ’ ’;
}

$category_id = get_cat_ID(single_cat_title(”, false));
$category_url = get_category_link($category_id);
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . $category_url . '">’ . '<span itemprop="title">’ . single_cat_title(”, false) . '</span>’ . '</a></span>’;

}

elseif (is_single() && !is_attachment()) {

if (get_post_type() != 'post’) {

$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . $home_url . '/’ . $slug[’slug’] . '">’ . '<span itemprop="title">’ . $post_type->labels->singular_name . '</span>’ . '</a></span>’;
echo ’ ’ . $separator . ’ ’ . get_the_title();

}

else {

$category = get_the_category();

if ($category) {

foreach ($category as $cat) {
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . get_category_link($cat->term_id) . '">’ . '<span itemprop="title">’ . $cat->name . '</span>’ . '</a></span>’ . $separator . ’ ’;
}
}

echo get_the_title();

}
}

elseif (is_page() && !$post->post_parent) {

$get_post_slug = $post->post_name;
$post_slug = str_replace(’-’, ’ ’, $get_post_slug);
echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . get_permalink() . '">’ . '<span itemprop="title">’ . ucfirst($post_slug) . '</span>’ . '</a></span>’;
}

elseif (is_page() && $post->post_parent) {

$parent_id = $post->post_parent;
$breadcrumbs = array();

while ($parent_id) {

$page = get_page($parent_id);
$breadcrumbs[] = '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . get_permalink($page->ID) . '">’ . '<span itemprop="title">’ . get_the_title($page->ID) . '</span>’ . '</a></span>’;
$parent_id = $page->post_parent;

}

$breadcrumbs = array_reverse($breadcrumbs);

for ($separe = 0; $separe < count($breadcrumbs); $separe++) {
echo $breadcrumbs[$i];
if ($separe != count($breadcrumbs) – 1)
echo ’ ’ . $separator . ’ ’;
}

echo $separator . '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’ . get_permalink() . '">’ . '<span itemprop="title">’ . the_title_attribute(’echo=0′) . '</span>’ . '</a></span>’;

}

echo '</div>

’;
echo '</div>

’;

}
}
[/php]
[/FMP]
Przy pomocy funkcji schema_breadcrumb() będziesz mógł wywołać lokalizator dla kategorii, strony i wpisu.
[jwplayer mediaid=”1168″]

Krok 27 – stwórz plik page.php wywołując lokalizator

Wyświetlanie pojedynczej strony z kokpitu WordPress rozpocznij od utworzenia pustego pliku page.php, gdzie uruchomisz breadcrumbs.

Budowanie pliku page.php rozpocznij wykorzystując plik index.php, a na samym początku wywołaj lokalizator przy pomocy funkcji schema_breadcrumb()

Plik page.php będzie wyglądał następująco:
[FMP]
[php]
<?php get_header(); ?>

<!–BREADCRUMB STRONY–>
<?php schema_breadcrumb(); ?>

<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

W pliku style.css musisz jeszcze nadać styl CSS dla breadcrumb strony, wpisu i kategorii.

[css]
/*BREADCRUMB – PAGE – POST – CATEGORY*/
#breadcrumb
{
background: #2c5c88;
color: #FFF;
text-transform: uppercase;
font-weight: 400;
padding: 15px;
font-size: 16px;
}

#breadcrumb a
{
color: #FFF;
}
[/css]

Testowanie poprawności danych strukturalnych znajdziesz tutaj.
[jwplayer mediaid=”1170″]

Krok 28 – stwórz plik category.php uruchamiając lokalizator

Wyświetlanie pojedynczej kategorii jest możliwe przy pomocy pliku category.php

Plik category.php będzie tak na prawdę powielonym plikiem index.php, w którym uruchomisz lokalizator.

Utwórz pusty plik category.php wklejając zawartość pliku index.php i dodając breadcrumb kategorii – tak jak poniżej.

Plik category.php

[php]
<?php get_header(); ?>

<!–BREADCRUMB KATEGORII–>
<?php schema_breadcrumb(); ?>

<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

[jwplayer mediaid=”1172″]

Krok 29 – stwórz plik single.php uruchamiając lokalizator

Wyświetlanie pojedynczego wpisu jest możliwe przy pomocy pliku single.php

Plik single.php będzie tak na prawdę powielonym plikiem page.php, w którym lokalizator okruszki oraz formularz komentowania wpisu, który za moment utworzysz krok po kroku.

Zawartość pliku single.php

[php]
<?php get_header(); ?>

<!–BREADCRUMB WPISU–>
<?php schema_breadcrumb(); ?>

<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

[jwplayer mediaid=”1175″]

Krok 30 – stwórz plik comments.php i uruchom komentarze na blogu

Utwórz pusty plik comments.php i wklej zawartość kodu:

[php]
<?php
if ( post_password_required() )
return;
?>

<!–KOMENTARZE–>
<div id="comments" class="comments-area">

<?php if ( have_comments() ) : ?>
<h3 class="comments-title">
<?php
printf( _nx( '1 komentarz – %2$s’, '%1$s komentarze – %2$s’, get_comments_number(), 'comments title’, 'pbs’ ),
number_format_i18n( get_comments_number() ), '<span>’ . get_the_title() . '</span>’ );
?>
</h3>

<ol class="comment-list">
<?php
wp_list_comments( array(
'style’ => 'ol’,
'short_ping’ => true,
'avatar_size’ => 75,
) );
?>
</ol>
<div class="clearfix"></div>

<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments’ ) ) :
?>
<nav class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation’, 'pbs’ ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Starsze komentarze’, 'pbs’ ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Nowe komentarze →’, 'pbs’ ) ); ?></div>
</nav>
<?php endif; ?>

<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="no-comments"><?php _e( 'Komentarze zostały wyłączone.’ , 'pbs’ ); ?></p>
<?php endif; ?>

<?php endif; ?>

<?php comment_form(); ?>

</div>
[/php]

W tym momencie przy pomocy funkcji comments_template() możesz uruchomić komentarze we wpisach (single.php) i na stronach (page.php).

Zawartość pliku single.php z wywołanymi komentarzami we wpisach:

[php]
<?php get_header(); ?>

<!–BREADCRUMB WPISU–>
<?php schema_breadcrumb(); ?>

<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

Zawartość pliku page.php z wywołanymi komentarzami na stronach:

[php]
<?php get_header(); ?>

<!–BREADCRUMB STRONY–>
<?php schema_breadcrumb(); ?>

<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

Pozostaje już tylko w pliku style.css nadać odpowiedni wygląd formularza komentarzy.

W pliku style.css wklej zawartość kodu:

[css]
/*KOMENTARZE*/
.web section.home article #comments
{

}

.web section.home article #comments h3
{
background: #2c5c88;
color: #FFF;
padding: 10px 0 10px 15px;
}

.web section.home article #comments h3.comments-title
{
margin-bottom: 0;
}

.web section.home article #comments label
{
display: block;
}

.web section.home article #comments a.comment-reply-link
{
width: 200px;
background: #37bc82;
border-radius: 8px;
font-family: 'Open Sans’, sans-serif;
font-weight: 300;
font-size: 16px;
cursor: pointer;
color: #fff;
}

input[type=submit]:hover,
.web section.home article #comments a.comment-reply-link:hover
{
background: #33aa76;
}

.web section.home article #comments ol
{
list-style: none;
padding: 0;
}

.web section.home article #comments ol li.comment
{
padding: 20px 20px 0 20px;
background: #FFF;
}

.web section.home article #comments ol li div.comment-body
{
padding-bottom: 20px;
border-bottom: 1px dashed #d1d1d1;
}

.web section.home article #comments ol li div.comment-body:last-child
{
border-bottom: none;
}

.web section.home article #comments img.avatar
{
float: left;
margin-right: 20px;
margin-bottom: 10px;
}

.web section.home article .comment-meta,
.web section.home article span.says
{
display: none;
}

.web section.home article #comments cite.fn a
{
font-style: normal;
display: block;
padding-top: 25px;
}

.web section.home article #comments p
{
clear: both;
}

.web section.home article #comments a.comment-reply-link
{
display: block;
text-decoration: none;
width: 120px;
text-align: center;
padding: 5px;
}

.web section.home article #comments #respond h3#reply-title a
{
color: #FFF;
}

.web section.home article #comments em.comment-awaiting-moderation
{
float: left;
display: block;
}
[/css]

[jwplayer mediaid=”1177″]

Krok 31 – rozbudowa szablonu – paginacja

Pisząc nowe wpisy na blogu na pewno zajdzie potrzeba uruchomienia paginacji, czyli stronicowania wpisów.

Paginację wywołaj w pliku index.php i category.php.

Zawartość pliku index.php z wywołaną paginacją:

[php]
<?php get_header(); ?>

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

Zawartość pliku category.php z wywołaną paginacją:

[php]
<?php get_header(); ?>

<!–BREADCRUMB KATEGORII–>
<?php schema_breadcrumb(); ?>

<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
[/php]

[jwplayer mediaid=”1179″]

Krok 32 – optymalizacja kodu z pliku index.php i category.php

Podczas rozbudowy szablonu możesz zauważyć, że część kodu powiela się w innych plikach. Przykładem może być przed chwilą omawiany plik index.php i category.php

Zauważ, że oba pliki mają identyczną pętlę WordPress Loop.

W związku z tym utwórz nowy plik o dowolnej nazwie: loop-index.php i wytnij zawartość pętli WordPressa, która występuje w omawianych plikach. Zawartość pętli wklej do pliku loop-index.php

Zawartość pliku loop-index.php

[php]
<div class="web">
<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>
[/php]

Wycięta pętla WordPress z pliku index.php i category.php musi zostać ponownie wczytana do plików. Możesz ją wczytać przy pomocy funkcji get_template_part().

Zawartość pliku index.php:

[php]
<?php get_header(); ?>

<!–GET LOOP-INDEX.PHP–>
<?php get_template_part( 'loop’, 'index’ ); ?>

<?php get_footer(); ?>
[/php]

Zawartość pliku category.php:

[php]
<?php get_header(); ?>

<!–BREADCRUMB KATEGORII–>
<?php schema_breadcrumb(); ?>

<!–GET LOOP-INDEX.PHP–>
<?php get_template_part( 'loop’, 'index’ ); ?>

<?php get_footer(); ?>
[/php]

[jwplayer mediaid=”1181″]

Krok 33 – optymalizacja kodu z pliku page.php i single.php

Zauważ także duplikację kodu w plikach page.php i single.php

Tutaj także w obu plikach istnieją identyczne pętle WordPress.

W związku z tym utwórz nowy, pusty plik o nazwie loop-content.php i wytnij zawartość pętli WordPressa, która występuje w omawianych plikach.

Zawartość pętli wklej do pliku loop-content.php

Zawartość pliku loop-content.php:

[php]
<div class="web">
<!–LEWY PANEL–>
<section class="home">

<!–WPISY–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</section>

<?php get_sidebar(); ?>

</div>
[/php]

Wycięta pętla WordPress z pliku page.php i single.php musi zostać ponownie wczytana do plików. Ponownie możesz to zrobić przy pomocy funkcji get_template_part().

Zawartość pliku page.php:

[php]
<?php get_header(); ?>

<!–BREADCRUMB STRONY–>
<?php schema_breadcrumb(); ?>

<!–GET LOOP-CONTENT.PHP–>
<?php get_template_part( 'loop’, 'content’ ); ?>

<?php get_footer(); ?>
[/php]

Zawartość pliku single.php:

[php]
<?php get_header(); ?>

<!–BREADCRUMB WPISU–>
<?php schema_breadcrumb(); ?>

<!–GET LOOP-CONTENT.PHP–>
<?php get_template_part( 'loop’, 'content’ ); ?>

<?php get_footer(); ?>
[/php]

[jwplayer mediaid=”1184″]

Krok 34 – testowanie szablonu

Uruchom walidator W3C i sprawdź poprawność napisanego szablonu. Motyw pracabezszefa nie zawiera błędów HTML5 i CSS3 w szablonie.
Uruchom narzędzie Google do testowania danych strukturalnych: Structured Data Testing Tool. Szablon pracabezszefa nie zawiera błędów danych strukturalnych. Wszystkie mikroformaty dodane są prawidłowo.
Sprawdź, czy szablon pracabezszefa jest przyjazny urządzeniom mobilnym? Kliknij tutaj.

[/FMP]
Szablon pracabezszefa jest przyjazny pod urządzenia mobilne.

W tym momencie nie pozostaje Ci nic innego, jak spakować szablon w formacie .zip.

Szablon pracabezszefa możesz pobrać tutaj.
[jwplayer mediaid=”1186″]

Utworzony szablon możesz zainstalować na każdym blogu WordPress z zakładki Wygląd -> Motywy.

pozycjonowanie stron w projekt marketing

4 komentarze - Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?

Janusz Kamiński pisze:

2019-01-25 o 17:52

Świetny kurs! Duże wszystkiego w jednym miejscu. 🙂

Odpowiedz
boguslaw pisze:

2020-10-20 o 19:22

Witam
ile kosztuje pełny dostęp do poradnika?
37 zł czy 21*37 zł.

Z pozdrowieniem i szacunkiem. bc

Odpowiedz
1. Paweł Duda pisze:
  
  2020-10-22 o 09:54
  
  37zl
  
  Odpowiedz
scibas pisze:

2021-03-16 o 21:49

Fajny kurs, obejrzałem wszystkie video i co nieco z tego wyniosłem.

Odpowiedz

Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?

Stwórz szablon w HTML5 i CSS3

Podłożenie metod WordPress w szablonie HTML5 i CSS3

Krok 1 – umieść szablon na serwerze

Krok 2 – spróbuj włączyć szablon w kokpicie WordPress

Krok 3 – nadaj nazwę szablonu, nazwę autora i opis motywu

Krok 4 – index.php

Krok 5 – screenshot.png

Krok 6 – włącz szablon

Krok 7 – odśwież stronę internetową / bloga

Krok 8 – dodaj funkcje wp_head() i wp_footer()

Krok 9 – dynamiczny tytuł

Krok 10 – zaktywuj arkusze stylów CSS3

Krok 11 – odśwież szablon ze stylami CSS3

Krok 12 – wczytaj skrypty jQuery

Krok 13 – wczytaj ikonę menu responsywnego

Krok 14 – wczytaj logo

Krok 15 – wczytaj grafiki ikon wpisu

Krok 16 – wczytaj ikonę autora

Krok 17 – wczytaj ikony społecznościowe i pobierz kanał RSS

Krok 18 – odśwież szablon ze stylami i grafikami

Krok 19 – aktywacja i dodanie poziomego menu

Krok 20 – uruchomienie klasy .active w menu

Krok 21 – wyświetlanie wpisów i stron

Krok 22 – tworzenie ikony wpisu

Krok 23 – uruchom wyszukiwarkę treści na blogu

Krok 24 – rozbudowa szablonu o widget z kategoriami

Krok 25 – demontaż pliku index.php na mniejsze pliki

Krok 26 – breadcrumbs

Krok 27 – stwórz plik page.php wywołując lokalizator

Krok 28 – stwórz plik category.php uruchamiając lokalizator

Krok 29 – stwórz plik single.php uruchamiając lokalizator

Krok 30 – stwórz plik comments.php i uruchom komentarze na blogu

Krok 31 – rozbudowa szablonu – paginacja

Krok 32 – optymalizacja kodu z pliku index.php i category.php

Krok 33 – optymalizacja kodu z pliku page.php i single.php

Krok 34 – testowanie szablonu

4 komentarze - Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?

Dodaj komentarz Anuluj pisanie odpowiedzi