• 4
    Shares

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

 

No dobrze koniec teorii – czas na zbudowanie sklepu opartego na wtyczce WooCommerce.

 

Specyfikacja


Wersja CMS:

WordPress 5.0.X

 

Aktywny motyw

Wybrałem ten motyw z uwagi na jego wszechstronne możliwości w zakresie dostosowania wyglądu.

WooCommerce » WordPress dla opornych » część 2

 

Aktywne wtyczki:

Prosta wtyczką, która pozwala wstawiać kod, taki jak Google Analytics, niestandardowy CSS, Facebook Pixel i inne elementy do nagłówka i stopki witryny WordPress.

Bezproblemowe projektowanie, marketing i bezpieczeństwo – wszystko w jednym miejscu.

Classic Editor to oficjalna wtyczka obsługiwana przez zespół WordPress, który przywraca poprzedni (“klasyczny”) edytor WordPress i ekran “Edit Post”. Umożliwia korzystanie z wtyczek, które rozszerzają ten ekran, dodają meta-boxy w starym stylu lub w inny sposób zależą od poprzedniego edytora. Domyślnie ta wtyczka ukrywa wszystkie funkcje dostępne w nowym edytorze bloków (“Gutenberg”).

Automatycznie wykrywa twoje ustawienia i konfiguruje twoją stronę tak, aby działała przez https. Aby zachować lekkość, opcje są ograniczone do minimum. Cała witryna zostanie przeniesiona do protokołu SSL.

To obszerny zbiór różnych elementów wizualnych i funkcjonalnych, które można wykorzystać w edytorze postów, widżetach tekstowych, a nawet w plikach szablonów. Używając Shortcodes Ultimate możesz łatwo tworzyć zakładki, przyciski, pudełka, suwaki i karuzele, responsywne filmy i wiele, wiele więcej.

W przypadku WordPress w wersji 5.0 i nowszych wtyczka TinyMCE Advanced wprowadza “tryb hybrydowy” dla nowego edytora bloków (Gutenberg). Przynosi to co najlepsze z obu edytorów, ulepsza Klasyczny Blok i dodaje nowy Klasyczny Blok Akapitów, który zastępuje domyślny Blok Akapitów.

WooCommerce jest darmową wtyczką eCommerce, która pozwala sprzedawać wszystko, pięknie. Zbudowany aby zapewnić bezproblemową integrację z WordPress, WooCommerce jest najpopularniejszym rozwiązaniem eCommerce na świecie, które daje pełną kontrolę zarówno właścicielom sklepów, jak i deweloperom.

Bloki WooCommerce to najprostszy i najbardziej elastyczny sposób wyświetlania Twoich produktów na postach i stronach! Korzystając z oryginalnego “bloku produktów”, wyświetlane produkty można filtrować według kategorii, statusu sprzedaży lub wielu innych pól. Możesz nawet utworzyć własną listę wybranych produktów do wyświetlenia.

Umożliwia dodanie niestandardowego CSS do całej witryny oraz do poszczególnych postów, stron i niestandardowych typów postów (takich jak produkty Woocommerce).

Yoast SEO zapewnia kompletny zestaw narzędzi, który pozwala dążyć do tego pierwszego miejsca w wynikach wyszukiwania.

 

Dostosowanie wyglądu


WooCommerce » WordPress dla opornych » część 2

 

Personalizacja – dostosowywanie


Dostępne opcje:WooCommerce » WordPress dla opornych » część 2

Teraz małymi kroczkami do przodu. Wychodzę z założenia, że jednak większość osób pochłania wiedzę wzrokiem stąd wykorzystanie ilustracji wskazujące na praktyczne rozwiązania. Natomiast reszta to tylko niewielkie wskazówki.

Krok 1 » Tożsamość witryny

WooCommerce » WordPress dla opornych » część 2

Logo Max Width – ‘wielkość’ obrazu loga

Logo

Do stworzenia loga skorzystamy z serwisu »  FamingText oraz programu adobe photoshop lub innego darmowego do lekkich poprawek

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

 

WooCommerce » WordPress dla opornych » część 2

Efekt

WooCommerce » WordPress dla opornych » część 2

 

WooCommerce » WordPress dla opornych » część 2

Tytuł i opis witryny 🙂

Ikona witryny

Ikony witryny powinny być kwadratowe i mieć wielkości co najmniej 512 × 512 pikseli – dowolny format obrazu

Krok 2 » Theme Settings

WooCommerce » WordPress dla opornych » część 2

Krok 2.1  » Site Layout – Układ strony

WooCommerce » WordPress dla opornych » część 2

Site Container Width – szerokość strony na ekranie

WooCommerce » WordPress dla opornych » część 2

Efekt zmiany

WooCommerce » WordPress dla opornych » część 2

 

Site Content Layout – układ zawartości witryny

WooCommerce » WordPress dla opornych » część 2

Efekt zmiany – wersja połączona z sidebar kontra wersja blokowa

WooCommerce » WordPress dla opornych » część 2

 

Mamy też możliwość przy wyborze wersji blokowej  – break up the sidebar widgets – rozbicie widżetów paska bocznego

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

Krok 2.2  » Header – nagłówek

Header Layout – układ nagłówka

WooCommerce » WordPress dla opornych » część 2

Efekt zmiany – układ pojedynczy kontra układ podwójny

WooCommerce » WordPress dla opornych » część 2

Change to Centered Layout – wyśrodkowanie zawartości nagłówka, w tym loga

WooCommerce » WordPress dla opornych » część 2

Efekt zmiany

WooCommerce » WordPress dla opornych » część 2

 

Krok 2.3  » Home Page Slider – suwak (niech będzie też, że banner) strony głównej

WooCommerce » WordPress dla opornych » część 2

Default Slider – domyślny suwak

WooCommerce » WordPress dla opornych » część 2

Wprowadzamy identyfikatory kategorii postów, które chcemy wyświetlić w suwaku. Np .: “13,17,19” (bez spacji i tylko przecinek)

WooCommerce » WordPress dla opornych » część 2

Efekt ustawień

WooCommerce » WordPress dla opornych » część 2

Slider Size – rozmiar suwaka

WooCommerce » WordPress dla opornych » część 2

Efekt ustawień – small – medium – large

WooCommerce » WordPress dla opornych » część 2

 

Krok 2.4  » Blog – mamy możliwość ustawienia parametrów bloga, ale wrócimy do nich innym razem

WooCommerce » WordPress dla opornych » część 2

 

Krok 2.5  » » Footer – stopka

Standard Layout – w zasadzie opcja przejmuje ustawienia widżetów wordpressa

Social Layout – ikony mediów społecznościowych

WooCommerce » WordPress dla opornych » część 2

Dane ustawiamy w:

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

 

None

WooCommerce » WordPress dla opornych » część 2

 

Krok 3 » Theme Text – ustawienia poszczególnych parametrów tekstu, w tym gotowe teksty

WooCommerce » WordPress dla opornych » część 2

Krok 3.1 » Header – nagłówek

WooCommerce » WordPress dla opornych » część 2

Efekt

WooCommerce » WordPress dla opornych » część 2

Krok 3.2 » Navigation – Nawigacja

WooCommerce » WordPress dla opornych » część 2

Efekt

WooCommerce » WordPress dla opornych » część 2

Krok 3.3 » Footer – Stopka

WooCommerce » WordPress dla opornych » część 2

Efekt

WooCommerce » WordPress dla opornych » część 2

Krok 3.4 » Error 404 – Błąd 404 – strona nie istnieje

WooCommerce » WordPress dla opornych » część 2

Krok 3.5 » No Results – Brak rezultatu wyszukiwania

WooCommerce » WordPress dla opornych » część 2

 

Krok 4 » Theme Fonts – ustawienie czcionek

WooCommerce » WordPress dla opornych » część 2

Body Font Color – kolor czcionki ‘strony’

WooCommerce » WordPress dla opornych » część 2

Heading Font Color – kolor czcionki nagłówka strony

WooCommerce » WordPress dla opornych » część 2

 

Krok 5 » Layout Colors – kolory układu

WooCommerce » WordPress dla opornych » część 2

Krok 5.1 » Default Colors – domyślne kolory – nie będziemy korzystać z tych ustawień

Krok 5.2 » Header – kolory w nagłówku

Background Color – zmiana koloru tła nagłówka

WooCommerce » WordPress dla opornych » część 2

Font Color – zmiana koloru czcionki w nagłówku

WooCommerce » WordPress dla opornych » część 2

Header Opacity – zmiana transparentności nagłówka

WooCommerce » WordPress dla opornych » część 2

Navigation Background Color – zmiana koloru belki nawigacyjnej

WooCommerce » WordPress dla opornych » część 2

Navigation Font Color – zmiana koloru czcionki na belce nawigacyjnej

WooCommerce » WordPress dla opornych » część 2

Navigation Opacity – zmiana transparentności belki menu

WooCommerce » WordPress dla opornych » część 2

 

Krok 5.3 » Home Page Slider – kolory w slider-ze – oczywiście będziemy mogli skorzystać z tych ustawień jeśli włączymy opcje Page Slider

Block Background Color – kolor tła

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

Block Font Color – kolor czcionki

WooCommerce » WordPress dla opornych » część 2

Block Opacity – transparentność tła pod tekstem

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

Krok 5.4 » Pages – kolory na stronach, wpisach

Background Color – kolor tła

WooCommerce » WordPress dla opornych » część 2

Opacity – transparentność tła

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

Sidebar Titles Color – kolor nazwy widżetu

WooCommerce » WordPress dla opornych » część 2

Krok 5.5 » Footer – kolory w stopce

Background Color – kolor tła stopki

WooCommerce » WordPress dla opornych » część 2

Font Color – kolor czcionki

WooCommerce » WordPress dla opornych » część 2

Footer Opacity – transparentność stopki

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

Bottom Bar Background Color – tło dolnej belki menu

WooCommerce » WordPress dla opornych » część 2

Bottom Bar Font Color – kolor czcionki na dolnej belce menu

WooCommerce » WordPress dla opornych » część 2

Bottom Bar Opacity – transparentność dolnej belki menu

WooCommerce » WordPress dla opornych » część 2

WooCommerce » WordPress dla opornych » część 2

 

Podsumowanie


No cóż jak widzicie sporo możliwości. Wszystko zależy teraz wyłącznie od Waszej wyobraźni 🙂

Facebook Comments