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.
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>
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 head
tak samo jak w przypadku pliku style.css – w miejscu stylesheet_url
umieszczamy właściwą ścieżkę.
Otwieramy tagi body
, div
i footer
– musimy pamiętać, aby zamknąć je w plikufooter.php
.
STOPKA
W tym pliku zamykamy tagi DIV
, HTML
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="https://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.
Dobry poradniczek! Dzięki za wyświetlenie tego tematu!
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
Już poprawiam! 🙂 A odnośnie szablonu, zapraszam: TUTAJ.
Pozdrawiam!
Link do kolejnej części artykułu nie działa 🙁
Dziękuję za informację! Już jest ok, w razie czego: https://rejkowicz.pl/blog/02-wlasny-motyw-wordpress/. Pozdrawiam! 🙂
Niestety jako początkująca nie wiem jak wkleić bootstrapa…
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.
hej, a będzie może następny poradnik własny motyw woocomerce?