WordPress od podszewki - Helionpdf.helion.pl/worpop/worpop.pdf · 2011-06-20 · 8 WordPress od...

Idź do

• Spis treści• Przykładowy rozdział• Skorowidz

• Katalog online

• Dodaj do koszyka

• Zamów cennik

• Zamów informacjeo nowościach

• Fragmenty książekonline

Helion SAul. Kościuszki 1c44-100 Gliwicetel. 32 230 98 63e-mail: [email protected]© Helion 1991–2011

Katalog książek

Twój koszyk

Cennik i informacje

Czytelnia

Kontakt

• Zamów drukowanykatalog

WordPress od podszewki

Autor: Bud E. Smith, Michael McCallister

Tłumaczenie: Julia Szajkowska

ISBN: 978-83-246-3080-6

Tytuł oryginału: WordPress In Depth

Format: 168×237, stron: 480

Poznaj najpopularniejszy system CMS!• Co to jest WordPress?

• Jak wykorzystać materiały multimedialne we wpisach?

• Jak zainstalować WordPress na własnym serwerze?

WordPress to obecnie najpopularniejszy system zarządzania treścią. Według badań W3Techs jego

udział w rynku systemów CMS wynosi ponad 54%! Co wpłynęło na tę popularność? Czym wyróżnia

się on na tle konkurencji? Są to niezwykle trudne pytania, ale w tym przypadku można bez wahania

postawić na niezwykłą elastyczność, łatwość konfiguracji, estetyczny domyślny wygląd oraz

ogrom dodatków, dzięki którym możesz uzupełnić go o nawet najbardziej wymyślną

funkcjonalność.

Dzięki tej książce poznasz WordPress od podszewki. Zgłębisz jego najskrytsze tajemnice oraz

nauczysz się dostrajać nawet najbardziej zaawansowane funkcje. Na samym początku dowiesz się,

jak podejść do tematu tworzenia własnej witryny, opartej o WordPress. Po interesującym wstępie

przyjdzie czas na konfigurację. Zobaczysz, jak zadbać o wygląd strony, przygotować własny

nagłówek, zorganizować menu oraz dodać pierwszy wpis. W kolejnych rozdziałach zapoznasz

się z metodami publikacji materiałów multimedialnych, dodawania grafik do wpisów oraz

projektowania własnych motywów. Książka ta sprawdzi się świetnie w rękach każdego

użytkownika, pragnącego zaistnieć w sieci!

• Wersje platformy WordPress

• Użytkownicy systemu WordPress

• Przygotowania do otwarcia witryny opartej o WordPress

• Konfiguracja wyglądu – wybór motywu, edycja nagłówka

• Tworzenie wpisów

• Dodawanie odnośników i zarządzanie nimi

• Kategoryzowanie wpisów

• Wykorzystanie własnego kodu HTML

• Dodawanie statycznych stron

• Dodawanie do wpisów materiałów multimedialnych

• Instalacja systemu WordPress na własnym serwerze

• Tworzenie i nabywanie nowych motywów

• Wykorzystanie języka PHP

• Przykładowe witryny, oparte o WordPress

Zacznij prowadzić własną witrynę WWW!

http://helion.pl

http://helion.pl/zamow_katalog.htm

http://helion.pl/katalog.htm

http://helion.pl/zakupy/add.cgi?id=worpop

http://helion.pl/emaile.cgi

http://helion.pl/cennik.htm

http://helion.pl/online.htm

mailto:[email protected]

http://helion.pl/ksiazki/worpop.htm

http://www.amazon.com/exec/obidos/ASIN/0132126958/helion-20

SPIS TREŚCI

O autorach 13

Podziękowania 14

Wprowadzenie: Witaj! 15

Część I Początki pisania bloga 21

Rozdział 1. Pierwszy kontakt z systemem WordPress 23

Czym jest WordPress? 23Kilka s�ów o ró�nych wersjach platformy WordPress 24Spo�eczno�� u�ytkowników systemu WordPress 25Jakie trzeba ponie�� koszty? 26

Kim jest przeci�tny u�ytkownik systemu WordPress? 31Godny przeciwnik — system Blogger 31Pierwsze studium przypadku

— pocz�tkuj�cy u�ytkownik systemu WordPress 33Drugie studium przypadku — blog biznesowy 36

Utrzymanie bloga na serwerze 38Przenosiny 40Porównanie WordPress.com z WordPress.org 40

Inne sposoby zaistnienia w sieci 42

Rozdział 2. Na dobry początek 45

Tworzenie bloga 45Czy planujesz du�y ruch? 47Gra w „Nazwij domen�” 48

Rozpocznij z w�asn� nazw� domeny 49Dodaj w�asn� domen� pó�niej 49Pozosta na zawsze wierny domenie WordPress.com 50

Rejestracja 51Zak�adanie konta na platformie WordPress.com 51Zak�adanie w�asnego bloga 53Korzystanie ze �róde� 55

6 � WordPress od podszewki

Zmienianie ustawie pocz�tkowych 55Ustawienia ogólne 56

Pisanie 58Czytanie 59Dyskusja 62Media 64Prywatno�� 66Inne grupy opcji menu Ustawienia 67

Opcje konfiguracji spoza menu Ustawienia 68Usu witryn� 68Oceny 69Publikowanie wpisów za pomoc� poczty elektronicznej 71

Rozdział 3. Zadbaj o wygląd bloga 75

Ten urok, ten styl 75O motywach s�ów kilka 76

Czego nale�y oczekiwa� od motywu? 77Kolory 78Liczba kolumn 80Sta�a czy zmienna szeroko��? 81Widgety i inne funkcje 82Czy warto modyfikowa� kod arkusza stylów CSS wybranego

motywu? 84Spis motywów graficznych 85Wybieranie motywu 99

Ustawianie w�asnego nag�ówka 101Zmienianie ustawie dodatku Related Links 103Jak dodawa� widgety? 104

Umieszczanie widgetów na blogu 105Przegl�d dost�pnych widgetów 106Dodawanie nowych widgetów 107Krótki spis widgetów 109Jak najlepiej wykorzysta� widgety? 113

Część II Prowadzenie bloga 117

Rozdział 4. Dodawanie pierwszego wpisu 119

O wpisach s�ów kilka 119Funkcja QuickPress 121Dodawanie nowego wpisu 123

Pisanie w trybie pe�noekranowym 125Podstawowe polecenia formatowania 127Przyk�ad formatowania tekstu 129Odno�niki jako forma formatowania 131Dodatkowe metody formatowania tekstu 132

Dodawanie odno�ników 134Przepis na dodawanie odno�ników 136Tworzenie odno�nika 137

Zapisywanie, sprawdzanie pisowni i publikowanie postów 138

Spis tre�ci � 7

Rozdział 5. Przenieś wpisy w inny wymiar 141

Jak jeszcze mo�na rozbudowa� wpis? 141Dodawanie wpisów do kategorii 142

Tworzenie kategorii i korzystanie z nich w praktyce 144Kontrolowanie listy kategorii 145Przenoszenie wpisów do innej kategorii 149

Nadawanie tagów 151Tworzenie tagów i ich praktyczne zastosowanie 153Zarz�dzanie tagami 154Zarz�dzanie tagami powi�zanymi z wpisami 157

Zawarto�� widgetu Odno�niki 158Dodawanie nowych odno�ników do widgetu 159Dodawanie odno�ników 162Kategorie odno�ników 163

Rozdział 6. HTML w widgetach i innych częściach bloga 165

W jaki sposób rozwin�� blog za pomoc� kodu HTML? 165Przybornik zaawansowanego blogera 166Podstawy HTML dla WordPress 168

Znaczniki kodu HTML 168Karty Wizualny i HTML 172Formatowanie znaków 175Formatowanie list 177Tworzenie odno�ników 180Znacznik more 182Edycja kodu HTML w systemie WordPress 182Z jakich znaczników korzysta�? 183

Film z serwisu YouTube — przyk�ad zagnie�d�ania kodu HTML 185Sposoby wykorzystywania widgetu Tekst 188

Mo�liwe zawarto�ci widgetu Tekst 189Co mo�na robi� z widgetem Tekst 191Prosty przyk�ad pracy z widgetem Tekst 192

Rozdział 7. Rozbuduj blog o nowe możliwości 195

Popraw swój blog 195Nowi u�ytkownicy bloga 197

Podzia� ról w systemie WordPress 198Zapraszanie nowych u�ytkowników i przypisywanie im ról 199

Dodawanie statycznych stron 201Planowe wprowadzanie stron 202Projektowanie statycznej strony 207Tworzenie i edycja statycznych stron 208

Wstawianie ankiet 210

Rozdział 8. Statystyki i przyciąganie czytelników 217

Jak sprawi�, by wi�cej osób zagl�da�o na Twój blog? 217Statystyki systemu WordPress 218

Po co to robisz? 219Statystyki w panelu administracyjnym bloga 221Strona Statystyki w panelu administracyjnym systemu WordPress 222Analiza danych z grupy Odsy�aj�cy 224


Pouczaj�ce wnioski p�yn�ce z analizy danych na stronie Odsy�aj�cy 225Odno�niki do witryny 228Analiza danych z grupy Frazy wyszukiwarek 229Grupa Top Posts & Pages 232Klikni�cia 233Statystyki bloga — tabele z podsumowaniem 235

W jaki sposób do��czy� do grona subskrybentów? 236U�ywanie widgetu RSS 238

Część III Dalszy rozwój bloga 241

Rozdział 9. Grafika we wpisach 243

Po co wpisom grafika i inne media? 243Prawa autorskie i rodzaje plików multimedialnych 245Umieszczanie grafiki we wpisach 247Wskazówki dla autorów odno�nie do grafiki 248Wysy�anie plików na serwer i umieszczanie ich we wpisach 252

Umieszczanie grafiki w bibliotece mediów 253Edytowanie obrazu dodanego do biblioteki mediów 255Dodawanie do wpisów grafiki z dysku komputera 256Umieszczanie we wpisach obrazów z biblioteki mediów 260Umieszczanie we wpisach obrazów z sieci 261

Rozdział 10. Ulepszenia, audio i wideo 265

Podnoszenie mo�liwo�ci bloga 265Krótki opis ulepsze 266

W�asny CSS 267Nieograniczona liczba prywatnych u�ytkowników 268Brak reklam 268Wi�cej miejsca na serwerze (5 GB, 15 GB, 25 GB, 50 GB i 100 GB)

i mo�liwo�� dodawania plików audio 269Us�uga VideoPress 270Nazwy domen 270Ogólne ró�nice 272

Wybieranie dobrej nazwy domeny 273Poddomeny domeny WordPress.com kontra w�asne domeny 273Jak funkcjonuj� nazwy domen 274Jak wybra� dobrze nazw� domeny drugiego lub trzeciego poziomu? 275

Wykorzystywanie plików audio na blogu 278Gdzie umieszcza� pliki d�wi�kowe? 279Umieszczanie pliku audio we wpisie 280

Umieszczanie plików wideo we wpisach 283Gdzie umieszcza� pliki wideo? 284

Umieszczanie plików wideo we wpisie 285

Część IV Samodzielne instalowanie WordPress 289

Rozdział 11. Instalowanie i aktualizacja oprogramowania WordPress 291

Niech kto� zrobi to za Ciebie — preinstalowany WordPress na serwerze 291Serwer przyjazny blogerowi 292Po co PHP i MySQL? 294

Spis tre�ci � 9

Umieszczanie plików na serwerze za pomoc� protoko�u FTP 296Przygotowania do pi�ciominutowego instalowania systemu WordPress 299Instalowanie w pi�� minut 302Aktualizacja systemu WordPress 304

Przenoszenie danych z platformy WordPress.com 307System WordPress na w�asnym serwerze 310

Instalowanie serwera WWW i bazy danych w systemie Windows 311Edytowanie pliku konfiguracyjnego systemu WordPress 314

Krótki przegl�d zawarto�ci kokpitu systemu WordPress 317Dostosowywanie kokpitu do w�asnych potrzeb 319

Rozdział 12. Przybornik systemu WordPress — motywy 321

Kupowanie motywów 321Jak szuka� darmowych motywów? 324Wybieranie motywów p�atnych 327Instalowanie i w��czanie motywu 332

Kwestie bezpieczestwa a wybieranie motywu graficznego bloga 333

Rozdział 13. Przybornik systemu WordPress — wtyczki 335

Segmentowa budowa systemu WordPress 335Czym jest wtyczka? 336Szukanie wtyczek 337

Wybieranie wtyczek z katalogu WordPress i przeprowadzanieinstalowania 338

Szukanie wtyczek poza katalogiem WordPress 340Szukanie p�atnych wtyczek 340

R�czne instalowanie i w��czanie wtyczek 341Pobieranie nowej wtyczki 341Testowanie nowej wtyczki 342Wybieranie i w��czanie wtyczki 342Zarz�dzanie wtyczkami i przeprowadzanie aktualizacji 343

Niektóre spo�ród „niezb�dnych” wtyczek 344Podstawowe wtyczki WordPress — Akismet i Hello Dolly 345Instalowanie wtyczki Akismet 345Administracja i bezpieczestwo 346Statystyki 348Komentarze 349Reklama i optymalizacja pod k�tem dzia�ania wyszukiwarek 350Odno�niki 351Multimedia 351Serwisy spo�eczno�ciowe 352

Rozdział 14. Tworzenie motywów za pomocą arkuszy stylów CSS 353

Tworzenie arkuszy stylów 353Wst�p do XHTML 354

Standardy tworzenia strony internetowej 354XML i XHTML 356Kod HTML zgodny ze standardem XHTML w WordPress 358

Wst�p do CSS 362Rola arkusza stylów 362Czym jest arkusz stylów? 364Anatomia arkusza CSS 365


Poprawianie motywu poprzez arkusz stylów 368Gdy gotowy motyw spe�nia oczekiwania 369Poprawianie gotowego motywu WordPress.org 372Tworzenie arkusza stylów motywu od zera 376

Rozdział 15. Podstawy PHP — motywy i wtyczki 391Wst�p do PHP 391

Instalowanie PHP na serwerze roboczym 393Skrypty PHP — podstawy sk�adni 396

PHP i MySQL 402Szablony motywów graficznych w PHP 404

Szablon strony g�ównej 405Szablon panelu bocznego 409Szablon nag�ówka 411Szablon stopki 412

Analiza kodu istniej�cej wtyczki 412Wysy�anie wtyczek do katalogu WordPress 418

Dlaczego nie warto wysy�a� wtyczek do katalogu WordPress? 418Dodawanie wtyczki do katalogu 419

Dodatki 421

Dodatek A WordPress.com kontra WordPress.org 423Nazewnictwo 424Wybierz WordPress.org 426

Zarabianie na blogu 427Reklamy Automattic na Twojej stronie 428Pomoc spo�eczno�ci WordPress 429Wybieranie dobrego serwera 430

Wybierz WordPress.com 430

Dodatek B Dokumentacja systemu WordPress 433Przedzieranie si� przez g�szcz dokumentów w sieci 433Kodeks WordPress 434K�opoty z dokumentacj� WordPress 436Odkrywanie dokumentacji WordPress za pomoc� Google 437

Dodatek C Przykłady blogów WordPress 441Dlaczego warto odwiedza� s�ynne blogi? 441XXL 442Surfin’ Safari 442

Dodatek D Przykłady blogów WordPress.com 445Równe prawa dla .com-owców 445Znane cytaty 445Outland Institute 446Muzyka na stronach SUFU 447

Dodatek E Mapa witryny WordPress 449Nawigowanie po serwisach WordPress 449Nawigowanie po serwisie WordPress.com 449

Strona g�ówna — http://wordpress.com 449System wsparcia — http://en.support.wordpress.com 450

Spis tre�ci � 11

Fora — http://en.forums.wordpress.com/ 451Dodatki — http://en.wordpress.com/features 452Nowo�ci — http://en.blog.wordpress.com 452O nas — http://en.wordpress.com/about 453Us�ugi zaawansowane — http://en.wordpress.com/advanced-services 454

Nawigowanie po serwisie WordPress.org 454Strona g�ówna — http://wordpress.org 455Prezentacja — http://wordpress.org/showcase 455Motywy, wtyczki i miejsce narzeka — http://wordpress.org/extend 457wiat WordPress — http://wordpress.org/about 460Co s�ycha� u programistów — http://wordpress.org/development 461Do przyjació� po pomoc — http://wordpress.org/support 461Wybieranie serwera — http://wordpress.org/hosting 462Pobieranie wersji instalacyjnej — http://wordpress.org/download

lub http://pl.wordpress.org/ 462

Dodatek F Przenoszenie zawartości z innych systemów blogowych 465

Bezpo�redni import danych na platform� WordPress 466Przenosiny z platform Blogger i BlogSpot 466Przenosiny z platformy LiveJournal 467Przenosiny z platformy Movable Type lub TypePad 467Przenosiny z platformy Textpattern 468

Transfer po�redni 468Przenoszenie danych w postaci zawarto�ci kana�u RSS 468Przenoszenie danych z pliku (X)HTML 469

Skorowidz 471

6

HTML W WIDGETACHI INNYCH CZĘŚCIACH BLOGA

W jaki sposób rozwinąć blogza pomocą kodu HTML?

Urok korzystania z systemu WordPress polega w du�ej mierze na tym, �e mo�eszosi�gn�� wiele bez podawania cho�by jednej linii kodu. Miliony wspania�ych blogówpowsta�y i funkcjonuj� w sieci dlatego, �e WordPress i inne tego typu aplikacjezdejmuj� z autorów obowi�zek dbania o techniczn� stron� witryny.

Jednak w pewnym momencie mo�esz odczu� potrzeb� odrzucenia pi�y i hebla na rzeczbardziej zaawansowanych narz�dzi. System WordPress zosta� zaprojektowanyz najwy�sz� dba�o�ci� o szczegó�y w taki sposób, by pozwoli� Ci mo�liwie d�ugoobchodzi� si� bez skomplikowanej wiedzy informatycznej, a w chwili gdy bardziejz�o�one rozwi�zania oka�� si� konieczne, poda� Ci podstawowy zakres znaczników,który jednak pozwoli osi�gn�� wszystkie zamierzone cele.

Pierwszym i najprostszym z zaawansowanych narz�dzi oferowanych przez WordPressjest funkcja umo�liwiaj�ca stosowanie kodu HTML, podstawowego j�zyka sieci.Skrót HTML pochodzi od angielskiej nazwy Hypertext Markup Language (hipertekstowyj�zyk znaczników). Znaczniki kodu HTML odpowiadaj� za wygl�d i zachowaniesi� poszczególnych elementów strony. Przez pierwsze kilka lat funkcjonowaniainternetu, od jego powstania w 1989 roku, HTML by� jedynym narz�dziem, jakimdysponowali�my.

166 � Cz�� II Prowadzenie bloga

J�zyk HTML jest równie� interfejsem dla protoko�u HTTP (ang. Hypertext TransferProtocol — hipertekstowy protokó� przesy�u danych) odpowiedzialnego za regulacj�pracy odno�ników i serwerów nazw. To w�a�nie HTML tworzy hiper��cza — odno�niki,które klikasz, by przej�� na inne strony.

WordPress.com dopuszcza u�ywanie kodu HTML — do uzyskania tej mo�liwo�cipotrzebujesz tylko jednego klikni�cia. Wystarczy, �e otworzysz kart� HTML edytora wpisów.

Niektóre z rutynowych dzia�a ka�dego autora blogów wymusz� na Tobie u�yciefragmentów kodu HTML. Przyk�adem mo�e by� dodawanie do bloga nagrania z serwisuYouTube, który udost�pnia odwiedzaj�cym kod HTML odpowiedzialny za wy�wietlanie filmuw formacie Flash na stronie WWW. Kod nale�y wklei� w wybranym miejscu swojej witryny.

Do tego jeden z najcz��ciej u�ywanych i najbardziej elastycznych widgetów, Tekst, pozwalaformatowa� swoj� zawarto�� za pomoc� znaczników HTML. Dzi�ki temu zyskujeszmo�liwo�� nadawania wybranej formy fragmentom tekstu i umieszczania na stronieodno�ników HTML.

W tym rozdziale poka�emy Ci, jak u�ywa� kodu HTML w systemie WordPress. Wiedzata przyda Ci si� niezale�nie od tego, czy b�dziesz próbowa� wprowadza� proste zmianyw tre�ci wpisu lub zawarto�ci widgetu Tekst, czy te� pokusisz si� o uzyskanie bardziejambitnych efektów. W tym drugim przypadku b�dziesz musia� posi�kowa� si� tak�einnymi narz�dziami, które opisali�my w tej ksi��ce.

Przybornik zaawansowanego blogera

U�ywaj�c bardziej z�o�onych �rodków, mo�esz przenie�� swój blog w zupe�nie nowywymiar. Sposób ich wykorzystania zale�y w du�ej mierze od tego, czy prowadzisz blogna platformie WordPress.com, czy pos�ugujesz si� oprogramowaniem WordPress, którez za�o�enia jest bardziej elastyczne i daje Ci wi�cej mo�liwo�ci dzia�ania, ale te� przenosina Ciebie wi�kszo�� odpowiedzialno�ci za poprawne funkcjonowanie witryny.

Starali�my si�, jak zawsze, stworzy� szczeble, po których móg�by� si� wspi�� na najwy�szypoziom. Zorganizowali�my materia� tak, by� opanowa� najpierw pewien fragment wiedzy,móg� od razu go zastosowa�, przyswoi� nast�pn� parti�, znów jej u�y�, i w ten sposób,ma�ymi krokami, osi�gn�� poziom zaawansowanego blogera.

Kod HTML mo�e pojawi� si� na ka�dym blogu z rodziny WordPress, tak�e na tychprowadzonych w systemie WordPress.com, o czym przekonasz si�, czytaj�c ten rozdzia�.Zaprezentujemy Ci zasady pracy z kodem XHTML, nowsz� i nieco bardziej restrykcyjn�wersj� j�zyka HTML.

Ludzie pracuj�cy nad kodem systemu WordPress, u�ytkownicy oraz wszyscy cho�troch� zwi�zani z ide� internetu utkn�li w pu�apce zmiany standardów. J�zyk XHTMLmia� z czasem zast�pi� stary kod HTML, ale poniewa� trwaj� prace nad now�, pi�t�wersj� HTML, XHTML zosta� zdegradowany do rangi rozwi�zania tymczasowego.

Rozdzia� 6. HTML w widgetach i innych cz��ciach bloga � 167

O ile nie zaznaczymy tego wyra�nie, zak�adaj, �e wszystkie prezentowane turozwi�zania b�d� sprawdza� si� zarówno w czasie pracy w standardzie HTML,jak i XHTML. Je�li planujesz u�ywanie du�ych porcji kodu (X)HTML, powiniene�pozna� ró�nice mi�dzy jego wersjami. Mo�esz rozpocz�� od lektury artyku�uhttp://codex.wordpress.org/HTML_to_XHTML1 lub zapozna� si� z tre�ci� kursuhttp://www.kurshtml.boo.pl/html/roznice_miedzy_html_4_a_xhtml_1_0,xhtml.html.

Kaskadowe arkusze stylów, czyli CSS, to dodatek do j�zyka HTML. Dzi�ki niemu mo�eszzarz�dza� zawarto�ci� strony w bardziej zorganizowany sposób. Wszystkie motywygraficzne dla blogów WordPress opieraj� si� na kodzie CSS. Pocz�tki tego narz�dziaby�y trudne, gdy� kilka nieco odmiennych wersji ubiega�o si� o miano standardu,ale obecnie wygl�da na to, �e o dalszy rozwój tej technologii mo�emy by� spokojni.

W dowolnej chwili mo�esz przeprowadzi� edycj� szablonu CSS wybranego motywui sprawdzi� jej efekty, nawet je�li prowadzisz blog na platformie WordPress.com, ale �ebyzapisa� zmiany na sta�e, musisz ui�ci� roczn� op�at� w wysoko�ci oko�o 15 dolarów.Szczegó�y tej operacji opisali�my w rozdziale 10. „Ulepszenia, audio i wideo”.

Je�li za� prowadzisz blog, korzystaj�c z oprogramowania WordPress, mo�esz u�ywa�dowolnych motywów, modyfikowa� je zgodnie z w�asnymi potrzebami, a nawet tworzy�nowe — wszystko to dzi�ki CSS. Tego rodzaju dzia�aniom po�wi�cili�my rozdzia� 11.„Instalowanie i aktualizacja oprogramowania WordPress”.

Do zestawu narz�dzi dorzu� jeszcze j�zyk PHP (PHP Hypertext Preprocessor — hipertekstowypreprocesor PHP), który podzia�a na blog niczym dopalacz. PHP to j�zyk skryptowy. Tow nim powstaj� dodatki systemu WordPress, które otwieraj� nowe mo�liwo�ci przedblogami prowadzonymi w tym systemie. Dodatki zosta�y opisane dok�adniej na pocz�tkurozdzia�u 13. „Przybornik systemu WordPress — wtyczki”. Widgety, kilkadziesi�t dodatkówo ograniczonej funkcjonalno�ci, opisali�my w rozdziale 3. „Zadbaj o wygl�d bloga”, tutaj(widget Tekst) oraz w rozdziale 8. „Statystyki i przyci�ganie czytelników” (dodatek RSS).

Oto zawarto�� przybornika blogera:

� Motywy — dost�pne w niewielkiej liczbie dla u�ytkowników WordPress.comoraz w znacznie bogatszej ofercie dla u�ytkowników WordPress.org.

� Widgety — kilkadziesi�t miniprogramów dost�pnych dla blogów dzia�aj�cychna obydwu platformach.

� Kod HTML — mo�na go u�ywa� niezale�nie od platformy, na której prowadzisz blog.

� Kod CSS — w blogach prowadzonych na platformie WordPress.com pozwala,po wykupieniu odpowiedniego dodatku, swobodnie modyfikowa� motywy poprzezzmienianie zawarto�ci pliku CSS, a w blogach pracuj�cych na oprogramowaniuWordPress mo�e by� wykorzystywany bez ogranicze.

� Kod PHP — pozwala tworzy� dodatki do blogów dzia�aj�cych na oprogramowaniuWordPress.

I co powiesz na takie szczeble zdobywania wiedzy?

1 Artyku� w j�zyku angielskim — przyp. t�um.

Podstawy HTML dla WordPress

Jest wiele doskona�ych podr�czników do nauki j�zyka HTML, lecz stosowanie go w systemieWordPress nieco odbiega od zwyczajnego tworzenia kodu na potrzeby przegl�darek.WordPress przejmuje za Ciebie wiele tych aspektów pracy z kodem HTML, które zazwyczajs� �ród�em problemów, natomiast po pewnym okresie pracy w �rodowisku WordPressodkryjesz zapewne, �e podstawy HTML ju� opanowa�e�.

W tym rozdziale spróbujemy przekaza� Ci wiedz� z zakresu podstaw HTML, u�ywaj�cdo tego platformy WordPress. Gdy ju� zrozumiesz zasad� tworzenia kodu HTML i poznaszregu�y jego dzia�ania w �rodowisku WordPress, b�dziesz móg� wykorzysta� mo�liwo�ci,jakie nios� z sob� polecenia HTML i XHTML, �eby rozwija� swoj� witryn�.

B�dziemy pos�ugiwa� si� przede wszystkim edytorem wpisów w obydwu jego wersjach— wizualnej i HTML. (Przypominamy, �e edytor wpisów s�u�y do tworzenia nowychwpisów i stron — normalnych stron WWW zintegrowanych z blogiem — oraz do edycjiopublikowanego i zapisanego materia�u).

Style formatowania dost�pne w zak�adce Wizualny to najprostsze polecenia kodu HTML,obs�ugiwane przez wi�kszo�� przegl�darek i interpretowane niemal niezale�nieod systemu operacyjnego.

Strona edytora wpisów zawiera dwie zak�adki, dzi�ki którym mo�esz pos�ugiwa� si�albo wizualn� wersj� edytora, albo oknem, które potrafi interpretowa� polecenia HTML.Okno edytora wizualnego przedstawia wygl�d tre�ci wpisu w taki sposób, w jaki b�dzieon prezentowany odwiedzaj�cym Twoj� witryn�. W typowych edytorach kodu HTML takitryb pracy okre�la si� cz�sto skrótem WYSIWYG, który powsta� z angielskiego okre�leniaWhat You See Is What You Get (dostajesz to, co widzisz).

Uwaga

Opisane tu podstawy języka HTML mają zastosowanie na blogach prowadzonych na obydwuplatformach — WordPress.com i oprogramowaniu WordPress.

Znaczniki kodu HTML

Ca�a prawda na temat podstaw j�zyka HTML kryje si� w jego nazwie — hipertekstowyj�zyk znaczników.

Okre�lenie jj�zyk zznaczników informuje nas, �e instrukcje j�zyka s� zapisywane za pomoc�serii znaków okre�laj�cych formatowanie tekstu lub ró�nego rodzaju dzia�ania. Takainstrukcja w j�zyku HTML nosi nazw� zznacznika.

Tag przyjmuje posta�: . Nawiasy ostre informuj� przegl�dark� internetow�,�e umieszczony wewn�trz tekst stanowi polecenie j�zyka i w zwi�zku z tym nie powinienpojawia� si� na ekranie.

Wi�kszo�� znaczników jest dwucz�onowa, to znaczy sk�ada si� z cz��ci otwieraj�ceji zamykaj�cej:

Ostatnie s�owo tego zdania zostanie pogrubione.

Tak wygl�da�by tekst wprowadzony w zak�adce HTML okna edycji wpisów. W zak�adceWizualny zdanie zosta�oby wy�wietlone nast�puj�co:

Ostatnie s�owo tego zdania zostanie ppogrubione.

Oto pierwsza regu�a pracy z j�zykiem HTML. Aby pogrubi� wybrany fragment tekstu, nale�yotoczy� go odpowiednimi znacznikami, to jest znacznikiem otwarcia i znacznikiemzamkni�cia . Podobnie uzyskuje si� efekt kursywy — wybrany fragment tekstu trzebaobj�� znacznikiem otwarcia i znacznikiem zamkni�cia .

Uwaga

Nie umieszczamy tu informacji na temat kodu HTML wyłącznie dla rozrywki czy na wszelkiwypadek. Są one niezbędne do zrozumienia, dlaczego WordPress stosuje je w sposób, w jakito robi. Bez wprowadzenia do HTML wyjaśnienia byłyby zbyt zawiłe. Pominęliśmy tu całą historiępowstawania języka, kilometry tekstu umieszczonego w sieci i na papierze, dokumentującegozmagania pomiędzy konkurującymi standardami. Podajemy Ci suche informacje, które wyjaśnią,jak tworzyć kod HTML w systemie WordPress.

J�zyk HTML powstawa� zgodnie z okre�lonymi wcze�niej za�o�eniami, ale nie w oderwaniuod pewnych idea�ów, co czasami doprowadza�o do mniejszych lub wi�kszych tar�.

Przyk�adowo zak�adano, �e HTML b�dzie s�u�y� do przekazywania ttre�ci, a nie fformy.Znaczniki pogrubienia i kursywy zdecydowanie odpowiadaj� za form� prezentowaniadanych. Jednocze�nie s� niezwykle popularne w�ród twórców stron, poniewa� ka�dyz nich sprawdza si� na wi�kszo�ci urz�dze oferuj�cych dost�p do sieci, a i jego nazwadok�adnie odzwierciedla dzia�anie.

Nazwa formatowania ró�ni si� zazwyczaj od naszych wyobra�e na temat efektów, jakiepowinno dawa� owo formatowanie. Purysta konwencji HTML wola�by, �eby znacznikiodzwierciedla�y intencj� kryj�c� si� za ich zastosowaniem, a nie oddawa�y sam� nazw�formatowania. Dlatego �eby pozosta� wiernym ideologii HTML, nale�a�oby stosowa�znaczniki do podkre�lania2 znaczenia tekstu oraz , by je mocniej3 uwidoczni�.Oznacza to, �e pury�ci kodu HTML uzyskuj� efekt pochylenia czcionki po otoczeniu jejotwieraj�cymi i zamykaj�cymi znacznikami , a pogrubienia — otwieraj�cymii zamykaj�cymi znacznikami , mimo �e znaczniki te trudno wpisa� w kodi jeszcze trudniej zapami�ta�.

2 Od ang. emphasize — podkre�la�, k�a�� nacisk — przyp. t�um.3 Od ang. strong — mocny, silny — przyp. t�um.

Arkusze stylów CSS wydawa�y si� triumfem puryzmu, gdy� wreszcie tre�� zosta�a jawnieoddzielona od formy. W praktyce za� wygl�da to tak, �e przez konieczno�� u�ywaniastandardu CSS sp�dzamy znacznie wi�cej czasu, dopracowuj�c szczegó�y formatowaniadrobiazgów w przypadkach, w których w�o�ony wysi�ek znacznie przekracza wag� tre�ci.

Tak w�a�nie wygl�da sprawa ze znacznikami HTML. Rysunek 6.1 przedstawia kod�ród�owy strony przyk�adowego bloga. Aby dokoczy� rozwa�ania na temat nazwyj�zyka HTML, zajmijmy si� teraz cz��ci� HT tego akronimu — hipertekstem.

Rysunek 6.1.

Kod każdejoglądanej stronyjest łatwodostępny

Wskazówka

Działaniu HTML możesz przyjrzeć się na dowolnej stronie WWW. Niemal każda przeglądarkainternetowa oferuje funkcję wyświetlania kodu źródłowego strony. W przeglądarce InternetExplorer 8 polecenie to znajduje się w menu Strona/Pokaż źródło (można też użyć skrótuklawiszowego Ctrl+U). W innych przeglądarkach należy szukać w poleceniu Widok lub podobnych.Polecenia te otwierają okno przeglądarki, w którym pojawia się kod HTML lub CSS aktywnej strony.

To, co odró�nia hhipertekstowy j�zyk znaczników HTML od innych kodów znacznikowych,to wykorzystanie dodatkowych znaczników pozwalaj�cych wprowadza� na stron�hiper��cza. Dla przyk�adu podajemy kod, który umieszczony na dowolnej stronie WWWzaprowadzi odwiedzaj�cego na stron� projektu WordPress.com.

Aby dosta� si� do serwisu WordPress.com, kliknij <a href=�"http://www.wordpress.com">tutaj</a>.

W przedstawionym przyk�adzie funkcj� hiper��cza pe�ni s�owo ttutaj. O ile domy�lneustawienia wy�wietlania strony nie zostan� zmienione, odno�nik b�dzie wyró�nionykolorem niebieskim i podkre�leniem. Gdy u�ytkownik kliknie odno�nik, w oknieprzegl�darki pojawi si� zawarto�� strony g�ównej serwisu WordPress.com.

Nazwa znacznika <a> pochodzi od angielskiego s�owa aanchor (kotwica). (Zagadnieniezarz�dzania kotwicami staje si� bardzo istotne w przypadku serwisów o skomplikowanejstrukturze).

Nazwa pojawiaj�ca si� obok znacznika, href, jest skrótem angielskiego okre�leniahypertext reference (odno�nik hipertekstowy). Wyra�enie to nie jest znacznikiem, leczdefinicj� umieszczan� wewn�trz znacznika (co wida� w przyk�adzie). Okre�la si� jemianem aatrybutu. Mówi�c o hhipertek�cie, mamy na my�li tekst, który mo�e pojawia�si� w ró�nych plikach umieszczonych na ró�nych serwerach.

Opanowywanie podstaw j�zyka HTML w �rodowisku WordPress.com jest wygodne,poniewa� sam system zdejmuje z Ciebie odpowiedzialno�� za dbanie o mniej istotnew danym momencie szczegó�y techniczne. Ty opracowujesz jedynie tre�� i wygl�d samegowpisu. To WordPress dba o umieszczenie go w szablonie (pisali�my o tym w rozdziale3.). Równie� WordPress zapewnia miejsce na serwerach dla Twoich plików.

To rozwi�zanie pozwala Ci unikn�� jednej z najwi�kszych bol�czek projektantów stroninternetowych. Strony powstaj� zazwyczaj na komputerach ich twórców i dopiero gdys� gotowe, przenosi si� je na serwer WWW.

Transfer danych na inn� maszyn� zawsze wi��e si� ze sporym ryzykiem, cho�by dlatego,�e obowi�zuje na niej inna struktura katalogów. Podczas takiej operacji bardzo �atwoo zerwanie powi�za mi�dzy stronami witryny oraz innego rodzaju katastrofy.

System WordPress.com sprawuje bardzo szczegó�ow� kontrol� nad tym procesem.Nigdy nie umieszczasz na serwerze tekstu wpisu i jego tytu�u bezpo�rednio w bazie,lecz wykonujesz to za po�rednictwem formularza edycji. Podobnie przebiega wysy�aniegrafiki czy plików audio i wideo — wszystkie one s� umieszczane na serwerze po koleiprzez utworzone specjalnie w tym celu narz�dzie. Dopiero po wys�aniu plików naserwer mo�esz umie�ci� je we wpisach swojego bloga. Dzi�ki takiemu rozwi�zaniunie musisz dba� o zachowanie odpowiednich powi�za odno�ników po przeniesieniuplików na inny komputer. (By� mo�e Automattic przenosi Twój blog pomi�dzy serwerami,ale odbywa si� to zupe�nie w tle Twoich dzia�a i nie odczuwasz przykrych skutkówtakiej operacji).

Z chwil� przeniesienia bloga na oprogramowanie WordPress przejmujesz wszystkie teobowi�zki. By� mo�e w�a�ciciel serwera zaoferuje odpowiednie us�ugi, które uchroni�Ci� przed wi�kszo�ci� problemów, ale nigdy nie b�dziesz móg� pozwoli� sobie na tak�beztrosk� jak w czasach, gdy u�ywa�e� serwerów WordPress.com. W zamian otrzymujeszznacznie wi�ksz� swobod� dzia�a.


Obsługa HTMLPod koniec lat dziewięćdziesiątych XX w. nastąpił gwałtowny rozwój wszelkiego rodzajudziałalności gospodarczej związanej z internetem. Amerykanie określili to zjawisko mianem„dot-com-boom”, co można by przełożyć jako boom-gospodarczy.com. Przedsiębiorstwadziałające w branży sieciowej, które nigdy dotąd nie przyniosły ani grosza zysków, czy nawettakie, które nigdy nie wyrobiły żadnych przychodów, stały się niemal z dnia na dzień wartemiliony, a czasem miliardy dolarów. Wartość tych, które przynosiły zyski, osiągnęła jeszczewyższy poziom. Firma AOL, słynąca z oferowania milionom ludzi dostępu do internetu,wykupiła akcje potentata branży wydawniczej i filmowej, Time Warner, w roku 2000, gdy boomosiągnął szczyt. Po dziesięciu latach, jakie upłynęły od tamtego czasu, spółka, która powstałaz ich połączenia, jest wyceniana na więcej bez AOL niż z nią.

W centrum tego zamieszania znajdował się właśnie HTML. Coraz mocniej i coraz częściejnaciskano, by język zaczął oferować coraz większe możliwości i otwierać przed stronamiWWW coraz lepsze drogi rozwoju. Firmy Microsoft (twórca przeglądarki Internet Explorer)i Netscape (twórcy przeglądarki Navigator) rozpoczęły rywalizację na gruncie wprowadzanianowych znaczników rozpoznawanych przez ich przeglądarki. (Przeglądarka Navigator dałapoczątek popularnemu dziś programowi Firefox).

Podobnie gwałtownego rozwoju doświadczył standard CSS. Początkowo język arkuszystylów był znacznie mniej uporządkowany i gorzej obsługiwany niż HTML. Rdzeń CSS, jakidzisiaj znamy, miał dopiero powstać.

Mimo pewnego spokoju, jaki zapanował w świecie internetu, nadal na porządku dziennymsą sytuacje, w których ta czy inna witryna nie działa poprawnie w niektórych przeglądarkach.Problem ten dotyczy szczególnie stron użytkowych, na przykład witryn bankowych, którebardzo często działają poprawnie wyłącznie w najnowszej wersji przeglądarki Internet Explorerw systemie Windows, przez co użytkownicy innych przeglądarek i systemów operacyjnych— m.in. Safari w systemie MAC OS czy Firefox — są w bardzo niewygodnej sytuacji.

Pomimo różnych prób wprowadzenia większych czy mniejszych porządków w standardzieHTML, doświadczeni dostawcy usług internetowych — na przykład twórcy systemu WordPress— polegają wyłącznie na najbardziej podstawowych poleceniach HTML, które są poprawnieinterpretowane nie tylko przez komputery, ale także przez wszelkiego rodzaju inne urządzenia —od smartfonów do programów odczytujących zawartość okna osobom niewidomym. Blogiprowadzone w systemie WordPress są dostępne prawie dla każdego.

Karty Wizualny i HTML

Przyjrzyjmy si� teraz kartom Wizualny i HTML edytora wpisów, �eby dowiedzie� si�,czym naprawd� ró�ni� si� one od siebie. Rysunek 6.2 przedstawia obszar edycji wpisuw obydwu wydaniach.

Przyciski dost�pne w zak�adce Wizualny odpowiadaj� opcjom oferowanym przez wersj�HTML edytora. W tabeli 6.1. znajdziesz porównanie funkcji obydwu systemów pracy.Pierwsza cz�� tabeli zawiera przyciski umieszczone w g�ównym, górnym menu opcjiedycji. W drugiej cz��ci znajdziesz funkcje menu podrz�dnego, dolnego, które pojawiasi� dopiero po klikni�ciu przycisku Poka�/ukryj zlew kuchenny.


Rysunek 6.2.

Edytorw zakładkachWizualny i HTMLwykonujewiększość tychsamych zadańw zupełnieodmiennysposób

Tabela 6.1. Przyciski w zakładkach Wizualny i HTML

Zakładka Wizualny Zakładka HTML Działanie

Dodaj obrazek img Wstawia grafik�.

B b Pogrubienie

I i Kursywa

ABC del Przekre�lenie

Punkty ul Lista nieuporz�dkowana (wypunktowanie)

Numery ol Lista uporz�dkowana (numerowanie)

li Elementy listy (zarówno wypunktowania,jak i numerowania)

Wyrównanie do lewej Tekst wyrównany do lewego marginesu,przy prawym marginesie poszarpany

Wy�rodkowanie Tekst wy�rodkowany


Tabela 6.1. Przyciski w zakładkach Wizualny i HTML — ciąg dalszy

Zakładka Wizualny Zakładka HTML Działanie

Wyrównanie do prawej Tekst wyrównany do prawego marginesu,przy lewym marginesie poszarpany

Odno�nik link Hiper��cze

Usu odno�nik Usuwa hiper��cze

Wstaw tag „wi�cej” more Wstawia po wskazanej cz��ci tekstu odno�nikprowadz�cy do pozosta�ego fragmentu wpisu

Proofread writing(sprawd� pisowni�)

Sprawdza pisowni� tekstu w j�zyku angielskim

Tryb pe�noekranowy Wy�wietla w oknie przegl�darki samo poleedycji tekstu

Poka� lub ukryjkuchenny zlew

Wy�wietla lub ukrywa dodatkowe opcjeformatowania

Lista rozwijana Akapit(formatowanie stylu Adres,Tekst preformatowanyi nag�ówki 1 – 6)

code Ró�ne opcje formatowania tekstu

Podkre�lenie ul

Wyjustowany Tekst wyrównany obustronnie

Kolor tekstu Zmienia kolor wy�wietlanego tekstu (co mo�eprowadzi� do mylenia wyró�nionychfragmentów z odno�nikami)

Import tekstu Wstawia tekst z notatnika

Import zawarto�ciz programu Word.

Wstawia tekst z programu Microsoft Word

Usu formatowanie Usuwa wszystkie zmiany wygl�du tekstunadane formatowaniem

Zmniejsz wci�cie Usuwa wszelkie wci�cia tekstu

Zwi�ksz wci�cie Przesuwa margines bloku tekstu w prawo

Cofnij Cofa ostatnio wykonan� czynno��

Ponów Cofa cofni�cie wykonanej czynno�ci

Pomoc Otwiera stron� Codex (nie znajdziesz na niejzbyt szczegó�owych wyja�nie)

ins Nadaje formatowanie wstawionego tekstu(s�u�y do aktualizowania wpisów)

lookup Sprawdza s�owo w s�owniku

zamknij tagi Wstawia zamkni�cia znaczników (wartokontrolowa�, w jakich miejscach si� pojawiaj�)


Formatowanie znaków

Polecenia formatowania znaków dost�pne w systemie WordPress ograniczaj� si� donajlepiej obs�ugiwanych przez programy znaczników kodu HTML — pogrubienia, kursywyoraz dodanego nieco pó�niej przekre�lenia.

Rysunek 6.3 przedstawia tekst wpisany w zak�adce Wizualny, sformatowany za pomoc�znaczników pogrubienia, wyró�nienia i przekre�lenia. Pierwsze wyrazy ka�dego z pytazosta�y oznaczone kursyw� — JJak, GGdzie, CCo i DDlaczego. Wszystkie cczasowniki zosta�ypogrubione. S�owo ttak w ostatnim pytaniu zosta�o przekre�lone.

Rysunek 6.3.

W zakładceWizualny niema wątpliwościco do sposobuformatowaniatekstu

Rysunek 6.4 przedstawia ten sam tekst w widoku HTML. Tym razem masz okazj� przyjrze�si� znacznikom HTML odpowiedzialnym za wy�wietlanie tekstu w oknie edytorawizualnego.

Rysunek 6.4.

W zakładce HTMLwszystko wyglądanieco bardziejskomplikowanie

Pora zastanowi� si�, co tak naprawd� dzieje si� z tekstem. Tabela 6.2. przedstawiaporównanie tekstu widocznego w obydwu zak�adkach.

Tabela 6.2. Zakładki Wizualny i HTML

Wizualny HTML

Jak si� mmasz? Jak si� masz?

Gdzie jjeste�? Gdzie jeste�?

Co rrobisz? Co robisz?

Dlaczego pprzychodzisz tak pó�no? Dlaczego przychodzisz</�strong> <del>tak</del> pó�no?

Wprawdzie na przyciskach zak�adek Wizualny i HTML pojawiaj� si� symbole B i b, alepo ich u�yciu w kodzie pojawia si� znacznik , a nie . To ust�pstwo na rzeczfunkcjonalno�ci — gdyby na przycisku pojawi� si� napis sstrong, nikt nie wiedzia�by,do czego s�u�y ten przycisk.

Podobne rozwi�zanie zastosowano w przypadku znacznika , który odpowiadaza nadanie tekstowi formatowania kursyw�.

Przekre�lenie jest osi�gane za pomoc� znaczników <del> (od angielskiego s�owa delete— usuwa�).

Znaczniki nie s� wprawdzie bardzo rozbudowane, ale kod HTML i tak jest znaczniemniej czytelny ni� wersja w edytorze wizualnym. Oczywi�cie z czasem, gdy nabierzeszdo�wiadczenia, nauczysz si� ignorowa� znaczniki i bez trudu odczytasz tre�� strony.Najwi�cej problemów w czasie odczytywania tekstu z kodu strony sprawia znacznik, który nie odbiega d�ugo�ci� od przeci�tnego s�owa (w zasadzie jest s�owem).Wygodniej by�oby pos�ugiwa� si� znacznikiem . Z kolei znacznik , wprawdziekrótszy, nie kojarzy si� z kursyw� i nawet je�li zapami�ta si�, �e pochodzi on od angielskiegos�owa oznaczaj�cego „wyró�nia�”, nadal �atwo pomyli� owo wyró�nienie z pogrubieniem.

Oto, jak wygl�da�yby te same zadnia opisane cz��ciej u�ywanymi znacznikami. �atwostwierdzi�, �e mniej czysta wersja HTML jest znacznie przyst�pniejsza.

Jak si� masz?Gdzie jeste�?Co robisz?Dlaczego przychodzisz <del>tak</del> pó�no?

WordPress bez k�opotów interpretuje popularniejsze znaczniki, na przyk�ad i , alemusisz wpisa� je bezpo�rednio w zak�adce HTML lub skopiowa� z narz�dzia, w którymtworzysz kod strony.

Je�li sprawdzisz wygl�d wpisu w zak�adce Wizualny, a nast�pnie powrócisz do zak�adkiHTML, odkryjesz, �e zamiast wprowadzonych wcze�niej znaczników i pojawi�ysi� znaczniki i . Mniej popularne znaczniki, na przyk�ad <s>, oznaczaj�ceprzekre�lenie, zostan� w czasie tych dzia�a po prostu usuni�te, wi�c b�dziesz musia�zauwa�y� ich brak i wprowadzi� je ponownie r�cznie w formie akceptowanej przezWordPress w zak�adce HTML lub pos�u�y� si� odpowiednim przyciskiem w zak�adceWizualny.

Tajemniczy znacznik Oznaczenie akapitu, czyli znacznik 4, jest jedną z najczęstszych przyczyn frustracji w czasieedycji kodu HTML.

Pierwotnie był on narzędziem formatowania tekstu, a nie określania jego znaczenia. Używano go,by oddzielić jeden akapit od drugiego.

Większość przeglądarek internetowych oddziela akapity od siebie, umieszczając przedkolejnym nieco wolnego miejsca. Projektanci witryn zazwyczaj chcą się go pozbyć lub pragną,by było go znacznie więcej.

Jeżeli nie chcesz oddzielać kolejnych wierszy tekstu odstępem, powinieneś raczej korzystaćze znacznika , wymuszając tym samym złamanie wiersza. Jeśli jednak zależy Ci napowiększeniu odstępów między akapitami, to masz problem. Większość przeglądarekzostała zaprojektowana w taki sposób, by ignorować wielokrotne wystąpienia znaczników, lub ich kombinacji. Powiększanie odstępów między akapitami za pomocą samegokodu HTML nie jest łatwe.

Z czasem sposób korzystania ze znacznika zmienił się. Projektanci stron zaczęli stosowaćgo w charakterze kontenera tekstu, otaczając treść akapitu znacznikami otwarcia i zamknięcia. To znacznie lepsze podejście do kodowania, ponieważ informuje wszystkich, którzyczytają kod, że „to zamknięty akapit”. Umieszczenie samego znacznika jest równoznaczneze stwierdzeniem „wstaw tu przerwę akapitową”.

Jeżeli poza używaniem kodu HTML posiłkujesz się kodem CSS, powinieneś raczej stosowaćznaczniki <div> sygnalizujące podział zawartości strony na części, których szczegółowacharakterystyka jest zdefiniowana w arkuszu stylów. Takie rozwiązanie znacznie zwiększapole manewru, lecz jednocześnie zaciemnia kod, ponieważ aby zorientować się, za coodpowiada każdy ze znaczników <div>, trzeba sięgnąć do arkusza stylów. Nie zapominajmyteż, że jeden styl może przesłaniać inne — dlatego nazywa się je kaskadowymi — więcniewykluczone, że zanim dotrzesz do sedna zastosowanego rozwiązania, będziesz musiałsprawdzić niejeden plik.

System WordPress ukrywa znaczniki <div> w trybie HTML. Najwyraźniej jego twórcy doszlido wniosku, że i bez nich kod HTML jest wystarczająco skomplikowany!

Teraz już wiesz, jak trudno jest okiełznać kod HTML i pewnie rozumiesz frustrację, jaka od latnarasta u niemal każdego projektanta witryn WWW. Na pewno nieraz natknąłeś się w siecina pełne goryczy opowieści o zmaganiach z kodem CSS czy HTML i jego wyświetlaniemw różnych przeglądarkach — częstej przyczynie frustracji programistów aplikacji internetowych.

Formatowanie list

Warto przez chwil� zatrzyma� si� przy temacie stosowania wypunktowania i numerowaniaw systemie WordPress, poniewa� obydwa te rodzaje formatowania s� bardzo wygodne(zarówno podczas pracy nad blogiem, jak i podczas czytania), ale jednocze�nie mog�wywo�ywa� wiele negatywnych emocji. Przegl�darki wy�wietlaj� je w wyj�tkowo

4 Od angielskiego s�owa paragraph — akapit — przyp. t�um.

nieprzyjemny sposób — z ogromnym odst�pem przed pierwszym elementem listy i bez�adnych odst�pów mi�dzy pozosta�ymi elementami.

Wirtuozi HTML nie od dzi� stosuj� przeró�ne rozwi�zania, dzi�ki którym listy prezentuj� si�znacznie lepiej, natomiast specjali�ci od CSS wprowadzaj� odpowiednie i akceptowalnezmiany w arkuszach, by osi�gn�� zamierzony efekt.

Kod HTML oferuje dwa modele list. Ka�dy z nich jest otoczony inn� par� znaczników, aleposzczególne pozycje w obydwu przypadkach ujmuje si� w identyczne znaczniki. Dzi�kitemu zmienianie typów formatowania listy nie nastr�cza �adnych trudno�ci. Poni�ejkilka s�ów na temat ka�dego z nich:

� Lista nieuporz�dkowana — w tym przypadku nnieuporz�dkowana oznacza „list�,w której kolejno�� wymieniania elementów nie ma �adnego znaczenia”, cho� oczywi�ciemusz� one by� wy�wietlone w jakim� porz�dku — HTML podaje je zawsze w kolejno�ci,w jakiej je wpiszesz. Listy nieuporz�dkowane przyjmuj� zawsze posta� wypunktowania.Okre�lanie ich mianem nnieuporz�dkowanych zamiast wwypunktowaniem to uk�onw stron� idei kryj�cej si� za j�zykiem HTML — k�adzeniem nacisku na znaczenie,a nie na szczegó�y formatowania.

� Lista uporz�dkowana — uuporz�dkowana, czyli taka, na której „kolejno�� elementówma znaczenie”, zatem jest zawsze wy�wietlana w postaci listy numerowanej.

Wszystkie pozycje listy nieuporz�dkowanej obejmuje si� zewn�trzn� par� znaczników<ul></ul>5, a ka�dy z elementów listy jest obj�ty osobn� par� znaczników <li></li>.Oznaczenie to jest skrótem angielskiego wyra�enia llist item — element listy.

W przypadku listy uporz�dkowanej (numerowanej) stosuje si� nadrz�dn� par� znaczników<ol></ol>6, a ka�d� z pozycji listy obejmuje si� osobn� par� znaczników <li></li>,tak jak w przypadku listy nieuporz�dkowanej.

Tabela 6.3. przedstawia wygl�d list w kartach Wizualny i HTML edytora wpisów.

Zwró� uwag� na to, jak bardzo podobnie wygl�da formatowanie list w obydwuprzypadkach. Ró�ni� si� jedynie znacznikami otwieraj�cymi i zamykaj�cymi — w pierwszymprzypadku jest to para <ul></ul>, w drugim <ol></ol>. Gdyby zasz�a potrzeba edytowaniakodu HTML i zmienienia jednego sposobu formatowania na drugi, wystarczy zamieni�znaczniki zewn�trzne.

Zauwa� te�, �e w kolumnie HTML tabeli 6.3. wszystkie elementy obydwu list s� oznaczonedodatkowymi wci�ciami. Wci�cia te nie maj� nic wspólnego ze sposobem, w jaki kod HTMLjest wy�wietlany przez przegl�darki. Taki zapis ma u�atwi� odczytywanie kodu programi�cie,niezale�nie od tego, czy b�dzie si� sprawdza� polecenia na ekranie, czy na papierze.Niektóre z edytorów HTML wprowadzaj� dodatkowe u�atwienia w postaci wielopoziomowychwci��, wyró�niania poszczególnych elementów sk�adni j�zyka kolorami, inn� czcionk�czy stylem formatowania (pogrubieniem, kursyw� itd.), a nie s� to jedyne sztuczki maj�cena celu podniesienie komfortu pracy z kodem.

5 Nazwa znacznika pochodzi od pierwszych liter unordered list — lista nieuporz�dkowana — przyp. t�um.6 Nazwa znacznika jest skrótem wyra�enia ordered list — lista uporz�dkowana — przyp. t�um.

Tabela 6.3. Wygląd list w trybach pracy Wizualny i HTML edytora wpisów

Wizualny HTML

Oto kilka moich ulubionych cytatówz Mickiewicza:


<ul>

Zosta� na polu samemu i w nocy, /To lubi�, rzek�em, to lubi�!

<li>Zosta� na polu samemu i w nocy, /To lubi�, rzek�em, to lubi�!</li>

Jaki� to ch�opiec pi�kny i m�ody? / Jaka� toobok dziewica? / Brzegami sinej witeziwody / Id� przy �wietle ksi��yca.

<li>Jaki� to ch�opiec pi�kny i m�ody? /Jaka� to obok dziewica? / Brzegami sinej�witezi wody / Id przy �wietleksi��yca.</li>

Ja na rok u Belzebuba / Przyjm� za ciebiemieszkanie, / Niech przez ten rok mojaluba / Z tob� jak z m��em zostanie.

<li>Ja na rok u Belzebuba / Przyjm� zaciebie mieszkanie, / Niech przez ten rokmoja luba / Z tob jak z m��em zostanie.</li>

</ul>



<ol>

Zosta� na polu samemu i w nocy, /To lubi�, rzek�em, to lubi�!

<li>Zosta� na polu samemu i w nocy, /To lubi�, rzek�em, to lubi�!</li>

Jaki� to ch�opiec pi�kny i m�ody? / Jaka� toobok dziewica? / Brzegami sinej witeziwody / Id� przy �wietle ksi��yca.

<li>Jaki� to ch�opiec pi�kny i m�ody? /Jaka� to obok dziewica? / Brzegami sinej�witezi wody / Id przy �wietleksi��yca.</li>

Ja na rok u Belzebuba / Przyjm� za ciebiemieszkanie, / Niech przez ten rok mojaluba / Z tob� jak z m��em zostanie.

<li>Ja na rok u Belzebuba / Przyjm� zaciebie mieszkanie, / Niech przez ten rok mojaluba / Z tob jak z m��em zostanie.</li>

</ol>

Uwaga

Byłoby miło, gdyby Automattic zdecydowała się na wprowadzenie edytora kodu HTML równieżw trybie pełnoekranowym, tak wygodnym w czasie pracy w edytorze wizualnym. Dopóki tonie nastąpi, jesteś skazany na szukanie rozwiązań prowizorycznych.

Nawet na tym prostym przyk�adzie wida�, �e kod HTML zajmuje sporo miejsca na stronie.W czasie pracy na ekranie komputera sytuacja nie przedstawia si� o wiele lepiej. Edycjatre�ci wpisu w widoku kodu HTML jest wyj�tkowo niewygodna z powodu braku miejscaw polu tekstowym edytora, który jest dost�pny wy��cznie w widoku kokpitu.

Tworzenie odnośników

Tworzenie odno�ników to definiowanie hiper��czy wewn�trz kodu HTML. Hiper��czastanowi� serce struktury internetu.

Okre�lanie ��czy mo�e by� trudne, do tego �atwo pope�ni� w czasie takiej operacji b��d,czy nawet uszkodzi� ��cze, które dzia�a�o ju� od jakiego� czasu. Na szcz��cie budowaniepo��cze w systemie WordPress zosta�o uproszczone tak, by u�atwi� Ci prac�, niepozbawiaj�c jednocze�nie mo�liwo�ci decydowania o pewnych opcjach dzia�aniaodno�nika. Gdyby� za� potrzebowa� jakich� specjalnych rozwi�za, zawsze mo�eszedytowa� kod wpisu i doda� kolejne parametry do definicji ��cza.

G�ównym powodem, dla którego powiniene� stara� si� zrozumie� struktur� odno�nika,jest to, �e w�a�nie budowa ��cza i mo�liwo�ci jej modyfikacji b�d� sk�ania� Ci� najcz��ciejdo analizowania kodu HTML. Od jako�ci po��cze zale�y natomiast komfort pracyi poruszania si� po blogach systemów WordPress.com i WordPress.org. ��cza bywaj�niezb�dne w dwóch typowych dla autorów blogów przypadkach:

� gdy na interesuj�cej Ci� stronie znajdziesz kod HTML, który pozwoli�by Ci umie�ci�na blogu na przyk�ad plik wideo lub przycisk pozwalaj�cy nawi�za� po��czenietelefoniczne (Google Voice) czy uruchomi� funkcj� t�umaczenia (AltaVista);

� gdy chcesz wykorzysta� wszystkie mo�liwo�ci widgetu Tekst, do czego wrócimy w dalszejcz��ci rozdzia�u.

Oto trzy rodzaje odno�ników, które warto zapami�ta�:

� Odno�niki do strony g�ównej, np.:

Odwied� <a href="http://www.wordpress.com">serwis WordPress</a>.

W tym przypadku kod HTML wykonuje naprawd� istotn� prac�. Gdy w odno�nikupojawia si� nazwa domeny, przegl�darka zaczyna szuka� jednej z nast�puj�cychstron:

index.htmindex.htmlhome.htmhome.html

Nazwy te s� uprzywilejowane, co oznacza, �e nie musisz wpisywa� ich jawnie w paskuprzegl�darki, by ta zacz��a szuka� ich w sieci. Nie musisz wiedzie�, któr� z nazwpos�u�y� si� autor witryny, poniewa� ka�da z nich otworzy si� po podaniu nazwy domeny.

� Odno�niki do dowolnej strony w sieci, np.:

Sprawd� list� najnowszych ciekawostek w systemie<a href="http://www.wordpress.com/ciekawostki/najnowsze.htm">WordPress</a>.

Taki odno�nik zaprowadzi Ci� do zawarto�ci katalogu ciekawostki, otwieraj�cstron� najnowsze.html (nazwy plików stron internetowych zawsze kocz� si�rozszerzeniem .htm lub .html).

� Odno�niki przenosz�ce w obr�bie jednej strony, np.:

Sprawd� list� najnowszych ciekawostek w systemie<a href="http://www.wordpress.com/ciekawostki/najnowsze.htm#item20">WordPress</a>.

Polecenie to, jak poprzednie, przeniesie Ci� na stron� najnowsze.htm umieszczon�w katalogu ciekawostki, ale idzie ono jeszcze o krok dalej i otwiera stron� w miejscuoznaczonym specjalnym znacznikiem, który nazywamy kkotwic� (anchor). (Je�li z jakich�przyczyn kotwica zostanie usuni�ta z pliku strony, ta otworzy si� na samym pocz�tku).Oto posta� kotwicy:

<a name="item20"><h4>Element 20</h4></a>

W przedstawionym przyk�adzie kotwica obejmuje nag�ówek, co akurat jest bardzotypowym sposobem wykorzystania tego znacznika. Tego rodzaju kotwica, czyli paraznaczników <a></a>, nie musi otacza� �adnego tekstu, poniewa� samo jej wyst�pieniewystarczy do oznaczenia wybranego punktu pliku. Jednak niektórzy lubi� umieszcza�wewn�trz tekst na wypadek pó�niejszych prób przemodelowania zawarto�ci pliku— dobrze jest umie�ci� wewn�trz kotwicy co�, co wska�e wyra�nie jej przeznaczenie.

Ostrzeżenie

Strony WWW i zdefiniowane w nich kotwice bez przerwy ulegają zmianom. Z kolei wpisy nablogu są poniekąd związane z okresem, w jakim powstały, więc raczej nie wraca się do nich,by nanosić poprawki i upewniać się, że wszystkie odnośniki działają prawidłowo. Jeśli jednakumieściłeś na swojej witrynie statyczne strony lub polecasz ulubione wpisy, powinieneś cojakiś czas sprawdzać, czy wszystkie odnośniki działają poprawnie, i uaktualniać te, któreprzestały funkcjonować w wyniku zmian na stronach docelowych.

Tego rodzaju odno�niki przydadz� Ci si� niejednokrotnie podczas pracy z widgetemTekst, o którym wspomnimy w dalszej cz��ci tego rozdzia�u. Je�eli chcesz umieszcza�odno�niki do konkretnych punktów w�asnych wpisów lub stron, mo�esz umie�ci� w ichkodzie odpowiednie kotwice. Mo�esz te� sprawdzi�, czy w kodzie stron, które chcia�by�poleci�, nie znajdziesz przygotowanych przez autora kotwic.

Zarządzanie kotwicamiTechnicznie rzecz ujmując, zarówno początek odnośnika, jak i miejsce, do którego on prowadzi,nazywają się kotwicami. Kotwica opatrzona nazwą i umieszczona wewnątrz pliku, na przykładitem20, o którym wspominaliśmy w tym rozdziale, to po prostu pewien szczególny rodzajodnośnika.

Jednakże większość ludzi, w tym także twórcy kodu HTML — osoby wyjątkowo zważającena swoje słowa — nadal określają początek odnośnika słowami link lub href. Określenieanchor (kotwica) kojarzy się przede wszystkim z odnośnikami prowadzącymi do zawartościtego samego pliku.

Dlatego jeśli kiedyś natkniesz się na określenie „kotwica”, pamiętaj, że zapewne mowao odnośniku prowadzącym do zawartości tej samej strony. No, chyba że zabłąkasz siędo portu, wtedy kotwicę rzuć!

Znacznik more

Twórcy systemu WordPress wprowadzili w�asny znacznik, more, który jest doskona�ymprzyk�adem sposobu dzia�ania kodu HTML oraz metodyki dzia�ania pracownikówAutomattic, za wszelk� cen� staraj�cych si� u�atwi� Ci �ycie.

Na stronie g�ównej Twojego bloga pojawiaj� si� najbardziej aktualne wpisy. Je�eliumie�cisz we wpisie znacznik more, tylko cz�� wpisu b�dzie widoczna na stronie g�ównej.Tekst ukryty za tym znacznikiem pojawi si� dopiero wtedy, gdy u�ytkownik kliknie tekstodno�nika, czy to z poziomu strony g�ównej, czy z dowolnego innego miejsca.

Znacznik more wprowadza si� do kodu nast�puj�co:



Z punktu widzenia programów interpretuj�cych kod HTML ka�dy ci�g znaków wewn�trzznacznika rozpoczynaj�cy si� od wykrzyknika (!) jest komentarzem. Przegl�darkiignoruj� tego rodzaju znaczniki, dlatego programi�ci z upodobaniem umieszczaj�w nich komentarze do kodu. Takie uwagi odgrywaj� rol� notatek dla kierownikówprojektów lub ludzi, którzy w pó�niejszym terminie zajmuj� si� wprowadzaniem na stron�nowych tre�ci i poprawek.

Oczywi�cie nie zapominajmy, �e WordPress nie jest jak�� tam stron� WWW. Takz�o�ony system mo�e zawiera� polecenia nakazuj�ce mu sprawdza� tre�� komentarzyi pilnowa�, czy pojawiaj� si� w nich zdefiniowane ci�gi znaków, którym przypisano konkretneznaczenie. Znacznik more jest w�a�nie przyk�adem takiego wyspecjalizowanegokomentarza.

Znacznik ten mo�e pojawi� si� w dowolnym miejscu wpisu, dzi�ki czemu strona g�ównaTwojego bloga b�dzie wygl�da�a dok�adnie tak, jak sobie tego za�yczysz.

Wskazówka

Wielu użytkowników spodziewa się, że po wejściu na stronę główną bloga zastaną tam całątreść najnowszego wpisu. Możesz zatem publikować najnowsze notki bez wstawiania w nichznacznika more, natomiast dodawać go do wszystkich poprzednich. Dzięki temu najnowszypost pojawi się na głównej stronie w całości, a kilka innych wpisów (ile — to już zależyod Ciebie) wyświetli się wyłącznie w postaci fragmentów.

Edycja kodu HTML w systemie WordPress

Okno wpisów sprawdza si� ca�kiem nie�le w roli edytora WYSIWYG i jest totalniechybionym edytorem kodu HTML. Oto dlaczego:

� Edytor WYSIWYG (czyli karta Wizualny) pozwala korzysta� ze wszystkich funkcji HTML,umo�liwia kopiowanie z notatnika i programu Word, oferuje funkcj� sprawdzaniatekstów w j�zyku angielskim i pozwala pracowa� w trybie pe�noekranowym.


� Przyciski funkcji w edytorze HTML s� myl�ce i nie ma mo�liwo�ci rozwini�cia polaedycji do trybu pe�noekranowego. Kod HTML zajmuje bardzo du�o miejsca polaedycji, a ograniczona ilo�� miejsca w widoku kokpitu uniemo�liwia dobr� orientacj�w tek�cie. Dodatkowym utrudnieniem jest brak funkcji Znajd i Zamie�.

Ze wzgl�du na ograniczon� funkcjonalno�� edytora HTML w systemie WordPress,wszelkie próby pracy z bardziej zaawansowanymi postaciami kodu s� w nim z góryskazane na pora�k�. Je�eli uznasz, �e Twój blog nie obejdzie si� bez znacznej ingerencjiw kod, powiniene� przeprowadzi� wszelkie potrzebne zmiany w innym edytorze, skopiowa�wyniki pracy i wklei� je w polu edycji kodu WordPress.

Oczywi�cie w trakcie prze��czania si� pomi�dzy oknami edytorów bardzo �atwo jestpogubi� si�, utraci� wyniki pracy, a przede wszystkim nie da si� przy tym unikn�� stratymnóstwa czasu. Na szcz��cie tego typu operacje zwykle kocz� si� pomy�lnie.

U�ytkownicy wszystkich systemów operacyjnych mog� wybiera� spo�ród wielu ró�nychedytorów kodu HTML — w tej dziedzinie nie obowi�zuj� �adne standardy. Wraz z eksplozj�popularno�ci sieci w latach dziewi��dziesi�tych XX w. na rynku pojawi�o si� mnóstwotego typu aplikacji. Niektóre ciesz�ce si� niegdy� powodzeniem programy znikn��y w tymczasie z horyzontu, inne s� wprawdzie jeszcze wspierane przez producentów, ale ju�nierozwijane. Ta sytuacja zmienia si� z roku na rok. Doskona�ym przyk�adem takiegotraktowania mo�e by� popularny niegdy� edytor FrontPage autorstwa Microsoft. Programzosta� pporzucony — nie mo�na go ju� kupi�, nie pojawiaj� si� �adne aktualizacje. Microsoftwprowadzi� na jego miejsce znacznie bardziej zaawansowane technicznie programynale��ce do rodziny Microsoft Expression Studio. Pakiet ten ma konkurowa� z powszechnieszanowanym, lecz niemniej skomplikowanym w obs�udze programem Adobe Dreamweaver.

Poszukaj w internecie programu odpowiedniego dla swoich potrzeb i w�a�ciwego dlasystemu, z jakiego korzystasz. Wi�kszo�� edytorów jest dost�pna w podstawowej wersjiza darmo lub przez okres próbny. Potem, gdy b�dziesz mie� pewno��, �e dana aplikacjaCi odpowiada, bez trudu zaktualizujesz j� do pe�nej wersji.

Z jakich znaczników korzystać?

Je�li masz jakiekolwiek rozeznanie w pracy z kodem HTML, zastanawiasz si� pewnieteraz, których znaczników b�dzie Ci wolno u�ywa� w czasie tworzenia wpisów w systemieWordPress. Je�li za� masz dopiero w planach podszkolenie si� nieco w tym temacie,pytanie to zadasz sobie ju� w najbli�szej przysz�o�ci.

Wspominali�my ju� o kilku rodzajach znaczników, które na pewno sprawdzaj� si� wewpisach WordPress (cho� system czasami zamienia je na inne znaczniki). S� to: a, b,blockquote, br, del, div, em, li, ol, p, s, span, strike, strong i ul.

Poza tym mo�esz bez problemu u�ywa� kilkunastu innych, które tu wymienimy i opiszemyw kilku s�owach — font (owszem, mo�esz zmienia� czcionki w swoim blogu!), h1, h2, h3,h4, h5, h6 (nag�ówki uszeregowane od najwi�kszego do najmniejszego), hr (pozioma linia

oddzielaj�ca), img (wstawianie obrazów rz�dzi si� podobnymi zasadami jak budowanieodno�ników) i table (pot��ne, lecz niebezpieczne narz�dzie — tabele dzia�aj� w ka�dejprzegl�darce nieco inaczej).

I, �eby mie� formalno�ci za sob�, oto lista pozosta�ych rozpoznawanych przez WordPressznaczników (niektóre z nich zale�� od wyst�pienia wcze�niej znacznika table): address,abbr, acronym, big, caption, cite, class, code, col, dd, dl, dt, i, ins, kbd, pre, q, sub, sup,tbody, td, tfoot, tr, tt i var.

Wspominali�my te�, �e WordPress rozpoznaje znaczniki XHTML. Jak odczuje to osobapracuj�ca bezpo�rednio z kodem HTML?

Niezbyt gwa�townie, poniewa� wi�kszo�� skomplikowanych zmian zwi�zanychz wprowadzeniem standardu XHTML pojawia si� na poziomie ogólnej budowy plikustrony i jego g�ównych cz��ci (head, body itp.), a tymi zajmuje si� przecie� WordPress.

Oto kilka podstawowych zasad obowi�zuj�cych podczas pracy z j�zykiem XHTML:

� Wszystkie znaczniki HTML zapisuj ma�ymi literami — dawniej w ten sposób kodHTML zapisywali tylko zbuntowani nastolatkowie, dzi�, w XHTML, taki zapis tostandard.

� Zagnie�d�aj poprawnie znaczniki — je�li wyró�niasz jaki� fragment kodu pogrubieniemza pomoc� znaczników i i jednocze�nie przyjmujesz, �e pocz�tek tegos�owa b�dzie pocz�tkiem odno�nika, pami�taj, �eby wewn�trz znaczników <a></a>znalaz�y si� obydwa znaczniki , a nie tylko jeden z nich.

� U�ywaj zawsze pary znaczników — chodzi tu w szczególno�ci o pos�ugiwanie si�par� znaczników i , a nie samym .

� Warto�ci atrybutów umieszczaj zawsze w znaku cudzys�owu — dawniej zastanawia�e�si� pewnie wiele razy, czy przegl�darka nie jest zbyt g�upia, by odró�ni� atrybutod jego argumentu. XHTML przynosi oficjaln� odpowied� — „jest zbyt g�upia”.Dlatego odno�niki powinny przyjmowa� posta� jak w poni�szym przyk�adzie:

Wi�cej szczegó�ów znajdziesz na stronie <a href="www.metaverse.wordpress.com">�Metaverse</a>.

Je�eli b�dziesz przestrzega� tych prostych zasad, Twój kod zadzia�a tak samo dobrzew zwyk�ym �rodowisku HTML i w �rodowisku XHTML systemu WordPress.

Oczywi�cie s� te� odpowiednie narz�dzia programistyczne i �ród�a informacji przeznaczonedla osób zainteresowanych j�zykami HTML i XHTML. Niektóre z dost�pnych w sieci s�ju� nieaktualne, jedne podaj� zbyt ma�o szczegó�ów technicznych, inne zbyt wiele, alena pewno pr�dzej czy pó�niej znajdziesz odpowiednie dla siebie. Wpisz w wyszukiwarcenazw� interesuj�cego Ci� znacznika wraz ze s�owami kluczowymi „HTML znaczniki”,a zobaczysz, ile ciekawych stron pojawi si� w wynikach. Znalezienie takiej, któraprzypadnie Ci do gustu, to tylko kwestia czasu.

Ze wzgl�dów bezpieczestwa WordPress nie dopuszcza u�ywania nast�puj�cychznaczników: embed, frame, iframe, form, input, object i textarea.


Film z serwisu YouTube— przykład zagnieżdżania kodu HTML

Us�ugi �wiadczone przez serwis YouTube doskonale nadaj� si� do zilustrowania przyk�aduprocedury umieszczania obcego kodu HTML wewn�trz Twojej strony, a w przypadkubloga WordPress — wewn�trz wpisu.

��czenie us�ug oferowanych przez YouTube z wpisami blogów WordPress to doskona�ypomys�. Umieszczanie pliku wideo na stronie sprowadza si�, w przypadku YouTube,wy��cznie do wstawienia w odpowiednim miejscu fragmentu kodu przygotowanegoprzez ten serwis. Sam plik wideo pozostaje na serwerach YouTube i nigdy nie zostajeprzeniesiony na serwer WordPress.

W chwili gdy osoba odwiedzaj�ca Twój blog kliknie przycisk odtwarzania, zostajeuruchomiona procedura przesy�ania strumienia danych pomi�dzy serwerem YouTubea komputerem odwiedzaj�cego. Twój blog w ogóle nie bierze bezpo�redniego udzia�uw tym zdarzeniu.

Najprzyjemniejsz� cz��ci� tego rozwi�zania jest fakt, �e nie ponosisz w zwi�zku z tym�adnych kosztów. Przed nastaniem ery serwisu YouTube niemal ka�dy, kto chcia�opublikowa� w sieci film, musia� pokry� niema�e koszty przesy�ania strumienia danych— op�aty by�y do�� wysokie, poniewa� przesy�ano naprawd� du�e ilo�ci danych, alerównie� z powodu potrzeby wprowadzenia dodatkowych �rodków kontroli kodu i dzielenia��cza, które zapewni�yby godziw� jako�� przesy�u. Je�li za� chcia�e� skorzysta� z us�ugikompresji wideo, cena ros�a jeszcze bardziej. Firma Google, w�a�ciciel serwisu YouTube,pokrywa wszystkie koszty za Ciebie. (I w chwili pisania tej ksi��ki ci�gle traci na swojejinwestycji, ale to nie nasz problem).

Oczywi�cie odwiedzaj�cy b�dzie wiedzia�, �e korzysta z darmowej us�ugi YouTube,poniewa� ka�dy wy�wietlany za po�rednictwem ich serwerów film jest opatrzony solidnychrozmiarów logiem z napisem YYouTube, lecz nieszkodliwa w sumie reklama jest chybauczciw� cen� za mo�liwo�ci, jakie zyskujesz. A te nie s� ma�e — otrzymujesz narz�dzie,które pozwala dzieli� si� z odwiedzaj�cymi wiedz� i rozrywk� oraz czerpa� inne korzy�ciz umieszczania na blogu filmów, a dodatkowo zdejmuje z Ciebie przykre obowi�zki i niewymaga ponoszenia kosztów.

Aby wstawi� do wpisu film z serwisu YouTube, mo�esz wprowadzi� odpowiedni kod HTMLr�cznie lub u�y� nowego rozwi�zania o nazwie oEmbed (które samo zagnie�d�a kodwewn�trz Twojej strony). Funkcja oEmbed wymaga jedynie podania adresu URL filmu,ale warto pami�ta�, �e r�czne wstawianie kodu HTML daje wi�ksz� kontrol� nad sposobemumieszczenia filmu na stronie. Dlatego warto zapozna� si� z obydwiema metodami.

Oto instrukcje umieszczania we wpisie bloga kodu HTML prowadz�cego do filmuznajduj�cego si� na serwerze YouTube. (Metoda ta sprawdzi si� tak�e w czasie pracyz innymi partiami kodu, które musia�by� wklei� do kodu swojego wpisu).

1. Je�li masz ju� przygotowan� tre�� wpisu, w którym chcesz umie�ci� film, zapisz szkicnotatki i podejrzyj jej kszta�t na blogu, by upewni� si�, �e przed wstawieniem kodufilmu nie pojawi�y si� �adne problemy.


2. Otwórz stron� serwisu YouTube (www.youtube.com). Instrukcje umieszczania filmuna ich serwerach znajdziesz w rozdziale 9. „Grafika we wpisach”.

3. Znajd� film, który chcesz umie�ci� na blogu, lub otwórz stron� z dodanym w�a�niemateria�em.

4. Pod oknem filmu znajdziesz kilka przycisków. Ostatni z nich to Umie��. Po klikni�ciugo otwiera si� ramka z kodem, który b�dziesz musia� umie�ci� na stronie, i narz�dziamiustawiania opcji wy�wietlania filmu.

5. Ustaw opcje osadzania filmu. Przyk�ad ustawie zaprezentowano na rysunku 6.5,przedstawiaj�cym materia� z oficjalnego kana�u zespo�u Queen.

Rysunek 6.5.

Trochę dobrejmuzyki w czasielektury niezaszkodzi


6. W��cz lub wy��cz opcj� do��czania podobnych filmów, zmie ustawienia prywatno�ci,je�li zachodzi taka potrzeba, a tak�e rozwa� mo�liwo�� skorzystania ze starszejwersji kodu HTML, by umie�ci� film na swojej stronie.

Ka�da zmiana ustawie wp�ywa na dane umieszczane w osadzanym kodzie. Spróbujzmieni� wielko�� okna filmu, który chcesz osadzi�, i zobacz, jak wp�ynie to na warto�ciatrybutów height i width podane w kodzie (wida� je na samym pocz�tku kodu).(Zauwa� te� zgodne ze specyfikacj� XHTML znaki cudzys�owu, w których podanoobydwa parametry).

Chocia� nie jeste�my wrogami osadzania filmów na blogu, odradzamy Ci jednakkorzystanie z funkcji do��czania podobnych filmów wideo. Natomiast zalecamyu�ywanie opcji W��cz rozszerzony tryb prywatno�ci (dzi�ki czemu pliki cookie zostaj�utworzone wy��cznie u tych odwiedzaj�cych, którzy zaczn� odtwarza� film, a nieu tych, którzy jedynie zapoznaj� si� z tre�ci� wpisu). Dobierz jeszcze wymiary oknaz filmem tak, by pasowa�y do uk�adu Twojego bloga — i gotowe.

7. Kliknij w obszarze pola z kodem do osadzenia na stronie i skopiuj jego zawarto��.

8. Otwórz stron� edycji wpisu bloga WordPress i prze��cz widok do zak�adki HTML.

9. Przewi kod wpisu, by znale�� miejsce, w którym chcesz wstawi� okno filmu. W przypadkud�ugich wpisów to zaj�cie staje si� wyj�tkowo �mudne. Nie wykluczamy, �e b�dzieszmusia� skopiowa� kod HTML do innego edytora i skorzysta� z funkcji wyszukiwania,by odnale�� odpowiedni fragment. Pó�niej znajd� ten sam fragment wpisu na stronieedycji i ustaw tam kursor edytora.

10. Wklej kod HTML ze strony serwisu YouTube, jak pokazano to na rysunku 6.6.

Rysunek 6.6.

Praca z kodemHTML nie dajewiele radości— w odróżnieniuod jej wyników

Uwaga

W rozdziale 9. omówimy inne możliwości wstawiania plików wideo do wpisów WordPress.

11. Podejrzyj kszta�t wpisu, by upewni� si�, �e w�a�ciwie dobra�e� ustawienia wy�wietlaniapliku wideo.


12. W razie potrzeby wró� na stron� YouTube i zmie ustawienia, powtarzaj�c kroki 6. – 11.tak d�ugo, a� osi�gniesz zadowalaj�ce Ci� efekty.

Gdy skoczysz, wpis b�dzie wygl�da� tak, jak chcesz i zawiera� dok�adnie to, co chcia�e�w nim umie�ci�.

Ostrzeżenie

Regulamin korzystania z serwisu WordPress zabrania prowadzenia na blogach działalnościprzynoszącej zyski, a wiele działań mających generować przychód wiąże się z umieszczeniemna stronie WWW odpowiednio przygotowanego fragmentu kodu. Nie daj się skusić!

Wprawdzie niektóre z poczynań na pograniczu łamania regulaminu mogą uchodzić Ci przezjakiś czas na sucho, ale społeczność WordPress nie będzie zadowolona. Prędzej czy późniejpoprosisz kogoś o pomoc, być może Twoja strona trafi do odnośników czyjegoś bloga albozechcesz dowiedzieć się, w jaki sposób wprowadzić jakieś ulepszenia, albo sam dodasz czyjśblog do swoich odnośników, i wtedy wszystko się wyda. Być może wywoła to nawet reakcjępracowników Automattic, którzy wezwą Cię do zaprzestania tego rodzaju działalności albopo prostu usuną niezgodną z regulaminem treść z Twojego bloga.

Oczywiście użytkowników oprogramowania WordPress pobieranego z witryny WordPress.orgnie obowiązują żadne ograniczenia dotyczące zarabiania pieniędzy na prowadzonym blogu.Jeśli chcesz wprowadzić na stronę na przykład reklamę, zacznij prowadzenie bloga na platformieWordPress.org. Jeżeli nadal nie jesteś gotów na taki krok, pozostań na WordPress.com, ucz się,jak prowadzić schludny i ciekawy blog i dopiero gdy będziesz gotów, przejdź na własny serwer.O tym, jak to zrobić, dowiesz się z rozdziału 11.

Sposoby wykorzystywania widgetu Tekst

W rozdziale 3. opisali�my szczegó�owo widgety, z których mo�esz korzysta� na platformieWordPress.com. Wyj�tek uczynili�my dla dwóch najwa�niejszych, wymagaj�cych bardziejszczegó�owego omówienia. Ten podrozdzia� jest po�wi�cony widgetowi Tekst. W rozdziale 8.znajdziesz informacje na temat mo�liwo�ci widgetu RSS.

Opis widgetu tekstowego umieszczony na stronie wsparcia technicznego WordPress.comwymienia trzy podstawowe cechy, które zdecydowa�y o jego nies�abn�cej popularno�ci:

� niemal nieograniczone zastosowania,

� elastyczno��,

� mo�liwo�� umieszczania wielu widgetów tego typu w obr�bie jednego bloga.

Widget tekstowy jest tak popularny, �e z my�l� o rozszerzeniu jego mo�liwo�ci stworzonowiele dodatków — bardziej rozbudowanych odpowiedników widgetów, którympo�wi�cili�my rozdzia� 10., stosowanych na blogach z rodzinyWordPress.org. Przyk�ademmo�e by� widget WYSIWYG Text, który pozwala zmienia� kolor tekstu i wprowadza�odno�niki bez potrzeby odwo�ywania si� do kodu.


Możliwe zawartości widgetu Tekst

Je�li zale�y Ci na szybkim wykorzystaniu mo�liwo�ci widgetu Tekst, mo�esz wstawi� w nimkod us�ug udost�pnianych przez niektóre serwisy. Tak wykorzystany widget staje si�bramk� wyj�ciow� prowadz�c� do serwisów, z których pobra�e� kod.

Oto niektóre z naszych ulubionych serwisów tego typu:

� Babelfish Yahoo Translation — ta us�uga umo�liwia t�umaczenie zawarto�ciTwojego bloga7. Jest ona ciekawym rozwi�zaniem dla ka�dego z odwiedzaj�cych,który pos�uguje si� j�zykiem prowadzenia bloga jako drugim. Dzi�ki temu nie do��,�e zrozumie wi�cej z Twoich notatek, to jeszcze poprawi znajomo�� drugiego j�zyka.

� ClustrMaps — jest to jeden z wielu dost�pnych w sieci liczników odwiedzin, któryjednocze�nie pozwala �ledzi� pochodzenie osób wchodz�cych na witryn�. To zabawnydodatek, który cz�sto przyczynia si� do zwi�kszenia liczby komentarzy na blogu.

� Delicious — ta witryna, zaprezentowana na rysunku 6.7, to najprawdopodobniejnajbardziej licz�ca si� strona o charakterze spo�ecznym, utworzona z my�l� o autorachblogów, którzy chc� pisa� o blogach oraz �ledzi� to, co si� na nich dzieje. Zyskajuznanie na tym serwisie, a wprawisz wszystkich odwiedzaj�cych w eufori�. Sprawd�stron�, a potem do��cz do jej spo�eczno�ci8.

Rysunek 6.7.

Zaprzyjaźnij sięz delicious.com

7 O ile jest on prowadzony po angielsku, niemiecku, hiszpasku, francusku, w�osku lub portugalsku,

a t�umaczenie ma odbywa� si� na jeden z tych j�zyków. Mo�esz te� doda� do widgetu kod prowadz�cydo t�umacza Google Translate, umieszczony na stronie http://en.forums.wordpress.com/topic/translate-your-blog-into-different-languages?replies=64#post-243059. Zgodnie z zamieszczonymiprzez autora wskazówkami nale�y zamieni� w nim nazw� bloga na w�asn� i pierwszy z pary kodówj�zyków w ka�dym wpisie na kod j�zyka, w jakim prowadzony jest blog — przyp. t�um.

8 Serwis w j�zyku angielskim — przyp. t�um.


I jeszcze kilka serwisów, których zawarto�� mo�e uatrakcyjni� Twój blog:

� Bitty Browser — dzi�ki tej aplikacji ludzie mog� przegl�da� zawarto�� internetu,pos�uguj�c si� widgetem! Przedstawiona na rysunku 6.8 przegl�darka Bitty Browserpozwala odwiedza� polecane przez Ciebie witryny bez konieczno�ci opuszczaniaTwojego bloga. Aplikacja oferuje wiele opcji konfiguracyjnych i zapewnia doskona��zabaw� przez wiele godzin.

Rysunek 6.8.

Bitty Browser,choć mała, jestniezwyklepotężna

� Flickr — wrzu� na blog swoje zdj�cia. Je�eli jeste� u�ytkownikiem serwisu Flickr albomy�lisz o do��czeniu do niego, z pewno�ci� ucieszysz si� na wie��, �e mo�esz �atwododawa� do bloga swoje prace.

� Last.fm i Pandora — Last.fm pozwoli Ci umie�ci� na blogu listy przebojów, a Pandoraprzedstawi odwiedzaj�cym Twoje ulubione piosenki. Czytanie bloga przy muzycejest ciekawsze!

� YouTube — mo�esz te� umie�ci� sta�e okno serwisu YouTube na swoim blogu.Odwiedzaj�cy b�d� mieli frajd�, ale pami�taj, �e mog� te� porzuci� Ci� na rzeczYouTube.

Odno�niki do tych i innych podobnych us�ug znajdziesz na stronie kodeksu WordPressCodex po�wi�conej widgetowi Tekst — http://codex.wordpress.org/WordPress_Widgets#Using_Text_Widgets9.

9 Strona w j�zyku angielskim — przyp. t�um.

Ostrzeżenie

Powtórzymy jeszcze raz ostrzeżenie udzielone Ci w rozdziale 3., ponieważ nabiera ono większegoznaczenia w obliczu wszystkich serwisów, z których zawartości możesz skorzystać w widgecie Tekst.Jeśli wprowadzisz na blog zbyt wiele widgetów, w tym także kilka różnych wersji widgetu Tekst,odwiedzający zapewne zignorują większość z nich. Zmuś się do zachowania umiaru, gdy będzieszzastanawiać się, co wprowadzić na stronę bloga. Sprawdź, jak wyglądają wybrane widgety, a potemzastanów się, które z nich możesz jeszcze usunąć. Pamiętaj, że ich zawartość powinna wiązać sięściśle z treścią bloga. (Możesz też zapytać odwiedzających o opinię w kwestii, które z widgetówuznają za najbardziej potrzebne — przecież blog jest między innymi właśnie po to).

Co można robić z widgetem Tekst

Pokazali�my Ci, jakiego rodzaju cudze tre�ci mo�esz umieszcza� w widgecie tekstowym,ale co z danymi, które móg�by� wprowadza� sam?

Oto kilka pomys�ów na dobry pocz�tek:

� Spis najwa�niejszych wpisów — mo�esz wymieni� w nim wszystkie najpopularniejszewpisy albo podzieli� je tematycznie. Mo�esz wymieni� wpisy najch�tniej komentowane.Mo�esz umie�ci� w widgecie list� najwa�niejszych tematów bloga specjalnie z my�l�o nowych u�ytkownikach. Taki widget mo�e sta� si� doskona�� pomoc� dla ka�dego,kto b�dzie chcia� pozna� lepiej Twój serwis.

� Informacje o Tobie i interesuj�cych Ci� tematach — mo�esz umie�ci� w widgeciekilka s�ów wprowadzenia czy powitania, a mo�e po prostu spis odno�nikówdo odpowiednich stron — czy to na blogu, czy poza nim.

� Ilustrowany przegl�d autorów — widget tekstowy mo�e te� zawiera� informacjeo wszystkich autorach wraz z ich zdj�ciami.

Wi�cej informacji na temat sposobów korzystania z widgetu Tekst znajdziesz na stronachpomocy technicznej WordPress — http://support.wordpress.com/widgets/text-widget/10.

Widget tekstowy przyjmuje dane zapisane w postaci tekstu, kodu HTML, a nawet niedu�eobrazki. Dawniej mo�na by�o wprowadza� do niego tak�e kod JavaScript, lecz powodowa�oto zbyt wiele problemów. Dzi� widget ten nie przyjmuje �adnych skryptów typu JavaScriptczy Flash.

Umieszczanie grafiki w widgecie TekstNajprostszym sposobem na umieszczenie obrazka w widgecie jest dodanie wybranej grafikido biblioteki mediów WordPress, co opisaliśmy w rozdziale 9. Później wystarczy wprowadzićadres URL obrazu do widgetu. Odpowiedni kod HTML będzie miał w tym przypadku postać<img src"URL">, gdzie w miejsce skrótu URL wkleisz adres grafiki pobrany z biblioteki mediów.

10 Strona w j�zyku angielskim — przyp. t�um.

Prosty przykład pracy z widgetem Tekst

Dodaj�c widget Tekst do bloga, mo�esz stworzy� wyj�tkowe okienko informacyjne. Otoprzyk�ad, jak zbudowa� taki obiekt od podstaw. W naszym przyk�adzie po��czymy w nimtekst, grafik� i prosty kod HTML.

1. Otwórz panel administracyjny bloga i rozwi menu Wygl�d, nast�pnie kliknij pozycj�Widgety. W oknie przegl�darki pojawi si� znana Ci z rozdzia�u 3. strona Widgety.

2. Przeci�gnij widget Tekst z obszaru Dost�pne widgety (�rodek strony) w obszar panelu(po prawej). Pole ustawie widgetu rozwinie si� samo.

3. Wpisz tytu� widgetu. To wa�na opcja — �le dobrany tytu� b�dzie denerwowa� wszystkich,którzy odwiedz� Twoj� stron�.

W przyk�adzie pos�u�ymy si� tytu�em Google Translate. Tworzony w�a�nie dodatekpozwoli t�umaczy� zawarto�� strony na inne j�zyki, odwo�uj�c si� w�a�nie do us�ugiGoogle Translate.

4. Aby wstawi� grafik� do widgetu, dodaj j� do biblioteki mediów, post�puj�c zgodnieze wskazówkami z rozdzia�u 8. Pó�niej skopiuj adres URL dodanego w�a�nie obrazui wstaw go do widgetu tekstowego za pomoc� znacznika <img>.

5. W dowolny sposób dodaj do widgetu tekstowego tre�� i kod HTML. Pami�taj, abyzaznaczy� opcj� Automatycznie twórz akapity, chyba �e chcesz wstawia� r�czniemnóstwo znaczników .

Dla przyk�adowej strony, któr� pos�ugujemy si� w wi�kszo�ci przypadków, i wybranejus�ugi Google Translate wpis do widgetu sk�ada si� z odpowiedniego odno�nikado narz�dzia Google Translate, adresu bloga i nazwy j�zyka pojawiaj�cej si� tuw charakterze odno�nika. Oto jeden z wpisów w widgecie:

<a href="http://translate.google.com/translate?hl=pl&langpair=pl|hr&�u=http://fotogrodno.wordpress.com" title="Croatian">Hrvatski</a>

6. Regularnie zachowuj post�py pracy, klikaj�c przycisk Zapisz.

7. Gdy skoczysz, kliknij ostatni raz przycisk Zapisz i podejrzyj efekty, otwieraj�cstron� bloga.

Przyk�adowy wpis w widgecie oraz wygl�d gotowego dodatku przedstawili�myna rysunku 6.9.

Po zakoczeniu pracy sprawd� jej wyniki, przeprowad� testy i przekonaj si�, co dzia�abez usterek, a co nie, i jak poprawi� wszystkie niedoci�gni�cia.

Nast�puj�ce elementy przyk�adu przypad�y nam do gustu:

� wyra�na, rzucaj�ca si� w oczy grafika, któr� rozpozna ka�dy powracaj�cyna nasz blog;

� dobrze dobrany tytu� — nazwa Google Translate mówi sama za siebie, a kluczowew tym przypadku s�owo „translate” (t�umaczy�) wypada dok�adnie nad przyci�gaj�c�wzrok grafik�, przez co nie sposób go pomin��;

� wyra�nie widoczna funkcja widgetu.


Rysunek 6.9.

Kod wewnątrzwidgetutekstowegorzadko wyglądapięknie… aleefekty bywajązachwycające

Natomiast gdyby�my mieli wprowadza� w nim poprawki, zapewne zdecydowaliby�mysi� na nast�puj�ce zmiany:

� Popracowaliby�my nieco nad kodem, by bardziej rozsun�� nag�ówek widgetu, grafik�i pierwszy odno�nik. Mo�na by te� spróbowa� przesun�� list� j�zyków w kierunku�rodka obrazka.

� Zapewne sformatowaliby�my inaczej list� dost�pnych j�zyków (rysunek 6.9 przedstawiatylko fragment widgetu, ca�o�� jest znacznie d�u�sza). Poszczególne j�zyki mo�na byna przyk�ad oddzieli� spacjami i pionow� kresk�. Wtedy, nie rezygnuj�c z dost�pnychopcji t�umaczenia, mogliby�my uzyska� widget o rozs�dnych rozmiarach.

� Dodaliby�my wpis informuj�cy o nowej funkcji, wyja�niaj�c, dlaczego t�umaczeniestrony jest tak istotne z punktu widzenia poruszanych na niej tematów. Wpis oczywi�ciepowinien pojawi� si� w najbardziej popularnych j�zykach, by dotrze� do jak najwi�kszejliczby odbiorców.

Wskazówka

Zawartość widgetu Tekst można także tworzyć inaczej. Jego treść możesz przygotować taksamo jak treść każdego innego wpisu — w zakładkach Wizualny i HTML edytora wpisów. Przedumieszczeniem kodu w widgecie sprawdź, jak wygląda szkic wpisu, a następnie wytnij zawartośćkarty HTML i wklej ją w polu tekstowym widgetu. Oczywiście nie zapomnij na koniec sprawdzić,jak prezentuje się Twoja praca.

SKOROWIDZ

A

abonament, Patrz op�ata rocznaadres

mapowanie, 28URL, Patrz odno�nik

Akismet, 23, 28, 55, 63, 64, 345alfabet, 83Amazon.com, 70anchor, Patrz kotwicaankieta, 196, 210, 216

dodawanie, 210, 211, 215edycja, 215

AOL, 172Apple, 67, 221, 222, 226archiwizator, 66arkusz stylów, 28, 78, 84, 101, 129, 167, 172, 265,

295, 318, 322, 353, 355, 362, 364, 365, 371, 376Arrington Michael, 226AT&T, 221, 226Automattic, 23, 24, 26, 28, 41, 142, 196, 222, 265,

349, 424awatar, 64

B

baza danych MySQL, 294, 295, 300, 311, 402, 403Berners-Lee Tim, 355, 356biblioteka mediów, 256, 260, 279Bing, 66Blip.tv, 351blog, 34

administrator, 198, 199autor, 198biznesowy, 36, 37firmowy, 29, 37fotoblog, 325, 351interfejs, 37j�zyk, 54, 83

mikroblog, 325, 352nag�ówek, 83, 85, 90, 101, 130, 376, 381, 411nawigacja, 383, 450nazwa, 50, 54nowo�ci, 441nowy, 54osobisty, 36otwarty, 24, 47pozycjonowanie, 48, 54prywatny, 28, 47, 54, 67, 268publiczny, 54redaktor, 198sie�, 29stopka, 412subskrybent, 198szablon, 85, 322tytu�, 54ustawienia, 46, 55usuwanie, 68, 69u�ytkownik, 197, 198, 199, 200, Patrz te� blog

subskrybentw�a�ciciel, 198wspó�twórca, 198

Blogger, 18, 31Bloglines, 237BlogTalkRadio, 279BuddyPress, 309Byfield Bruce, 331

C

cena, 23Creative Commons, 262CSS, Patrz arkusz stylówczcionka, 360, 363, 366, 368, 376, 378, 385cz�sto zadawane pytania, Patrz FAQczytnik kana�ów, 61


D

deklaracja, 358, 365, 367w�a�ciwo��, 365, 366, 367, 368, 382, 383, 386

dokumentacja, 433, 435, 436, 437, 438DOM, Patrz obiektowy model dokumentudomena nazwa, Patrz nazwa domenyDropbox, 279dyskusja, 48, 350dzia� pomocy, Patrz pomoc

E

edytorkodu, 359motywów, 372, 373, 375szablonów, 330tekstu, 362wpisów, 168, 172, 372

edytor grafiki, Patrz grafika edytorEklund Kevin, 341ekran OLED, 79ekstranet, 24e-mail, 51, 52, 56, 63, 68, 69, 71, 72, 73, 119, 205,

345, 349, 351enhanced feeds, Patrz kana� nowo�ci

F

Facebook, 36, 43, 109, 349FAQ, 55FeedDemon, 237filtr

Akismet, 345, Patrz Akismetfunkcji, 99

Firefox, 27, 172, 237, 331, 336, 357Flash, 285, 351Flickr, 262, 276formatowanie, 168, 169

HTML, 122listy, Patrz listatekstu, 127, 129, 131, 132, 133, 134znaków, 175

forum, 451, 461Free Software Foundation, 331FTP, Patrz protokó� FTPfunkcja

bloginfo, 412get_archives, 411oEmbed, Patrz oEmbedQuickPress, Patrz QuickPress

G

General Public License, Patrz GNU GeneralPublic License

GNU General Public License, 329, 331, 378, 418op�aty, 418

Google, 26, 31, 66, 67, 152, 185, 196, 221, 226,229, 230, 437

Czytnik RSS, 237ranking, 49

Google AdSense, 26, 29, 32, 35, 328, 350, 428Google AdWords, 231Google Analytics, 217, 348Google News, 245Google Sites, 279Google Voice, 221, 222, 226, 230GPL, Patrz GNU General Public Licensegrafika, 119, 121, 191, 244, 247, 251, 292, 324,

Patrz te� motyw graficznydodawanie, 253, 256, 260, 261, 262edycja, 255edytor, 247oblewanie tekstem, 256rozmiar, 248, 249, 251zamiana w odno�nik, 258

H

Hannah Doug, 441has�o, 51, 52hiper��cze, Patrz odno�nikhome.pl, 271

I

IBM, 67Internet Explorer, 172, 237intranet, 24iTunes, 278

J

JavaScript, 215j�dro systemu, 26, 295, 335, 342, 354, 393, 412j�zyk

HTML, 354, 356, Patrz kod HTMLHTML 5, 355JavaScript, 295, 357PHP, 167, 294, 353, 355, 357, 391, 393, 399,

400, 401PHP 5, 394XHTML, 355, 357XML, 355, 356, 359znaczników, Patrz j�zyk XML

K

kana� nowo�ci, 61, 236, 238, 319, 350, 386kategoria, 32, 36, 61, 78, 120, 122, 140, 141, 142,

157, 236, 371dodawanie, 144edycja, 147lista, 143, 144, 145

Skorowidz � 473

modyfikowanie, 147odno�ników, 163przenoszenie wpisu, 150uk�ad hierarchiczny, 145usuwanie, 148wiekowa, 287zamiana na tagi, 148

klucz API, 40, 41, 55, 345kod

CSS, 28, 32, 167HTML, 126, 129, 165, 166, 167, 168, 169, 177,

182, 184, 185, 191, 357, Patrz te� j�zykHTML

JavaScript, 191, 348, Patrz te� j�zykJavaScript

PHP, 167, 295, 324, 332, 396, Patrz te� j�zyk PHPXHTML, 167, 184, 356, Patrz te� j�zyk XHTML

kolor, 78, 102, 366, 374, 379, 382, 384kolumna, 80, 100

o sta�ej szeroko�ci, 81, 85, 90, 93o zmiennej szeroko�ci, 81, 85, 89

komentarz, 62, 63, 64, 70, 120, 182, 196, 198, 345,349, 385

ocena, 68, 69, 70, 349zmiany, 350

konferencja WordCamp, Patrz WordCampkopia zapasowa, 40, 198, 306, 315kotwica, 171, 181

L

Lerdorf JavaScript, 294Link ID, 158LinkedIn, 43lista, 178

nieuporz�dkowana, 178s�ów, 64uporz�dkowana, 178

Little Mike, 23

M

Mamchenkov Leonid, 404Mandato Angelo, 340Matt Mullenweg, 394Microsoft, 67, 172, 357Microsoft Paint, 250mikroformat, 83motyw graficzny, 24, 25, 41, 42, 46, 55, 70, 76, 77,

83, 85, 99, 130, 147, 167, 267, 295, 318, 321,322, 323, 324, 326, 328, 330, 341, 348, 354, 366,404, 457, 461

bezpieczestwo, 333dwukolumnowy, 80, 85, 89, 90, 93, 381instalowanie, 332poprawianie, 368

rozmiar, 65szablon, 65, 167, 404, 405tworzenie, 353, 377ustawienia, 54, 370, 372

Mozilla Firefox, Patrz FirefoxMullenweg Matt, 23, 340, 346MySQL, Patrz baza danych MySQL

N

Navigator, 172nazwa

bloga, 50, Patrz blog nazwadomeny, 48, 49, 50, 67, 270, 273, 274, 275,

276, 292u�ytkownika, 51

Netscape, 172, 357notka, Patrz wpis

O

OASIS, 355obiektowy model dokumentu, 355, 357odno�nik, 55, 62, 63, 109, 130, 131, 135, 170, 171,

224, 245, 256, 259, 262, 275, 281, 351dodawanie, 134, 137, 162edycja, 163kategoria, 163kolor, 379lista, 141, 159, 160, 162powi�zany, 103, 104tworzenie, 180

odsy�acz, Patrz odno�nikoEmbed, 185OpenID, 67, 349opinia, Patrz komentarzop�ata

Akismet, 29audio, 244roczna, 24, 47Support Network, 29usuni�cie reklam, 265, 268, 269, 429VideoPress, 265, 270, 284wideo, 28, 244wi�ksza pami��, 28, 265, 269w�asna nazwa domeny, 28, 48, 270w�asny arkusz stylów CSS, 267WordPress.org, 265, 272wykorzystania pasma, 261zmiany w arkuszu stylów, 28, 84zwi�kszenie dost�pno�ci bloga prywatnego,

28, 265, 268Organization for the Advancement of Structured

Information Standards, Patrz OASIS


P

panel boczny, 80, 81, 386, 409, 410PHP, Patrz te� j�zyk PHP, kod PHPping, Patrz technologia pingbackpingback, Patrz technologia pingbackplik

audio, 244, 278, 279, 285, 292, 351dodawanie, 280, 281, 282odtwarzanie, 280, 281, 351

GIF, 247, 249, 250, 253graficzny, Patrz grafikaJPEG, 102, 249, 250, 253

kompresja, 247JPEG 2000, 249MP3, 244, 280, 351PDF, 244, 253, 259PNG, 102, 249, 250, 253podcastu, 351PPT, 253, 259WAV, 244, 280wideo, 244, 278, 283, 285, 292, 351

dodawanie, 285, 286odtwarzanie, 285, 351

podcast, 351podr�cznik u�ytkownika, Patrz WordPress User

HandbookPollDaddy, 28, 211, 214pomoc, 196, 266, 450post, Patrz wpispowiadomienie, 62, 63prawa autorskie, 245, 246, 261, 386Press This, 125profil u�ytkownika, 55programista, 324, 328, 329, 331, 334, Patrz te�

projektantprojektant, 322, 324, 325, 327, 328, 329, 330, 353,

Patrz te� programistaprotokó�

FTP, 296HTTP, 166TrackBack, Patrz technologia trackback

prywatno��, 47, 48, 66przechwytywanie z ekranu, 109przegl�darka, 237 , Patrz te� Internet Explorer,

Firefox, Safarisilnik, 357

przenosiny, 40publikacja za pomoc� poczty elektronicznej, 71,

72, 73

Q

QuickPress, 121, 122

R

R5 Ltd., 330Really Simple Syndication, Patrz RSSregu�a, 365, 366, 367, 368, 373, 383reklama, 24, 26, 27, 29, 265, 272, 350, 428Related Links, Patrz odno�nik powi�zanyRSS, 61, 218, 232, 236, 319, 350, 352, 386RSSOwl, 237RTL Language Support, Patrz zapis tekstu

od prawej do lewej

S

Safari, 172, 237, 442ScribeFire, 125selektor, 365, 367, 368, 374, 376, 383serwer zewn�trzny, 244, 254, 261, 262, 263, 279,

280, 291, 310, 430Sharing, 67sie�

semantyczna, 356, 408wsparcia technicznego, Patrz Support

Network for WordPresss�owo kluczowe, 142, 208, 224, 339spam, 28, 63, 64, 345spo�eczno��

internetowa, 38u�ytkowników, 25, 38, 429, 454, 457

sprawdzanie pisowni, 122Stallman Richard, 331standard OpenID, Patrz OpenIDstatystyki, 217, 218, 220, 221, 235, 349, 450

liczba odwiedzin, 35, 37, 41, 222, 223, 348najcz��ciej odwiedzane, 222najcz��ciej szukane, 222najpopularniejsze wpisy, 222, 223, 232odno�niki, 228odsy�aj�cy, 224, 225wyj�cia, 233

Stewart Ian, 334strona

dynamiczna, 353informacyjna, 204kontakt, 204mapa, 350o autorze, Patrz strona informacyjnastatyczna, 195, 201, 202, 206, 348, 370

dodawanie, 207, 208komentarz, 209, 216

support, Patrz pomocSupport Network for WordPress, 29system

CMS, 300kategorii wpisów, 32

Skorowidz � 475

o budowie segmentowej, 335ocen, 196WordPress Patrz WordPress.com

T

tagi, 38, 61, 120, 140, 141, 142, 143, 339, 385definiowanie, 154dodawanie, 153, 155nadawanie, 151, 153nazwa, 156przegl�darka, 161usuwanie, 156zamiana na kategorie, 156zarz�dzanie, 154, 157

technologiapingback, 35, 49, 63, 209, 216trackback, 35, 49, 63, 216

Technorati, 66tekst formatowanie, Patrz formatowanie tekstuthumbnail, 326Time Warner, 172trackback, Patrz technologia trackbacktryb pe�noekranowy, 122, 123, 124, 125, 137,

139, 153Twitter, 36, 43, 120, 325, 349, 352, 446

U

ulepszenia, 27, 267usuni�cie reklam, 268w�asna nazwa domeny, 271w�asny arkusz stylów CSS, 267zwi�kszenie dost�pno�ci bloga

prywatnego, 268uprawnienia, 301, 302, 313, 314, 375urz�dzenia przeno�ne, 80us�uga

hostingowa, 24, 28, 29, 41, 42, 244No-ads, 28, Patrz ulepszenie usuni�cie reklampingback, Patrz technologia pingbackzaawansowana, 454

ustawienia ogólne, Patrz blog ustawienia

V

VanFossen Lorelle, 247VideoPress, 244, 265, 270, 284, 287Vimeo, 351

W

W3C, Patrz World Wide Web Consortiumwalidator, 359, 361, 366WAMP, 311

widget, 24, 25, 41, 42, 75, 82, 100, 104, 109, 113,143, 167, 202, 318, 336, 361, 371, 386, 387, 388,409, 457

archiwa, 106, 113, 206autorzy, 206dodawanie, 107domy�lnie zainstalowany, 104, 106kalendarz, 113kategorie, 113kolejno��, 108meta, 106, 113najnowsze komentarze, 113najpopularniejsze wpisy i strony, 113najwa�niejsze komentarze, 206odno�niki, 113, 135, 158, 206RSS, 114, 218, 238strony, 113szukaj, 113tagi, 113, 152tekst, 115, 166, 188, 191, 192, 193, 208, 215,

238, 360w�asne menu, 113

witrynapowi�zana, 103usuwanie, Patrz blog usuwaniezaufana, 67

WordCamp, 25, 230, 394WordPress API, 158WordPress Codex, 56, 436WordPress MU, 24, 309WordPress User Handbook, 435WordPress VIP Hosting, 29WordPress.com, 16, 18, 23, 24, 25, 37, 38, 45, 75,

166, 168, 265, 266, 272, 423, 426aktualizowanie, 304, 306import danych, 307, 310instalowanie, 300, 302kokpit, 317, 318, 319mapa, 449plik konfiguracyjny, 314, 317

WordPress.com stats, 41WordPress.org, 16, 18, 24, 25, 28, 29, 35, 37, 38,

40, 84, 168, 188, 266, 291, 299, 423, 426World Wide Web Consortium, 353, 355, 357wpis, 119, 121, 198, 201, 216, 351, 385

d�ugo��, 120dodawanie, 123edycja, 123katalogowanie, 141nadawanie tagów, 151, 158ocena, 70publikowanie, 138rodzaj, 408typowy, 119zapisywanie, 138zmiana kategorii, 150


wtyczka, 42, 105, 107, 217, 311, 318, 324, 335, 336,337, 361, 418, 457, 461

AddToAny, 351Ajax Edit Comments, 350Akismet, 345All in One SEO Pak, 350bSuite, 349Disqus, 349dodawanie, 338, 341, 342Easy AdSense, 350File Monitor, 347GD Press Tools, 346GD Star Rating, 349Google Analitycs for WordPress, 348Google XML Sitemaps, 350Hello Dolly, 345, 346informacje szczegó�owe, 339IntenseDebate, 349kompatybilno��, 340Lifestream, 352modyfikowanie, 343Page Flip Image Gallery, 351Podcasting, 351recenzje, 340, 341Search Meter, 349SEO No Duplicate, 350ShareThis, 351Sociable, 351Subscribe to Comments, 350testowanie, 342Twitter Tools, 352tworzenie, 353Update Notifier, 347Viper’s Video Quicktags, 351Woopra Analytics, 348WordPress Exploit Scanner, 348WP Database Backup, 342, 347WP FollowMe, 352

WP Great Box, 352WPAudio MP3 Player, 351WP-FollowMe, 413, 414, 415wybieranie, 340, 341

wyszukiwarka, 48, 66, 229, Patrz te� Google,Yahoo!, Bing, AOL, Technorati,

X

XXL, 442

Y

Yahoo!, 146YouTube, 28, 166, 185, 244, 284, 351

Z

zapis tekstu od prawej do lewej, 83Zeldman Jeffrey, 355zlew kuchenny, 132, 172znacznik, 168, 170, 183, 184

a, 181b, 176br, 177div, 177em, 169, 176i, 176li, 178more, 182ol, 178otwarcia, 169p, 177, 184strong, 169, 176ul, 178zamkni�cia, 169

WordPress od podszewki - Helionpdf.helion.pl/worpop/worpop.pdf · 2011-06-20 · 8 WordPress od...

Documents

Transcript of WordPress od podszewki - Helionpdf.helion.pl/worpop/worpop.pdf · 2011-06-20 · 8 WordPress od...