Oczywiście nie każda opcja dostępna jest w wersji darmowej. By skorzystać z bardziej zaawansowanych potrzebna nam będzie wersja premium. Na szczęście do linków kanonicznych nie będzie to nam potrzebne.

Co to są linki kanoniczne?

Zadaniem linku kanonicznego (canonical) jest wskazanie wyszukiwarce właściwego adresu, który ma zostać zaindeksowany w wynikach wyszukiwania. Choć brzmi może trochę dziwnie, w praktyce chodzi o sytuację, kiedy np.:

• kategoria lub tag ma więcej podstron, by wskazać tę główną pierwszą,
• artykuł podzielony jest na części, dzięki canonical informujemy wyszukiwarkę, która podstrona jest pierwsza,
• produkt w sklepie internetowym znajduje się w kilku kategoriach,
• adres url strony ulega zmianie w zależności od lokalizacji z której wchodzimy (obecnie to to trochę już abstrakcyjna sytuacja).

W praktyce zadaniem linków kanonicznych jest likwidacja duplikatów treści oraz pomoc we właściwej jej segregacji. A tak bardziej zrozumiale – zrobienie porządków na stronie internetowej bez usuwania powielonych treści lub jej ukrywania.

Przykładowy link kanoniczny wygląda następująco:

<link rel="canonical" href="http://www.aurainweb.pl/strona/" />

• rel – relacja, typ relacji,
• href – właściwy adres podstrony,

Do czego nam w WordPress link kanoniczny?

WordPress nieważne czy używamy go jako bloga, sklepu (Woocommerce) czy strony może niekiedy dublować treści np. w kategoriach blogowych, aktualnościach. Jeżeli podstron mamy dużo mogą one (ale nie muszą) zacząć między sobą rywalizować o pozycję w wynikach wyszukiwania. W efekcie raz będzie miała lepszą pozycje jedna podstrona (np. strona 3 kategorii) a za chwilę inna (np. strona 4). W praktyce nam jednak często zależy, by stroną, która miała najlepsze pozycje była strona 1.

Ten cel może nam pomóc osiągnąć Canonical. Poniżej zamieściłam kilka przykładów tego jak, wygląda link canonical.

Poniżej fragment kodu pierwszej strony z jednej z kategorii, zaznaczony jest link kanoniczny:

Teraz zmieniliśmy podstronę na 2. Bez ustawionego linku canonical wygląda to następująco.

Ta sama podstrona z ustawionym canonical. Tym razem wskazuje on na stronę główną kategorii.

Niestety WordPress nie posiada wbudowanej funkcji ustawiania linków kanonicznych. Aby móc je ustawiać musimy zainstalować dodatek, który ma taką funkcję, albo i nie. Canonical czasem może być dodawany przez wtyczkę do konfiguracji SEO (np. Yoast SEO).

Jak dodać link kanoniczny z pomocą Yoast SEO?

Osobiście korzystam z tego rozwiązania dlatego postaram się je tutaj opisać. Jeżeli i wy używacie Yoast SEO to was również może zainteresować. Jeśli macie inną wtyczkę do SEO nie instalujcie jednak na siłę kolejnej wtyczki bo to zbędne i może mieć negatywny wpływ na waszą witrynę.

To o czym warto pamiętać to, że na początek musisz mieć skonfigurowaną wtyczkę Yoast SEO. Następnie w każdym artykule, na każdej stronie itp. pojawi się pole z możliwością dodania Title (tytułu) i description (opisu) strony. Poniżej mamy dodatkowe pola (ukryte trzeba je rozwinąć). Jednym z nich są Zaawansowane. Po jego rozwinięciu widzimy dodatkowe ustawienia takie jak:

• czy pozwolić na pokazywanie strony / postu w wynikach wyszukiwania
• zaawansowane ustawienia załączników
• kanoniczny URL

Nas interesuje właśnie ta ostatnia pozycja! W polu tym umieszczamy adres URL strony, którą chcemy, by wyszukiwarka brała za oryginalną, główną (np. kategorii, tagu).

Po wprowadzeniu zmiany zapisujemy stronę tak jak zwykle.

Artykuł Ustawianie linku kanoniczny dla kategorii, tagu w Yoast SEO pochodzi z serwisu Kurs WordPress od podstaw.

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.

W moim sklepie były to zwykłe pola wyboru z tekstem podczas gdy w innych pole koloru „rzeczywiście” odzwierciedlało tę barwę. W samym WooCommerce niestety nie ma takich ciekawych opcji. Dlatego jesteśmy zmuszeni zainstalować dodatkową wtyczkę, która da nam taką możliwość.

WooCommerce Variation Swatches – dodatkowe warianty dla atrybutów

Jedną z wtyczek, która oferuje dodatkowe opcje jest WooCommerce Variation Swatches. To praktycznie był mój pierwszy wybór jeśli chodzi o wtyczki zmieniające sposób wyświetlania atrybutów w wariantach w sklepie. Dodaje ona do atrybutów dodatkowe pole wyboru z jego pomocą możemy wybrać jedną z 3 opcji:

• kolor
• obrazek
• przycisk

Instalacja WooCommerce Variation Swatches

Wtyczkę instalujemy jak każdą inną. Myślę, że bez większych problemów znajdziecie ją w repozytorium.

Po aktywacji w panelu pojawi się nowa zakładka Swatches Settings. Po wejściu w nią pokażą nam się opcje konfiguracyjne wtyczki.

Opcje wtyczki wyglądają następująco:

W moim przypadku wykorzystałam jedynie domyślne ustawienia wtyczki. Czyli nic w niej nie zmieniałam.

Na ostatniej stronie w ustawieniach znajduje się coś w rodzaju tutoriala jak skonfigurować wtyczkę. Widać tam też kilka przykładowych wykorzystań pul.

Tworzenie atrybutu z nowymi opcjami na przykładzie koloru

Teraz pokażę wam jak w praktyce wykorzystać tę wtyczkę. W tej chwili dobrze by było gdybyśmy na chwilę cofnęli się do innego mojego wpisu.
Link do wpisu

Po instalacji pluginu dodawanie i modyfikowanie atrybutów przebiega bowiem tak samo, z tym że tak jak wspomniałam powyżej mamy 1 nowe pole „TYP”.

Tak jak zdążyłam wam już napisać pole dodaje 3 nowe opcje. Każda z nich spowoduje dodanie nowego pola dla wartości atrybutu. W przypadku Image (czyli obrazek) będzie to pole wyboru obrazka. W efekcie każda cecha atrybutu może mieć inny obrazek. Tak jak na obrazku z zegarkami.

Ja jednak zdecydowałam się na kolor! I tak po wybraniu typu dla atrybutu i jego zapisaniu moje cechy/ wartości otrzymały pole Color.

Po kliknięciu w opcję wybierz kolor otwiera się paleta dzięki, której można wybrać kolor lub wpisać jego nazwę w RGB.

W podobny sposób można tworzyć lub edytować inne elementy.

Ostatecznie tak wygląda gotowa paletka kolorów w sklepie!

Aktybuty oczywiście dodajemy normalnie do produktów! Zmianie ulegnie bowiem jedynie sposób ich wyświetlania.

A tak się to prezentują się atrybuty po ich skonfigurowaniu z pomocą wtyczki. Rożnica zdecydowanie jest widoczna.

Artykuł Zmieniamy wygląd wariantów z WooCommerce Variation Swatches pochodzi z serwisu Kurs WordPress od podstaw.

Inne części kursu:

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Konkretnie omówię typy produktów jakie można dodać do naszego sklepu w WooCommerce. To jakie typy są dostępne możecie zobaczyć na załączonym poniżej obrazku.

Jak widać posiadamy 4 typy produktów:

• prosty,
• grupowy,
• zewnętrzny/afilacyjny,
• z wariantami

Nieco więcej o tych typach postaram się wam napisać poniżej oraz w jednym z kolejnych wpisów gdzie będę omawiać znaczenie konkretnych pól. Teraz jednak chciałam zwrócić waszą uwagę na znajdujące się na prawo od pola wyboru checkboxy.

Wirtualny produkt

Chodzi mi o pola z napisem Wirtualny i Do pobrania. Jak nietrudno się domyśleć są to pola, stosowane w przypadku gdy nasz produkt nie jest materialny np. jest jakimś plikiem graficznym, e-bookiem. Innymi słowy sprzedajemy go w formie elektronicznej a nie materialnej.

Teraz to od nas zależy czy kupujący będzie mógł go bezpośrednio po zakupie pobrać (zaznaczamy opcję do pobrania) lub sami np. po zaksięgowaniu wyślemy ten plik. Wszystko zależy od tego jakie opcje wybierzemy. Na załączonym powyżej obrazku – wybrałam obie opcje.

Po zaznaczeniu pierwszej czyli Wirtualny w menu zniknęła opcja dotycząca wysyłki. Z kolei zaznaczenie Do pobrania da nam możliwość załączenia pliku. Jeżeli w tej chwili zastanawiacie się jak sprawić by klienci mogli pobierać tylko kreśloną ilość plików odsyłam do zakładki MAGAZYN.

Poniżej zamieściłam obrazek z przykładowo dodanym plikiem do pobrania. W moim projekcie raczej przynajmniej na początku tego typu produkty się nie pojawią.

Grupowy produkt

Tak naprawdę grupowy produkt – to „zestaw” dwóch lub większej ilości produktów. Zapewne każdy z was się już z takim produktem spotkał wiele sklepów oferuje kilka produktów jako zestaw w niższej cenie niż kupione osobno.

Wszystkie produkty, które mają wchodzić w skład naszego grupowego produktu ustawiamy w Powiązane produkty – pole Produkty grupowe.

Tak wygląda przykładowy grupowy produkt (bez obrazka) w skład, którego wchodzą 2 produkty.

Poniżej zamieściłam, krótki filmik z przykładowym dodaniem produktu.

Produkt zewnętrzny/afilacyjny,

Jak sama nazwa mówi dodając tego typu produkt oferujemy naszym klientom, produkt z innego sklepu.

Ostatni typ produktów – czyli Produkt z Wariantami omówię w kolejnym wpisie!

Artykuł Dodawanie nowego produktu w WooCommerce cz. 3 pochodzi z serwisu Kurs WordPress od podstaw.

Kod, który pokaże poniżej powtórzę jeszcze za jakiś czas podczas kiedy będę omawiać szablon, który stworzyłam na potrzeby budowanego przez zemnie sklepu w Woocommerce.

Inne części

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Domyślne ustawienie informacji o produkcie

W domyślnym szablonie, ale nie tylko tabsy wyglądają mniej więcej tak jak na załączonym poniżej obrazku. Czyli posiadamy jak gdyby dwie kolumny. W pierwszej jest coś w rodzaj małego menu z przyciskami takimi jak:

• opis
• dodatkowe informacje
• Opinie

Zawartość drugiej kolumny z kolei ulega zmianie w zależności od tego, jaką opcję wybierzemy w prawej kolumnie. Domyślnie jest to opis produktu – taką zawartość ma bowiem pierwsza karta. W przypadku dodatkowych informacji – można tam znaleźć informacje o produkcie np. jakie posiada atrybuty.

Jak przesunąć menu tabów na górę a opis umieścić pod spodem?

Tak aby szerokość pola z opisem się rozciągnęła się na całą szerokość. Czyli zamiast pionowych, uzyskać poziome! Coś podobnego do tego poniżej:

Układ ten wraz z kolorystyką uzyskać można bardzo łatwo z pomocą CSS.

@media screen and (min-width: 768px) {
  .woocommerce-tabs ul.tabs {
    width: 100%;
  }
  .woocommerce-tabs ul.tabs li {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  .woocommerce-tabs ul.tabs li a {
    padding: 1em 1.5em;
  }
  .woocommerce-tabs ul.tabs li:after {
    display: none;
  }

}
  .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li:hover a {
    color: #fff;
    background-color: #11abc2;
  }

@media screen and (min-width: 768px) {
  .woocommerce-tabs .panel {
    width: 100%;
    padding: 0 11px;
  }
}

Powyższy kod posiada ustawiony warunek, powoduje on że zawarty w nim kod obsługiwany jest do momentu kiedy ekran ma szerokość powyżej 768px; Poniżej tej szerokości nie miałam w moim szablonie nie miałam potrzeby wprowadzać istotnych zmian.

Jak zawsze warto pamiętać, że kodu nie należy dokładnie kopiować. Po jego wprowadzeniu do pliku z stylami CSS warto go dostosować do swoich potrzeb. Kod w tym konkretnym przykładzie jest dostosowany do szablonu, który ja buduje na potrzeby sklepu.

Artykuł Zmiana orientacji tabów w sklepie Woocommerce na pionową pochodzi z serwisu Kurs WordPress od podstaw.

W poprzedniej części omówiłam poniekąd jak ustawić większość opcji. Zrobiłam to jednak dość ogólnie. W kolejnej pokaże wam jak dodać nieco bardziej zaawansowane produkty takie jak z wariantami (koszulki – różne rozmiary i kolory).

Dodawanie grafiki

Teraz chciałam jednak poruszyć temat dodawania ilustracji (zdjęć) naszego produktu. WooCommerce posiada bowiem 2 pola przeznaczone na dodawanie zdjęć. Pierwsze to Obrazek produktu. Poniżej umieściłam grafikę jak wygląda uzupełnione takie pole.

W tym polu możemy umieścić tylko jeden obrazek. Jest to oczywiście główny obrazek naszego produktu. Czyli występuje tu analogia jak przy stronach lub wpisach. Drugie pole to „Galeria produktu”. Z pomocą tego pola możemy już dodać więcej zdjęć.

Na wszelki wypadek przypominam, że do czasu zapisania i opublikowania nasz produkt nie będzie widoczny na stromnie. Puki wasz sklep nie jest ogólnie dostępny (czyli nie posiadacie klientów i dopiero wprowadzacie produkty) możecie spokojnie eksperymentować. Najwyżej usuniecie lub będziecie edytować źle dodane produkty.

Nasz produkt w sklepie

Ostateczny wygląd jak nasz produkt będzie się prezentował na stronie zależy od kilku czynników. Jaki typ produktu wybraliście, jakie macie wtyczki oraz z jakiego motywu korzystacie.

Osobiście na potrzeby budowanego sklepu – tworzę motyw potomny czyli child themes. To jak tworzy się taki szablon omówię nieco później – jako ciekawostkę. Choć ta wiedza może się niektórym przydać.

Poniżej zamieściłam screen z innym produktem – posiadającym różne warianty.

A tak prezentują się na stronie sklepu:

Po lewej znajduje się nasza koszulka, która jest dodana jako prosty produkt a po prawej mamy obrazek z telefonem, który dodany jest jako produkt z wariantami. Niech was też nie dziwi informacja poniżej produktu. Warianty posiadają rożne ceny. Z tond też taka informacja. Później pokażę wam jak zmienić ten napis na np. od 5,00. Pomijając 7,00 czyli górną granicę cenową.

Artykuł Dodawanie nowego produktu w WooCommerce cz. 2 pochodzi z serwisu Kurs WordPress od podstaw.

Dlaczego robots.txt jest ważny?

Czyni go tym samym bardzo istotnym – nie chcemy bowiem, by taki robot wchodził nam, gdzie popadnie. I indeksował np. nasze prywatne pliki. O pliku tym pisałam już kilka lat temu na moim innym blogu. Umieściłam tam krótką instrukcję jak samodzielnie zrobić taki plik.

Dowiecie się w nim jak stworzyć taki plik bez dostępu do serwera FTP oraz dużej wiedzy. Niestety nie każdy czuje się na siłach, by w taki sposób stworzyć ten plik, dlatego zdecydowałam się wrócić do tematu. Tym razem przy stworzeniu pliku z pomocą przyjedzie nam wtyczka Yoast SEO.

Jak wygląda struktura pliku robots.txt?

Przykładowa zawartość pliku przedstawia się tak:

Disallow: /folder-który-ukrywamy/   
Disallow: /plik-ktorego-niechcemy-pokazac.html    
Allow: /folder-który-ukrywamy/pojedynczy-plik-ktory-pokazujemy.html  

zabroniony dostęp do folderu po /

Disallow: /folder-który-ukrywamy/    

zabroniony dostęp do pliku po /

Disallow: /plik-ktorego-niechcemy-pokazac.html    

zezwalamy na dostęp do pliku po /

Allow: /folder-który-ukrywamy/pojedynczy-plik-ktory-pokazujemy.html  

Plik ten może posiadać także elementy takie jak:

blokuje wszystko

Disallow: /      

samo bez parametru daje dostęp do wszystkich plików

Disallow:   

Lokalizacje mapy strony (wpisz lokalizację swojej mapy):

Sitemap: https://www.aurainweb.pl/sitemap.xml

Dlaczego roboty wyszukiwarek wchodzą do katalogów i z jakiego powodu należy tego zabraniać?

Roboty przeglądarek wchodzą do różnych katalogów w celu zaindeksowania plików. I tak, o ile zależy nam, by w indeksie znalazły się takie pliki jak grafiki czy np. pliki pdf, HTML. Tak niekoniecznie chcemy, by trafiły do niego niektóre pliki PHP. Szczególnie te zawierające prywatne dane jak np. połączenie z bazą danych.

W jaki sposób stworzyć plik robots.txt z pomocą Yoast SEO?

Na początek musimy mieć zainstalowana wtyczkę Yoast SEO – wykorzystywaną głównie do optymalizacji naszej strony pod wymogi SEO. Powyżej zamieściłam link jak dodać tę wtyczkę do WordPress oraz jak z niej korzystać.

Kiedy będziemy już mieli tę wtyczkę należy wejść w jej ustawienia
SEO -> Narzędzia.

Na stronie narzędzi znajduje się wiele ciekawych dodatków, nas jednak będzie interesował Edytor plików. Z jego pomocą można nie tylko utworzyć i edytować nasz plik, ale także wiele innych.

Po wejściu w Edytor plików będziemy mogli zobaczyć np. jak aktualnie wygląda nasz plik .hataccess. Jeśli chcecie dowiedzieć się czego o tym pliku polecam mój wcześniejszy wpis przejdziecie do niego klikając .hataccess

Poniżej zamieściłam obrazki ukazujące, jak ten plik prezentuje się u mnie:

Plik robots.txt tworzymy poprzez kliknięcie w przycisk Utwórz plik robots.txt. Po chwili pokaże się w miejscu przycisku nowe okno z przygotowaną już zawartością. Plik od razu napisany jest w taki sposób, by zabronić robotom wchodzić do katalogu wp-admin.

Na dobry początek taki plik powinien nam wystarczyć. Jeżeli jednak chcemy zabronić robotom wchodzić jeszcze w inne miejsca, musimy dodać je do pliku. Na koniec klikamy w przycisk Zapisz zmiany w pliku…

Jak zapewne już zauważyliście jest to dosyć proste narzędzie w obsłudze. Oszczędza nam z pewnością też czas w kwestii logowania się na serwer FTP.

Podsumowanie

Yoast Seo to nie jedyna wtyczka ułatwiająca tworzenie pliku robots.txt jest jednak jedną z popularniejszych. Dlatego warto o tym wspomnieć.

Macie własną opinię na ten temat lub znacie jakieś inne wtyczki, które warto polecić? Piszcie w komentarzu.

Artykuł Konfigurowanie pliku robots.txt w WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Zadanie to może co prawda początkującym użytkownikom sprawiać pewne problemy, ale myślę że po przeczytaniu tego wpisu powinni już sobie z tym zadaniem świetnie poradzić.

Po co jest dodawany prefiks

Na początek chciałam poruszyć temat z jakiego powodu w adresie umieszczony jest prefiks – czyli w naszym przypadku domyślnie „category” lub „tag”! A jest ona dość istotna. To właśnie dzięki niemu można bowiem odróżnić typy taksonami od siebie nawzajem.

Jak zapewne wiecie w WordPress jest kilka domyślnych (zdefiniowanych) typów taksonomii. Ich ilość może ulec zmianie za pod wpływem zainstalowanych wtyczek. Prowadząc więc bardziej zaawansowane strony lub blogi (a czasami po kilku latach) rożnym taksonomią nadajemy taką samą nazwę np. tag, kategoria i strona mogą nazywać się „Bootstrap”. A tym samym bardzo podobny adres URL.

Co skutkować mogło by to posiadaniem przez te 3 typy tego samego adresu URL np. aurainweb.pl/bootstrap. Spowodowało by to, że jedynie jeden z nich był by widoczny. Aby uniknąć sytuacji dodaje się jako zabezpieczenie prefiks. Dodatkowo dzięki niemu od razu jesteśmy w stanie rozpoznać z jakim typem obiektu mamy w danym momencie do czynienia.

Dlatego adresy kategorii zawierają „category” a kategorii „tag”.

Jak usunąć słowo „category” z adresu kategorii

Z poziomu panelu administracyjnego

Pierwszą metodą jaką omówię polega na użyciu już obecnych w WordPress opcji. W tym celu wchodzimy w Ustawienia -> Bezpośrednie odnośniki

Teraz w celu usunięcia z adresu słowa (aliasu) category w polu tekstowym obok Alias kategorii wstawiam „.” (znak kropki).

Dzięki swojej budowie WordPress skróci adres do:

http://www.aurainweb.pl/bootstrap/

Pole to możemy uzupełnić także inną treścią! W tym przypadku wprowadzony tekst również zastąpi „category”.

Analogicznie postępujemy z aliasem tagów.

Usuwanie prefiksu kategorii „category” z pomocą Yoast SEO

Inną metodą na usunięcie prefiksu (aliasu) jest skorzystanie z jednej z opcji wbudowanych w Yoast SEO.

Opcja znajduje się w ustawieniach Yoast SEO. Czyli SEO -> Wyszukiwarki następnie wymieramy kartę Taksonomie.

Po wejściu w tę opcje skrolujemy kartę w duł. Nad przyciskiem zapisującym zmiany znajdziecie opcję Category URLs. Posiada ona opcję przełączaną przyciskiem.

W celu wyłączenia prefiksu wybieramy opcję Usuń i zapisujemy zmiany.

Usuwanie z pomocą .htaccess

W celu usunięcia prefiksu „category” można także zmodyfikować plik .hattacces poprzez dodanie:

RewriteRule ^category/(.+)$ http://www.site.com/$1 [R=301,L]

Podsumowanie

Opisane powyżej metody nie są jedynymi sposobami na wyłączenie aliasu. Myślę jednak, że są bardzo proste w użyciu. Dlatego warto je znać.

Artykuł Jak usunąć „category” i „tag” z adresu URL strony WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

Domyślnie jednak jest to niemożliwe (tradycyjny edytor i Gutenberg nie posiadają domyślnie takiego bloku). W większości przypadków edytor usunie więc kod (częściowo lub całkowicie ). Czasami w efekcie takich działań strona w najlepszym przypadku zacznie się, źle wyświetlać – pokaże nam się po prostu resztka kody i sposób jej odziaływania na resztę treści. A więc co w takim razie zrobić?

Jak w takim razie dodać PHP?

WordPress sam w sobie nie posiada wielu ciekawych opcji jednak nie oznacza to, że nie można ich dodać. W tym przypadku można to zrobić z pomocą wtyczek takich jak:

• Woody ad snippets – insert any code, text, or ads via using conditions
• PHP Everywhere

Z pomocą obu będziemy już mogli deklarować kod w treści wpisu (ale nie tylko). Pod warunkiem, że zostanie on umieszczony pomiędzy odpowiednimi znacznikami.

Niestety tradycyjne metody dodawania <?php, ?> nie będą nadal działały.

Dodawanie z Woody ad snippets

Kod możemy dodawać w starszych edytorach np. z pomocą [insert_php] np:

[insert_php]
Kod PHP jaki chcemy dodać do strony lub wpisu
[/insert_php]

Dla Gutenberga:

Artykuł Jak umieścić kod PHP w treści wpisu lub strony – WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

W edytorze Gutenberg cytaty możemy tworzyć na kilka sposobów. Możemy np. utworzyć blok cytat lub zmienić format dowolnego blogu.

Dodawanie nowego bloku

W celu dodania nowego bloku cytatu klikamy w przycisk z symbolem plusa umieszczony na belce powyżej tytułu wpisu.

Edycja istniejącego bloku

Na cytat możemy także zmienić istniejący już akapit. Wystarczy jedynie kliknąć w jego nagłówek.

Poniżej możecie zobaczyć przykładowy cytat:

Przykładowy cytat jak widać jest inny niż reszta tekstu

Czasami zdarza się, że w szablonie cytat nie został w jakiś szczególny sposób wyróżniony na tle innych elementów. W takiej sytuacji można samemu dopisać style.

Dodawanie cytatu w tekstowym edytorze

Jeśli chcecie wstawić cytat w wersji tekstowej edytora możecie tego dokonać wstawiając tekst cytatu pomiędzy znaczniki <blockquote></blockquote>

Przykładowe style dla cytatu

Poniżej znajdziecie style CSS dzięki, którym będziecie mogli zmienić wygląd waszego cytatu.

.entry-content blockquote {
    padding: 30px;
    position: relative;
    background: #f3f2f2;
    border-left: 3px solid #c10c0c;
    font-style: italic;
}

Z pomocą tych styli otrzymacie wygląd zbliżony do tego jaki jest aktualnie na mojej stronie.

Artykuł Jak dodać cytat do wpisu/strony? – Gutenberg (WordPress) pochodzi z serwisu Kurs WordPress od podstaw.