Praktycznie każdy po zainstalowaniu nowego motywu (themplate) w WordPress chce wprowadzić w nim jakieś zmiany.
Jeden chce zmienić styl wypunktowania a inny np. dodać kolejne miejsce na widety. Bo akurat chcemy je też umieszczać w innym miejscu. W efekcie wprowadzenia takich zmian nie jesteśmy już wstanie aktualizować używanego przez nas motywu. Aktualizacja wiązała by się bowiem z usunięciem naszych „poprawek”. Jak zaprawne część osób miała okazję się przekonać nie aktualizowanie motywu niesie jednak ze sobą pewne ryzyko. Nasz WordPress staje się podatny na różnego typu ataki pochodzące z sieci.
Zostają nam w takiej sytuacji dwie opcje zbudować własny szablon lub utworzyć motyw potomny.
Czym jest motyw potomny (ang. Child theme)
Jak sama nazwa sugeruje jest to motyw dziedziczący cechy swojego rodzica. Motyw ten w pewnym sensie jest idealną kopią rodzica. Bez konieczności ręcznego kopiowania każdego pliku z osobna. Jedyna różnica polega na tym że możemy realizować w nim nasze pomysły nie martwiąc się o utratę wszystkich zmian po aktualizacji. W efekcie bez żadnych obaw możemy aktualizować źródłowy motyw – bez większych obaw (chyba że autor szablonu dokona w nim wielkiej rewolucji).
Na potrzeby tego kursu przygotujemy szablon potomny dla domyślnego szablonu Twenty Fifteen.
Budowa szablonu potomnego
Nowy szablon umieszczamy w lokalizacji wp-content/themes czyli w tym samym miejscu co pozostałe szablony. Następnie nadajemy mu nową nazwę np. „nowyszablon”
Plik style.css
Pierwszym plikiem, który powinien się znaleźć w potomnym szablonie jest style.css
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
Metoda ta zalecana jest przez oficjalną stronę WordPress lub po prostu
/* Theme Name: Nowy Szablon Template: twentyfifteen */
Trochę tłumaczeń
- Theme Name – nazwa nowego szablonu
- Template – nazwa „rodzica” źródłowego szablonu
- Description – opis
- Tags – tagi opisujące szablon
- Version – wersja
- License – licencja
W kolejnym kroku dodajemy do niego style.css rodzica dopisując poniżej:
@import url("../@import url("../twentyfifteen/style.css");/style.css");
Poniżej możemy już dowolnie wprowadzać zmiany np. dodać nowy font. Dobrym źródłem mogą być Google Fonts.
http://www.aurainweb.pl/2014/01/google-fonts-fonty-na-twoja-strone-internetowa/
Plik functions.php
Teraz pora dodać kolejny niezbędny plik dla naszego szablonu – functions.php
<?php add_action( 'wp_enqueue_scripts', 'twentyfifteenchild_enqueue_styles' ); function twentyfifteenchild_enqueue_styles() { $parent_style = 'twentyfifteen'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'twentyfifteenChild', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); }
Składamy i modyfikujemy motyw potomny
Na początek trzeba włączyć szablon potomny w CMS. Teraz wprowadzimy kilka zmian tak by nasz szablon różnił się od rodzica. Zaczniemy może od zmiany kroju tekstu. Następnie zmienimy może nieco jego kolory.
Pracę w tym przypadku ułatwi nam narzędzie wbudowane w przeglądarkę Chrome lub Firefox. Możecie o nim poczytać poniżej:
http://www.aurainweb.pl/2018/04/jaki-font-czcionka-zostal-uzyty-na-stronie/
Dla nie lubieżniejszych za dużo czytać klikamy F12 na klawiaturze.
Na początku moja strona wygląda tak.
Osoby znające Twenty Fifteen z pewnością zauważą, że strona wygląda jak bym aktualnie korzystała z tego szablonu. I o to w tym chodzi – szablon potomny jest bowiem w pewnym sensie nakładką na swojego „rodzica”. Teraz z pomocą narzędzi developera zaznaczę nagłówek.
Do zaznaczania służy obiekt podświetlony na obrazku powyżej.
Teraz kiedy mamy zaznaczony nagłówek. Widzimy jego kod. Co możemy wywnioskować:
- nagłówek <h1></h1>
- posiada class=”entry-title”
Po prawej widzimy też jego kod CSS. Dla ułatwienia to co dotyczy się naszego obiektu jest w ciemniejszym kolorze. Szare style z kolei dotyczą się innych obiektów kontestacyjnych z tych samych ustawień.
Jak widać mamy tu tylko określony rozmiar fontu i odległość pomiędzy liniami. Podlinkowałam wam wpisy na temat tych właściwości.
Teraz skrolujemy w celu określenia miejsca gdzie znajduje się nasz font. Bo to jego chcemy podmienić.
Jak widać poniżej font był ustawiony dość nisko i to dla całej strony. Poniżej możecie zobaczyć jak to działa w praktyce:
Powyższy obraz dzieli się na 3 części.
- to fragment strony z oryginalnym fontem.
- fragment kodu z fontem w CSS.
- fragment po wyłączeniu fontu
Jak widać mała zmiana a swoje robi.
Teraz pobiorę 2 różne fonty z Google Fonts. Wcześniej umieściłam już link do tutoriala o tym jak korzystać z tej aplikacji.
Jak widać wybrałam:
- ’Roboto’,
- ’Oswald’
Teraz kod:
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto&display=swap&subset=latin-ext');
Dodam do pliku style.css
Od tego momentu mogę obu krojów używać na mojej stronie. Teraz skopiuję fragment kodu CSS z ustawieniami fontu dla strony i go zmodyfikuję.
body, button, input, select, textarea{
font-family: 'Roboto', sans-serif;
}
Następnie dodam go również do moich styli. Pod importem fontu. Teraz chce by nagłówek miał jednak inny wygląd niż reszta strony. Dlatego też zmodyfikuję też fragment, który był wyżej.
.entry-title, .widecolumn h2{
font-family: 'Oswald', sans-serif;
}
A mój kod wygląda razem tak:
Po zapisaniu i wgraniu zmodyfikowanych styli moja strona prezentuje się następująco:
No dobrze zmodyfikowaliśmy nagłówek strony. A teraz jak zmodyfikować nagłówek w treści?
Poniżej na obrazku znajduje się taki przykładowy nagłówek.
Nasz nagłówek będziemy modyfikować poprzez pracę na <h2>. <span> pochodzi bowiem od zainstalowanej wtyczki, która nie wpływa na wygląd. Jak widać po CSS nasz obiekt ma nadrzędną klasę .entry-content. W WordPress klasa ta nadawana jest kontenerom, w których umieszczana jest treść wpisu lub strony.
Teraz ponownie skopiuje klasy. I nieco zmodyfikuje kod mojego motywu:
.entry-title, .widecolumn h2, .entry-content h2, .entry-summary h2, .page-content h2, .comment-content h2{
font-family: 'Oswald', sans-serif;
}
Teraz po odświeżeniu strony mój kod wygląda tak:
Zmiana koloru tekstu
Dla odmiany teraz pokolorujemy wszystkie nagłówki na stronie. Zmianę koloru również może nam ułatwić to narzędzie. W tym celu najedziemy kursorem myszy w miejsce jak na obrazku poniżej. Na początku pojawią się 3 kropki w które trzeba kliknąć.
Interesuje nas przycisk z literką A. Musimy w niego kliknąć. Otworzy się w tedy taka paleta:
Po wybraniu z niej koloru będziemy mogli zobaczyć jak prezentuje się on na stronie. Jeśli kolor nam się podoba dodajemy go do naszego pliku z stylami.
Pamiętajcie by zwrócić uwagę jak opisany jest element w „rodzicu” by odpowiednio zmodyfikować go w „dziecku”.
Teraz mój kod style.css wygląda następująco:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto&display=swap&subset=latin-ext');
body, button, input, select, textarea{
font-family: 'Roboto', sans-serif;
}
.entry-title, .widecolumn h2, .entry-content h2, .entry-summary h2, .page-content h2, .comment-content h2{
font-family: 'Oswald', sans-serif;
}
.entry-content h2{
color: #673AB7;
}
W tym przykładzie zmodyfikowałam tylko style.css zmian można również dokonać w functions.php. Dobry przykład znajdziecie w poniższym wpisie:
http://wordpress.aurainweb.pl/2019/04/03/jak-zmienic-sposob-wyswietlania-ceny-dla-produktu-z-wariantami/#comment-4659062739
