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.

Motyw WordPress składa się z wielu plików napisanych w formatach takich jak PHP, HTML, CSS czy JS. Jak widać jest ich całkiem sporo, chociaż tak na prawdę nie wszystkie zawsze nam będą potrzebne.

Pliki, z których zbudowany jest motyw WordPress

Podstawowe pliki motywu WordPress

W celu uruchomienia skórki WordPress’a tak naprawdę wymagane są 2 pliki:

• style.css – najważniejszy plik w całym szablonie. Bez niego motyw będzie bezużyteczny. Plik oprócz podstawowych styli CSS zawiera również informacje takie jak nazwa motywu, kto jest autorem czy chociaż by rodzaj licencji.
• index.php – podstawowy szablon odpowiadający za wygląd strony. W większości napisany jest w HTML z elementami PHP (w miejscu wyświetlanych treści).

Większość motywów WordPress zawiera również inne pliki takie jak:

• header.php – plik zawierający treść nagłówka takie jak zawartość między znacznikami. Umieszcza się w nim również menu nawigacyjne.
• footer.php – plik jak sama nazwa mówi odpowiedzialny jest za wyświetlanie stopki szablonu.
• functions.php – jest to plik konfiguracyjny – określa się w nim funkcje jakie maja być użyte w skórce. Jako jedyny jest praktycznie w całości napisany w PHP.
• page.php – szablon odpowiedzialny za wyświetlenie treści strony.
• single.php – szablon odpowiedzialny za wyświetlenie treści wpisu.
• comments.php – szablon komętarzy.
• sidebar.php – szablon panelu bocznego.
• category.php – szablon strony określonej kategorii.
• search.php – strona wyników wyszukiwania.
• 404.php – strona błędu, powinien zadziałać gdy konkretna podstrona w witrynie nie istnieje.

Plików tych nie trzeba deklarować. WordPress sam z nich korzysta bez ingerencji autora motywu czy nas samych.

Inne domyślne pliki PHP

To oczywiście nie wszystkie pliki, motyw może zawierać inne pliki takie jak:

• archive.php – szablon archiwum wpisów.
• attachment.php – witryna służąca do wyświetlania złączników oraz zdjęć (chociaż bezpośrednio do tych ostatnich przeznaczony jest plik image.php).
• home.php – szablon strony domowej.
• tag.php – szablon strony jednego z wcześniej utworzonych tagów.
• author.php – szablon strony określonego autora.
• rtl.php – szablon strony działający w przypadku gdy strona jest w języku czytanym od prawej do lewej (można ją dodać za pomocą wtyczki RTLer).

Wydaje mi się, że to wszystkie domyślne pliki PHP obecne w motywie. W nowszych motywach pliki te mogą być też podzielone na kolejne mniejsze pliki. Jednak te będą wywoływane z pliku functions.php lub bezpośrednio w pliku, którego zawartość mają uzupełniać. Przykładowo motyw może mieć 2 lub 3 wersje nagłówka – każda w osobnym pliku ładowanym w header.php.

Pozostałe elementy szablonu

Oprócz powyżej wymienionych plików szablon zawiera także pliki JS (przeważnie umieszcza się je w katalogu js) – nazwy i rodzaj plików zależą od rodzaju zastosowanej biblioteki.

Analogicznie sprawa wygląda z innymi pikami CSS. W podstawowych plikach był co prawda plik CSS, ale jeden plik często to za mało. Przykładowo możemy dodać do naszego motywu bibliotekę Bootstrap.

W razie potrzeby możemy również tworzyć własne szablony wyglądu strony czy dodawać kolejne panele boczne.

Warto tu również wspomnieć że część szablonów posada pliki językowe dzięki nim szablon można bardzo łatwo przetłumaczyć.

Uproszczona struktura szablonu

Poniżej przedstawiam uproszczoną strukturę hierarchii plików szablonu

• katalog-szablonu
  • /js
    • pliki JS
  • /css
    • pliki CSS
  • index.php
  • style.css
  • header.php
  • category.php
  • sidebar.php
  • coments.php
  • single.php
  • page.php

Artykuł Pliki motywu WordPress 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.

Dlaczego zwykła paginacja jest problematyczna

Rozwiązanie to jest bardzo proste ma jednak bardzo dużo wad:

• użytkownik witryny nie wie ile jest podstron,
• przejście do starszych artykułów (umieszczonych na dalszych kartach) jest utrudnione,
• nie można wejść od tak na dowolną podstronę.

Rozwiązaniem tego problemu jest zastąpienie tego typu paginacji (stronicowania) numerowaniem stron co ułatwi poruszanie się po stronie. Rozwiązanie tego typu można samodzielnie zaimplementować w szablonie WordPress, przy niewielkim wysiłku.

Wykonanie paginacji (numerowania stron)

Na oficjalnej stronie WordPress można znaleźć rozwiązanie problemu w języku angielskim.

Nie jest to jedyna metoda jakiej można w tym wypadku użyć. Standardową funkcję paginate_links() można przedstawić nieco inaczej. Z pomocą samej funkcji paginate_links() możemy jedynie uzyskać listę stron. Dlatego by spełniał nasze wymagania trzeba go zmodyfikować.

Przykład:

function pagination() {
    
    global $wp_query;
    
    if ($wp_query->max_num_pages > 1) { echo '<p class="pages" role="navigation">' . paginate_links( array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'prev_text' => __('« '),
        'next_text'    => __(' »'),
    ) ) . '</p>'; }
}

Powyższy kod należy dodać do pliku function.php szablonu, w którym chcemy wprowadzić modyfikację.

Teraz musimy jedynie wywołać kod naszej funkcji po jej nazwie:

<?php pagination(); /*wyświetlamy paginację*/ ?>

Umieszczamy go oczywiście w miejscu gdzie ma znajdować się paginacja naszej witryny.

Paginacja obecnie będzie wyglądała np. tak:

« 1 2 3 4 »

Zmiana wyglądu

Jeżeli nie chcemy mieć tak prostej numeracji stron możemy zmodyfikować ją z pomocą CSS np.:

W celu uzyskania takiego efektu umieściłam paginację strony w elemencie blokwym DIV z odpowiednią klasą.

<div class="numerstrony"><?php pagination(); /*wyświetlamy paginację*/ ?></div>

Następnie przygotowałam skrypt CSS:

.numerstrony {
    text-align: center;
}

.numerstrony .page-numbers {
    border: 1px solid #ccc;
    padding: 5px;
}
.numerstrony a.page-numbers{
    outline: none;
    color: #FF9700;
}

.numerstrony .page-numbers.dots, 
.numerstrony .page-numbers.next, 
.numerstrony .page-numbers.prev {
    border: none;
}

Jak widać zamiana ta jest bardzo prosta i nie wymaga dużej specjalistycznej wiedzy.

Źródło:http://strefakodera.pl/poradniki/wordpress/paginacja-numeryczna-w-wordpressie

Artykuł Tworzenie Paginacji w WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Do czego służy is_category

Jak wspomniałam is_category jest funkcją i jak sama nazwa mówi:

is – jest

category – kategoria

Możemy się więc domyślać, że stosujemy ją w przypadku ustawienia warunku dla jakieś kategorii.

is_category();
// Dla każdej strony w kategorii
 
is_category( '9' );
// Dla stron w kategorii 9.
 
is_category( 'Stinky Cheeses' );
// Dla stron, których kategoria nazywa się. Stiky Cgeeses
 
is_category( 'blue-cheese' );
// Dla stron, których kategoria nazywa się. "blue-cheese".
 
is_category( array( 9, 'blue-cheese', 'Stinky Cheeses' ) );
// Wyświetla zawartość warunku dla kategorii z id=9,
// lub o jednej z dwóch nazw "blue-cheese", albo "Stinky Cheeses".
// Informacja: tego typu warunek dostępny w WordPress od wersji 2.5.

Przykładowe zastosowanie tego warunku wygląda tak:

<?php function is_category( $category = '' ) {
global $wp_query;

if ( ! isset( $wp_query ) ) {
_doing_it_wrong( __FUNCTION__, __( 'Conditional query tags do not work before the query is run. Before then, they always return false.' ), '3.1.0' );
return false;
}

return $wp_query->is_category( $category );
} ?>

Ten przykład może jest trochę za bardzo zaawansowany, ale poniższy będzie prostszy:

<?php function is_category( $category = '7' ) {
?>
<p>To jest kategoria 7</p>

<?php
return $wp_query->is_category( $category );
} ?>

Jak widać na przykładzie zastosowanie tego typu warunku jest dość proste wystarczy jedynie mieć pomysł na wprowadzenie zmian.

Artykuł Personalizacja kategorii w WordPress – is_category pochodzi z serwisu Kurs WordPress od podstaw.

Id jest indywidualne i nie powtarzalne – w danej instalacji może być tylko 1 element z danym identyfikatorem.

W przypadku gdy nie używany przyjaznych adresów (składających się z fraz tekstowych) tylko adresy systemowe (domyśle), nie stanowi to w WordPress problemu. Wszystko bowiem mamy podane jak na tacy – id będzie umieszczone w adresie strony. W przeciwnym wypadku wymaga to od nas już pewnej technicznej wiedzy.

Jak ustalić id kategorii

Na początek wchodzimy do listy kategorii. Znajduje się ona w menu bocznym Wpisy -> Kategorie.

Następnie ustawiamy kursor myszki na wybranej kategorii, której id chcemy pozyskać. Po kilku sekundach u dołu strony pokaże się informacja podobna do tej na obrazku poniżej.

Na czerwono zaznaczyłam id tej konkretnej kategorii.

Jak widać  ID=401

Jak ustalić id wpisu

Podobnie postępujemy z wpisami, z tym że są one dostępne już po wejściu w Wpisy.

W przypadku tego wpisu ID=7374

Czyli jest całkiem wysokie, ale trzeba brać pod uwagę, że to uniwersalny numer nadawany każdemu elementowi.

Po co nam numer ID

Numer id może nam się przydać do wielu różnych rzeczy np. w przypadku gdy chcemy coś spersonalizować – jeden konkretny wpis lub kategoria mają wyglądać inaczej niż pozostałe.

I w tym momencie pojawia się ktoś kto stwierdzi, że nie potrzebujemy ID wystarczy nam do tego celu nazwa elementu. Jednak nazwę zawsze można zmienić a ID jest przydzielane na stałe a tym samym niezmienne.

Artykuł Jak ustalić id kategorii lub wpisu – WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Bardzo często umieszczany jest w nie tylko jako zakładka w menu, ale także jak link pod logo. Strona główna w wielu serwisach jest bardzo istotnym elementem dlatego ważne jest, by móc momentalnie się na nią móc przenieść.

Jak dodać link z przejściem na stronę główną?

Adresacja bezwzględna

Odnośnik przenoszący na stronę główną tworzy się na różne sposoby od „/” odnoszącego się do katalogu głównego (w przypadku tworzenia strony w katalogu lub na localhost zamiast na stronę główną serwisu trafili byśmy na stronę główną domeny lub localhost).

Rozwiązanie to może wyglądać tak:

<a href="/">Home</a>

Metoda ta jest bardzo prosta, ma jednak podstawową wadę jeśli strona znajduje się w pod katalogu zamiast na stronę główna trafimy pod adres zamieszczony na początku adresu URL.

Adresacja względna

Na szczęście twórcy WordPress pomyśleli o zmiennej dzięki, której przechodzenie do głównej strony serwisu jest wygodniejsze i bardziej pewne.

Wśród dostępnych przedyktowanych opcji warto przedstawić dwie poniższe:

<a  href="<?php echo site_url(); ?>">Home</a>

<a href="<?php bloginfo('url');?>">Home</a>

Na szczególną uwagę zasługuje pierwsza metoda, która jak na razie wydała się minie najbardziej użyteczna. Uzyskiwany przez nią odsyłacz, link wskazuje adres ustawiony przez nas w panelu administracyjnym jako strona główna nie ma więc opcji byśmy opuścili nasz serwis.

Druga metoda ma zupełnie inne zastosowanie chociaż efekt jest taki sam. Za jej pomocą pobieramy różne informacje na temat strony z bazy. W tym konkretnym przypadku jest to adres, pod którym została ona umieszczona.

Warto przeczytać:

• Jak zbudować własne menu w WordPress

Artykuł Bezpośredni odnośnik do strony głównej w WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Z kodów tych można swobodnie korzystać w edytorze w treści wpisu, strony lub panelu bocznym. Schody zaczynają się w monecie kiedy chcemy dodać taki kod w miejscu nie do końca do tego przeznaczonym czyli np. w motywie!

Krótkie kody (shortcode) i motyw WordPress

Nie twierdzę, że każda wtyczka nie posiada kodu z możliwością wyświetlenia w motywie. Część autorów wtyczek pomyślało do przodu i przewidziało taką możliwość, lub przynajmniej napisało jak dostosować swój kod.

Bo to, że nie widać takiej opcji na pierwszy rzut oka nie oznacza, że takiej opcji nie ma. Praktycznie bowiem każdy shortcode można umieścić w obrębie skórki. Trzeba jedynie wiedzieć jak się do tego zrabać.

Jak dodać shortcode w szablonie

W WordPress istnieje specjalna zmienna, dzięki której możemy umieścić shortcode praktycznie w każdym miejscu. Przykładowo mój shortcode wygląda tak: [krótki-kod] i w takiej formie mogę go bez problemu umieścić np. w edytorze tekstu. Jednak nie jest to już możliwe poza nim np. w nagłówku mojej strony (czy innym miejscu w kodu motywu witryny).

Dlatego chcąc dodać do szablonu trzeba kod trochę zmodyfikować do formatu:

<?php echo do_shortcode('[krótki-kod]'); ?>

Przykładowy kod formularza

Jak to wygląda w praktyce na przykładzie prostego formularza wykonanego w Contact Form 7:

Poniżej znajduje się kod odwołujący się do formularza kontaktowego:

[contact-form-7 id="6052" title="Formularz 1"]

Kod może zostać umieszczony w szablonie w następujący sposób:

<?php echo do_shortcode('[contact-form-7 id="6052" title="Formularz 1"]'); ?>

UWAGA: dodając kod warto zwrócić uwagę na stosowane cudzysłowowa. Jeżeli w kodzie znajdują się takie same jak na zewnątrz kod nie będzie działał prawidłowo.

Dlatego przed umieszczeniem kodu w skrypcie warto się mu dobrze przyjrzeć. Źle umieszczony kod może spowodować wyświetlenie błędu.

Gdzie można umieścić kod

W dowolnym miejscu w szablonie oczywiście w granicach zdrowego rozsądku.

dodatkowe tagi:

• shortcode php
• wordpress do_shortcode
• plugin, wtyczka
• jak w wordpress używać shortcodes nie tylko w edytorze tekstu
• in theme, template

Artykuł Jak dodać shortcode do motywu? WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Jak działa Breadcrumb?

Dodatkowo umożliwia on nam przejście (cofnięcie się) do elementu wyżej (np. do kategorii, na stronę główną) w stosunku do artykułu, produktu na którym aktualnie się znajdujemy. Jest on więc bardzo użyteczny, zwłaszcza kiedy np. oglądamy produkt w sklepie lub artykuł na blogu. Może on wyglądać np.:

Jesteś tutaj | Strona domowa -> Strona sekcji ->Strona sekcji podrzędnej

Każdy z elementów Breadcrumb (z wyjątkiem rozdzielnika) powinien być klikalny by umożliwić swobodne poruszanie się po witrynie. Niestety nie jest tak zawsze.

W jaki sposób dodać Breadcrumb do WordPress?

W przypadku WordPress jeśli twój motyw nie posiada jeszcze breadcrumb można go dodać samodzielnie. Jak zwykle można to zrobić na kilka sposobów takich jak:

• instalacja wtyczki (pluginu) – np. Yoast SEO (czyli wtyczka do SEO)
• modyfikacja pliku header.php w motywie.

W tym wpisie zajmiemy się właśnie tym drugim przypadkiem.

Budujemy własny breadcrumb w motywie WordPress

Jak nietrudno się domyśleć będziemy modyfikować plik header.php. Plik ten jest domyślnym plikiem motywów WordPress, niektórzy twórcy motywów plik ten jednak dzielą na części więc będziesz musiał poszukać czasem właściwego pliku. Kolejnym wyzwaniem może być znalezienie właściwej lokalizacji dla naszego breadcrumb.

Może być on dodany np. pod tytułem strony lub nad nim. Tytuł strony powinien znajdować się w <h1>. Kiedy już mamy to ustalone możemy przejść do kolejnych kroków.

Zaczniemy od wypisania nazwy strony na której obecnie przebywamy.

<?php echo get_the_title(); ?>

W codex WordPress znaleźć można przykładowy Breadcrumb:

<div class="breadcrumb">
<?php 
// if there is a parent, display the link
$parent_title = get_the_title( $post->post_parent );
if ( $parent_title != the_title( ' ', ' ', false ) ) {
	echo '<a href="' . get_permalink( $post->post_parent ) . '" title="' . $parent_title . '">' . $parent_title . '</a> » ';
} 
// then go on to the current page link
?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a> »
</div>

nie do końca sprawdza się on jednak jeżeli wpisy nie znajdują się na stronie głównej a nasze menu jest zmodyfikowane i składa się ze stron i wpisów.

W tym przykładzie wszystkie elementy są klikalne.

Na podstawie tego przygotowałam kod:

<div class="breadcrumb">
<?php
if (is_category( $category )){
$categories = get_the_category();
echo $categories[0]->cat_name . ' » ';
}
if (is_single()){
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator;
}
echo trim($output, $separator) .' » ';
}}
if ($post->post_parent > 0){// if there is a parent, display the link
$parent_title = get_the_title( $post->post_parent );
if ( $parent_title != the_title( ' ', ' ', false ) ) {
echo '<a href="' . get_permalink( $post->post_parent ) . '" title="' . $parent_title . '">' . $parent_title . '</a> » ';
} }
if (!is_category( $category ) ){
the_title();
echo " » ";
}
?>

</div>

Kod ten nie jest optymalny, ale umożliwia stworzenie Breadcrumb z ostatnim elementem nieklikalnym oraz pokazuje pełną ścieżkę do wpisu czy strony.

Kod pozwala jedynie cofnąć się o jeden poziom do góry, czyli pozyskać rodzica ale nie dziadka.

Artykuł Jak zrobić własny breadcrumb – okruszki chleba do WordPress pochodzi z serwisu Kurs WordPress od podstaw.

To dość częsty problem kiedy korzysta się np. z darmowych zasobów WordPress. Motywy jak i wtyczki wyglądają ładnie, ale są praktycznie w całości po angielsku. Spowodowane jest to tym, że Internecie obowiązuje głównie ten język. Bardzo dużo osób na świecie go też zna (może nie jako pierwszy język, ale jako kolejny) i używa.

W efekcie zamiast kolejna strona wyświetla nam się „Next” a zamiast autor „author”. Czasami może to robić nie ciekawe wrażenie na naszych odbiorcach.

Jak przetłumaczyć motyw w WordPress

W momencie kiedy po raz pierwszy szukałam rozwiązania mojego problemu w języku polskim nie było jeszcze instrukcji (dzięki rosnącej popularność WordPress to się dość szybko zmienia). A przynajmniej takich jakie łatwo było zrozumieć. Większość autorów opisuje jak przetłumaczyć gotowy szablon z przygotowanym już wcześniej plikiem .POT (autor szablonu pomyślał wcześniej by ułatwić tłumaczenie szablonu na inne języki). Niestety szablon, który miałam wykorzystać był takiego pliku pozbawiony dlatego też  musiałam szukać rozwiązania w języku angielskim.

Rozwiązaniem mojego problemu okazał się mały program Poedit.

• https://poedit.net/

Spotkałam się z tym programem już wcześniej podczas aktualizowania tłumaczenia do innego szablonu.

Tłumaczenie z pomocą Poedit?

W WordPress niestety nie możemy od tak stworzyć jednego pliku z tłumaczeniem, wgrać go na serwer i wszystko będzie działać. Szablon wymaga specjalnie przygotowanego pliku, który Poedit potrafi wygenerować. W efekcie w szablonie są dwa pliki .PO i .MO, ten pierwszy to plik edytowalny a ten drugi stanowi skompilowaną jego wersję (odczytywaną przez WordPress).

Jak użyć programu Poedit?

Na początek trzeba pobrać i zainstalować Poedit na komputerze.

Następnie pobrać na ten sam komputer szablon lub wtyczkę (tak Poedit możemy tłumaczyć nie tylko motywy, ale także pluginy), którą chcemy przetłumaczyć i uruchomić poedit.

Gotowe tłumaczenia lub pliki je ułatwiające przeważnie znajdują się w katalogu languages.

Teraz wybieramy adekwatną opcję. Jeśli mamy gotowy plik .po dla naszego języka otwieramy go w Poedit i edytujemy. Przeważnie występuje plik wersji angielskiej. Sprawdzić to możemy w szablonie lub wtyczce w katalogu languages.

Co w przypadku gdy nie ma gotowego tłumaczenia?

Jeżeli nie mamy jeszcze tłumaczenia to z belki u góry aplikacji wybieramy plik nowe.

Następnie wybieramy język na jaki chcemy dokonać tłumaczenie. Mamy spory wybór języków jak widać.

Po wybraniu zapisujemy nowy plik poprzez przyciśnięcie niebieskiej dyskietki. Dla języka Polskiego będzie to pl_PL.po nie robimy tego jednak w dowolnym miejscu. Zapisujemy plik w szablonie lub wtyczce w katalogu „languages”.

Teraz wybieramy opcję „Wyodrębnij ze źródła”. Otworzy się wtedy nowe okno. Przechodzimy  w nim do zakładki „Ścieżki źródeł” i za pomocą przycisku „+” wybieramy katalog „languages” a następnie przechodzimy wyżej do głównego katalogu, który też wybieramy.

Jeśli poprawnie wybierzemy pojawi się w polu:

.

/

W kolejnym kroku przechodzimy do zakładki „Źródła słów kluczowych”. Za pomocą dostępnych tam opcji wprowadzamy symbole:

__
_e
_n
_x
_ex
_nx
esc_attr__
esc_attr_e
esc_attr_x
esc_html__
esc_html_e
esc_html_x
_n_noop
_nx_noop
translate_nooped_plural()

Na koniec wybieramy przycisk „OK”. W tym momencie aplikacja przeszuka pliki w poszukiwaniu słów spełniających powyższe warunki np:

__(„słowo”, „szablon”);

Teraz otworzy się okno z listą słów do przetłumaczenia.

Czasami podczas generowania pliku występują błędy. W moim przypadku wystarczyło wyeliminować pliki z katalogu „js” czyli skrypty JavaScript. I jeszcze raz przeprowadzić proces.

Uzupełnianie tłumaczeń w Poedit

W przypadku gdy mamy gotowy już gotowy plik po wybraniu opcji  edycji zobaczymy wprowadzone wcześniej tłumaczenia. Z kolei jeżeli dopiero go stworzyliśmy to program podpowiada jak przetłumaczyć niektóre słowa, ale ostatecznie to od nas zależy jak to zrobimy.

Edycja fraz jak i wprowadzanie nowych jest dość prosta. Klikamy w konkretną linijkę na liście a poniżej otwiera się pole edycji.

Po zakończeniu edycji pliku zapisujemy. Warto też sprawdzić czy wszystko zrobiliśmy poprawnie poprzez przycisk – „Weryfikuj”.

Na koniec pliku wgrywany na serwer do odpowiedniego katalogu (languages).  Warto pamiętać, że WordPress czyta pliki .mo a nie .po. Rolą tych drugich jest bycie źródłem dla generowanego .mo. Dlatego najlepiej na serwerze umieścić oba pliki.

Tłumaczenie motywu, wtyczek WordPress z pomocą Wtyczki

Inną metodą przetłumaczenia motywu WordPress jest użycie wtyczki np. Loco Translate. Wtyczka dostępna jest w bibliotece wtyczek więc jej instalacja zajmuje jedynie chwilę. Po uruchomieniu dodaje się ona jako nowa ikonka w lewym panelu jako jedna z ostatnich.

Wtyczka sama tworzy pliki językowe w odpowiednim miejscu. Wprowadzanie tłumaczeń zaś bardzo przypomina to w Poedit.

Wtyczka daje nam możliwość tłumaczenia zarówno motywów jak i pluginów (wtyczek). Wystarczy jedynie wybrać obiekt, który chcemy przetłumaczyć. Czasami niektóre szablony nie są przygotowane we właściwy sposób i niestety nie można ich przetłumaczyć! W takim przypadku niestety tłumaczenie jest nie możliwe nawet jeśli przygotujemy potrzebne nam pliki z tłumaczeniem.

Dodatkowe tagi:
Jak przetłumaczyć skórki na język polski
prosty sposób tłumaczenia (translate) szablonu strony
ręczne tłumaczenie szablonu
Jak zrobić tłumaczenie wordpress dla skórki wtyczki lub widżetu

Artykuł Jak przetłumaczyć motyw lub wtyczkę WordPress pochodzi z serwisu Kurs WordPress od podstaw.