KATEGORIA:

01 – Własny motyw WordPress

własny motyw wordpress

1. WPROWADZENIE

Szkolenie przeznaczone jest dla osób, które znają HTML i CSS. Znajomość języka PHP nie jest potrzebna. W razie pytań zapraszam do kontaktu lub komentowania. Kiedy zaczynałam tworzenie szablonów, żaden kurs mi nie odpowiadał. Długo przewijałam wszystkie wstępy i wprowadzenia zanim pojawiły się zagadnienia, które mnie interesują czyli PRAKTYKA. Tutaj zaczynamy działać już w punkcie drugim. Generalnie, aby mieć szablon, wystarczy stworzyć 10 plików. Pierwszymi trzema zajmiemy się w tym artykule. Do dzieła!

2. TWORZENIE PLIKÓW

Zakładam, że masz zainstalowanego WordPressa na swojej domenie. Wejdź teraz na swój serwer używając FTP, wtyczki NppFTP w Notepad++ lub w jakikolwiek inny sposób. Przejdź do katalogu /public_html/wp-content/themes/ i utwórz tam folder o dowolnej nazwie, np. mojmotyw.
Do tego folderu dodaj następujące puste pliki:

  • style.css – tutaj będziemy definiować wygląd motywu
  • header.php – nagłówek strony
  • footer.php – stopka
  • index.php – szablon głównej strony
  • sidebar.php – panel boczny
  • single.php – szablon jednego wpisu
  • comments.php – szablon formularza do dodawania komentarzy i listy z komentarzami, które już są dodane
  • page.php – szablon podstrony (kontakt, o nas itp.)
  • archive.php – podstrona archiwum – nie jest konieczna
  • search.php – wyniki wyszukiwania – nie są konieczne
  • 404.php – szablon strony błędu
  • functions.php – plik z funkcjami PHP

WYPEŁNIANIE PLIKÓW TREŚCIĄ

STYLE.CSS

Na początku tego pliku należy wkleić poniższy tekst. Znajdują się w nim informacje o szablonie. Kiedy w WordPressie będziemy wybierać szablon, pojawią się tam właśnie te dane.

/*
Theme Name: Nazwa szablonu
Theme URI: Adres URL strony z szablonem
Description: Krotki opis szablonu (mozna tu uzywac linkow i pogrubienia itp.)
Version: numer wersji
Author: Twoje dane
Author URI: adres do strony autora motywu
*/

W motywie WordPress o nazwie Twenty Fiteen wpisano następujące dane. Dodano również tagi, licencję i dodatkową adnotację – nie jest to konieczne.

/*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.7-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, author-bio, black, blue, classic-menu, clean, dark, fixed-layout, fixed-menu, gray, infinite-scroll, light, minimal, modern, pink, purple, responsive-layout, site-logo, white, yellow
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

To co zostało tam wpisane, widoczne jest w podglądzie motywu po lewej stronie jak na zdjęciu poniżej.

twenty

Poniżej można wkleić zawartość pliku bootstrap.css pobranego ze strony getbootstrap.com – i edytować go. Można także pobrać plik bootstrap ze strony getbootstrap.com, umieścić go w folderze obok pozostałych plików i podlinkować w tagu head w pliku header.php.

HEADER.PHP

W tym pliku umieszczamy informacje nagłówkowe.

1. META

Na początku wklejamy linie, które muszą być w kodzie: deklaracja typu dokumentu, deklaracja języka, początek znacznika head, w którym umieścimy ważne informacje nie widoczne na stronie, deklaracja strony kodowej oraz linia odpowiedzialna za responsywność strony. Linijki te w kodzie przedstawione zostały w opisanej kolejności.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">

2. TITLE

Tytułu naszej strony nie wpisujemy na sztywno ponieważ będzie on się zmieniał w zależności od podstrony. Dzięki poniższym dwóm funkcjom w PHP na pasku zakładki widoczny będzie tytuł strony i podstrony oddzielone od siebie myślnikiem jak na zdjęciu.

<title>
	<?php wp_title('-', true, 'right'); ?>
	<?php bloginfo('name'); ?>
</title>

title

 

3. STYLE

Następnie zamieszczamy deklarację arkusza stylów.

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

4. NAGŁÓWEK

W tym tutorialu przygotujemy motyw z takim samym nagłówkiem na każdej stronie i ten nagłówek umieścimy w tym pliku. Dlatego umieszczamy jeszcze trzy funkcje w tagach header.

<header>
	<?php echo get_option('home'); ?> - wyswietla adres strony glownej
	<?php bloginfo('name'); ?> - wyswietla nazwe bloga
	<?php bloginfo('description'); ?> - wyswietla opis bloga
</header>

Na koniec, przed tagiem zamykający head dodamy dwie linie.

<?php wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

Pierwsza linia umożliwi obsługę komentarzy na stronie. Druga jest używana przez wtyczki kiedy do sekcji head należy dodać jakąś treść.

Cały kod, który powinien być umieszczony w pliku header.php powinien wyglądać następująco.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title><?php wp_title('-', true, 'right'); ?><?php bloginfo('name'); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php wp_enqueue_script( 'comment-reply' ); ?>
	<?php wp_head(); ?>
</head>

<body>

<header>
	<?php echo get_option('home'); ?>
	<?php bloginfo('name'); ?>
	<?php bloginfo('description'); ?>
</header>

<div class="content"> // ten tag zamkniemy w footer.php
		<div id="content" class="site-content"> // ten tag zamkniemy w index.php

Jeżeli zdecydowaliśmy się na dodanie osobnego pliku bootstrap.css należy go także podlinkować w tagu headtak samo jak w przypadku pliku style.css – w miejscu stylesheet_url umieszczamy właściwą ścieżkę.

Otwieramy tagi bodydiv i footer – musimy pamiętać, aby zamknąć je w plikufooter.php.

STOPKA

W tym pliku zamykamy tagi DIVHTML oraz BODY. Przed znacznikiem body umieszczamy linijkę
<?php wp_footer(); ?>

Przykładowy kod, który może znaleźć się w stopce.

</div> <!-- zamykamy tag content otwarty w pliku header.php -->

<footer>
	<div class="copyright">
		<p>Projekt i wykonanie strony: </p>
		<a href="http://www.rejkowicz.pl"> rejkowicz.pl</a>
	</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

PODSUMOWANIE

W tym artykule zacząłeś tworzyć własny motyw WordPress. Utworzyłeś 12 pustych plików i wstępnie wypełniłeś trzy z nich: style.css, header.php, footer.php. W następnym artykule zajmiemy się stroną główną – na stronie zobaczysz już efekty swojej pracy. Zapraszam.

Kolejny artykuł – kurs 02 – tworzenie strony głównej

KOMENTARZE

  1. Kurcze

    Czy moglibyście używać słowa motyw a nie szablon, próbuje znaleźć poradnik do utworzenia szablonu ale wasza strona jest już kolejną w której aż do tworzenia plików nie ma powiedziane że chodzi o motyw a nie sablon

    1. Cześć! 🙂 Jak napisałam na początku wpisu: „Szkolenie przeznaczone jest dla osób, które znają HTML i CSS. Znajomość języka PHP nie jest potrzebna. W razie pytań zapraszam do kontaktu lub komentowania.”. Wklejenie bootstrapa polega na jego wklejeniu 🙂 Wchodzimy na stronę http://getbootstrap.com/, pobieramy plik i kopiujemy jego zawartość jako przykład, na którym można bazować. Wklejamy do naszego style.css. Oczywiście nie trzeba tego robić, można napisać swój własny kod.

Dodaj komentarz

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