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.

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.

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.