W tym artykule dowiesz się, jak dobrze napisać swój własny, dedykowany motyw do systemu zarządzania treścią, jakim jest WordPress – najpopularniejszy CMS. Jest to tak w zasadzie krótki, darmowy kurs z tworzenia swojego własnego motywu. Ten wpis jest dedykowany dla osób, które znają chociażby podstawy HTML, CSS i ewentualnie JavaScript, który niekoniecznie jest wymagany. Motyw WordPressa działa także przy użyciu PHP, dla bardziej zaawansowanych także SQL. Natomiast ten artykuł będzie opisywał jedynie HTML i CSS, PHP oczywiście również będzie, jednak będzie on dokładnie objaśniony w jakim celu znajduje się w motywie.
Ten artykuł jest o stworzeniu prostego szablonu WordPressa, bez wielu ciekawych funkcji PHP’owych i dodatków JS’a, ponieważ jest on skierowany do osób początkujących. Zalecam zapoznać się z dokumentacją WordPressa w celu zwiększenia wiedzy na ten temat. Do pobrania będzie także motyw gotowy do edycji i wdrożenia. Nie będziemy wchodzić zbytnio w zagadnienia PHP, będzie można go przekleić do motywu i kontynuować pracę nad wyglądem (frontendem) strony.
Na samym początku zalecałbym przejrzeć przykładowe strony wykonane na prostych motywach WordPressa. Natomiast ciężko jest znaleźć je w sieci bez żadnych dodatkowych funkcji, dlatego przykładowy motyw będzie do pobrania na końcu poradnika. Dzięki temu o wiele łatwiejsze będzie zrozumienie konstrukcji plików motywu. Kiedy już zrozumiesz jak działa motyw WordPressa i poukładasz wszystko w głowie, zalecam sprawdzenie dokumentacji WordPressa dla developerów, kliknij tutaj aby przejść na stronę.
Bootstrap to biblioteka CSS rozwijana przez programistów Twittera, jest jednym z popularniejszych bibliotek frontendowych do tworzenia prostych stron. Zawiera on style i skrypty dynamicznej strony, przez co znacznie szybciej możemy przejść przez proces tworzenia strony czy samego motywu. Oczywiście nie jest on wymagany do działania motywu, jednak zalecam przestudiowanie biblioteki Bootstrapa, ze względu na prostotę oraz mechanizm działania responsywnej strony. Bootstrap oparty jest na systemie Flexboxowym (Flexbox Generator znajdziesz tutaj), co sprawia, że strona w prosty sposób staje się responsywna.
Plików wymaganych jest zaledwie dwa. Oczywiście jest zalecanych więcej. W hierarchii możecie znaleźć jak działają pliki, a zaraz wytłumaczę dokładniej, o co chodzi.
Po przeanalizowaniu tego obrazka, możemy mieć mały mętlik w głowie. Przed chwilą pisałem o dwóch plikach, a teraz nagle jest ich całe stado. Otóż 2 pliki to jest minimum wymagane do włączenia motywu. Zaleca się utworzenie większej ilości plików, ze względu na to, że dzięki temu możemy zrobić bardzo ciekawą i rozbudowaną stronę WWW z dynamicznymi szablonami.
Dwa wymagane pliki to style.css oraz index.php.
Obrazek powyżej może jeszcze na tym etapie nie być tak bardzo zrozumiały, dlatego wszystko opisze w poszczególnych rozdziałach poniżej. Rozpiszę także jak będzie wyglądać podstawowa struktura plików motywu.
*moj_motyw
|
|---assets
| |-img
| | |-logo.png
| |
| |-styles
| | |-bootstrap.min.css
| | |-style.css
| | |-contact-page.css
| | |-front-page.css
| |
| |
| |-scripts
| | |-bootstrap.min.js
|
|- style.css
|- index.php
|- functions.php
|- front-page.php
|- header.php
|- footer.php
|- page-kontakt.php
|- page.php
|- single-post.phpGdy tylko utworzymy te dwa pliki, to już w tym momencie możemy zapakować i wrzucić przez upload WordPressa, bądź przez FTP. Aby rozpoznać, który motyw jest nasz, zalecane jest dodanie zdjęcia o nazwie „screenshot.png” i rozmiarach 1200x900px. Gdy wrzucimy go do katalogu motywu w najwyższym poziomie (root), wtedy WordPress samoistnie zaciągnie obrazek i ustawi go na motywie.
W tym pliku należy (oczywiście oprócz samych styli CSS) zapisać informacje takie jak autor motywu, wersja, nazwa itp. Poniżej przedstawiam fragment kodu style.css:
/*
Theme Name: Motyw firmy xyz
Author: Modern-Websites.pl
Author URI: https://modern-websites.pl/
Description: Modern-Websites.pl Template
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');W tym fragmencie należy na górze pliku zapisać (w komentarzu) poszczególne informacje dotyczące motywu. Poniżej także możemy kontynuować pisanie styli, jednak niekoniecznie musi być w tym samym pliku. Równie dobrze można zapisać style w innych plikach, ba, nawet innego folderu. Ważne jest, aby po prostu znajdował się plik style.css w najwyższym folderze motywu, z informacjami opisującymi dany motyw. To czy będą tam style do całej strony, to już jest nie ważne. Tak jak wspominałem, możemy utworzyć folder „assets” w a nim kolejny folder „styles” i tam poszczególne style np. front-page.css, czy style.css.
Jest to plik na samym dole hierarchii plików WordPressa. To znaczy, że gdy utworzymy podstronę „kontakt”, a nie umieścimy w motywie pliku „page-kontakt.php” wtedy WordPress sprawdzi, czy są inne pliki, które pasują do kategorii tej strony. Gdy nie będzie, wtedy index.php zadziała na stronie kontaktu. Index.php oddziaływuje na wszystkie inne podstrony, które nie mają plików-ojca.
Plik index.php może być pusty, jeśli będziemy pewni, że żadna strona nie będzie z niego zasysać wzoru, tzn. jeśli każda podstrona będzie miała swojego „ojca”. Natomiast, dla bezpieczeństwa możemy umieścić w nim taki fragment kodu:
<?php get_header(); ?>
<?php the_content(); ?>
<?php get_footer(); ?>Jest to bezpieczniejsza metoda, ponieważ jesteśmy pewni, że do pliku bez ojca zostanie pobrany plik header.php, treść strony z edytora WordPressa oraz footer.php
Plik ten rozpoczyna wczytywanie zawartości strony i powinien się znaleźć praktycznie w każdym pliku zawierającym szablon strony WWW, między innymi index.php, front-page.php, page-kontakt.php, page.php czy też single-post.php
Fragment kodu zależy od nas samych, jednak jest parę ważnych elementów, których nie powinno się pominąć:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="shortcut icon" href="<?=get_template_directory_uri();>/favicon.ico" />
<title><?php wp_title(''); ?></title>
<link href="<?=get_template_directory_uri()?>/assets/styles/bootstrap.min.css" rel="stylesheet">
<link href="<?=get_template_directory_uri()?>/assets/styles/style.css" rel="stylesheet">
<link href="<?=get_stylesheet_uri()?>" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<?php wp_body_open(); ?>
<header>
<div>
<img src="<?=get_template_directory_uri()?>/assets/img/logo.png">
</div>
</header>Jeden ze skryptów pobiera język WordPressa (zalecane jest także ustawienie języka w WordPressie w ustawieniach globalnych, aby strona była czytana jako PL).
Jest to bardzo prosty przykład sekcji header. Natomiast nie chodzi tutaj o sam header, a o HEAD strony – jest tu zawarte wiele informacji, które zasysane są z WordPressa, np. dodatkowe klasy body – każda podstrona posiada swoje ID, które jest dodawane do klas. Znajdziemy także dodatkowe skrypty z ustawienia języka strony, tytułu, czy kodu do sekcji Head, który WordPress sam dodaje, aby mógł poprawnie działać (zwłaszcza jest wymagany, gdy stosujemy wtyczki).
Natomiast już w samym body – dodałem fragment header, w którym to dodałem logo za pomocą dynamicznego adresu URL do naszego motywu.
Początek mamy, czas na zakończenie. Treść natomiast będzie dynamicznie dodawana ze względu na rodzaj otwieranej strony. Ważne żeby zamknąć body i html.
<footer>
<p>Tutaj znajduje się footer</p>
</footer>
<?php wp_footer(); ?>
<script src="<?=get_template_directory_uri();>/assets/scripts/bootstrap.min.js"></script>
</body>
</html>Noo… więc większość zabawy z funkcjami WordPressa mamy za sobą. Nie było takie trudne, prawda? Teraz zostały tylko kosmetyczne elementy – poustawiać jakie zasoby ma zaciągać WordPress do szablonu i wyświetlać użytkownikowi podczas otwierania strony.
Tutaj zalecana jest większa wyobraźnia. Będzie to nasza strona docelowa, home page, czyli miejsce, do którego trafi użytkownik po wpisaniu adresu naszej domeny np. modern-websites.pl
Tutaj kreatywność zależy całkowicie od Was. Natomiast jak w przypadku praktycznie każdego pliku, zalecane jest zassanie sekcji header i footer. Wyglądać to będzie mniej więcej tak:
<?php
function mypage_head() {
echo '<link rel="stylesheet" type="text/css" href="'.get_template_directory_uri().'/assets/styles/front-page.css">'."\n";
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>
<div class="container">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php get_footer(); ?>Dla tych, którzy zastanawiają się jeszcze, co to takiego za funkcja pojawia się nad headerem. Jest to nic innego, jak funkcja, która dodaje element w danej podstronie. W tym przypadku, chcemy zoptymalizować stronę – u nas strona główna będzie najbardziej rozbudowana, dlatego nie chcemy dodawać styli z front page do style.css, bo będzie wczytywane wszędzie, nawet na stronie kontaktu czy galerii, co zmniejsza prędkość wczytywania strony. W tym celu, dodajemy fragment kodu funkcji, która dodaje font-page.css TYLKO i wyłącznie w tym przypadku – na stronie głównej.
Funkcja the_title oraz the_content zasysają z edytora WordPressa takie informacje jak nazwa postu oraz zawartość z edytora. W zawartości możemy dodawać zdjęcia, teksty, filmiki i wiele wiele więcej np. dzięki Gutenbergowi.
Single-post.php oraz page.php to dwa pliki, które działają podobnie. Możemy ustawić je tak samo. Z tym wyjątkiem, że to co napiszemy w single-post.php będzie dotyczyło postów WordPressa, a w page.php będzie dotyczyła podstron. Dlatego na np. single-post możemy ustawić sidebar, z ciekawym Call To Action, a w stronie statycznej możemy przygotować jakieś CTA na samym dole strony.
Można zastosować kod podobny do tego z front-page, jednak z małymi zmianami:
<?php get_header(); ?>
<div class="container">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php get_footer(); ?>Jak widzimy, nie ma tutaj już dodania styli z front pagu.
Czas na statyczną podstronę kontaktu:
<?php get_header(); ?>
<div class="container">
<h1>Kontakt</h1>
<p>Skontaktuj się z nami: mail@webowy.pl </p>
</div>
<?php get_footer(); ?>W tym szablonie możemy pisać wygląd tylko do podstrony „kontakt”. Zamiast napisu kontakt, może być ID strony.
Plik zrobiony całkowicie z PHPa. Jest to plik dla bardziej zaawansowanych użytkowników, nie zaleca się jego edycji, ze względu na możliwość popełnienia wielu krytycznych błędów mogących spowodować wyłączenie strony, a w niektórych przypadkach nawet zablokować dostęp do WordPressa, co będzie wiązać się z możliwością wyłączenia motywu jedynie przez FTP.
Plik tej jest świetny, jeśli wiemy co robimy – dzięki niemu możemy w ciekawy sposób zoptymalizować stronę np. przez wyłączenie komentarzy.
<?php
/* Change excerpt length */
function wplab_custom_excerpt_length( $length ) {
return 30;
}
add_filter( 'excerpt_length', 'wplab_custom_excerpt_length', 999 );
/* WIDGETS FUNCTION*/
if (function_exists ("register_sidebar")) {
register_sidebar ();
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
/* FEATURED IMAGE */
add_theme_support( 'post-thumbnails' );
?>Zalecam użycie (dla początkujących) jedynie tych funkcji – pierwsza ustawia długość zajawki we wpisach na blogu, druga włącza możliwość tworzenia widgetów (na razie nie aż tak potrzebne), trzecia natomiast pozwala dodawanie wyróżniających obrazków do wpisów i stron (zalecane).
Dla tych średniozaawansowanych prezentuję też możliwość dodania szablonu strony. Dzięki niemu, możemy wybrać z jakiego szablonu ma być pobierana strona. W tym celu należy stworzyć plik np. template-inne.php i w nim umieścić komentarz z dopiskiem „Template Name”:
<?php
/* Template Name: Szablon innych stron */
?>
<?php get_header(); ?>
<div class="container-fluid py-5">
<div class="container-xxl text-center">
<h1 class="pb-4"><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
</div>
<?php get_footer(); ?>Dzięki temu, strona będzie mogła zmienić szablon wyglądu – np. strona galerii będzie pobierała wygląd z tego szablonu, a strona oferty z innego, możemy tworzyć tyle szablonów ile nam się podoba!
Dla bardziej zaawansowanych jest możliwość zainstalowania wtyczki Advanced Custom Fields, która umożliwia dodawanie innych pól do edycji. W różnych lokalizacjach możemy dodawać treści np. w sidebarze tekst dla danego wpisu czy podstrony. Jednak jest to temat na inny artykuł, ten dotyczył tylko budowania podstawowego motywu WordPressa.
Za niedługo dostępny będzie .zip z możliwością pobrania i testowania np. na localhost
Sprawdź nasze inne wpisy
Spis treści Ile kosztuje strona internetowa w agencji interaktywnej / marketingowej w 2024 roku? Widełki cenowe w przybliżeniu na rok 2024: Krótki wstęp o stronach WWW Uświadom sobie, co tak […]
Spis treści Wyzwania Rozwiązania Aktualizacja – Generatory Podsumowanie i wyniki EternalCrystals.pl to ekskluzywny sklep internetowy, który oferuje szeroki wybór kamieni ezoterycznych, w tym ametystu, kwarcu różowego, cytrynu i wielu innych. […]
Spis treści Dobre prowadzenie Social Mediów – Facebook i Instagram Reklama w Social Mediach – sposób na zapchany kalendarz Strona Internetowa Dobre prowadzenie marki Wizytówka w Google Maps Ogłaszanie się […]