Zlecenia z WordPressa – studium przypadków z życia wziętych

Zlecenia z WordPressa

Kiedy mówię ludziom, że żyję ze zleceń z WordPressa, spotykam się zwykle z dwoma rodzajami reakcji. Pierwsza to zdziwienie, że tak w ogóle się da. Drugi rodzaj reakcji to zalanie pytaniami, bazujące na założeniu, że moja praca polega na robieniu stron z wykorzystaniem WordPressa. Takich od A do Z. I że muszę na tym nieźle zarabiać, bo przecież dzisiaj każdy chce zaistnieć w internecie.

Prawda jest jednak inna. Rzeczywiście projekty tworzone od podstaw są najciekawsze, dają najwięcej satysfakcji, jednak mało kogo na nie stać. W końcu zrobienie większej witryny „od zera” to kilkadziesiąt godzin pracy doświadczonego grafika, drugie tyle zabierze przełożenie tego na WordPressa. Na tego typu zlecenia pozwalają sobie raczej duże firmy i takich zleceń wpada kilka w roku.

Wśród „codziennych” zapytań od klientów więcej jest tak zwanej drobnicy: różnego rodzaju dostosowania gotowych motywów do wymagań klienta, dodanie jakiejś funkcjonalności, i – co ostatnio wpada do mnie coraz częściej – załatanie błędów. Kiedyś nie lubiłam tych ostatnich, potrafiłam odmówić ich realizacji jeszcze przed wgryzieniem się w problem. Ostatnio jednak kilka takich przyjęłam. I doszłam do zadziwiających mnie samą wniosków.

Na pogotowiu WordPressa można zarobić. I to całkiem dobrze w porównaniu z poświęconym czasem.

Czym się charakteryzują takie zlecenia:

  • Są konkretne, dotyczą specyficznego problemu.
  • Zleceniodawca jest zdesperowany i zmęczony bezowocnym szukaniem przyczyny błędu. Co oznacza naszą przewagę negocjacyjną. „Zapłacę. Byle tylko działało Pani Agnieszko”.
  • Stanowią zamkniętą całość. Jak już naprawimy problem, temat zostaje zamknięty, w przeciwieństwie do oddania nowo tworzonej strony, gdzie błędy wychodzą dopiero w trakcie jej „życia”.

W dzisiejszym wpisie postanowiłam przeprowadzić case study trzech wybranych zleceń.

Zlecenie nr 1 – strona wyświetla tylko nagłówek

Problem

Dzwoni klient i mówi, że w dwóch jego witrynach wystąpił nagle ten sam problem. Na wszystkich podstronach pokazywany jest tylko nagłówek, mimo że do tej pory wszystko działało poprawnie.

Analiza problemu

Zlecenie z WordPressa - krok 1.1

Krok 1. Od czego zacząć analizę?

Proszę o namiar na stronę i dostęp do serwera ftp. Odpalam stronę w przeglądarce, włączam podgląd źródła i widzę, że strona faktycznie urywa się mniej więcej w miejscu, gdzie kończy się header. Dalej jest tylko nicość.

Zwykle za wygenerowanie części nagłówkowej w WordPressie odpowiada plik header.php motywu. Wchodzę więc do jego źródła, w polu „szukaj” edytora wpisuję frazę pozwalającą mi namierzyć ostatni widoczny na stronie fragment. Fraza zostaje znaleziona, a zaraz za nią widać bardzo dziwny fragment kodu. Atak, myślę sobie, bo wiem, że normalny kod tak nie wygląda.

<?php @error_reporting(0); if (!isset($eva1fYlbakBcVSir))
...
= $eva1tYlbakBcVSir;} ?>

Zlecenie z WordPressa - krok 1.2

Krok 2. Więc jednak atak…

Wrzucam powyższy fragment kodu w google’a. W odpowiedzi dostaję dziesiątki stron potwierdzających moje przypuszczenie. Obecność tego rodzaju kodu na stronie jest wynikiem infekcji. Wykorzystano lukę w programie timthumb.php, dostarczanym wraz z niektórymi motywami WordPressa i wtyczkami.

Usuwam feralny fragment, strona natychmiast wstaje do życia. Podejrzanego kodu szukam jeszcze w innych plikach danej witryny. Ostatecznie okazuje się, że zainfekowanych zostało kilkanaście źródeł php. Czyszczę wszystkie.

Zlecenie z WordPressa - krok 1.3

Krok 3. Jak zabezpieczyć się na przyszłość

Witryna wprawdzie wróciła do życia, ale skoro dziura jest, atak w każdej chwili może się powtórzyć. Problem został usunięty w którymś z kolejnych releasów programu timthumb. Trzeba zatem zrobić jego aktualizację.

Tutaj pomocna okazuje się gotowa wtyczka do WordPressa Timthumb Vulnerability Scanner. Skanuje ona katalog wp-content WordPressa w celu znalezienie niechlubnej wersji timthumb’a i daje możliwość wykonania jej aktualizacji do wersji bezpiecznej. Więcej o tej wtyczce przeczytasz na blogu u Oli.

Zlecenie z WordPressa - krok 1.4

Krok 4. Jak wycenić usługę?

No właśnie. Znalezienie problemu i usunięcie przyczyny błędu zajęło mi jakąś godzinkę. Średnia stawka godzinowa programisty WordPressa to podobno 60zł – zobacz wyniki ankiety, którą Konrad prezentował na WordCampie. Na tym samym WordCampie nauczyłam się innej ważnej rzeczy (tu oczko leci do Wojtka. Chociaż nie wiem, czy Wojtek je zauważy, bo on podobno tego bloga nie czyta, tylko skanuje):

Sprzedajesz wiedzę, nie czas.

Wyceniam usługę na 300zł netto. Klientowi sporządzam raport z przeprowadzonej akcji. Zadowolony jest i klient i ja.

Zlecenie nr 2 – newsy z feeda RSS nie odświeżają się

Problem

Klient ma dwa, powiązane ze sobą portale. Pierwszy informacyjny, drugi ogłoszeniowy, na którym zarabia. Żeby ściągnąć ruch na portal zarobkowy, na portalu informacyjnym (który oglądany jest częściej) wyświetlane są ostatnio dodane ogłoszenia z portalu ogłoszeniowego. W tym celu wykorzystywany jest feed RSS. Portal ogłoszeniowy udostępnia nowe wpisy w postaci feed’a RSS, a portal informacyjny korzysta z widgetu RSS, żeby je odczytać i automatycznie wyświetlać.

Na czym polega problem: mimo dodawania nowych ogłoszeń, nie zostają one wyświetlone w portalu informacyjnym. Co dziwniejsze, nie ma tu reguły. Klient twierdzi, że czasami nowe ogłoszenia się pojawiają, czasami nie.

Analiza problemu

Zlecenie z WordPressa - krok 2.1

Krok 1. Od czego zacząć analizę?

Dodaję nowe ogłoszenie, sprawdzam, czy pojawia się ono w feedzie RSS (w tym celu zwykle wystarczy do adresu bloga dodać końcówkę /feed np. dla tego bloga będzie to https://webfaces.pl/blog/feed/)

Tak. Podgląd źródła XML feeda portalu ogłoszeniowego przekonuje mnie, że nowe ogłoszenie trafiło do niego.

Zlecenie z WordPressa - krok 2.2

Krok 2. Zatem problem jest po stronie odbiorcy

Wchodzę na portal informacyjny. Upewniam się, że strona jest świeżo wygenerowana, żeby mieć pewność, że problem nie leży w cache’owaniu prezentowanego contentu. Okazuje się, że świeżutka, nie zcache’owana (jak to się pisze?) strona nadal nie widzi najnowszych wpisów pochodzących z feeda RSS.

Zlecenie z WordPressa - krok 2.3

Krok 3. Klucz tkwi w zadaniu odpowiedniego pytania

No to idę po radę do google’a. Tylko jak nazwać problem? Czyli jakie słowa kluczowe wpisać w wyszukiwarkę. Wiem, że używam widgetu RSS, problem polega na braku odświeżania. Decyduję się więc na taką oto frazę:

wordpress rss feed not refreshing

Kilka pierwszych wyników w SERP’ach okazuje się ścieżką donikąd. Niektórzy sugerują konflikty z wtyczkami. Podchodzę do tego sceptycznie, ale próbuję. Wyłączenie wszystkich wtyczek nie rozwiązuje problemu. Szukam dalej. W końcu wpadam na wpis o zachęcająco brzmiącym tytule Change WordPress RSS Widget refresh interval – jest coś o interwale odświeżania. Autor pisze, że domyślny czas odświeżania się widgetu RSS to 12 godzin. No to jesteśmy w domu!

Wystarczy go zmienić za pomocą prostego filtru dodanego do pliku funcions.php:

    add_filter( 'wp_feed_cache_transient_lifetime', create_function('$a', 'return 900;') );

Czas podawany jest w sekundach. Powyższy przykład wymusi zatem odświeżanie treści odczytywanych przez WordPressowy widget RSS co 15 minut. No to nie musimy już czekać pół doby. I wyjaśniło się, dlaczego czasami ogłoszenia się pojawiały. One pojawiały się zawsze, niekiedy przypadkiem udało nam się wstrzelić w pobliże momentu odświeżenia.

Zlecenie nr 3 – a miało być tak pięknie

Problem

Klient zakupił profesjonalny szablon na ThemeForest. Wcześniej obejrzał jego wersję demo, która zapowiadała się naprawdę obiecująco. Po aktywacji motywu na swoim serwerze przychodzi rozczarowanie. To nie tak miało wyglądać. Strona raczej w ogóle nie wygląda (przykłady niżej). Klient zdaje sobie wprawdzie sprawę, że witryna nabierze wigoru po wypełnieniu zdjęciami i treścią, pozostaje jednak pytanie: jak to zrobić?

Po kilku godzinach prób przebicia się przez short code’y, znalezienia i zrozumienia dokumentacji technicznej, klient poddaje się, zwracając do mnie i zalewając morzem pytań z serii jak uzyskać ten efekt? „Pani Agnieszko, może zrobi Pani jakiś przykład, ja już potem polecę analogicznie. Zapłacę.”.

Porównanie wyglądu motywu typu premium widocznego w stronie demo (rys. 1) i po instalacji u klienta (rys. 2)

Wygląd strony WordPressowej z wypełnionymi danymi, na przykładzie motywu CrossApple
Rys. 1. Motyw wypełniony danymi, widok ze strony demo
Wygląd strony WordPressowej bez danych, na przykładzie motywu CrossApple
Rys. 2. Ten sam motyw po instalacji u klienta (bez danych)

Analiza problemu

Zlecenie z WordPressa - krok 3.1

Krok 1. Jak podejść do problemu?

Rozwiązanie jest dużo prostsze niż można by przypuszczać. Motywy premium zakupione na stockach typu Theme Forest zwykle dostarczane są w pakiecie, w którym znajdziemy tzw. Sample Data. Czyli dane przykładowe, przygotowane przez autora motywu z myślą o jego wstępnym wypełnieniu. Najczęściej ich wykorzystanie da nam efekt identyczny jak ten, który widzimy na stronie demo.

Okazuje się, że mało kto z kupujących o tym wie. A jeśli nawet wie, to już wielką zagadką pozostaje, jak dane te wykorzystać.

Zlecenie z WordPressa - krok 3.2

Krok 2. A więc Sample Data, tylko co dalej?

Przykładowe dane, którymi szybko zasilimy naszą witrynę znajdują się w pliku z rozszerzeniem xml (dostarczonym w pakiecie motywu premium). Plik ten zwykle nazywa się nazwaMotywu.wordpress.sample.xml lub nazwaMotywu.wordpress.2012-04-19.xml.

Pierwszych kilka linijek źródła tego pliku zawiera instrukcję, w jaki sposób można zaczytać go do WordPressa. Sposób postępowania jest zawsze ten sam.

Jak wypełnić WordPressa przykładowymi danymi

  1. Zaloguj się do panelu WordPressa jako admin.
  2. Z menu po lewej wybierz Narzędzia, następnie Import.
  3. W tabelce kliknij ostatnią pozycję z hasłem WordPress: Zainstaluj importer z WordPressa, aby zaimportować wpisy, strony… .
  4. Zainstaluj Importera.
  5. Załaduj plik xml (znajdziesz go wśród plików pakietu zakupionego motywu premium).
  6. WordPress poprosi o wskazanie autora wpisów, a następnie zaimportuje dane przygotowane przez autora motywu.
Instalacja Importera - ilustracja kroku 3
Instalacja Importera - ilustracja kroku 3
Instalacja Importera - ilustracja kroku 4 - instalacja Importera
Instalacja Importera - ilustracja kroku 4
Instalacja Importera - ilustracja kroku 5
Instalacja Importera - ilustracja kroku 5

Zlecenie z WordPressa - krok 3.3

Krok 3. Ucz się na przykładach

Analizując przykładowe dane szybko zrozumiesz specyfikę działania danego motywu.

Prawda że tego typu zlecenia mogą być ciekawą odskocznią od monotonii codziennej pracy? Już nie jeżę się na tego typu zapytania. A jeśli przy okazji okaże się, że prezentacja tego rodzaju studium przypadków na blogu zostanie dobrze przyjęta przez czytelników, będę mieć dodatkową motywację, żeby chętniej podejmować takie wyzwania i dzielić się zdobytą wiedzą. Nawet wówczas, gdy na początku nie mam zielonego pojęcia, jak ugryźć problem i jakie frazy w google wpisać. Bo przecież każdy problem już ktoś wcześniej miał, kwestia tylko jak znaleźć w necie jego rozwiązanie…

Inne wpisy o podobnej tematyce

Zanim powiesz: Tego nie da się zrobić

Wygoda użytkownika w WordPressie

Dziś zamiast wstępu teatrzyk.

Występują:

  • Użytkownik – klient zlecający projekt z WordPressa. Nie jest informatykiem, szuka prostych rozwiązań.
  • Programista Typ A (Abnegat) – jest dobrym programistą, ale ma dosyć utarczek z użytkownikami, którzy przecież i tak nie rozumieją jego świata.
  • Programista Typ B (Biznesmen) – dobrze rokujący programista, zorientowany na szybki zarobek.
  • Programista Typ C (Chcę się rozwijać) – programista, który wsłuchuje się w użytkownika, bo wie, że w ten sposób sam się może wiele nauczyć, a zadowolony klient wraca.

Czytaj dalej Zanim powiesz: Tego nie da się zrobić

[rozwiązany] Problem liczby mnogiej w tłumaczeniu motywu WordPressa

Jak poprawnie przygotować motyw WordPressa na obsługę liczby mnogiej

Wpis będzie odpowiedzią do dyskusji, jaka wywiązała się pod artykułem na dev.wpzlecenia dotyczącym prawidłowej odmiany informacji o liczbie komentarzy. Autor artykułu słusznie zwrócił uwagę na potrzebę dbałości o poprawną odmianę słówka „komentarze” na blogu w WordPressie.

Czytaj dalej [rozwiązany] Problem liczby mnogiej w tłumaczeniu motywu WordPressa

Jak zwiększyć liczbę komentarzy na blogu w WordPressie

Jak zwiększyć liczbę komentarzy na blogu

Atrakcyjna galeria handlowa. Dziesiątki stoisk z ciekawym asortymentem. Jestem tu po raz pierwszy, podoba mi się. Z zapałem przeglądam bogatą ofertę poszczególnych sklepów. Gdy opada początkowa euforia uświadamiam sobie, że jednak coś tu nie gra… I powoduje, że czuję się nieufnie. Po chwili już wiem. Mimo godzin szczytu nie spotykam innych klientów. Sprzedawcy niby są, ale też jakby gdzieś się pochowali.

Czytaj dalej Jak zwiększyć liczbę komentarzy na blogu w WordPressie

Adaptacja rotatora z WordPressem – przykład użycia własnych typów wpisów

Rotator w WordPressie - tutorial

Rotatory zdjęć zalały świat weba. Zanim pomyślisz, że są na tyle popularne, że lada dzień wyjdą z mody, przeczytaj ten artykuł. Zanim powiesz, że są dziesiątki gotowych wtyczek, za pomocą których dodasz slider do bloga w WordPressie, pomyśl, ile tracisz, rozwiązując każdą zachciankę za pomocą wtyczki. Albo inaczej – zobacz, co zyskasz, próbując samodzielnie zintegrować rotator zdjęć z WordPressem.

Czytaj dalej Adaptacja rotatora z WordPressem – przykład użycia własnych typów wpisów

Jak zrobić menu obrazkowe w WordPressie – tutorial

WordPress - menu na obrazkach

Już kilka osób pytało w komentarzach, jak w WordPressie wykonać menu z obrazkami. Zainteresowanie tematem wcale mnie nie dziwi – menu obrazkowe może uatrakcyjnić wygląd i podkreślić indywidualny charakter strony. A pytanie, jak „wbić się” z własnymi grafikami do menu generowanego przez WordPressa, długo stanowiło zagadkę i dla mnie. Do momentu, gdy poznałam klasę Walker, której zastosowanie opisałam w artykule Ujarzmić menu w WordPressie….

Czytaj dalej Jak zrobić menu obrazkowe w WordPressie – tutorial

Własny formularz w WordPressie, czyli jak dołączyć swój kod php

WordPress formularz php

Już dawno nie zaglądałam do statystyk odwiedzin tego bloga. Właśnie to zrobiłam i oniemiałam: najwięcej wejść z wyszukiwarek jest na hasło „WordPress jak dołączyć plik php”. Nie byłoby w tym może nic szczególnego, w końcu to blog o WordPressie, jednak nie przypominam sobie, żebym w ogóle pisała artykuł na ten właśnie temat.

Czytaj dalej Własny formularz w WordPressie, czyli jak dołączyć swój kod php

Odnośniki w WordPressie – 7 ciekawych zastosowań

Odnośniki w WordPressie - przykłady
Blogroll w WordPressie, czyli lista odnośników do innych stron, nie musi być nudny. I wcale nie trzeba instalować wtyczek, żeby go ciekawie zaprezentować. Mechanizm dodawania i klasyfikowania odnośników w WordPressie jest bardzo intuicyjny. A przy tym pomimo prostoty obsługi, niesie za sobą morze możliwości.

Artykuł pokazuje kilka ciekawych zastosowań odnośników w WordPressie. Większość przykładów wymaga znajomości WP jedynie na poziomie użytkowym, jednak i koneserzy WordPressa znajdą też coś dla siebie – za pomocą prostych filtrów dodanych do pliku functions.php można wyczarować całkiem imponujące efekty. Czytaj dalej Odnośniki w WordPressie – 7 ciekawych zastosowań

WordPress jako CMS – własne typy wpisów Twoim kołem ratunkowym

WordPress jako CMS - własne typy wpisów
Jeśli używasz WordPressa jako CMS, ta wiadomość jest będzie dla Ciebie jak wiatr w żagle: własne typy wpisów (ang. custom post types) pomogą Ci w bardziej elastyczny sposób dostosować witrynę do potrzeb Twoich lub Twojego klienta.

Każdy, kto wykorzystywał WordPressa jako systemu o szerszej funkcjonalności niż tradycyjny blog, prędzej czy później doszedł do wniosku, że prosty mechanizm wpisów i kategorii to za mało. Począwszy od WordPressa w wersji 3.0 można tworzyć własne typy wpisów. Czytaj dalej WordPress jako CMS – własne typy wpisów Twoim kołem ratunkowym

WordPress jako CMS – konwersja statycznej strony HTML do WordPressa

Tutorial pokazuje na żywym przykładzie (stronach demo), jak przerobić statyczną stronę opartą o pliki HTML i CSS w witrynę działającą w systemie WordPress. W artykule znajdziesz również:

Statyczna strona HTML, którą przerobimy na witrynę pod WordPress
Statyczna strona HTML, którą przerobimy na WP
Witryna na WordPress - efekt końcowy
Witryna na WordPressie (zobacz demo - efekt końcowy)

Na rysunkach obok zamieszczono odnośniki do działających przykładów: statycznej strony HTML, którą – w ramach tego tutoriala – przekształcimy w witrynę działającą pod WordPressem.

Tworzenie witryny opartej o WordPress – etapy

Na rysunku niżej widzimy etapy tworzenia strony internetowej. W kroku 1 wyodrębniamy podstawowy szkielet witryny (bloki) i na jego podstawie wykonujemy statyczną stronę HTML. W tym tutorialu zajmiemy się krokiem 2: mając gotową, działającą stronę, opartą o pliki HTML/CSS dostosujemy ją do działania pod WordPressem.

Etapy tworzenia witryny w oparciu o WordPress
Etapy tworzenia witryny w oparciu o WordPress (powiększ)

Czy każdą statyczną stronę/witrynę HTML można dostosować do działania na WordPressie?

Tak, jednak aby proces ten przebiegł gładko, taka strona musi być wcześniej odpowiednio przygotowana. Tutorial oparty jest właśnie na takiej witrynie. Jest to statyczna strona HTML dla fikcyjnej firmy „Milena Motrawska fotografia artystyczna”. Strona ta jest z założenia prosta, lecz zarazem odpowiada typowej stronie internetowej prezentującej usługi małej lub średniej firmy.

Warunki, jakie powinna spełniać statyczna witryna HTML, żeby zamienić ją na stronę działającą pod WP:

  • reguły CSS muszą być zebrane w zewnętrznym pliku (style.css)
  • witryna musi mieć strukturę bloków podstawowych łatwą do odwzorowania na podstawowe pliki szablonu WordPressa (układ bazowy oparty o bloki typu: header, sidabar, content, footer itp.)
  • podstrony powinny być napisane na bazie spójnego layoutu– np. kolumna boczna powinna być na wszystkich podstronach w tym samym miejscu.
  • w niektórych miejscach struktur HTML muszą być użyte odpowiednie klasy
    Dla przykładu: aby za pomoc stylów CSS wyróżnić stronę bieżącą, dla znacznika li musimy użyć klasy „curren_page_item”.

Zamiana strony HTML na witrynę działającą pod WordPress – kroki:

Krok 1: Zainstalowanie WordPressa

Instalujemy (najlepiej najnowszą wersję) WordPressa lokalnie lub zdalnie na serwerze.

Krok 2: Ustawienie parametrów WordPressa do naszych potrzeb:

Ustawienie tytułu i opisu witryny
Ustawienie tytułu i opisu witryny (powiększ)

Krok 2a: Nadanie tytułu i opisu witrynie

Logujemy do się do panelu administracyjnego, wchodzimy w Ustawienia->Ogólne i ustawiamy tytuł i podtytuł naszej witryny. W naszym przykładzie będzie to Milena Motrawska (pole Tytuł witryny) fotografia artystyczna (pole Opis).

Własny format odnośników bezpośrednich
Własny format odnośników bezpośrednich (powiększ)

Krok 2b: Ustawienia sposobu wyświetlania adresów URL podstron

Domyślnie WordPress wyświetla adresy stron ze znakami zapytania i liczbami, np. www.milenamotrawska.pl/?page_id=11. Bardziej przyjazny (również dla Google) sposób wyświetlania to taki, w którym ostatni człon adresu odpowiada tytułowi strony, np: milenamotrawska.pl/o-mnie

W tym celu wchodzimy w Ustawienia->Bezpośrednie odnośniki, zaznaczamy pole „Własny format” i wpisujemy /%postname%/. Uwaga: jeśli zmiana ta nie dała u Ciebie efektu, pozostań przy domyślnych ustawieniach lub poczytaj o ręcznym ustawieniu pliku .htaccess

Dodanie strony
Dodanie strony (powiększ)

Krok 3: Założenie stron

W panelu admin. w sekcji Strony wybieramy „Dodaj nową” i kolejno zakładamy strony o tytułach:

  • Start (1)
  • O mnie (2)
  • Portfolio (3)
  • Oferta (4)
  • Kontakt (5)

W nawiasach podano kolejny numer. Numer ten należy wpisać w pole Kolejność jak pokazano na rysunku obok. Dzięki temu strony wyświetlą się we właściwej kolejności w menu. O tym później. Dla każdej ze stron możemy również wprowadzić treść.

Ustawienie strony głównej
Ustawienie strony głównej (powiększ)

Krok 4: Ustawienie strony głównej

Musimy powiedzieć WordPressowi, która z założonych stron będzie stroną startową. Wchodzimy w Ustawienia->Czytanie, zaznaczamy w polu „Strona główna wyświetla” opcję „stayczną stronę” i wybieramy z listy stronę Start jako stronę główną, jak pokazano na rysunku obok.

Wygląd strony na domyślnym motywie WP
Wygląd strony na domyślnym motywie WP (powiększ)

Krok 5: Założenie katalogu na nasz motyw

Gdybyśmy w tym momencie chcieli zobaczyć wygląd naszej witryny, okaże się że ona już działa, tylko wygląda zupełnie inaczej (przykładowy wygląd na obrazku obok). Zobaczymy strony: O mnie, Portfolio, Kontakt itd,. Dzieje się tak dlatego, że WordPress bezpośrednio po instalacji do wyświetlenia stron używa własnego motywu (skórki), który zainstalował się podczas instalacji WordPressa.

Aktywny motyw
Aktywny motyw (powiększ)

Motyw ten zapisany jest jako podkatalog w katalogu wp-content/themes/ a szczegółowe informacje na jego temat znajdziemy wchodząc w sekcję Wygląd->Motywy. Dla wersji WordPressa 3.2 będzie to motyw Twenty Eleven, znajdujący się w katalogu wp-content/themes/twentyeleven.

Naszym zadaniem będzie stworzenie własnego motywu, po przełączeniu na który, nasza witryna w WordPressie dostanie nową „sukienkę” – utworzone w kroku 3 strony i wpisana treść zostaną wyświetlone inaczej. Jak? Naszym celem będzie zapewnienie wyglądu identycznego z naszą wyjściową stroną statyczną.

Katalog z motywami WP
Katalog z motywami WP (powiększ)

Łączymy się przez ftp z serwerem, gdzie zainstalowaliśmy WordPresss i w katalogu wp-content/themes zakładamy katalog na nasz motyw. Na potrzeby tutoriala nazwiemy go mm-photo. Taką nazwę ma również katalog w paczce do ściągnięcia.

Obrazek podglądu motywu
Obrazek podglądu motywu (powiększ)

Krok 6: Przygotowanie obrazka podglądu motywu

Jeśli chcemy, żeby nasz motyw pokazał się w WordPressie wraz z obrazkiem podglądu strony (zobacz zdjęcie obok), taki obrazek musimy wcześniej przygotować. Możemy to zrobić na bazie projektu graficznego strony docelowej lub wykonać tzw. „zrzut ekranu” strony napisanej w HTML, którą będziemy przerabiać pod WordPressa. Następnie za pomocą narzędzia graficznego należy przyciąć i przeskalować ten obrazek do wymiarów 300×225 i umieścić w katalogu naszego motywu pod nazwą screenshot.png.

Taki obrazek zobaczysz również w katalogu mm-photo w paczce do ściągnięcia.

Nagłówek pliku style.css
Nagłówek pliku style.css (powiększ)

Krok 7: Założenie pliku style.css

W katalogu z naszym motywem (wp-content/themes/mm-photo) zakładamy plik tekstowy o nazwie style.css. Jest to ważny plik, a nie mniej ważne jest to, co napiszemy w jego nagłówku. Wszystkie informacje, które zawrzemy (zgodnie z odpowiednimi regułami) w nagłówku pojawią się na ekranie wyboru motywu w WordPressie pod miniaturką zrobioną w poprzednim kroku.

Aby WordPress wyświetlił informacje takie, jak pokazano na rysunku wyżej, musimy wpisać następujący kod:

/*
Theme Name: Milena Motrawska
Theme URI: https://webfaces.pl/blog/downloads/mm-photo/mm-photo.zip
Milena Motrawska Fotografia Artystyczna
Author: webfaces.pl
Author URI: http://www.webfaces.pl
Description: Milena Motrawska to motyw napisany specjalnie do pokazania jak można wykorzystać WordPress jako system CMS. Motyw stanowi część tutoriala dostępnego pod adresem webfaces.pl/blog
Version: 1.0
*/

Poniżej tego nagłówka wklejamy wszystkiego reguły CSS skopiowane z pliku CSS dołączonego do statycznej strony HTML, którą przerabiamy na witrynę WordPressa. Ponad 95% tych reguł nie będzie wymagało zmian. Tam gdzie zmiany będą potrzebne pokazane będzie w dalszej części tutoriala. Plik style.css możemy utworzyć również jako kopię dotychczasowego pliku style.css (do którego odwoływała się strona statyczna), doklejając na górze powyższy nagłówek.

Pełną zawartość pliku style.css możesz podejrzeć tutaj lub znajdziesz w paczce do plików do pobrania w podkatalogu mm-photo.

  • Uwaga 1: jeśli w nagłówku używasz polskich znaków diakrytycznych, do ich poprawnego wyświetlenia konieczne jest zapisanie pliku style.css w formacie UTF-8 (bez BOM).
  • Uwaga 2: Umieszczenie pliku style.css z nagłówkiem i obrazkiem podglądu w katalogu z motywem nie wystarczy, aby zobaczyć nasz motyw na ekranie Wygląd->Motywy. WordPress pokaże go dopiero wówczas, kiedy w katalogu tym znajdzie plik index.php (do tego dojdziemy). Jeśli jednak bardzo chcesz zobaczyć już w tej chwili, jak prezentują się w WordPressie informacje z nagłówka pliku style.css, utwórz pusty plik tekstowy, nazwij go index.php i wrzuć do katalogu z motywem.
Rezultat kroku 8
Rezultat kroku 8 (powiększ)

Krok 8: Przekopiowanie katalogu images do katalogu motywu

Do katalogu z naszym motywem przekopiowujemy katalog images, w którym znajdują się zdjęcia wykorzystywane do stylizowania wyglądu strony (zdjęcia do których odwołuje się plik style.css).

Uwaga: katalog images powinien zawierać tylko i wyłącznie zdjęcia, do których odwołuje się plik style.css. Zdjęcia, które stanowią treść witryny (tzw. content) należy dołączać do poszczególnych stron poprzez panel administracyjny (będą dostępne w sekcji Media i przechowywane w innych katalogach WordPressa).

Na zdjęciu obok pokazano zawartość katalogu z naszym motywem po wykonaniu tego kroku.

Krok 9: Odwzorowanie plików HTML-owych na pliki WordPressa

Teraz najważniejsza i najistotniejsza część tutoriala. Zawartość pliku index.html naszej statycznej strony rozdzielimy na 4 pliki php (zobacz obrazek poglądowy niżej), w oparciu o które będzie działać witryna na WordPressie:

  • header.php
  • sidebar.php
  • index.php
  • footer.php

Zamiana pliku index.html na pliki php WordPressa
Zamiana pliku index.html na pliki php WordPressa (powiększ)

Ta informacja rozczarowuje nieco początkujących webmasterów. Dlaczego aż tyle „krojenia”? Z czasem przekonamy się, że taka architektura daje dużą elastyczność w rozbudowywaniu witryny pod WordPressem: szybko napiszemy kolejne templatki, a podczas poszerzania funkcjonalności witryny intuicyjnie będziemy wiedzieć, który plik wymaga zmian.

Obrazek obok pokazuje, w których miejscach należy „pociąć” plik index.html, aby prawidłowo rozłożyć jego strukturę pomiędzy pliki php. W kolejnych krokach pokazane będzie, co należy zmienić w kodzie każdego z nich, aby współdziałał z WordPressem i zaczytywał treść wpisaną przez użytkownika z poziomu panelu admin.

Pliki które otrzymamy po wykonaniu kroku 9
Pliki które otrzymamy po wykonaniu kroku 9 (powiększ)

Docelowo (po przejściu do końca instrukcji podanych w krokach 9a-d) katalog z naszym motywem będzie zawierać pliki, które pokazano na obrazku obok. Zawartość katalogu znajduje się również w paczce do pobrania.

Krok 9a: header.php

Tworzymy pusty plik tekstowy i nazywamy go header.php. WordPressowy plik header.php będzie zawierać tę część pliku index.html naszej statycznej strony, która obejmuje: blok head oraz część nazywaną przez niektórych bannerem powiązanym z menu nawigacyjnym.

Niżej pokazano dwa bloki kodu: 1) fragment pliku index.html wycięty ze statycznej strony HTML i 2) odpowiadający mu plik header.php z przeróbkami umożliwiającymi współpracę z WordPressem. Poniżej opatrzono komentarzem miejsca, wymagające zmian.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Milena Motrawska | Start</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="upper-box">
				<h1>Milena Motrawska <span>fotografia artystyczna</span></h1>
			</div>
			<div id="menu">
				<img id="offert" src="images/oferta.jpg" alt="Usługi" />
				<ul id="nav">
					<li class="current"><a href="index.html">Start</a></li>
					<li><a href="o-mnie.html">O mnie</a></li>
					<li><a href="portfolio.html">Portfolio</a></li>
					<li><a href="oferta.html">Oferta</a></li>
					<li><a href="kontakt.html">Kontakt</a></li>
				</ul>
			</div><!--menu-->
		</div><!--header-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<title><?php wp_title("",true); ?> | <?php bloginfo('name'); ?></title>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	<?php wp_head(); ?>
</head>
<body>
<div id="container">
	<div id="header">
			<div id="upper-box">
				<h1><?php bloginfo('name'); ?><span><?php bloginfo('description'); ?></span></h1>
			</div>
			<div id="menu">
				<img id="offert" src="<?php bloginfo('template_directory'); ?>/images/oferta.jpg" alt="Usługi" />
				<ul id="nav">
						<?php wp_list_pages('title_li='); ?>
				</ul>
			</div><!--menu-->
	</div><!--header-->

Co wymagało zmiany i dlaczego:
Sekcja head

  • Tytuł witryny pojawiający się w pasku przeglądarki:
  • odwołanie do pliku style.css – w WordPressie nie może być ścieżką względną. Zastępujemy ją wywołaniem funkcji bloginfo(‚stylesheet_url’).
  • wp_head() – niezbędne do prawidłowego działania wtyczek

Dociekliwych szczegółami pozostałych tajemniczych funkcji i zapisów w sekcji head odsyłam do artykułu Analiza budowy standardowego nagłówka, którego autorka wyjaśnia szczegółowo funkcję każdego z nich.

Sekcja body

  • tytuł i podtytuł (opis) witryny – dzięki funkcjom bloginfo(‚name’) oraz bloginfo(‚description’) wykorzystamy tytuły ustawione w kroku 2a. Dzięki temu użytkownik będzie mógł je zmienić sam, bez ingerencji w źródła motywu.
  • ścieżka do zdjęcia
    WordPress musi znać pełną ścieżkę do obrazków. Uzyskamy to używając funkcji bloginfo(‚template_directory’), która zwraca pełny URL katalogu z motywem
  • lista stron w menu
    Strony utworzone w kroku 3 wyświetlimy za pomocą funkcji wp_list_pages. Parametru ‚title_li=’ użyto po to, aby pozbyć się napisu „Strony” wstawianego domyślnie jako tytuł listy. Uwaga: większą dla użytkownika kontrolę na zawartością menu umożliwi oparcie menu o funkcję wp_nav_menu. O różnicach tych dwóch funkcji przeczytamy w artykule Dynamiczna nawigacja w wordpress 3.

Drugi z powyższych bloków kodu wklejamy do pliku header.php.

Zmiany w pliku style.css
Drobnej zmiany w tym kroku będzie wymagał nasz plik style.css. Do identyfikacji bieżącej strony użyliśmy wcześniej klasy current. WordPress do oznaczania bieżącej strony witryny używa własnej klasy current_page_item.

Fragment pliku style.css przed zmianą:

ul#nav li a:hover, ul#nav li.current a {
	text-decoration: underline;
}

Fragment pliku style.css po zmianie:

ul#nav li a:hover, ul#nav li.current_page_item a {
	text-decoration: underline;
}

Krok 9b: sidebar.php

Dobra wiadomość dla leniwych: plik sidebar.php możemy pozostawić bez zmian w stosunku do odpowiadającego mu fragmentowi strony statycznej index.html (zobacz rysunek podziału na pliki we wstępie do kroku 9), zamieniając jedynie ścieżkę względną do obrazka (podobnie jak zrobiliśmy to w header.php)

<div id="sidebar">
	<div>
		<h2>Lorem ipsum sit:</h2>
		<ul>
			<li>Lorem ipsum dolor sit amet consectetur</li>
			<li>Nam molestie porttitor et venenatis tortor.</li>
			<li>nec vulputate odio placerat omini dolor</li>
		</ul>
	</div>
	<div>
		<img src="images/kamienie.png" alt="Kamienie" />
	</div>
</div><!--sidebar-->
<div id="sidebar">
	<div>
		<h2>Lorem ipsum sit:</h2>
		<ul>
			<li>Lorem ipsum dolor sit amet consectetur</li>
			<li>Nam molestie porttitor et venenatis tortor.</li>
			<li>nec vulputate odio placerat omini dolor</li>
		</ul>
	</div>
	<div>
		<img src="<?php bloginfo('template_directory'); ?>/images/kamienie.png" alt="Kamienie" />
	</div>
</div><!--sidebar-->

Wklej dolny blok kodu do pliku sidebar.php. Takie rozwiązanie jest szybkie, lecz ma tę wadę, że każda zmiana w treści będzie wymagała ingerencji w kody źródłowe, a tego należałoby unikać.

Lepszym, bardziej elastycznym rozwiązaniem, jest oparcie paska bocznego o Widgety. Wówczas użytkownik sam będzie decydował co ma znajdować się w pasku poprzez pracę z ekranem Wygląd->Widgety.

Widgety - efekt do kórego zmierzamy
Widgety - efekt do kórego zmierzamy (powiększ)

Obrazek obok pokazuje efekt, który będzie możliwy, kiedy przygotujemy nasz motyw na obslugę widgetów. Użytkownik w panelu admin. w Wygląd->Widgety będzie mógł przeciągnąć dowolny widget na pasek boczny i za ich pomocą wyświetlić pożądaną treść.

Oparcie motywu o widgety wymaga wykonania dwóch czynności:

  • A. rejestracji sidebaru w pliku functions.php
  • B. wywołanie funkcji dynamic_sidebar, która wyświetli na pasku kolejne aktywne widgety

Krok A: rejstracja sidebaru

Tworzymy plik tekstowy i nazywamy go functions.php. Do niego wklejamy poniższy kod:

<?php
if (function_exists("register_sidebar")) {
    register_sidebar(array(
        'before_widget' => '<div class="side-box">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
}
?>

Do rejestracji paska bocznego wykorzystujemy funkcję register_sidebar. Użyta w parametrach nazwa klasy „side-box” w znacznku div nie jest przypadkowa. Odpowiada ona klasie użytej w pliku style.css w naszej statycznej stronie, dla poszczególnych bloków paska bocznego.

Podobna rzecz ma się ze znacznikiem h2. W stronie statycznej tytuły na pasku bocznym „owijaliśmy” właśnie w nagłówek h2. Teraz chcemy zachować zgodność.

Krok B: wyświetlania widgetów

<div id="sidebar">
		<?php 	
			if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
			<div class="side-box">
				<ul>
						<?php wp_register(); ?>
						<li><?php wp_loginout(); ?></li>
						<?php wp_meta(); ?>
				</ul>
			</div>
		<?php endif; ?>
</div><!--sidebar-->

Za pomocą funkcji dynamic_sidebar wyświetlamy wszystkie aktywne widgety. W powyższym przykładzie zadbaliśmy również o to, żeby pokazać coś w pasku bocznym w przypadku, kiedy użytkownik nie wybrał żadnego widgetu. W naszym przykładzie wyświetlamy dane do logowania, jednak w tym miejscu również dobrze mogło to być wywołanie listy stron, innego widgetu czy choćby tekstu „Brak aktywnych widgetów”.

Powyższy kod wklejamy do pliku sidebar.php. Jeśli uprzednio wykorzystano wersję „dla leniwych”, należy ją nadpisać. Oba pliki: functions.php i sidebar.php umieszczamy w katalogu z naszym motywem.

Krok 9c: index.php

Nadszedł czas na wyświetlenie najistotniejszej rzeczy: treści poszczególnych stron, które utworzyliśmy w kroku 3.

W witrynie opartej o statyczne pliki html trzeba było tworzyć osobny plik html do zaprezentowania zawartości każej podstrony. W WordPressie wystarczy zrobić jeden taki plik (index.php), a WordPress zadba już o to, żeby wyświetlić zawartość odpowiedniej strony, URL której podaliśmy w pasku przeglądarki.

Plik index.php jest sercem naszego motywu. To tego pliku będzie szukać WordPress, Żeby zacząć przetwarzać nasz motyw.

Pętla WordPressa
Do wyświetlania zawartości stron wykorzystamy mechanizm Pętli (The Loop). Celowo napisałam „Pętli” wielką literą, gdyż pod tym pojęciem kryje się główny mechanizm przetwarzania w WordPressie.

Za pomocą Pętli WordPress przetwarza wszystkie wpisy, które mają być wyświetlone na bieącej stronie. Wprawdzie w naszej witrynie nie wyświetlamy nigdzie wpisów/artykułów (posts), jednak strony (pages) są traktowane przez WordPressa tak jak wpisy.

Poniżej pokazany jest możliwie najprostszy kod pliku index.php (dolny blok) z wykorzystaniem mechanizmu Pętli. Tym kodem zastępujemy blok „content” przedstawiony na rysunku podziału na bloki we wstępie do kroku 9:

		<div id="content">
			<h2>Milena Motrawska<span>artysta fotograf, dekorator wnętrz</span></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
			<p>Praesent vestibulum hendrerit placerat. Nam molestie porttitor porta...</p>
		</div><!--content-->
<?php get_header(); 
get_sidebar(); ?>
		<div id="content">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post();
				the_content();
			endwhile; ?>
		</div><!--content-->
<?php get_footer(); ?>

Wykorzystane funkcje:

  • have_posts() – za pomocą tej funkcji WordPress sprawdza obecność kolejnego z wpisów, jeżeli taki jest, zwraca „true”
  • the_post() – pobiera kolejny wpis i przygotowuje go do użycia w ramach pętli. To dzięki obecności tej funkcji będziemy mogli wykorzystywać tzw. tagi do wyświetlania wielu informacji (np: tytuł strony, data opublikowania, zawartość). Przykładem tagu jest następna funkcja the_content() opisana niżej:
  • the_content() – funkcja wyświetla zawartości wpisu/strony

Zainteresowany szczegółowymi informacjami na temat działania Pętli WordPressa odsyłam do artykułu „The Loop in Action” w Kodeksie WordPressa.

Jak łatwo się domyślić, za pomocą wywołań funkcji:

do pliku index.php włączyliśmy kod opowiedziany za przetworzenie pozostałych części składających się na wyświetlenie strony, zawartych odpowiednio w plikach:

  • header.php
  • sidebar.php
  • footer.php

Uwaga: Plik index.php jest wykorzystywany nie tylko do wyświetlenia strony głównej – analogia do statycznego pliku index.html tu się nie sprawdzi. WordPress wykorzysta plik index.php do wyświetlania zawartości każdej strony/wpisu, również kategorii, czy strony błędu 404, jeśli nie znajdzie dedykowanych templatek do ich generowania. Jest to zgodne z zasadami hierarchii szablonów WordPressa.

Krok 9c: footer.php

Stopka wymaga najmniej zmian w stosunku do statycznej strony HTML. Wystarczy dodać funkcję wp_footer(), niezbędną do prawidłowego działania wtyczek. Funkcję tę dodajemy przez zamykającym tagiem body:

		<div id="footer">
			<p id="copyright">copyright Milena Motrawska</p>
			<p id="author">projekt i realizacja: <a href="https://webfaces.pl">webfaces.pl</a></p>
		</div><!--footer-->
	</div><!--container-->
</body>
</html>
		<div id="footer">
			<p id="copyright">copyright &copy; Milena Motrawska</p>
			<p id="author">projekt i realizacja: <a href="https://webfaces.pl">webfaces.pl</a></p>
		</div><!--footer-->
	</div><!--container-->
<?php wp_footer(); ?>
</body>
</html>

Wklejamy dolny z bloków do pliku o nazwie footer.php i przerzucamy go do katalogu z motywem.

Pliki które otrzymamy po wykonaniu kroku 9
Pliki które otrzymamy po wykonaniu kroku 9 (powiększ)

Krok 10: Włączenie naszego motywu

Po wykonaniu kroków 9a-d w katalogu wp-content/mm-photo powinniśmy mieć zestaw plików jak pokazano na obrazku obok. Teraz pozostaje nam włączyć motyw. Wchodzimy do Wygląd->Motywy i wciskamy „Włącz” w okienku podglądu naszego motywu. Po wpisaniu do przeglądarki adresu witryny powinniśmy zobaczyć taki efekt końcowy.

Jeśli w kroku 9b wykonaliśmy sidebar oparty o widgety, niezbędne będzie również wybranie i ustawienie Widgetów paska bocznego. W tutorialu wybrano widget Tekst i uzupełniono o dane wyświetlające listę oraz obrazek, jak pokazano na rysunku w kroku 9b

Pliki do pobrania

Niżej znajdują paczka plików do pobrania, zawierająca wszystkie kody źródłowe wykorzystane w tym tutorialu.

Zawartość poszczególnych katalogów:

  • projekt – projekt graficzny witryny Milena Motrawska na warstwach (format xcf, do edycji w programie GIMP – darmowym odpowiedniku Photoshopa)
  • html – witryna statyczna w postaci plików HTML i CSC (którą przerabialiśmy na witrynę WordPressową)
  • mm-photo – pliki motywu Milena Motrawska, który utworzyliśmy w tym tutorialu. Motyw gotowy do uruchomienia w WordPressie po umieszczeniu katalogu mm-photo (wraz z zawartością) w folderze wp-content/themes

Uff… Było trochę pisania. Jeśli jednak któryś z kroków był dla Ciebie niejasny, zapytaj o szczegóły w komentarzach.

Inne wpisy o podobnej tematyce: