W sieci dostępnych jest wiele motywów startowych, przez co początkujący użytkownik może mieć niemałe problemy z wyborem odpowiedniego dla siebie. Właśnie dlatego chciałam przedstawić mój ulubiony motyw startowy Underscores ( w skrócie _s). Jest on bardzo minimalistyczny, przejrzysty i bez wątpienia posiada wielki potencjał. Wykorzystując go można łatwo i szybko stworzyć własny niepowtarzalny motyw.
Spis treści
Czym jest motyw startowy Underscores
Słowo „underscore” w tłumaczeniu oznacza dolne podkreślenie. Po dodaniu na końcu literki „s” uzyskujemy nazwę Underscores. Motyw rozwijany jest przez firmę Automattic. Domyślne motywy WordPressa oparte są właśnie o Underscores. Ponadto wiele motywów dostępnych na ThemeForest jest wykonanych na jego bazie. Wykorzystując motyw startowy Underscores, oszczędzamy około 1000 godzin pracy, jaką musielibyśmy włożyć, aby stworzyć wszystko od podstaw! Underscores nie jest motywem od razu gotowym do użytku. A to dlatego, że jest bardzo minimalistyczny i cała oprawa graficzna wymaga naszej interwencji. Świeżo po zainstalowaniu wygląda jak na poniższym screenie.
Z pewnością jego wielką zaletą jest to, że nie posiada zbędnych elementów. Twórcy nie narzucają nam swojej inwencji. Kod jest lekki i stanowi jedynie szkielet. Motyw startowy Underscores nie jest frameworkiem. Nie powinno się go używać jako motyw potomny. Owszem nikt Ci tego nie zabroni, ale mija się to z celem i z jego przeznaczeniem. Tyle samo pracy włożyłoby się w dostosowanie motywu potomnego, jak w stworzeniu go od zera wykorzystując Underscores jako bazę. Underscores jest projektem Open Source na licencji GPL. Dzięki temu można go używać zarówno do projektów darmowych, jak i komercyjnych.
Jak zdobyć motyw startowy Underscores
Motyw możemy pobrać z oficjalnej strony https://underscores.me. Wystarczy jedynie wpisać wymyśloną nazwę motywu i kliknąć generate. Zostanie ona użyta między innymi jako prefiks funkcji. Jeśli chcemy, możemy również skorzystać z zaawansowanych opcji.
Pozawalają one między innymi na ustawienie krótszego prefiksu (pole Theme Slug). Sprawdza się to w sytuacji, gdy chcemy wpisać długą nazwę dla naszego motywu. Wtedy inna będzie nazwa motywu, a inny prefiks. Poza tym możemy wpisać nazwę autora (Author), adres jego strony (Author URI) oraz opis motywu (Description). Ponadto, możemy nasz motyw zintegrować z SASS lub z WooCommerce.
Rzut okiem na strukturę plików
Poniżej przedstawiam najważniejsze pliki znajdujące się w motywie startowym Underscores.
style.css
To właśnie tutaj znajdują się wszystkie deklaracje opisujące wygląd naszego motywu. Jeśli podczas generowania nowego projektu zaznaczymy opcję integracji motywu z SASS, otrzymamy dodatkowo folder o nazwie SASS. Znajdują się w nim posegregowane pliki z kodem CSS.
header.php
Znajduje się tu cała zawartość znacznika <head>. Ponadto plik zawiera nagłówek strony <header>. W nagłówku tym umieszczone jest logo oraz menu główne. W pliku header.php możemy znaleźć otwierający znacznik <body>. Jednak nie znajdziemy znacznika zamykającego, który jest w oddzielnym pliku footer.php. Nagłówek dodajemy do strony za pomocą znacznika <?php get_header(); ?>.
footer.php
Tu właśnie znajdziemy znacznik zamykający </body> oraz przede wszystkim stopkę naszego motywu. Stopkę dodajemy do strony za pomocą znacznika <?php get_footer(); ?>.
index.php
Plik ten opisuje wygląd strony głównej. Tu znajduje się serce naszego bloga, czyli pętla główna. W sytuacji, gdy dana strona bloga nie jest opisana żadnym szablonem, do akcji wkracza właśnie index.php, który służy jako szablon domyślny.
archive.php
Plik ten opisuje wygląd archiwum.
404.php
Plik wyświetla się w sytuacji, gdy użytkownik zechce wejść na podstronę, którą usunęliśmy lub gdy źle wpisze adres. Warto wyświetlić Użytkownikowi komunikat informujący o tym, że dana podstrona nie istnieje.
comments.php
Tu znajdziemy deklaracje opisujące wygląd sekcji z komentarzami.
functions.php
Plik ten w przeciwieństwie do swoich poprzedników nie służy jako szablon. Tu znajdują się funkcje odpowiadające za zachowanie naszego motywu.
sidebar.php
Plik opisujący wygląd paska bocznego. Aby dodać pasek boczny do strony, używamy znacznika <?php get_sidebar(); ?>.
single.php i content.php
Plik single.php opisuje stronę z pojedynczym wpisem. Znajdziemy w nim odwołanie do pliku content.php poprzez funkcję get_template_part( 'template-parts/content', get_post_type() );.
Plik content.php znajdziemy w folderze template-parts. Opisuje on
wygląd pojedynczego wpisu zawartego w semantycznym znaczniku
<article>.
search.php, content-search.php i content-none.php
Plik search.php opisuje wygląd wyników wyszukiwania. Znajdziemy w nim instrukcję warunkową. Jeśli po wpisaniu danego słowa kluczowego wyszukiwarka znajdzie posty, to wyświetlany jest szablon content-search.php. W przeciwnym wypadku wyświetli content-none.php.
page.php i content-page.php
Plik page.php opisuje domyślny wygląd statycznych stron bloga
(utworzonych w dziale Strony – >Dodaj nową). Znajdziemy w nim
odwołanie do pliku content-page.php poprzez funkcję get_template_part( 'template-parts/content', 'page' );.
Plik content-page.php (znajdziemy go w folderze template-parts) zawiera
szablon pojedynczego wpisu dla strony opartej o szablon page.php.
rtl.css
Arkusz stylów pozwalający na szybkie dodanie obsługi dla języków pisanych od prawej do lewej.
content-sidebar.css i sidebar-content.css
Są to arkusze stylów pozwalające na ustawienie paska bocznego po prawej lub lewej stronie. Oba pliki znajdują się w folderze layouts.
folder language
W folderze tym znajdziemy plik z rozszerzeniem .pot. Jest to szablon tłumaczenia motywu.
custom-header.php
Plik znajduje się w folderze inc. Pozwala dodać zdjęcie nagłówkowe. Wystarczy w dowolnym miejscu w kodzie umieścić deklarację the_header_image_tag();. Zdjęcie można dodać poprzez panel administracyjny (Personalizacja -> Obrazek w nagłówku).
customizer.php
Plik znajduje się w folderze inc. Poprzez plik customizer.php możemy dodawać nowe opcje do naszego motywu. Są one wtedy widoczne z poziomu panelu administracyjnego.
customizer.js
Skrypt, dzięki któremu zmiany w pliku customizer.php są od razu widoczne na stronie. Znajduje się w folderze js.
navigation.js
Skrypt odpowiedzialny za wyświetlanie menu mobilnego na mniejszych ekranach. Znajduje się w folderze js.
skip-link-focus-fix.js
Skrypt pozwalający nawigować za pomocą klawiatury. Znajduje się w folderze js
Podsumowanie
Motyw startowy Underscores przede wszystkim urzekł mnie swoją prostotą. Prawie zawsze go używam, ponieważ dzięki niemu oszczędzam dużo czasu, który poświęcam na wykańczanie swoich projektów. Z pewnością dużym plusem jest możliwość automatycznego zintegrowania motywu z SASS już podczas generowania. To jest również duże ułatwienie. Oczywiście w swojej pracy nie ograniczam się do używania tylko Underscores. Jednak wydaje mi się, że jest on godny polecenia.
A czy Ty korzystasz z jakiegoś motywu startowego? Jeśli tak, to podziel się nim w swoim komentarzu. Edit Motyw startowy Underscores