Oczywiście nie chodzi nam o użytkowników, będącymi naszymi współpracownikami (znajomymi) a „osób z zewnątrz”. W większości są to potencjalnie niebezpieczne dla nas Boty. Tak boty, ale nie tylko potrafią samodzielnie rejestrować się jako użytkownicy a następnie z uprawnieniami jakie uzyskały próbować coś dodać, edytować lub usunąć.

Wyłącz funkcję rejestracji użytkowników

Aby uniemożliwić samodzielną rejestrację do witryny na WordPress należy wejść w:

Ustawiania -> Ogólne

Następnie sprawdzić czy checkbox (pole wyboru) przy „Każdy może się zarejestrować” jest odznaczone. Jeśli jest ono zaznaczone (daje ono możliwość rejestracji każdemu) dlatego musi być ono odznaczone. Tak jak na obrazku poniżej.

Na koniec oczywiście zapisać.

Artykuł Jak wyłączyć rejestrację nowych użytkowników w WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

Spam w komentarzach WordPress

W większości przypadków ich autorami nie są czytelnicy blogu / strony. Komentarze pod artykułami, postami lub zdjęciami (grafikami) zamieszczają roboty, boty, których to jest jedynym celem. Nie obchodzi ich treść powyżej, czasem nawet to że mogą doprowadzić do awarii strony (wykonać atak typu DOS na stronę). Komentarze zamieszczane przez boty często zawierają:

• wulgaryzmy,
• odnośniki do potencjalnie niebezpiecznych witryn,
• treści o tematyce 18+ (gorszące niekiedy nawet osoby 18+),
• treści w innym języku np. angielskim kiedy strona jest po Polsku,
• teksty w żaden sposób nie powiązane z tematyką witryny.

Z pewnością sam możesz co nieco w tym temacie dodać. Bo osoby programujące boty często mają bardzo bujną wyobraźnię, gorzej z szacunkiem do innych.

Dodawanie filtra w komentarzach

By ograniczyć ilość spamu autorzy WordPress dodali opcję filtrowania komentarzy pod kontem niedozwolonych treści. Znajdziemy ją w:

Ustawienia -> Dyskusja

U góry strony znajdują się podstawowe ustawienia komentarzy, o które również warto zadbać (bo np. ograniczą one nie znane nam osoby przed umieszczaniem dowolnej treści teksty).

O konfigurowaniu komentarzy pisałam tutaj:
https://wordpress.aurainweb.pl/jak-wylaczyc-mozliwosc-komentowania-wpisow-w-wordpress/

Pola z filtrami znajdują się w dolnej części strony. Obecnie są to 2 pola, w których należy umieścić słowa „hasła”. WordPress podczas próby dodania nowych komentarzy będzie później je sprawdzał pod kontem ich wystąpienia. Technicznie tworzy się czarna lista niedozwolonych fraz. Jeśli zastanawiacie się dlaczego są 2 pola to odpowiedz jest prosta.

Tworzenie czarnej listy

Frazy dodane do pierwszego z nich jedynie blokują natychmiastowe dodanie komentarza. Możemy go jednak później dodać sami. Drugie od razu umieszcza komentarz w koszu.

Jeżeli chcemy by komentarz trafił do kolejki / zakładki SPAM korzystamy z poniższego pola (Moderacja komentarzy).

Jeżeli komentarz będzie zawierał którekolwiek z tych słów w swojej treści, nazwie użytkownika, jego adresie URL czy e-mailu lub adresie IP, zostanie on przeniesiony do kolejki do moderacji. Jedno słowo lub adres IP na linię. Sprawdzane są również fragmenty słów, tak więc słowo „WordPress” spełnia warunki kryterium „press”.

Jeśli chcemy by został usunięty do to tego (Niedozwolone wartości w komentarzach).

Jeżeli komentarz będzie zawierał którekolwiek z tych słów w swojej treści, nazwie użytkownika, jego adresie URL czy adresie e-mailu lub IP, zostanie umieszczony w koszu. Jedno słowo lub adres IP na linię. Sprawdzane są również fragmenty słów, tak więc słowo „WordPress” spełnia warunki kryterium „press”.

Frazy wprowadzany jedna za drugą po przecinku.

Podobną funkcje posiadają też niektóre wtyczki do tworzenia formularzy kontaktowych.

Artykuł Czym są niedozwolone wartości w komentarzach w WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

Jak zmienić ilość wyświetlanych postów i stron w panelu administracyjnym WordPress?

Aby zmienić liczba elementów na stronie wystarczy wejść w panelu na stronę z wpisami, stronami (a nawet z produktami w sklepie). Każdy z tych typów posiada taką opcję.

Następnie rozwijamy pole „opcje ekranu” umieszczone w prawym górnym rogu.

Po jego rozwinięciu pokaże się nam wiele ukrytych normalnie dodatkowych opcji (część z nich zależy od tego jakie wtyczki mamy zainstalowane w WordPress). Jedną z nich będzie „Liczba elementów na stronę”. To właśnie z jej pomocą możemy określać ile postów, stron i produktów chcemy zobaczyć na liście.

Kiedy ustawimy pożądaną liczbę klikamy przycisk „Zastosuj”. Warto pamiętać też, że zawsze możemy wrócić do poprzedniej liczby elementów. Zmiana ilości wyświetlanych elementów ma też wpływ na stronicowanie. W efekcie ich liczba się zmniejszy.

Artykuł Jak zmienić liczbę elementów na stronę w panelu WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

Co to jest motyw WordPress?

Motyw to nic innego jak szata graficzna strony, bloga, forum lub sklepu opartego o WordPress. W innych systemach CMS czasem spotyka się również nazwy takie jak templatka (template) lub szablon.

To właśnie w motywie określony jest sposób wyświetlania konkretnych elementów w witrynie. Współczesne motywy WordPress same w sobie posiadają już wiele ciekawych funkcji. Jednak nie zawsze takie same dużo bowiem zależy od autora motywu.

Wiele różnych motywów w CMS WordPress

Zacznę od tego, że zaraz po świeżej instalacji WordPress często zainstalowany nie jeden a kilka motywów. Chociaż wydaje mi się, że w nowszych edycjach jest ich chyba mniej jak kiedyś. Bardzo często zdarza się, że osoba budująca stronę ich nie usuwa i jednocześnie dodaje kolejne nowe motywy.

Kolejnym powodem dużych ilości motywów jest nie umiejętność znalezienia idealnego motywu. To mój częsty problem. W wielu przypadkach powodem niezadowolenia jest:

• niewłaściwy układ elementów,
• brak potrzebnych do edycji opcji,
• nie kompatybilność z używanymi wtyczkami,
• kolorystyka motywu (w teorii motywy mają już opcję dzięki, której kolory można zmieniać, ale jak wspomniałam to tylko teoria zawsze znajdzie się element, który nie zmieni wyglądu),

Z tego też powodu wiele osób tworzy swoje własne motywy potomne. Dzięki temu dodają oni potrzebne im opcje, zmieniają układ motywu bez obawy, że utracą zmiany po aktualizacji.

Ile motywów można mieć zainstalowanych jednocześnie?

Jednocześnie może być zainstalowane kilkanaście motywów (właściwie to sama miałam najwięcej chyba z 10). Co oczywiście nie oznacza, że wszystkie muszą być włączone. Motyw może bowiem być zainstalowany, ale nie używany.

Sytuacja może trochę inaczej wyglądać w przypadku gdy mamy uruchomioną opcje mustisite. W tedy może dojść do sytuacji, że każda strona (w subdomenie lub katalogu ma inny motyw). Z co najmniej dwóch motywów na raz można też korzystać kiedy używa się AMP. W takim przypadku normalna wersja strony używać może bardziej rozbudowanego motywu a na urządzeniach mobilnych może się uruchamiać prostszy motyw.

Dlaczego należy usuwać nie używane motywy?

Powody są dwa! Pierwszy to względy bezpieczeństwa. WordPress to najpopularniejszy system CMS na świecie. Co chwilę kierowane są na niego różnego typu ataki. Osoby, które je organizują tak naprawdę nawet nie mają 100% pewności, że na serwerze jest WordPress. Większość z takich ataków nastawiona jest na określone pliki, które dla bota lub dla innego programu mogą stanowić drogę wejścia do WordPress bez zgody jego wściela. Dość często są to pliki motywów i wtyczek.

Jako ofiara kilku ataków muszę przyznać, że cele są różne np.:

• przekierowanie ruchu na inną stronę (poprzez zmianę w plikach i/lub w bazie danych),
• umieszczenie na serwerze plików, które będą infekowały urządzenia odwiedzających witrynę osób,
• przejęcie władzy nad stroną i publikowanie własnych potencjalnie niebezpiecznych treści,

To jedynie przykłady. Każdy jeden taki wypadek warto zgłosić firmie hostingowej. W wielu przypadkach bowiem atak dotyczył także innych stron umieszczonych na tym serwerze. Mogą też pomóc w weryfikacji czy wszystko jest już dobrze.

By ograniczyć zagrożenie zaleca się aktualizowanie wtyczek, motywów i całego WordPress. Przed aktualizacją zaleca się wykonanie kopii bezpieczeństwa.

Drugi powód to porządek na naszej stronie.

Artykuł Czy należy usuwać nie używane motywy w WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

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.

Klasyczny edytor treści

Od wersji WordPress 5.0 domyślnym edytorem jest Gutenberg. Edytor ten posiada wiele ciekawych opcji, jednak nie każdemu one odpowiadają. Dużo osób wolało, by tradycyjny edytor. Był on dość prosty, ale często wystarczający. Po jego wyłączeniu w nowszych wersjach aby do niego wrócić trzeba go zainstalować go jako wtyczkę.

Rozszerzenie:

Edytor klasyczny -> https://pl.wordpress.org/plugins/classic-editor/

Po jego aktywacji zyskujemy możliwość w ustawieniach (Ustawienia pisania) zmiany edytora na klasyczny. Robimy to przez zaznaczenie opcji:

Default editor for all users

• Classic editor,
• Block editor (to inaczej Gutenberg)

Inne popularne edytory

Klasyczny edytor to oczywiście nie jedyny edytor, którym można zastąpić Gutenberga do popularniejszych należą:

• Elementor,
• SiteOrigin

Oba edytory edytujemy jako wtyczki. W dużym stopniu te edytory przypominają Gutenberga, pod względem opcji. Używa się ich jednak zdecydowanie inaczej.

Artykuł Jak włączyć tradycyjny edytor w WordPress? pochodzi z serwisu Kurs WordPress od podstaw.

Poprzednie 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

Warianty w sklepie opartym o WooCommerce różnią się nieco od tych w innych sklepach. Podstawowa różnica widoczna jest od razu po wejściu do sklepu. Produkty z wariantami w miejscu pojedynczej ceny posiadają zakres cenowy. Jest to bardzo widoczne na załączonym poniżej obrazku.

Warianty w sklepie

Jak widać mamy 2 produkty. Pierwszy „koszulka” jest zwykłym pojedynczym produktem. Drugi „Przykładowy produkt” – to produkt z wariantami. Istotne przy tym jest, że warianty posiadają rożne ceny.

Zmianie uległ również wygląd karty produktu. Ponownie posiadamy tutaj w miejscu pojedynczej ceny, charakterystyczny przedział cenowy. Przedziału całkowicie usunąć się nie da. Można jedynie zmodyfikować sposób jego wyświetlania. Ewentualnie go ukryć.

Produkty z wariantami

Funkcja ta będzie jak najbardziej będzie potrzebna w budowanym przez zemnie sklepie. Wśród oferowanych w nim towarów znajdują się bowiem ubrania. Będą one dostępne nie tylko w kilku rozmiarach (a każdy rozmiar powinien być innym wariantem) jak i wersjach kolorystycznych. Produkt dodaje tak jak pozostałe z tym, że ustawiam:

Dane produktu -> Produkt z wariantami.

Po wybraniu tej opcji pojaw się w lewej kolumnie nowa opcja/ zakładka „Warianty„. Na początku zawartość będzie praktycznie pusta. Jedyne co tam znajdziemy to informacja o tym, że musimy dodać atrybuty. To właśnie na ich podstawie będziemy tworzyć późniejsze warianty.

W przykładowym produkcie jaki dodawałam wcześniej mam już wybrany atrybut kolor. Jeżeli chcemy by atrybut ten brał udział w tworzeniu wariantu musimy wejść w edycję wariantu i zaznaczyć opcję „Dla wariantów„. Na poniższym obrazku opcja ta jest jeszcze nie zaznaczona.

Dodawanie nowego atrybutu z poziomu tworzenia nowego produktu

We wcześniejszym wpisie pokazałam w jaki sposób można dodać atrybuty do sklepu. Wspomniałam tam, też że można je dodać podczas dodawania nowego produktu. I tak dokładnie w tym samym miejscu gdzie wybieramy atrybuty mamy opcję „Nowy atrybut„.

Ogólnie proces dodawania nowego atrybutu jest bardzo prosty. Po wybraniu opcji nowy atrybut klikamy dodaj.

Teraz pokażą nam się pola umożliwiające dodanie nowego atrybutu. Na początek musimy go jakoś nazwać. Następnie w polu Wartości wpisujemy interesujące nas wartości oddzielone znakiem „|” pionowej kreski. 

Tutaj również musimy zaznaczyć opcję DLA WARIANTÓW. Na koniec zapisujemy.

Tworzenie prostego wariantu produktu

Teraz udajemy się do zakładki Warianty. By móc w niej dodać różne wersje produktu wystarczy nam tak naprawdę tylko jeden atrybut. W poniższym przykładzie takim atrybutem będzie kolor. Tak wiec dodajemy teraz nowy wariant.

Do wyboru mamy 2 opcje.

• Dodaj nowy wariant
• Utwórz warianty ze wszystkich atrybutów.

Pierwsza opcja daje nam możliwość dodania tylko 1 wariantu z kolei w przypadku 2 ilość zależy od posiadanych atrybutów. Jeśli mamy ich 3 – to tyle zostanie utworzonych. W prawdziwym sklepie gdzie atrybutów o różnych wartościach będzie kilka ilość wariantów może być nawet kilkunastokrotnie większa.

W sytuacji gdy zdecydujemy się na opcję Utwórz warianty ze wszystkich atrybutów WordPress zapyta się nas czy na pewno chcemy to zrobić. Poprzez poniższy komunikat:

Kiedy zakończy tworzenie wariantów pokaże z kolei komunikat o liczbie utworzonych. W tym przypadku 4 wariantach.

Na poniższym braku możecie zobaczyć listę moich wariantów. Jak widać zdecydowałam się na utworzenie wariantów z jednym atrybutem – kolorem.

W tej chwili nasze produkty praktycznie nie mają cen. Tym samym są nie aktywne. W celu ich włączenia trzeba wejść w edycję wariantu. W tym celu wystarczy kliknąć w konkretny wariant. W tedy nastąpi rozwinięcie opcji produktu. Będzie to wyglądać podobnie jak na obrazku poniżej.

Teraz możemy edytować wersję każdego produktu z osobna.

Dodawanie zdjęcia / obrazu do produktu

Główny obrazek dla produktu dodajemy tak samo jak w przypadku innych produktów.

Analogicznie jest z galerią zdjęć.

Nieco inaczej wygląda jednak sprawa z dodawaniem zdjęć do wariantów. W celu dodania zdjęcia musimy wejść w konkretny wariant i bezpośrednio w nim zmienić grafikę.

W ten sposób kiedy przejdziemy w konkretny wariant podmieniony zostanie tylko główny obrazek.

Jak podmienić zdjęcia w galerii?

W czystej wersji sklepu jest to nie możliwe. Dlatego musimy zainstalować nową wtyczkę np.

WooCommerce Variation images gallery

Artykuł Dodawanie nowego produktu w WooCommerce cz. 4 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.