wordpress.-tworzenie-wlasnych-motywow full.pdf

(35359 KB) Pobierz
887793726.048.png
Spis treści
Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Adresaci książki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Zawartość książki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Źródła pomocy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Witryna książki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Podziękowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Raena Jackson Armitage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Allan Cole. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Brandon R. Jones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Jeffrey Way. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Konwencje typografi czne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Przykłady kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Wskazówki, uwagi i ostrzeżenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Rozdział 1 Wprowadzenie do WordPressa . . . . . . . . 19
Historia WordPressa w zarysie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
WordPress dziś . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Dlaczego WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
WordPress.com a WordPress.org . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Co to jest motyw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Po co projektować motywy WordPressa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
W końcu… . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Rozdział 2 Planowanie motywu . . . . . . . . . . . . . . . . 27
Od czego zacząć. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Strony i posty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Media i odnośniki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Niestandardowe pola . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Kategorie i znaczniki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Komentarze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Widżety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Pętla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Defi niowanie sukcesu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Etap procesu projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
887793726.059.png 887793726.067.png 887793726.068.png 887793726.001.png 887793726.002.png 887793726.003.png 887793726.004.png 887793726.005.png 887793726.006.png 887793726.007.png 887793726.008.png 887793726.009.png 887793726.010.png 887793726.011.png 887793726.012.png 887793726.013.png
 
8
WordPress. Tworzenie własnych motywów
Niech treść Cię prowadzi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Etapy procesu projektowania. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Przeprowadzanie własnych badań . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Zbieranie informacji o motywach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Zbieranie informacji o wtyczkach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Zbieranie informacji o skryptach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Miej oczy szeroko otwarte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Nie przesadzaj z liczbą funkcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Etap procesu projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Planowanie z myślą o odbiorcy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Etap procesu projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Planowanie pod kątem wydawców . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Etap procesu projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Planowanie organizacji i hierarchii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Mapa i układ stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Mapa witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Układ stron. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Rozdział 3 Projektowanie motywu . . . . . . . . . . . . . . 49
Zasady projektowania motywów WordPressa . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Kolory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
Barwy fi rmowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Kwestie typografi czne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Styl wizualny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Układ i kompozycja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Budowa motywu WordPressa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Nagłówek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Menu nawigacyjne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Pętla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Podział na strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Komentarze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Paski boczne i widżety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Stopka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Strona główna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Standardowe szablony stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Szablony postów. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Szablony stron archiwalnych, o autorze, kategorii oraz znaczników . . . . . . . 85
Strona wyników wyszukiwania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Strona błędu 404 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
887793726.014.png 887793726.015.png 887793726.016.png 887793726.017.png 887793726.018.png 887793726.019.png 887793726.020.png 887793726.021.png 887793726.022.png 887793726.023.png 887793726.024.png 887793726.025.png 887793726.026.png 887793726.027.png 887793726.028.png 887793726.029.png 887793726.030.png
 
Spis treści
9
Standardowe style elementów HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Funkcje dodatkowe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
O niczym nie zapominaj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Rozdział 4 Tworzenie motywów na bazie modeli. . . . 95
Zalety platform. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Motywy potomne — sprytny sposób wykorzystania platform . . . . . . . . . . . . . . . 96
Jak wybrać dobry model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Modele warte uwagi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Modele darmowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Modele płatne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Który model jest najlepszy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Tworzenie prostego motywu potomnego . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Przygotowanie kanwy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Tworzenie własnego motywu potomnego . . . . . . . . . . . . . . . . . . . . . . . . . .108
Stylizowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Dopracuj arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115
Pierwsze koty za płoty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115
Rozdział 5 Zaawansowane techniki
konstruowania motywów . . . . . . . . . . . 117
Szablony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117
Hierarchia szablonów w zarysie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Hierarchia szablonów a motywy potomne . . . . . . . . . . . . . . . . . . . . . . . . . .120
Szablony motywu Thematic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Budowanie strony głównej w stylu czasopisma . . . . . . . . . . . . . . . . . . . . . . . . .122
Usuwanie paska bocznego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Dodawanie plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126
Modyfi kowanie stopki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
Punkty zaczepienia i fi ltry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Dodawanie ikony Favicon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132
Punkty zaczepienia motywu Thematic. . . . . . . . . . . . . . . . . . . . . . . . . . . . .133
Krótkie podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134
Czas na przerwę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138
Dopieszczanie swojego motywu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138
Dodawanie przycisków mediów społecznościowych do postów. . . . . . . . . . .138
Wyświetlanie danych autora pod postami . . . . . . . . . . . . . . . . . . . . . . . . . .140
Fragmenty postów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141
887793726.031.png 887793726.032.png 887793726.033.png 887793726.034.png 887793726.035.png 887793726.036.png 887793726.037.png 887793726.038.png 887793726.039.png 887793726.040.png 887793726.041.png 887793726.042.png 887793726.043.png 887793726.044.png 887793726.045.png 887793726.046.png 887793726.047.png
 
10
WordPress. Tworzenie własnych motywów
Najlepsze porady dla projektantów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148
Komentuj, komentuj i jeszcze raz komentuj. . . . . . . . . . . . . . . . . . . . . . . . .148
Miejsce na wszystko i wszystko na swoim miejscu . . . . . . . . . . . . . . . . . . . .149
Kwestia nazw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149
Rozwijaj się . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149
Rozdział 6 Widżety . . . . . . . . . . . . . . . . . . . . . . . . 151
Czym są widżety i obszary na widżety. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Widżety standardowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Obszary na widżety w motywie Thematic . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Kod HTML widżetów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
Dodawanie do motywu własnego obszaru na widżety . . . . . . . . . . . . . . . . . . . .156
Rejestracja obszaru na widżety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Wyświetlanie obszaru na widżety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158
Usuwanie obszarów na widżety. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159
Dodawanie własnych widżetów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
Wprowadzenie do API widżetów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161
Tworzenie widżetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162
Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168
Rozdział 7 Opcje motywów . . . . . . . . . . . . . . . . . . 169
Tworzenie panelu opcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169
Przygotowanie gruntu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170
Dodawanie panelu administracyjnego . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174
Formularz opcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177
Używanie opcji w motywie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181
Modyfi kowanie kodu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181
Modyfi kowanie kodu HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183
Modyfi kowanie funkcjonalności . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184
Dodawanie wariantów kolorystycznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Formularz opcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Dodawanie arkuszy stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187
Tworzenie własnych szablonów stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .188
Skróty kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191
Tworzenie skrótów kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192
Dostrajane menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195
Wielkie możliwości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196
887793726.049.png 887793726.050.png 887793726.051.png 887793726.052.png 887793726.053.png 887793726.054.png 887793726.055.png 887793726.056.png 887793726.057.png 887793726.058.png 887793726.060.png 887793726.061.png 887793726.062.png 887793726.063.png 887793726.064.png 887793726.065.png 887793726.066.png
 
Zgłoś jeśli naruszono regulamin