Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?

własny szablon wordpress pod seo

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

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!

Stwórz szablon w HTML5 i CSS3

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

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

Lekcja 1 – tworzenie nagłówka (header)

Lekcję pierwszą możesz pobrać tutaj.

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

struktura plików przyszłego szablonu wordpressa

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
    logo lubie fizyke
  • menu-responsive.png – grafika do uruchomienia menu głównego strony pod urządzeniami mobilnymi
    menu responsywne
  • thumb.png – ikona wpisu o wymiarach 625px szerokości i 320px wysokości
    przyszła ikona wpisu
  • facebook.jpg – grafika do przekierowania na profil Facebook
    ikona facebook
  • youtube.jpg – grafika do przekierowania na adres kanału YouTube
    ikona youtube
  • google-plus.jpg – grafika do przekierowania na adres profilu Google+
    ikona google plus
  • twitter.jpg – grafika do przekierowania na profil Twitter
    ikona twitter
  • rss.jpg – grafika subskrypcji przez kanał RSS
    ikona kanału rss
  • bulets.png – grafika będąca dodatkiem wizualnym do wypunktowań kategorii
    dodatek do menu z kategoriami

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:

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

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

Lekcję drugą możesz pobrać tutaj.

Lekcja 3 – stopka (footer)

Lekcję trzecią możesz pobrać tutaj.

Lekcja 4 – tworzenie wersji mobilnej szablonu

Lekcję czwartą możesz pobrać tutaj.

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

<!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&amp;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>

    <body>
    	<!--HEADER-->
    	<header id="header">
    		<div class="web">
    		
    			<!--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>
				
				<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>
				<div class="clearfix"></div>
				
				<form action="/" method="get" accept-charset="UTF-8">
				    <fieldset>
				        <input name="s" type="text" placeholder="Szukaj..." value="" /><input type="submit" value="Szukaj" />
				    </fieldset>
				</form>
				
    			<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>
    			&copy; Copyright 2015 || <a href="https://pracabezszefa.pl" rel="nofollow">PracaBezSzefa</a>
    		</p>
    	</footer>
    </body>
</html>

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

*
{
    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)
{

}

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:

@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*/}}

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ę.

serwer stron internetowych ehost

Lekcja 6 – instalacja bloga WordPress

Lekcja 7 – instrukcja kokpitu WordPress

Serwisy pingujące możesz pobrać tutaj.

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

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.

wgrywanie skórki do katalogu themes

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.

motyw niekompletny

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

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

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

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.

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.

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.

Dostęp do treści premium

Jak zrobić szablon WordPress? Cena 37 PLN. Przelew Dotpay. Dostęp na 365 dni. Podaj swój adres email, aby zakupić dostęp do poradnika.

/
Kup teraz
Dokonując zamówienia potwierdzasz zapoznanie się z regulaminem serwisu PracaBezSzefa.pl.

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.

włącz szablon z zakładki wygląd motywy
Treść dostępna po opłaceniu dostępu premium.

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.

serwis wyświetla zawartość kodu html
Treść dostępna po opłaceniu dostępu premium.

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 wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

oraz

<?php wp_footer(); ?>
</body>
Treść dostępna po opłaceniu dostępu premium.

Krok 9 – dynamiczny tytuł

Statyczny kod znacznika title:


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

zamień na:


<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>

Treść dostępna po opłaceniu dostępu premium. 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:


<link rel="stylesheet" href="style.css" type="text/css" />

zamień na:


<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" />

Treść dostępna po opłaceniu dostępu premium.

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.

szablon z wczytanym css
Treść dostępna po opłaceniu dostępu premium.

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:

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

zamień na:

<script src="<?=get_template_directory_uri();?>/js/jquery-1.11.3.min.js"></script>
<script src="<?=get_template_directory_uri();?>/js/index.js"></script>
Treść dostępna po opłaceniu dostępu premium.

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:


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

zamień na:


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

wczytanie ikony responsywnej
Treść dostępna po opłaceniu dostępu premium.

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:

<!--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>

powyższy kod zamień na poniższy:

<!--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>

Treść dostępna po opłaceniu dostępu premium.

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:

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

zamień na:

<img src="<?=get_template_directory_uri();?>/images/thumb.png" alt="" />
Treść dostępna po opłaceniu dostępu premium.

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:

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

zamień na:

<img class="author" src="<?=get_template_directory_uri();?>/images/autor-80px-80px.jpg" alt="Marek Duda">
Treść dostępna po opłaceniu dostępu premium.

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:

<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>

zamień na:

<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>

Jeżeli posiadasz już profil na Facebook, YouTube, Google+, czy Twitterze możesz je podlinkować.
Treść dostępna po opłaceniu dostępu premium.

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.

szablon z wczytanymi grafikami i stylami
Treść dostępna po opłaceniu dostępu premium.

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.

stworzenie pliku functions.php

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

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

  register_nav_menus(

    array(

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

    )

  );

}

add_action( 'init', 'register_my_menus' );
?>

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:

<!--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>

na kod:


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

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.

przykładowa strona w menu

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

struktura menu poziomego

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

Menu z kokpitu WordPress
Treść dostępna po opłaceniu dostępu premium.

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

/*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);

W pliku style.css musisz odnaleźć styl:

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;
}

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

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;
}

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

aktywna zakładka
Treść dostępna po opłaceniu dostępu premium.

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

<!--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>

pozostaw tylko jeden wpis, tak jak poniżej:

<!--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>

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

<!--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 : ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 
<?php endif; ?>

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:

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

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

.aligncenter
{
	display: block;
	margin: auto !important;
}
Treść dostępna po opłaceniu dostępu premium.

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:

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

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:

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

i zamień na:

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

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.

Treść dostępna po opłaceniu dostępu premium.

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:

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

zamień na:

<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>
Treść dostępna po opłaceniu dostępu premium.

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.

/*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>',
	    ));
}

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:

<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>

wklej następujący kod:

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

<?php endif; ?>

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.

widget kategorie

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

wygląd szablonu pracabezszefa z widgetem 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.
Treść dostępna po opłaceniu dostępu premium.

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.
Treść dostępna po opłaceniu dostępu premium. Przy pomocy funkcji schema_breadcrumb() będziesz mógł wywołać lokalizator dla kategorii, strony i wpisu.

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:
Treść dostępna po opłaceniu dostępu premium. 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.

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

Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?
5 (100%) 1 vote

pozycjonowanie stron w projekt marketing

1 komentarz - Jak zrobić własny szablon WordPress przyjazny wyszukiwarkom?

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

Dodaj komentarz

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

Kontakt przez Facebook Messenger