Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00370 005841 14492883 na godz. na dobę w sumie
WordPress od podszewki - książka
WordPress od podszewki - książka
Autor: , Liczba stron: 480
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3080-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> wordpress
Porównaj ceny (książka, ebook, audiobook).

Poznaj najpopularniejszy system CMS!

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!

Zacznij prowadzić własną witrynę WWW!



Prowadzisz bloga, serwis informacyjny, stronę firmową?
Dołącz do Programu Partnerskiego - Zostań wtyczką Helionu!

więcej>>
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011 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! SPIS TREŚCI O autorach Podziękowania Wprowadzenie: Witaj! Część I Początki pisania bloga Rozdział 1. Pierwszy kontakt z systemem WordPress Czym jest WordPress? Kilka sïów o róĝnych wersjach platformy WordPress SpoïecznoĂÊ uĝytkowników systemu WordPress Jakie trzeba ponieĂÊ koszty? Kim jest przeciÚtny uĝytkownik systemu WordPress? Godny przeciwnik — system Blogger Pierwsze studium przypadku — poczÈtkujÈcy uĝytkownik systemu WordPress Drugie studium przypadku — blog biznesowy Utrzymanie bloga na serwerze Przenosiny Porównanie WordPress.com z WordPress.org Inne sposoby zaistnienia w sieci Rozdział 2. Na dobry początek Tworzenie bloga Czy planujesz duĝy ruch? Gra w „Nazwij domenÚ” Rozpocznij z wïasnÈ nazwÈ domeny Dodaj wïasnÈ domenÚ póěniej Pozostañ na zawsze wierny domenie WordPress.com Rejestracja Zakïadanie konta na platformie WordPress.com Zakïadanie wïasnego bloga Korzystanie ze ěródeï 13 14 15 21 23 23 24 25 26 31 31 33 36 38 40 40 42 45 45 47 48 49 49 50 51 51 53 55 6 ~ WordPress od podszewki Zmienianie ustawieñ poczÈtkowych Ustawienia ogólne Pisanie Czytanie Dyskusja Media PrywatnoĂÊ Inne grupy opcji menu Ustawienia Opcje konfiguracji spoza menu Ustawienia Usuñ witrynÚ Oceny Publikowanie wpisów za pomocÈ poczty elektronicznej Rozdział 3. Zadbaj o wygląd bloga Ten urok, ten styl O motywach sïów kilka Czego naleĝy oczekiwaÊ od motywu? Kolory Liczba kolumn Staïa czy zmienna szerokoĂÊ? Widgety i inne funkcje Czy warto modyfikowaÊ kod arkusza stylów CSS wybranego motywu? Spis motywów graficznych Wybieranie motywu Ustawianie wïasnego nagïówka Zmienianie ustawieñ dodatku Related Links Jak dodawaÊ widgety? Umieszczanie widgetów na blogu PrzeglÈd dostÚpnych widgetów Dodawanie nowych widgetów Krótki spis widgetów Jak najlepiej wykorzystaÊ widgety? Część II Prowadzenie bloga Rozdział 4. Dodawanie pierwszego wpisu O wpisach sïów kilka Funkcja QuickPress Dodawanie nowego wpisu Pisanie w trybie peïnoekranowym Podstawowe polecenia formatowania Przykïad formatowania tekstu OdnoĂniki jako forma formatowania Dodatkowe metody formatowania tekstu Dodawanie odnoĂników Przepis na dodawanie odnoĂników Tworzenie odnoĂnika Zapisywanie, sprawdzanie pisowni i publikowanie postów 55 56 58 59 62 64 66 67 68 68 69 71 75 75 76 77 78 80 81 82 84 85 99 101 103 104 105 106 107 109 113 117 119 119 121 123 125 127 129 131 132 134 136 137 138 Spis treĂci ~ 7 Rozdział 5. Przenieś wpisy w inny wymiar Jak jeszcze moĝna rozbudowaÊ wpis? Dodawanie wpisów do kategorii Tworzenie kategorii i korzystanie z nich w praktyce Kontrolowanie listy kategorii Przenoszenie wpisów do innej kategorii Nadawanie tagów Tworzenie tagów i ich praktyczne zastosowanie ZarzÈdzanie tagami ZarzÈdzanie tagami powiÈzanymi z wpisami ZawartoĂÊ widgetu OdnoĂniki Dodawanie nowych odnoĂników do widgetu Dodawanie odnoĂników Kategorie odnoĂników Rozdział 6. HTML w widgetach i innych częściach bloga W jaki sposób rozwinÈÊ blog za pomocÈ kodu HTML? Przybornik zaawansowanego blogera Podstawy HTML dla WordPress Znaczniki kodu HTML Karty Wizualny i HTML Formatowanie znaków Formatowanie list Tworzenie odnoĂników Znacznik more Edycja kodu HTML w systemie WordPress Z jakich znaczników korzystaÊ? Film z serwisu YouTube — przykïad zagnieĝdĝania kodu HTML Sposoby wykorzystywania widgetu Tekst Moĝliwe zawartoĂci widgetu Tekst Co moĝna robiÊ z widgetem Tekst Prosty przykïad pracy z widgetem Tekst Rozdział 7. Rozbuduj blog o nowe możliwości Popraw swój blog Nowi uĝytkownicy bloga Podziaï ról w systemie WordPress Zapraszanie nowych uĝytkowników i przypisywanie im ról Dodawanie statycznych stron Planowe wprowadzanie stron Projektowanie statycznej strony Tworzenie i edycja statycznych stron Wstawianie ankiet Rozdział 8. Statystyki i przyciąganie czytelników Jak sprawiÊ, by wiÚcej osób zaglÈdaïo na Twój blog? Statystyki systemu WordPress Po co to robisz? Statystyki w panelu administracyjnym bloga Strona Statystyki w panelu administracyjnym systemu WordPress Analiza danych z grupy OdsyïajÈcy 141 141 142 144 145 149 151 153 154 157 158 159 162 163 165 165 166 168 168 172 175 177 180 182 182 183 185 188 189 191 192 195 195 197 198 199 201 202 207 208 210 217 217 218 219 221 222 224 8 ~ WordPress od podszewki PouczajÈce wnioski pïynÈce z analizy danych na stronie OdsyïajÈcy OdnoĂniki do witryny Analiza danych z grupy Frazy wyszukiwarek Grupa Top Posts Pages KlikniÚcia Statystyki bloga — tabele z podsumowaniem W jaki sposób doïÈczyÊ do grona subskrybentów? Uĝywanie widgetu RSS Część III Dalszy rozwój bloga Rozdział 9. Grafika we wpisach Po co wpisom grafika i inne media? Prawa autorskie i rodzaje plików multimedialnych Umieszczanie grafiki we wpisach Wskazówki dla autorów odnoĂnie do grafiki Wysyïanie plików na serwer i umieszczanie ich we wpisach Umieszczanie grafiki w bibliotece mediów Edytowanie obrazu dodanego do biblioteki mediów Dodawanie do wpisów grafiki z dysku komputera Umieszczanie we wpisach obrazów z biblioteki mediów Umieszczanie we wpisach obrazów z sieci Rozdział 10. Ulepszenia, audio i wideo Podnoszenie moĝliwoĂci bloga Krótki opis ulepszeñ Wïasny CSS Nieograniczona liczba prywatnych uĝytkowników Brak reklam WiÚcej miejsca na serwerze (5 GB, 15 GB, 25 GB, 50 GB i 100 GB) i moĝliwoĂÊ dodawania plików audio Usïuga VideoPress Nazwy domen Ogólne róĝnice Wybieranie dobrej nazwy domeny Poddomeny domeny WordPress.com kontra wïasne domeny Jak funkcjonujÈ nazwy domen Jak wybraÊ dobrze nazwÚ domeny drugiego lub trzeciego poziomu? Wykorzystywanie plików audio na blogu Gdzie umieszczaÊ pliki děwiÚkowe? Umieszczanie pliku audio we wpisie Umieszczanie plików wideo we wpisach Gdzie umieszczaÊ pliki wideo? Umieszczanie plików wideo we wpisie 225 228 229 232 233 235 236 238 241 243 243 245 247 248 252 253 255 256 260 261 265 265 266 267 268 268 269 270 270 272 273 273 274 275 278 279 280 283 284 285 Część IV Samodzielne instalowanie WordPress Rozdział 11. Instalowanie i aktualizacja oprogramowania WordPress 289 291 Niech ktoĂ zrobi to za Ciebie — preinstalowany WordPress na serwerze 291 292 294 Serwer przyjazny blogerowi Po co PHP i MySQL? Spis treĂci ~ 9 Umieszczanie plików na serwerze za pomocÈ protokoïu FTP Przygotowania do piÚciominutowego instalowania systemu WordPress Instalowanie w piÚÊ minut Aktualizacja systemu WordPress Przenoszenie danych z platformy WordPress.com System WordPress na wïasnym serwerze Instalowanie serwera WWW i bazy danych w systemie Windows Edytowanie pliku konfiguracyjnego systemu WordPress Krótki przeglÈd zawartoĂci kokpitu systemu WordPress Dostosowywanie kokpitu do wïasnych potrzeb Rozdział 12. Przybornik systemu WordPress — motywy Kupowanie motywów Jak szukaÊ darmowych motywów? Wybieranie motywów pïatnych Instalowanie i wïÈczanie motywu Kwestie bezpieczeñstwa a wybieranie motywu graficznego bloga Rozdział 13. Przybornik systemu WordPress — wtyczki Segmentowa budowa systemu WordPress Czym jest wtyczka? Szukanie wtyczek Wybieranie wtyczek z katalogu WordPress i przeprowadzanie instalowania Szukanie wtyczek poza katalogiem WordPress Szukanie pïatnych wtyczek RÚczne instalowanie i wïÈczanie wtyczek Pobieranie nowej wtyczki Testowanie nowej wtyczki Wybieranie i wïÈczanie wtyczki ZarzÈdzanie wtyczkami i przeprowadzanie aktualizacji Niektóre spoĂród „niezbÚdnych” wtyczek Podstawowe wtyczki WordPress — Akismet i Hello Dolly Instalowanie wtyczki Akismet Administracja i bezpieczeñstwo Statystyki Komentarze Reklama i optymalizacja pod kÈtem dziaïania wyszukiwarek OdnoĂniki Multimedia Serwisy spoïecznoĂciowe Rozdział 14. Tworzenie motywów za pomocą arkuszy stylów CSS Tworzenie arkuszy stylów WstÚp do XHTML Standardy tworzenia strony internetowej XML i XHTML Kod HTML zgodny ze standardem XHTML w WordPress WstÚp do CSS Rola arkusza stylów Czym jest arkusz stylów? Anatomia arkusza CSS 296 299 302 304 307 310 311 314 317 319 321 321 324 327 332 333 335 335 336 337 338 340 340 341 341 342 342 343 344 345 345 346 348 349 350 351 351 352 353 353 354 354 356 358 362 362 364 365 10 ~ WordPress od podszewki Poprawianie motywu poprzez arkusz stylów Gdy gotowy motyw speïnia oczekiwania Poprawianie gotowego motywu WordPress.org Tworzenie arkusza stylów motywu od zera Rozdział 15. Podstawy PHP — motywy i wtyczki WstÚp do PHP Instalowanie PHP na serwerze roboczym Skrypty PHP — podstawy skïadni PHP i MySQL Szablony motywów graficznych w PHP Szablon strony gïównej Szablon panelu bocznego Szablon nagïówka Szablon stopki Analiza kodu istniejÈcej wtyczki Wysyïanie wtyczek do katalogu WordPress Dlaczego nie warto wysyïaÊ wtyczek do katalogu WordPress? Dodawanie wtyczki do katalogu Dodatki Dodatek A WordPress.com kontra WordPress.org Nazewnictwo Wybierz WordPress.org Zarabianie na blogu Reklamy Automattic na Twojej stronie Pomoc spoïecznoĂci WordPress Wybieranie dobrego serwera Wybierz WordPress.com Dodatek B Dokumentacja systemu WordPress Przedzieranie siÚ przez gÈszcz dokumentów w sieci Kodeks WordPress Kïopoty z dokumentacjÈ WordPress Odkrywanie dokumentacji WordPress za pomocÈ Google Dodatek C Przykłady blogów WordPress Dlaczego warto odwiedzaÊ sïynne blogi? XXL Surfin’ Safari Dodatek D Przykłady blogów WordPress.com Równe prawa dla .com-owców Znane cytaty Outland Institute Muzyka na stronach SUFU Dodatek E Mapa witryny WordPress Nawigowanie po serwisach WordPress Nawigowanie po serwisie WordPress.com Strona gïówna — http://wordpress.com System wsparcia — http://en.support.wordpress.com 368 369 372 376 391 391 393 396 402 404 405 409 411 412 412 418 418 419 421 423 424 426 427 428 429 430 430 433 433 434 436 437 441 441 442 442 445 445 445 446 447 449 449 449 449 450 Spis treĂci ~ 11 Fora — http://en.forums.wordpress.com/ Dodatki — http://en.wordpress.com/features NowoĂci — http://en.blog.wordpress.com O nas — http://en.wordpress.com/about Usïugi zaawansowane — http://en.wordpress.com/advanced-services Nawigowanie po serwisie WordPress.org Strona gïówna — http://wordpress.org Prezentacja — http://wordpress.org/showcase Motywy, wtyczki i miejsce narzekañ — http://wordpress.org/extend ¥wiat WordPress — http://wordpress.org/about Co sïychaÊ u programistów — http://wordpress.org/development Do przyjacióï po pomoc — http://wordpress.org/support Wybieranie serwera — http://wordpress.org/hosting Pobieranie wersji instalacyjnej — http://wordpress.org/download lub http://pl.wordpress.org/ Dodatek F Przenoszenie zawartości z innych systemów blogowych BezpoĂredni import danych na platformÚ WordPress Przenosiny z platform Blogger i BlogSpot Przenosiny z platformy LiveJournal Przenosiny z platformy Movable Type lub TypePad Przenosiny z platformy Textpattern Transfer poĂredni Przenoszenie danych w postaci zawartoĂci kanaïu RSS Przenoszenie danych z pliku (X)HTML Skorowidz 451 452 452 453 454 454 455 455 457 460 461 461 462 462 465 466 466 467 467 468 468 468 469 471 6 HTML W WIDGETACH I INNYCH CZĘŚCIACH BLOGA W jaki sposób rozwinąć blog za pomocą kodu HTML? Urok korzystania z systemu WordPress polega w duĝej mierze na tym, ĝe moĝesz osiÈgnÈÊ wiele bez podawania choÊby jednej linii kodu. Miliony wspaniaïych blogów powstaïy i funkcjonujÈ w sieci dlatego, ĝe WordPress i inne tego typu aplikacje zdejmujÈ z autorów obowiÈzek dbania o technicznÈ stronÚ witryny. Jednak w pewnym momencie moĝesz odczuÊ potrzebÚ odrzucenia piïy i hebla na rzecz bardziej zaawansowanych narzÚdzi. System WordPress zostaï zaprojektowany z najwyĝszÈ dbaïoĂciÈ o szczegóïy w taki sposób, by pozwoliÊ Ci moĝliwie dïugo obchodziÊ siÚ bez skomplikowanej wiedzy informatycznej, a w chwili gdy bardziej zï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 WordPress jest funkcja umoĝliwiajÈca stosowanie kodu HTML, podstawowego jÚzyka sieci. Skrót HTML pochodzi od angielskiej nazwy Hypertext Markup Language (hipertekstowy jÚzyk znaczników). Znaczniki kodu HTML odpowiadajÈ za wyglÈd i zachowanie siÚ poszczególnych elementów strony. Przez pierwsze kilka lat funkcjonowania internetu, od jego powstania w 1989 roku, HTML byï jedynym narzÚdziem, jakim dysponowaliĂmy. 166 ~ CzÚĂÊ II Prowadzenie bloga JÚzyk HTML jest równieĝ interfejsem dla protokoïu HTTP (ang. Hypertext Transfer Protocol — 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Ăci potrzebujesz 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ĝycie fragmentów kodu HTML. Przykïadem moĝe byÊ dodawanie do bloga nagrania z serwisu YouTube, który udostÚpnia odwiedzajÈcym kod HTML odpowiedzialny za wyĂwietlanie filmu w 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, pozwala formatowaÊ swojÈ zawartoĂÊ za pomocÈ znaczników HTML. DziÚki temu zyskujesz moĝliwoĂÊ nadawania wybranej formy fragmentom tekstu i umieszczania na stronie odnoĂników HTML. W tym rozdziale pokaĝemy Ci, jak uĝywaÊ kodu HTML w systemie WordPress. Wiedza ta przyda Ci siÚ niezaleĝnie od tego, czy bÚdziesz próbowaï wprowadzaÊ proste zmiany w treĂci wpisu lub zawartoĂci widgetu Tekst, czy teĝ pokusisz siÚ o uzyskanie bardziej ambitnych efektów. W tym drugim przypadku bÚdziesz musiaï posiïkowaÊ siÚ takĝe innymi 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 nowy wymiar. Sposób ich wykorzystania zaleĝy w duĝej mierze od tego, czy prowadzisz blog na platformie WordPress.com, czy posïugujesz siÚ oprogramowaniem WordPress, które z zaïoĝenia jest bardziej elastyczne i daje Ci wiÚcej moĝliwoĂci dziaïania, ale teĝ przenosi na 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ĝszy poziom. 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 tych prowadzonych 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 XHTML miaï 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 tu rozwiÈ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ïu http://codex.wordpress.org/HTML_to_XHTML1 lub zapoznaÊ siÚ z treĂciÈ kursu http://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ĝesz zarzÈdzaÊ zawartoĂciÈ strony w bardziej zorganizowany sposób. Wszystkie motywy graficzne dla blogów WordPress opierajÈ siÚ na kodzie CSS. PoczÈtki tego narzÚdzia byï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 motywu i sprawdziÊ jej efekty, nawet jeĂli prowadzisz blog na platformie WordPress.com, ale ĝeby zapisaÊ 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 — hipertekstowy preprocesor PHP), który podziaïa na blog niczym dopalacz. PHP to jÚzyk skryptowy. To w nim powstajÈ dodatki systemu WordPress, które otwierajÈ nowe moĝliwoĂci przed blogami prowadzonymi w tym systemie. Dodatki zostaïy opisane dokïadniej na poczÈtku rozdziaïu 13. „Przybornik systemu WordPress — wtyczki”. Widgety, kilkadziesiÈt dodatków o 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.com oraz w znacznie bogatszej ofercie dla uĝytkowników WordPress.org. „ Widgety — kilkadziesiÈt miniprogramów dostÚpnych dla blogów dziaïajÈcych na 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 poprzez zmienianie zawartoĂci pliku CSS, a w blogach pracujÈcych na oprogramowaniu WordPress moĝe byÊ wykorzystywany bez ograniczeñ. „ Kod PHP — pozwala tworzyÊ dodatki do blogów dziaïajÈcych na oprogramowaniu WordPress. I co powiesz na takie szczeble zdobywania wiedzy? 1 Artykuï w jÚzyku angielskim — przyp. tïum. 168 ~ CzÚĂÊ II Prowadzenie bloga Podstawy HTML dla WordPress Jest wiele doskonaïych podrÚczników do nauki jÚzyka HTML, lecz stosowanie go w systemie WordPress nieco odbiega od zwyczajnego tworzenia kodu na potrzeby przeglÈdarek. WordPress przejmuje za Ciebie wiele tych aspektów pracy z kodem HTML, które zazwyczaj sÈ ěródïem problemów, natomiast po pewnym okresie pracy w Ărodowisku WordPress odkryjesz zapewne, ĝe podstawy HTML juĝ opanowaïeĂ. W tym rozdziale spróbujemy przekazaÊ Ci wiedzÚ z zakresu podstaw HTML, uĝywajÈc do tego platformy WordPress. Gdy juĝ zrozumiesz zasadÚ tworzenia kodu HTML i poznasz reguï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 nowych wpisów i stron — normalnych stron WWW zintegrowanych z blogiem — oraz do edycji opublikowanego 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ĝnie od 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Údzie on prezentowany odwiedzajÈcym TwojÈ witrynÚ. W typowych edytorach kodu HTML taki tryb pracy okreĂla siÚ czÚsto skrótem WYSIWYG, który powstaï z angielskiego okreĂlenia What You See Is What You Get (dostajesz to, co widzisz). Uwaga Opisane tu podstawy języka HTML mają zastosowanie na blogach prowadzonych na obydwu platformach — WordPress.com i oprogramowaniu WordPress. Znaczniki kodu HTML Caïa prawda na temat podstaw jÚzyka HTML kryje siÚ w jego nazwie — hipertekstowy jÚ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. Taka instrukcja w jÚzyku HTML nosi nazwÚ zznacznika. Tag przyjmuje postaÊ: b . Nawiasy ostre informujÈ przeglÈdarkÚ internetowÈ, ĝe umieszczony wewnÈtrz tekst stanowi polecenie jÚzyka i w zwiÈzku z tym nie powinien pojawiaÊ siÚ na ekranie. Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 169 WiÚkszoĂÊ znaczników jest dwuczïonowa, to znaczy skïada siÚ z czÚĂci otwierajÈcej i zamykajÈcej: Ostatnie sïowo tego zdania zostanie b pogrubione /b . Tak wyglÈdaïby tekst wprowadzony w zakïadce HTML okna edycji wpisów. W zakïadce Wizualny 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ĝy otoczyÊ go odpowiednimi znacznikami, to jest znacznikiem otwarcia b i znacznikiem zamkniÚcia /b . Podobnie uzyskuje siÚ efekt kursywy — wybrany fragment tekstu trzeba objÈÊ znacznikiem otwarcia i i znacznikiem zamkniÚcia /i . Uwaga Nie umieszczamy tu informacji na temat kodu HTML wyłącznie dla rozrywki czy na wszelki wypadek. Są one niezbędne do zrozumienia, dlaczego WordPress stosuje je w sposób, w jaki to 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ącego zmagania 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 oderwaniu od 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Ú prezentowania danych. JednoczeĂnie sÈ niezwykle popularne wĂród twórców stron, poniewaĝ kaĝdy z nich sprawdza siÚ na wiÚkszoĂci urzÈdzeñ oferujÈcych dostÚp do sieci, a i jego nazwa dokïadnie odzwierciedla dziaïanie. Nazwa formatowania róĝni siÚ zazwyczaj od naszych wyobraĝeñ na temat efektów, jakie powinno dawaÊ owo formatowanie. Purysta konwencji HTML wolaïby, ĝeby znaczniki odzwierciedlaï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 em do podkreĂlania2 znaczenia tekstu oraz strong , by je mocniej3 uwidoczniÊ. Oznacza to, ĝe puryĂci kodu HTML uzyskujÈ efekt pochylenia czcionki po otoczeniu jej otwierajÈcymi i zamykajÈcymi znacznikami em , a pogrubienia — otwierajÈcymi i zamykajÈcymi znacznikami strong , mimo ĝe znaczniki te trudno wpisaÊ w kod i 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. 170 ~ CzÚĂÊ II Prowadzenie bloga Arkusze stylów CSS wydawaïy siÚ triumfem puryzmu, gdyĝ wreszcie treĂÊ zostaïa jawnie oddzielona od formy. W praktyce zaĂ wyglÈda to tak, ĝe przez koniecznoĂÊ uĝywania standardu CSS spÚdzamy znacznie wiÚcej czasu, dopracowujÈc szczegóïy formatowania drobiazgó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 dokoñczyÊ rozwaĝania na temat nazwy jÚzyka HTML, zajmijmy siÚ teraz czÚĂciÈ HT tego akronimu — hipertekstem. Rysunek 6.1. Kod każdej oglądanej strony jest łatwo dostępny Wskazówka Działaniu HTML możesz przyjrzeć się na dowolnej stronie WWW. Niemal każda przeglądarka internetowa oferuje funkcję wyświetlania kodu źródłowego strony. W przeglądarce Internet Explorer 8 polecenie to znajduje się w menu Strona/Pokaż źródło (można też użyć skrótu klawiszowego 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 WWW zaprowadzi odwiedzajÈcego na stronÚ projektu WordPress.com. Aby dostaÊ siÚ do serwisu WordPress.com, kliknij a href= ´ http://www.wordpress.com tutaj /a . Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 171 W przedstawionym przykïadzie funkcjÚ hiperïÈcza peïni sïowo ttutaj. O ile domyĂlne ustawienia wyĂwietlania strony nie zostanÈ zmienione, odnoĂnik bÚdzie wyróĝniony kolorem niebieskim i podkreĂleniem. Gdy uĝytkownik kliknie odnoĂnik, w oknie przeglÈdarki pojawi siÚ zawartoĂÊ strony gïównej serwisu WordPress.com. Nazwa znacznika a pochodzi od angielskiego sïowa aanchor (kotwica). (Zagadnienie zarzÈdzania kotwicami staje siÚ bardzo istotne w przypadku serwisów o skomplikowanej strukturze). Nazwa pojawiajÈca siÚ obok znacznika, href, jest skrótem angielskiego okreĂlenia hypertext reference (odnoĂnik hipertekstowy). Wyraĝenie to nie jest znacznikiem, lecz definicjÈ umieszczanÈ wewnÈtrz znacznika (co widaÊ w przykïadzie). OkreĂla siÚ je mianem 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 istotne w danym momencie szczegóïy techniczne. Ty opracowujesz jedynie treĂÊ i wyglÈd samego wpisu. To WordPress dba o umieszczenie go w szablonie (pisaliĂmy o tym w rozdziale 3.). 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 stron internetowych. Strony powstajÈ zazwyczaj na komputerach ich twórców i dopiero gdy sÈ 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 ïatwo o 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ïanie grafiki czy plików audio i wideo — wszystkie one sÈ umieszczane na serwerze po kolei przez utworzone specjalnie w tym celu narzÚdzie. Dopiero po wysïaniu plików na serwer moĝesz umieĂciÊ je we wpisach swojego bloga. DziÚki takiemu rozwiÈzaniu nie musisz dbaÊ o zachowanie odpowiednich powiÈzañ odnoĂników po przeniesieniu plikó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ów takiej operacji). Z chwilÈ przeniesienia bloga na oprogramowanie WordPress przejmujesz wszystkie te obowiÈ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 otrzymujesz znacznie wiÚkszÈ swobodÚ dziaïañ. 172 ~ CzÚĂÊ II Prowadzenie bloga Obsługa HTML Pod koniec lat dziewięćdziesiątych XX w. nastąpił gwałtowny rozwój wszelkiego rodzaju dział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ębiorstwa działające w branży sieciowej, które nigdy dotąd nie przyniosły ani grosza zysków, czy nawet takie, które nigdy nie wyrobiły żadnych przychodów, stały się niemal z dnia na dzień warte miliony, a czasem miliardy dolarów. Wartość tych, które przynosiły zyski, osiągnęła jeszcze wyż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 boom osiągnął szczyt. Po dziesięciu latach, jakie upłynęły od tamtego czasu, spółka, która powstała z 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ęściej naciskano, by język zaczął oferować coraz większe możliwości i otwierać przed stronami WWW coraz lepsze drogi rozwoju. Firmy Microsoft (twórca przeglądarki Internet Explorer) i Netscape (twórcy przeglądarki Navigator) rozpoczęły rywalizację na gruncie wprowadzania nowych znaczników rozpoznawanych przez ich przeglądarki. (Przeglądarka Navigator dała początek popularnemu dziś programowi Firefox). Podobnie gwałtownego rozwoju doświadczył standard CSS. Początkowo język arkuszy stylów był znacznie mniej uporządkowany i gorzej obsługiwany niż HTML. Rdzeń CSS, jaki dzisiaj znamy, miał dopiero powstać. Mimo pewnego spokoju, jaki zapanował w świecie internetu, nadal na porządku dziennym są 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óre bardzo często działają poprawnie wyłącznie w najnowszej wersji przeglądarki Internet Explorer w 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 standardzie HTML, doświadczeni dostawcy usług internetowych — na przykład twórcy systemu WordPress — polegają wyłącznie na najbardziej podstawowych poleceniach HTML, które są poprawnie interpretowane 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. Blogi prowadzone 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 wpisu w 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 opcji edycji. W drugiej czÚĂci znajdziesz funkcje menu podrzÚdnego, dolnego, które pojawia siÚ dopiero po klikniÚciu przycisku Pokaĝ/ukryj zlew kuchenny. Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 173 Rysunek 6.2. Edytor w zakładkach Wizualny i HTML wykonuje większość tych samych zadań w zupełnie odmienny sposób Tabela 6.1. Przyciski w zakładkach Wizualny i HTML Zakładka Wizualny Zakładka HTML Działanie img b i del ul ol li Dodaj obrazek B I ABC Punkty Numery Wyrównanie do lewej WyĂrodkowanie Wstawia grafikÚ. Pogrubienie Kursywa PrzekreĂlenie Lista nieuporzÈdkowana (wypunktowanie) Lista uporzÈdkowana (numerowanie) Elementy listy (zarówno wypunktowania, jak i numerowania) Tekst wyrównany do lewego marginesu, przy prawym marginesie poszarpany Tekst wyĂrodkowany 174 ~ CzÚĂÊ II Prowadzenie bloga Tabela 6.1. Przyciski w zakładkach Wizualny i HTML — ciąg dalszy Zakładka Wizualny Wyrównanie do prawej Zakładka HTML Działanie OdnoĂnik Usuñ odnoĂnik Wstaw tag „wiÚcej” link more Proofread writing (sprawdě pisowniÚ) Tryb peïnoekranowy Pokaĝ lub ukryj kuchenny zlew Lista rozwijana Akapit (formatowanie stylu Adres, Tekst preformatowany i nagïówki 1 – 6) PodkreĂlenie Wyjustowany Kolor tekstu code ul Import tekstu Import zawartoĂci z programu Word. Usuñ formatowanie Zmniejsz wciÚcie ZwiÚksz wciÚcie Cofnij Ponów Pomoc ins lookup zamknij tagi Tekst wyrównany do prawego marginesu, przy lewym marginesie poszarpany HiperïÈcze Usuwa hiperïÈcze Wstawia po wskazanej czÚĂci tekstu odnoĂnik prowadzÈcy do pozostaïego fragmentu wpisu Sprawdza pisowniÚ tekstu w jÚzyku angielskim WyĂwietla w oknie przeglÈdarki samo pole edycji tekstu WyĂwietla lub ukrywa dodatkowe opcje formatowania Róĝne opcje formatowania tekstu Tekst wyrównany obustronnie Zmienia kolor wyĂwietlanego tekstu (co moĝe prowadziÊ do mylenia wyróĝnionych fragmentów z odnoĂnikami) Wstawia tekst z notatnika Wstawia tekst z programu Microsoft Word Usuwa wszystkie zmiany wyglÈdu tekstu nadane formatowaniem Usuwa wszelkie wciÚcia tekstu Przesuwa margines bloku tekstu w prawo Cofa ostatnio wykonanÈ czynnoĂÊ Cofa cofniÚcie wykonanej czynnoĂci Otwiera stronÚ Codex (nie znajdziesz na niej zbyt szczegóïowych wyjaĂnieñ) Nadaje formatowanie wstawionego tekstu (sïuĝy do aktualizowania wpisów) Sprawdza sïowo w sïowniku Wstawia zamkniÚcia znaczników (warto kontrolowaÊ, w jakich miejscach siÚ pojawiajÈ) Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 175 Formatowanie znaków Polecenia formatowania znaków dostÚpne w systemie WordPress ograniczajÈ siÚ do najlepiej obsïugiwanych przez programy znaczników kodu HTML — pogrubienia, kursywy oraz 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 pytañ zostaïy oznaczone kursywÈ — JJak, GGdzie, CCo i DDlaczego. Wszystkie cczasowniki zostaïy pogrubione. Sïowo ttak w ostatnim pytaniu zostaïo przekreĂlone. Rysunek 6.3. W zakładce Wizualny nie ma wątpliwości co do sposobu formatowania tekstu 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 edytora wizualnego. Rysunek 6.4. W zakładce HTML wszystko wygląda nieco bardziej skomplikowanie Pora zastanowiÊ siÚ, co tak naprawdÚ dzieje siÚ z tekstem. Tabela 6.2. przedstawia porównanie tekstu widocznego w obydwu zakïadkach. 176 ~ CzÚĂÊ II Prowadzenie bloga Tabela 6.2. Zakładki Wizualny i HTML Wizualny Jak siÚ mmasz? Gdzie jjesteĂ? Co rrobisz? Dlaczego pprzychodzisz tak póěno? HTML em Jak /em siÚ strong masz /strong ? em Gdzie /em strong jesteĂ /strong ? em Co /em strong robisz /strong ? em Dlaczego /em strong przychodzisz / ´strong del tak /del póěno? Wprawdzie na przyciskach zakïadek Wizualny i HTML pojawiajÈ siÚ symbole B i b, ale po ich uĝyciu w kodzie pojawia siÚ znacznik strong , a nie b . To ustÚpstwo na rzecz funkcjonalnoĂ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 em , który odpowiada za 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 znacznie mniej czytelny niĝ wersja w edytorze wizualnym. OczywiĂcie z czasem, gdy nabierzesz doĂwiadczenia, nauczysz siÚ ignorowaÊ znaczniki i bez trudu odczytasz treĂÊ strony. NajwiÚcej problemów w czasie odczytywania tekstu z kodu strony sprawia znacznik strong , który nie odbiega dïugoĂciÈ od przeciÚtnego sïowa (w zasadzie jest sïowem). Wygodniej byïoby posïugiwaÊ siÚ znacznikiem b . Z kolei znacznik em , wprawdzie krótszy, nie kojarzy siÚ z kursywÈ i nawet jeĂli zapamiÚta siÚ, ĝe pochodzi on od angielskiego sï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. ’atwo stwierdziÊ, ĝe mniej czysta wersja HTML jest znacznie przystÚpniejsza. i Jak /i siÚ b masz /b ? i Gdzie /i b jesteĂ /b ? i Co /i b robisz /b ? i Dlaczego /i b przychodzisz /b del tak /del póěno? WordPress bez kïopotów interpretuje popularniejsze znaczniki, na przykïad b i i , ale musisz wpisaÊ je bezpoĂrednio w zakïadce HTML lub skopiowaÊ z narzÚdzia, w którym tworzysz kod strony. JeĂli sprawdzisz wyglÈd wpisu w zakïadce Wizualny, a nastÚpnie powrócisz do zakïadki HTML, odkryjesz, ĝe zamiast wprowadzonych wczeĂniej znaczników b i i pojawiïy siÚ znaczniki strong i em . Mniej popularne znaczniki, na przykïad s , oznaczajÈce przekreĂ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 przez WordPress w zakïadce HTML lub posïuĝyÊ siÚ odpowiednim przyciskiem w zakïadce Wizualny. Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 177 Tajemniczy znacznik p 4 Oznaczenie akapitu, czyli znacznik p , jest jedną z najczęstszych przyczyn frustracji w czasie edycji 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 przed kolejnym 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 br , wymuszając tym samym złamanie wiersza. Jeśli jednak zależy Ci na powiększeniu odstępów między akapitami, to masz problem. Większość przeglądarek została zaprojektowana w taki sposób, by ignorować wielokrotne wystąpienia znaczników p , br lub ich kombinacji. Powiększanie odstępów między akapitami za pomocą samego kodu HTML nie jest łatwe. Z czasem sposób korzystania ze znacznika p zmienił się. Projektanci stron zaczęli stosować go w charakterze kontenera tekstu, otaczając treść akapitu znacznikami otwarcia p i zamknięcia /p . To znacznie lepsze podejście do kodowania, ponieważ informuje wszystkich, którzy czytają kod, że „to zamknięty akapit”. Umieszczenie samego znacznika p jest równoznaczne ze 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ółowa charakterystyka jest zdefiniowana w arkuszu stylów. Takie rozwiązanie znacznie zwiększa pole manewru, lecz jednocześnie zaciemnia kod, ponieważ aby zorientować się, za co odpowiada każdy ze znaczników div , trzeba sięgnąć do arkusza stylów. Nie zapominajmy też, że jeden styl może przesłaniać inne — dlatego nazywa się je kaskadowymi — więc niewykluczone, ż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 doszli do 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 lat narasta u niemal każdego projektanta witryn WWW. Na pewno nieraz natknąłeś się w sieci na pełne goryczy opowieści o zmaganiach z kodem CSS czy HTML i jego wyświetlaniem w różnych przeglądarkach — częstej przyczynie frustracji programistów aplikacji internetowych. Formatowanie list Warto przez chwilÚ zatrzymaÊ siÚ przy temacie stosowania wypunktowania i numerowania w 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. 178 ~ CzÚĂÊ II Prowadzenie bloga 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 akceptowalne zmiany w arkuszach, by osiÈgnÈÊ zamierzony efekt. Kod HTML oferuje dwa modele list. Kaĝdy z nich jest otoczony innÈ parÈ znaczników, ale poszczególne pozycje w obydwu przypadkach ujmuje siÚ w identyczne znaczniki. DziÚki temu zmienianie typów formatowania listy nie nastrÚcza ĝadnych trudnoĂci. Poniĝej kilka 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Ăcie muszÈ 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ïon w 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ów ma znaczenie”, zatem jest zawsze wyĂwietlana w postaci listy numerowanej. Wszystkie pozycje listy nieuporzÈdkowanej obejmuje siÚ zewnÚtrznÈ parÈ znaczników ul /ul Oznaczenie to jest skrótem angielskiego wyraĝenia llist item — element listy. 5, a kaĝdy z elementów listy jest objÚty osobnÈ parÈ znaczników li /li . W przypadku listy uporzÈdkowanej (numerowanej) stosuje siÚ nadrzÚdnÈ parÚ znaczników ol /ol tak jak w przypadku listy nieuporzÈdkowanej. 6, a kaĝdÈ z pozycji listy obejmuje siÚ osobnÈ parÈ znaczników li /li , 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 obydwu przypadkach. RóĝniÈ siÚ jedynie znacznikami otwierajÈcymi i zamykajÈcymi — w pierwszym przypadku jest to para ul /ul , w drugim ol /ol . Gdyby zaszïa potrzeba edytowania kodu 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È oznaczone dodatkowymi wciÚciami. WciÚcia te nie majÈ nic wspólnego ze sposobem, w jaki kod HTML jest 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 wielopoziomowych wciÚÊ, 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Èce na 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. Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 179 Tabela 6.3. Wygląd list w trybach pracy Wizualny i HTML edytora wpisów Wizualny Oto kilka moich ulubionych cytatów z Mickiewicza: HTML Oto kilka moich ulubionych cytatów z Mickiewicza: ul ZostaÊ na polu samemu i w nocy, / To lubiÚ, rzekïem, to lubiÚ! Jakiĝ to chïopiec piÚkny i mïody? / Jakaĝ to obok dziewica? / Brzegami sinej ¥witezi wody / IdÈ przy Ăwietle ksiÚĝyca. li ZostaÊ na polu samemu i w nocy, / To lubiÚ, rzekïem, to lubiÚ! /li li Jakiĝ to chïopiec piÚkny i mïody? / Jakaĝ to obok dziewica? / Brzegami sinej ¥witezi wody / IdÈ przy Ăwietle ksiÚĝyca. /li Ja na rok u Belzebuba / PrzyjmÚ za ciebie mieszkanie, / Niech przez ten rok moja luba / Z tobÈ jak z mÚĝem zostanie. li Ja na rok u Belzebuba / PrzyjmÚ za ciebie mieszkanie, / Niech przez ten rok moja luba / Z tobÈ jak z mÚĝem zostanie. /li /ul Oto kilka moich ulubionych cytatów z Mickiewicza: Oto kilka moich ulubionych cytatów z Mickiewicza: ol ZostaÊ na polu samemu i w nocy, / To lubiÚ, rzekïem, to lubiÚ! Jakiĝ to chïopiec piÚkny i mïody? / Jakaĝ to obok dziewica? / Brzegami sinej ¥witezi wody / IdÈ przy Ăwietle ksiÚĝyca. li ZostaÊ na polu samemu i w nocy, / To lubiÚ, rzekïem, to lubiÚ! /li li Jakiĝ to chïopiec piÚkny i mïody? / Jakaĝ to obok dziewica? / Brzegami sinej ¥witezi wody / IdÈ przy Ăwietle ksiÚĝyca. /li Ja na rok u Belzebuba / PrzyjmÚ za ciebie mieszkanie, / Niech przez ten rok moja luba / Z tobÈ jak z mÚĝem zostanie. li Ja na rok u Belzebuba / PrzyjmÚ za ciebie mieszkanie, / Niech przez ten rok moja luba / 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 to nie 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. Edycja treĂci wpisu w widoku kodu HTML jest wyjÈtkowo niewygodna z powodu braku miejsca w polu tekstowym edytora, który jest dostÚpny wyïÈcznie w widoku kokpitu. 180 ~ CzÚĂÊ II Prowadzenie bloga Tworzenie odnośników Tworzenie odnoĂników to definiowanie hiperïÈczy wewnÈtrz kodu HTML. HiperïÈcza stanowiÈ 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 budowanie poïÈczeñ w systemie WordPress zostaïo uproszczone tak, by uïatwiÊ Ci pracÚ, nie pozbawiajÈc jednoczeĂnie moĝliwoĂci decydowania o pewnych opcjach dziaïania odnoĂnika. GdybyĂ zaĂ potrzebowaï jakichĂ specjalnych rozwiÈzañ, zawsze moĝesz edytowaÊ 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ÚĂciej do analizowania kodu HTML. Od jakoĂci poïÈczeñ zaleĝy natomiast komfort pracy i 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ïÈczenie telefoniczne (Google Voice) czy uruchomiÊ funkcjÚ tïumaczenia (AltaVista); „ gdy chcesz wykorzystaÊ wszystkie moĝliwoĂci widgetu Tekst, do czego wrócimy w dalszej czÚĂ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Ăniku pojawia siÚ nazwa domeny, przeglÈdarka zaczyna szukaÊ jednej z nastÚpujÈcych stron: index.htm index.html home.htm home.html Nazwy te sÈ uprzywilejowane, co oznacza, ĝe nie musisz wpisywaÊ ich jawnie w pasku przeglÈdarki, by ta zaczÚïa szukaÊ ich w sieci. Nie musisz wiedzieÊ, którÈ z nazw posï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Èc stronÚ najnowsze.html (nazwy plików stron internetowych zawsze koñczÈ 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 . Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 181 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 miejscu oznaczonym 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 bardzo typowym sposobem wykorzystania tego znacznika. Tego rodzaju kotwica, czyli para znaczników a /a , nie musi otaczaÊ ĝadnego tekstu, poniewaĝ samo jej wystÈpienie wystarczy 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 na blogu 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 jednak umieściłeś na swojej witrynie statyczne strony lub polecasz ulubione wpisy, powinieneś co jakiś czas sprawdzać, czy wszystkie odnośniki działają poprawnie, i uaktualniać te, które przestały funkcjonować w wyniku zmian na stronach docelowych. Tego rodzaju odnoĂniki przydadzÈ Ci siÚ niejednokrotnie podczas pracy z widgetem Tekst, 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 ich kodzie odpowiednie kotwice. Moĝesz teĝ sprawdziÊ, czy w kodzie stron, które chciaïbyĂ poleciÊ, nie znajdziesz przygotowanych przez autora kotwic. Zarządzanie kotwicami Technicznie 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ład item20, o którym wspominaliśmy w tym rozdziale, to po prostu pewien szczególny rodzaj odnośnika. Jednakże większość ludzi, w tym także twórcy kodu HTML — osoby wyjątkowo zważające na swoje słowa — nadal określają początek odnośnika słowami link lub href. Określenie anchor (kotwica) kojarzy się przede wszystkim z odnośnikami prowadzącymi do zawartości tego samego pliku. Dlatego jeśli kiedyś natkniesz się na określenie „kotwica”, pamiętaj, że zapewne mowa o odnośniku prowadzącym do zawartości tej samej strony. No, chyba że zabłąkasz się do portu, wtedy kotwicę rzuć! 182 ~ CzÚĂÊ II Prowadzenie bloga Znacznik more Twórcy systemu WordPress wprowadzili wïasny znacznik, more, który jest doskonaïym przykïadem sposobu dziaïania kodu HTML oraz metodyki dziaïania pracowników Automattic, za wszelkÈ cenÚ starajÈcych siÚ uïatwiÊ Ci ĝycie. Na stronie gïównej Twojego bloga pojawiajÈ siÚ najbardziej aktualne wpisy. Jeĝeli umieĂ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 tekst odnoĂnika, czy to z poziomu strony gïównej, czy z dowolnego innego miejsca. Znacznik more wprowadza siÚ do kodu nastÚpujÈco: !--more-- Z punktu widzenia programów interpretujÈcych kod HTML kaĝdy ciÈg znaków wewnÈtrz znacznika rozpoczynajÈcy siÚ od wykrzyknika (!) jest komentarzem. PrzeglÈdarki ignorujÈ tego rodzaju znaczniki, dlatego programiĂci z upodobaniem umieszczajÈ w nich komentarze do kodu. Takie uwagi odgrywajÈ rolÚ notatek dla kierowników projektó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. Tak zïoĝony system moĝe zawieraÊ polecenia nakazujÈce mu sprawdzaÊ treĂÊ komentarzy i pilnowaÊ, czy pojawiajÈ siÚ w nich zdefiniowane ciÈgi znaków, którym przypisano konkretne znaczenie. Znacznik more jest wïaĂnie przykïadem takiego wyspecjalizowanego komentarza. Znacznik ten moĝe pojawiÊ siÚ w dowolnym miejscu wpisu, dziÚki czemu strona gïówna Twojego 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 nich znacznika more, natomiast dodawać go do wszystkich poprzednich. Dzięki temu najnowszy post pojawi się na głównej stronie w całości, a kilka innych wpisów (ile — to już zależy od 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 totalnie chybionym 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Ú sprawdzania tekstów w jÚzyku angielskim i pozwala pracowaÊ w trybie peïnoekranowym. Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 183 „ Przyciski funkcji w edytorze HTML sÈ mylÈce i nie ma moĝliwoĂci rozwiniÚcia pola edycji do trybu peïnoekranowego. Kod HTML zajmuje bardzo duĝo miejsca pola edycji, 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óry skazane na poraĝkÚ. Jeĝeli uznasz, ĝe Twój blog nie obejdzie siÚ bez znacznej ingerencji w 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 jest pogubiÊ siÚ, utraciÊ wyniki pracy, a przede wszystkim nie da siÚ przy tym uniknÈÊ straty mnóstwa czasu. Na szczÚĂcie tego typu operacje zwykle koñczÈ siÚ pomyĂlnie. Uĝytkownicy wszystkich systemów operacyjnych mogÈ wybieraÊ spoĂród wielu róĝnych edytoró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óstwo tego typu aplikacji. Niektóre cieszÈce siÚ niegdyĂ powodzeniem programy zniknÚïy w tym czasie 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 takiego traktowania moĝe byÊ popularny niegdyĂ edytor FrontPage autorstwa Microsoft. Program zostaï pporzucony — nie moĝna go juĝ kupiÊ, nie pojawiajÈ siÚ ĝadne aktualizacje. Microsoft wprowadziï na jego miejsce znacznie bardziej zaawansowane technicznie programy naleĝÈce do rodziny Microsoft Expression Studio. Pakiet ten ma konkurowaÊ z powszechnie szanowanym, lecz niemniej skomplikowanym w obsïudze programem Adobe Dreamweaver. Poszukaj w internecie programu odpowiedniego dla swoich potrzeb i wïaĂciwego dla systemu, z jakiego korzystasz. WiÚkszoĂÊ edytorów jest dostÚpna w podstawowej wersji za darmo lub przez okres próbny. Potem, gdy bÚdziesz mieÊ pewnoĂÊ, ĝe dana aplikacja Ci 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Ú pewnie teraz, których znaczników bÚdzie Ci wolno uĝywaÊ w czasie tworzenia wpisów w systemie WordPress. 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Ú we wpisach 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 opiszemy w 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 184 ~ CzÚĂÊ II Prowadzenie bloga oddzielajÈca), img (wstawianie obrazów rzÈdzi siÚ podobnymi zasadami jak budowanie odnoĂników) i table (potÚĝne, lecz niebezpieczne narzÚdzie — tabele dziaïajÈ w kaĝdej przeglÈdarce nieco inaczej). I, ĝeby mieÊ formalnoĂci za sobÈ, oto lista pozostaïych rozpoznawanych przez WordPress znacznikó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 osoba pracujÈca bezpoĂrednio z kodem HTML? Niezbyt gwaïtownie, poniewaĝ wiÚkszoĂÊ skomplikowanych zmian zwiÈzanych z wprowadzeniem standardu XHTML pojawia siÚ na poziomie ogólnej budowy pliku strony 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 kod HTML zapisywali tylko zbuntowani nastolatkowie, dziĂ, w XHTML, taki zapis to standard. „ Zagnieĝdĝaj poprawnie znaczniki — jeĂli wyróĝniasz jakiĂ fragment kodu pogrubieniem za pomocÈ znaczników b i /b i jednoczeĂnie przyjmujesz, ĝe poczÈtek tego sïowa bÚdzie poczÈtkiem odnoĂnika, pamiÚtaj, ĝeby wewnÈtrz znaczników a /a znalazïy siÚ obydwa znaczniki b , 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 p i /p , a nie samym p . „ 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Ê atrybut od 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 dobrze w zwykïym Ărodowisku HTML i w Ărodowisku XHTML systemu WordPress. OczywiĂcie sÈ teĝ odpowiednie narzÚdzia programistyczne i ěródïa informacji przeznaczone dla 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, ale na pewno prÚdzej czy póěniej znajdziesz odpowiednie dla siebie. Wpisz w wyszukiwarce nazwÚ interesujÈcego CiÚ znacznika wraz ze sïowami kluczowymi „HTML znaczniki”, a zobaczysz, ile ciekawych stron pojawi siÚ w wynikach. Znalezienie takiej, która przypadnie Ci do gustu, to tylko kwestia czasu. Ze wzglÚdów bezpieczeñstwa WordPress nie dopuszcza uĝywania nastÚpujÈcych znaczników: embed, frame, iframe, form, input, object i textarea. Rozdziaï 6. HTML w widgetach i innych czÚĂciach bloga ~ 185 Film z serwisu YouTube — przykład zagnieżdżania kodu HTML Usïugi Ăwiadczone przez serwis YouTube doskonale nadajÈ siÚ do zilustrowania przykïadu procedury umieszczania obcego kodu HTML wewnÈtrz Twojej strony, a w przypadku bloga WordPress — wewnÈtrz wpisu. ’Èczenie usïug oferowanych przez YouTube z wpisami blogów WordPress to doskonaïy pomysï. Umieszczanie pliku wideo na stronie sprowadza siÚ, w przypadku YouTube, wyïÈcznie do wstawienia w odpowiednim miejscu fragmentu kodu przygotowanego przez ten serwis. Sam plik wideo pozostaje na serwerach YouTube i nigdy nie zostaje przeniesiony na serwer WordPress. W chwili gdy osoba odwiedzajÈca Twój blog kliknie przycisk odtwarzania, zostaje u
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

WordPress od podszewki
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: