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”

GOTOWY SZABLON

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.

1. to fragment strony z oryginalnym fontem.
2. fragment kodu z fontem w CSS.
3. 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

DEMO

Artykuł Motywy potomne WordPress (Child theme) jak dostosować motyw do własnych potrzeb pochodzi z serwisu Kurs WordPress od podstaw.

Domyślą funkcją umieszczania obrazka wyróżniającego (z ang. thumbnail) we wpisach jest:

the_post_thumbnail();

z jej pomocą obrazki wyświetlane są w formie zwykłej ikony o kreślonych wymiarach. Efekt jest więc taki jak byśmy dodali grafikę ręcznie do wpisu lub na zwykłej stronie.

Jak dodać obrazek wyróżniający (thumbnail) w tle

W celu dodania obrazka thumbnail w tle dowolnego obiektu blokowego HTML (np. div, article) na stronie musimy napisać odpowiednią funkcję PHP. Przykładowo może ona wyglądać tak:

<?php if (has_post_thumbnail( $post->ID ) ): ?>
  <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
  <div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">
  </div>
<?php endif; ?>

W powyższym przykładzie dodaliśmy ilustrację jako tło dla elementu DIV.

Trochę teorii – czyli jak to działa

Poniższy warunek sprawdza czy dany wpis posiada przypisany obrazek. W przypadku jego braku funkcja się nie wykona.

<?php if (has_post_thumbnail( $post->ID ) ): ?> <?php endif; ?>

Teraz pobieramy adres naszego obrazka i przypisujemy go do zmiennej $image.

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>

Kolej na wypisanie naszego obrazka. W tym celu przyda nam się właściwość CSS background-image.

<div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')"> </div>

Poniższy kod opisałam dość ogólnie. Nie powinien jednak on sprawiać większych problemów.

http://wordpress.aurainweb.pl/jak-dodac-ikone-wpisu-do-wordpress/

Źródła:

• https://stackoverflow.com/questions/11261883/how-to-get-wordpress-post-featured-image-url
• https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/
• https://developer.wordpress.org/reference/functions/the_post_thumbnail/

Dodatkowe tagi:
miniaturka, obrazek wyróżniający, thumbnail jako tło a nie grafika
obrazek w tle nagłówka posta
wordpress obrazek w tle
dodanie obrazka do nagłówka
ikona wpisu

Artykuł Jak umieścić obrazek wyróżniający jako tło wpisu WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Obecnie na rynku jest ich całkiem sporo (zarówno tych darmowych jak i płatnych). Bardzo często jednak najbardziej odpowiednie i w naszym guście wydają się nam motywy (szaty graficzne) zobaczone na innych witrynach. I tu pojawia się pytanie jak nazywa się ta konkretna skórka?

Jak sprawdzić z jakiego motywu (szablonu) korzysta strona oparta o WordPress?

Istnieje kilka sposobów na ustalenie nazwy wykorzystywanego przez stronę motywu. WordPress stosuje stałe nazwy katalogów więc ustalenie nazwy skórki dla doświadczonego użytkownika nie stanowi problemu.

Sprawdzenie w kodzie strony

Do sprawdzenia jakiego motywu aktualnie używa strona nie potrzeba wcale specjalistycznej wiedzy. Wystarczy sprawdzenie w kodzie strony ( prawy przycisk myszy -> źródło strony lub wyświetl źródło strony) w jakim katalogu znajduje się np. plik style.css lub pliki JavaScript (.js). Najłatwiej jest szukać po style.css ponieważ jest to standardowy plik motywu.

Lokalizacja mojego pliku CSS to:
http://www.aurainweb.pl/wp-content/themes/blog/style.css

Gdzie link składa się z adresu strony, katalogów wp-content/themes (katalogi gdzie instaluje się domyślnie motywy – ten fragment jest taki sam we wszystkich WordPress). Plik style.css znajduje się w WordPress zawsze w katalogu głównym motywu tak więc łatwo ustalić, że mój motyw nazywa się blog.

W podobny sposób możemy ustalić jakie wtyczki zostały zainstalowane w CMS. Jednak to wymaga już pewnego nakładu pracy.

Jak sprawdzić z pomocą aplikacji internetowej

Z pomocą przychodzi nam pewna aplikacja zamieszczona na stronie whatwpthemeisthat.com dzięki niej nie musimy już sami przeglądać kodu strony. Jedyne co musimy zrobić to w polu wyszukiwania wpisać adres strony internetowej, której motyw chcemy sprawdzić i przycisnąć przycisk szukaj. Po chwili uzyskamy nazwę oraz różne informacje o motywie, dodatkowo dowiemy się również z jakich wtyczek witryna korzysta.

Przykładowo tak wygląda fragment wyniku sprawdzania mojego blogu:

Teraz można zobaczyć, że używam motywu o nazwie Blog, widzimy również adres strony autora oraz jego nazwę. W przypadku innego motywu wynik był by podobny zmieniły by się jedynie dane.

Poniżej znajdziecie również inne informacje dotyczące sprawdzaniej witryny.

Dodatkowe tagi:

• themplate, skórka, motyw strony internetowej
• name of theme
• szablon, motyw wykorzystywany aktualnie przez stronę internetową
• jak ustalić obecny wygląd
• Jaki szablon, motyw jest stosowany w tym konkretnym wordpressa, wordpressu, wordpresie

Artykuł Jak sprawdzić z jakiego motywu korzysta WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

Będą to wie kolejno szablony:

• page.php
• category.php
• single.php
• 404.php

Plik page.php jest podobnie jak single.php stosunkowo prosty

<?php get_header(); ?>

<div class="container">
  <?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <h1 class="entry-title"><?php the_title(); ?></h1>   
   <div class="entry-content wp-caption">
    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'shape' ), 'after' => '</div>' ) ); ?>
    <?php edit_post_link( __( 'Edit', 'shape' ), '<span class="edit-link">', '</span>' ); ?>
  </div><!-- .entry-content -->
  <div class="clear"></div>
</article>
<?php endwhile;  ?>

</div>
<?php get_footer(); ?>

Dla uproszczenia pominęłam jeszcze opcję komentowania postów (single.php).

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post() ?>

<div class="container">
  <div class="entry-content">

   <h1 class="entry-title"><?php the_title(); ?></h1>

  <div class="imgpost four columns"><?php the_post_thumbnail(); ?></div>
    <?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
     <div class="eight columns">
       <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
     </div>
   </div><!-- .entry-content -->
 </div>
<?php endwhile; ?>
<?php get_footer(); ?>

Jak widać oba szablony mają podobną budowę. Trzeba przy tym pamiętać że w bardziej rozbudowanych motywach może być więcej jak jeden szablon strony. O tym jak go utworzyć pisałam wcześniej w innym poście.

Na pewno inną budowę posiada szablon kategorii czyli category.php

<?php get_header(); ?>
<div class="container">
<h1 class="entry-title"><?php _e( '', 'sss' ) ?> <?php single_cat_title() ?></h1>

<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters( '', '<div class="archive-meta">' . $categorydesc . '</div>' ); ?>
<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>
<?php endif ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry-content">
<article id="post-<?php the_ID(); ?>" class="oferty">
<div class="title">
<h3 class="entry-title"> <?php echo get_the_date( 'Y-m-d' ); ?> | <?php the_title(); ?></h3></div>
<div class="four columns"><?php the_post_thumbnail(); ?></div> 
<div class="eight columns">
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?></div>

<div class="clear"></div>
</article> 
</div>
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
</div>
<?php get_footer(); ?>

Kwestia budowy strony 404.php w dużym stopniu jest umowna i może wyglądać np. tak.

<?php get_header(); ?>

<div class="container">

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php _e( 'Not Found', 'your-theme' ); ?></h1>
<div class="entry-content wp-caption">

<h2><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'your-theme' ); ?></h2>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-theme' ); ?></p>
<?php get_search_form(); ?>

</div><!-- .entry-content -->
<div class="clear"></div>
</article>


</div>
<?php get_footer(); ?>

PRZECZYTAJ

Dodatkowe tagi:
skórka WordPress
nowy szablon, motyw dla strony
kurs budowy wyglądu strony
własna szata graficzna

Artykuł Budujemy własny motyw WordPress cz. 2 pochodzi z serwisu Kurs WordPress od podstaw.