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.

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.

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.

Jednak nie jest to jedyne rozwiązanie kiedy bowiem np. budujemy własny szablon lub użycie wtyczki wydaje nam się zbyt kłopotliwe możemy samodzielnie dopisać taką opcję.

Jeśli jednak wolicie skorzystać z wtyczki polecam wtyczki post in page.

Co trzeba wiedzieć na początek!

Gdzie jest w tym o czym piszę haczyk? O tuż po aktualizacji pobranej z Internetu skórki nasza zmiana może zostać nadpisana. Jednak jeśli stworzymy dodatkowy wygląd (inny szablon strony) w motywie i w nim umieści się spersonalizowany kod to dodatkowa funkcjonalność powinna pozostać nie tknięta. Na wszelki wypadek warto jednak zachować kopię zapasową w tedy po aktualizacji w razie potrzeby wystarczy dodać ponownie przez FTP nasz plik. Inny typ szablonu strony oczywiście wybieramy podczas edycji artykułu w prawym panelu bocznym.

Dość istotne jeśli nie masz doświadczenia w tego typu modyfikacjach by przed przystąpieniem do pracy zapoznać się z kilkoma innymi moimi wpisami.

• link stałe
• inny wygląd podstrony
• pliki szablonu

Wypisywanie wpisów z kategorii o nazwie takiej jak strona

W celu wypisania postów z danej kategorii trzeba w pliku wykołysać poniższy kod. Kod najlepiej umieścić pod wypisaniem treści artykułu – w ten sposób będziemy mieć pewność iż pobierze poprawnie nazwę kategorii.

<?php
  $nameofkat = $post->post_name;
    query_posts('category_name='.get_permalink().'&post_status=publish,future');
    while (have_posts()) : the_post();
      echo "<div class=''>";
       the_post_thumbnail();
      echo "<h3 class='entry-title'>";
      echo "<a href='".get_permalink()."'>";
            the_title();
      echo "</a>";
      echo "</h3>";
        the_content();
      echo "</div>";
   endwhile;
?>

By lepiej można go było zrozumieć przedstawię teraz co robią poszczególne elementy specyficzne dla WordPress, czyli daruję opis pobocznych elementów HTML, PHP i odwołania do CSS.

$nameofkat = $post->post_name;
query_posts('category_name='.get_permalink().'&post_status=publish,future'); // bież pod uwagę posty znajdujące w kategorii nazywającej się tak samo jak nazwa strony 

query_posts('cat=6'); // weź pod uwagę posty z kategorii o id=6

W tym przypadku pod treścią artykułu pokażą się wpisy (posty) należące do kategorii o takiej samej nazwie jak strona.

Podobny efekt można uzyskać – Zmiana adresów stałych.

Wypisywanie wpisów z kategorii innej niż nazwa strony

W drugim przypadku kod będzie wyglądał tak:

<?php
 query_posts('cat=7');
 while (have_posts()) : the_post();
 echo "<div class=''>";
 the_post_thumbnail();
 echo "<h3 class='entry-title'>";
 echo "<a href='".get_permalink()."'>";
 the_title();
 echo "</a>";
 echo "</h3>";
 the_content()
 echo "</div>";
 endwhile;;
?>

Teraz id kategorii ustawione jest na sztywno. W efekcie wszystkie strony korzystające z pliku z tym kodem będą wyświetlać te same wpisy.

Powyżej wypisałam 2 różne sposoby uzyskania listy postów z kategorii. W pierwszym przypadku w zależności od strony zostanie wzięta pod uwagę inna grupa wpisów. Spełniać ona musi jednak warunek posiadania takiej samej nazwy jak strona np. na stronie Oferta wyświetlą się wpisy z kategorii Oferta o ile taka istnieje.

W drugim przypadku na każdej stronie z tym szablonem wypisujemy posty z kategorii posiadającej id=7.

the_title(); // wypisanie tytułu postu

get_permalink() // adres postu, jego lokalizacja np. http://www.aurainweb.pl/przykladowy-post

the_content(); // wypisuje urywek tekstu, aż do "read more"

Czasami może przydać się również kod:

get_the_date; // data utworzenia postu

W powyższym kodzie ominęłam składnię CSS ze względu na zróżnicowaną budowę dostępnych szablonów.

Jeżeli mapie jakieś pytania lub sugestie możecie zostawić je w formie komentarza.

Dodatkowe tagi

• Jak dodać wpis do wybranej przeze mnie strony na wp?
• Umieszczenie wpisu na innej stronie
• Wypisywanie postów z szablonu
• modyfikacja szablonu, bez wtyczki

Artykuł Wyświetlanie wpisów na statycznej stronie bez wtyczki – WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Od czego zacząć?

Na początek trzeba określić czego nam tak naprawdę potrzeba. W brew pozorom większość ludzi tak naprawdę tego nie wie.

Szablony (skórki) można mieć z różnych miejsc. Większość użytkowników korzysta z repozytorium WordPress’a. Jest to darmowa baza zawierająca nie tylko szablony, ale również mnóstwo wtyczek. Do repozytorium możemy wejść z pomocą panelu WordPress lub bezpośrednio na stronę. Motywy te w wersji dostępnej na stronie są darmowe.

Szablon można również zrobić samemu (jeśli ktoś potrafi) lub kupić gotowy motyw.  W internecie jest istnieje wiele stron oferujących płatne szablony – w większości z dodatkowymi wtyczkami. Dość spory wybór ciekawych szablonów znajdziecie np. na ThemeForest

Po zakupie szablonu dostajemy go najczęściej w formie archiwum – zawierającego wszystkie niezbędne pliki.

W podobnej formie możemy pobrać szablon ze strony WordPress.

Wgrywanie archiwum z nowym szablonem

Na początek musimy się zalogować do panelu administracyjnego. Następnie przejść do zakładki Wygląd -> Motywy. Znajdują się w niej już zainstalowane szablony. Teraz odnajdujemy przycisk Dodaj nowy powinien się znajdować obok nazwy zakładki.

Po kliknięciu w niego zostaniemy przeniesieni na stronę z proponowanymi motywami, które możemy zainstalować w naszym CMS. Nas one jednak nie interesują. Odnajdujemy tutaj przycisk Wyślij na serwer. Będzie się on mieścił w tym samym miejscu co poprzedni przycisk.

Po przyciśnięciu otworzy się opcja umożliwiająca wgranie nam archiwum do WordPress.
„Jeżeli posiadasz motyw w formacie .zip, możesz zainstalować go poprzez wysłanie go na serwer za pośrednictwem tej strony.”

Postępujemy teraz analogicznie jak przy dodawaniu załącznika do e-mail lub plików do biblioteki mediów.

Po wybraniu pliku Instalujemy go. Dzięki temu pojawi się w CMS nowy motyw, który będziemy mogli aktywować.

Ręczne dodawanie szablonu

Jeżeli nie chcemy wgrywać pobranego szablonu z pomocą panelu lub stworzyliśmy własny  możemy go samodzielnie umieścić na serwerze. W przypadku archiwum oczywiście trzeba je rozpakować.

Następnie za pomocą programu z obsługą FTP umieścić pliki na serwerze. Katalog z szablonem umieszczamy w lokalizacji wp-content/themes.

Teraz logujemy się do panelu administracyjnego WordPress-a i wchodzimy do zakładki wygląd mieszczącej się w lewym menu.

Odnajdujemy nowy szablon  i go uruchamiamy. Kolejnym krokiem jest konfiguracja – przebiega ona w różny sposób w zależności od wybranego szablonu. Warto wtedy sprawdzić czy np. nie ma jej opisu od autora.

Dodawanie szablonu z repozytorium

W drugim przypadku od razu musimy być zalogowani w panelu administracyjnym WordPress-a. Wchodzimy do zakładki wygląd, następnie wybieramy opcję „zainstaluj motywy„. Zostaniemy wtedy przeniesieni do wyszukiwarki motywów. Nie musimy zaznaczać żadnych (ale możemy by lepiej dobrać preferencje) opcji wystarczy wybrać przycisk „szukaj”. Następnie z pośród zaproponowanych odszukać nowy szablon spełniający nasze potrzeby.

Po nieprzyciśnięciu miniaturki pokaże się podgląd szablonu. Jeśli szablon nam się spodoba możemy go zainstalować za pomocą opcji instaluj lub jeśli nam się nie spodobał zamykamy podgląd i szukamy innego.

W procesie instalacji motyw zostanie pobrany na nasz serwer.  Na koniec aby skórka była aktywna trzeba ją włączyć.

Czy to już koniec?

Nie do końca teraz pora na skonfigurowanie naszego motywu. Czyli np.

• dodanie menu
• uporządkowanie panelu bocznego

Dodatkowe tagi:
jak spersonalizować szablon
instalacja szablonu, szaty graficznej, skórki
personalizacja szablonu

Artykuł Instalacja nowego szablonu / motywu w WordPress pochodzi z serwisu Kurs WordPress od podstaw.