Spokojnych, zdrowych, radosnych świąt Bożego Narodzenia
spędzonych w serdecznym gronie rodzinnym.
spędzonych w serdecznym gronie rodzinnym.
Niechaj tegoroczne piękne Święta przyniosą betlejemski blask wszystkim Wam.
piątek, 21 grudnia 2012
czwartek, 6 grudnia 2012
WordPress: Projektowanie własnego tematu WordPress, część 6
W poprzednich częściach pisałam o tworzeniu szablonów nagłówka i stopki, lecz to szablon index.php jest z kilku powodów najistotniejszym elementem tematu WordPress. Pierwszy z tych powodów jest związany ze sposobem ładowania tematów przez silnik CMSa. WordPress szuka w katalogu tematu w pierwszej kolejności pliku index.php, co więcej w wypadku braku niektórych innych szablonów, aplikacja domniemuje, że brakujące elementy znajdzie właśnie w index.php.
Nasz dotychczasowy szablon miał bardzo prostą formę:
Pętla
W drugiej części naszego cyklu pisałam o mechanizmie Pętli. Szablon index.php jest związany na trwałe z pętlą w tym sensie, że inicjuje ją i kończy. Bez obsługi pętli zaś nie ma WordPress'a. Oto najprostszy przykład implementacji pętli wewnątrz szablonu:
Pętla zaczyna się słowem kluczowym while a kończy poleceniem endwhile. Wewnątrz użyto funkcji the_content(), która pobiera treść artykułu z bazy danych i wpisuje ją w wynikowy kod html. Gdy chcemy pobrać treść artykułu do dalszej obróbki, powinniśmy użyć innej funkcji: get_the_content(). Funkcja the_content() posiada pewną ciekawą cechę. Jeśli w treści artykułu odnajdzie znacznik <!--more--> to wyświetli treść tylko do tego znacznika a dodatkowo wygeneruje hiperłącze po kliknięciu którego użytkownik będzie miał szansę zobaczyć cały artykuł. Funkcja the_content() przyjmuje parametr pozwalający określić jak wygląda taki link. Opisana funkcjonalność pozwala wyświetlić trailery kilku artykułów z przyciskami typu "czytaj dalej", warto przy tym wiedzieć, że nie zadziała ona w szablonach wyświetlających tylko jeden artykuł.
Treść artykułu powinniśmy poprzedzić jego tytułem. Aby wyświetlić tytuł możemy użyć funkcji the_title(), którą możemy wywołac w nastepujący sposób:
Parametry widoczne w wywołaniu wygenerują nam kod html: <h1>Nasz tytuł</h1>. Funkcję moglibyśmy wywołać także w ten sposób:
a efekt końcowy byłby ten sam.
W wypadku artykułów wielostronicowych nie możemy zapomnieć o przyciskach pozwalających użytkownikowi przejść do następnej strony bądź cofnąć się do poprzedniej. Jeśli chcemy wygenerować takie linki, WordPress dostarcza nam rozwiązania jakim jest funkcja wp_link_pages(). Funkcja pozwala nam zapanować nad formą wizualną generowanych linków, wystarczy jedynie właściwie ją sparametryzować. Parametry i domyślne wartości parametrów wp_link_pages() to:
gdzie
W naszym przykładzie użyjemy funkcji w następujący sposób:
Każdy artykuł opatruje się zwykle opisującymi go atrybutami, takimi jak data wprowadzenia, autor, itp. Dane tego typu możemy wyświetlić na przykład tak:
Dane autora pobieramy funkcją the_author_link() która zwraca nam dane określone w profilu autora (np. imię i nazwisko) oraz link do jego strony domowej. Jeśli w profilu autora nie określono strony, wyświetlana jest tylko "nazwa" autora. Samą nazwę autora moglibysmy też pobraą funkcją the_author(), jednakowoż uważam, że zastosowanie funkcji the_author_link() jest bardziej eleganckie.
Datę utworzenia artykułu pobrano funkcją the_time() z parametrami formatującymi datę. Otrzymana data będzie miała format RRRR-mm-dd HH-mm-ss.
Funkcja edit_post_link() informuje silnik WordPress, że w trybie edycji ma zostać wyświetlony link opisany tekstem 'Edytuj', który zalogowanemu autorowi pozwoli przejść bezpośrednio do edycji artykułu.
Kiedy już wyświetlimy nasz artykuł, możemy zająć się innymi elementami głównego obszaru strony. Czasami na blogach widzimy linki do poprzedniego czy następnego posta. Nic nie stoi na przeszkodzie, aby w treści naszej strony umieścić podobny mechanizm. Wystarczy w tym celu użyć predefiniowanych funkcji next_posts_link() i previous_posts_link() umieszczając je w wybranym miejscu kodu strony.
Tym samym kod naszego szablonu przybierze postać:
Nasz dotychczasowy szablon miał bardzo prostą formę:
<?php get_header(); ?>
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
<?php get_footer(); ?>
Za chwilę opiszę jak uzupełnić powyższy szkielet o elementy które sprawią że stanie się on w pełni funkcjonalny.
Pętla
W drugiej części naszego cyklu pisałam o mechanizmie Pętli. Szablon index.php jest związany na trwałe z pętlą w tym sensie, że inicjuje ją i kończy. Bez obsługi pętli zaś nie ma WordPress'a. Oto najprostszy przykład implementacji pętli wewnątrz szablonu:
<?php while ( have_posts() ) : the_post() ?> <?php the_content(); ?> <?php endwhile; ?>
Pętla zaczyna się słowem kluczowym while a kończy poleceniem endwhile. Wewnątrz użyto funkcji the_content(), która pobiera treść artykułu z bazy danych i wpisuje ją w wynikowy kod html. Gdy chcemy pobrać treść artykułu do dalszej obróbki, powinniśmy użyć innej funkcji: get_the_content(). Funkcja the_content() posiada pewną ciekawą cechę. Jeśli w treści artykułu odnajdzie znacznik <!--more--> to wyświetli treść tylko do tego znacznika a dodatkowo wygeneruje hiperłącze po kliknięciu którego użytkownik będzie miał szansę zobaczyć cały artykuł. Funkcja the_content() przyjmuje parametr pozwalający określić jak wygląda taki link. Opisana funkcjonalność pozwala wyświetlić trailery kilku artykułów z przyciskami typu "czytaj dalej", warto przy tym wiedzieć, że nie zadziała ona w szablonach wyświetlających tylko jeden artykuł.
Treść artykułu powinniśmy poprzedzić jego tytułem. Aby wyświetlić tytuł możemy użyć funkcji the_title(), którą możemy wywołac w nastepujący sposób:
<?php the_title('<h1>', '</h1>'); ?>
Parametry widoczne w wywołaniu wygenerują nam kod html: <h1>Nasz tytuł</h1>. Funkcję moglibyśmy wywołać także w ten sposób:
<h1><?php the_title(); ?></h1>
a efekt końcowy byłby ten sam.
W wypadku artykułów wielostronicowych nie możemy zapomnieć o przyciskach pozwalających użytkownikowi przejść do następnej strony bądź cofnąć się do poprzedniej. Jeśli chcemy wygenerować takie linki, WordPress dostarcza nam rozwiązania jakim jest funkcja wp_link_pages(). Funkcja pozwala nam zapanować nad formą wizualną generowanych linków, wystarczy jedynie właściwie ją sparametryzować. Parametry i domyślne wartości parametrów wp_link_pages() to:
$args = array(
'before' => '<p>' . __('Pages:'),
'after' => '</p>',
'link_before' => '',
'link_after' => '',
'next_or_number' => 'number',
'nextpagelink' => __('Next page'),
'previouspagelink' => __('Previous page'),
'pagelink' => '%',
'echo' => 1
);
gdzie
- before (string) jest tekstem który zostanie umieszczony przed każdym linkiem, domyślnie: <p>Pages:
- after (string) to tekst po każdym linku, domyślnie </p>
- link_before(string) - tekst bezpośrednio przed tekstem opisującym link, domyślnie pusty
- link_after (string) - tekst bezpośrednio po tekście opisującym link, domyślnie pusty
- next_or_number (string) określa czy używane mają być numery stron, czy tez będą to linki typu "następna, poprzednia" strona Dopuszczalne wartości to:
- number (domyślnie)
- next
- nextpagelink (string) to tekst dla linku kierującego do następnej strony. domyślnie: Next page.
- previouspagelink (string) - tekst dla linku kierującego do poprzedniej strony. domyślnie: Previous page.
- pagelink (string) Łańcuch formatujący dla numerów stron. Znaki % w łańcuchu zastąpione zostaną numerami strony, stąd parametr 'Strona %' spowoduje wygenerowanie tekstu "Strona 1", "Strona 2", itd. Domyślnie: %
- more_file (string) Strona do której kierują linki. Domyślnie jest to bieżąca strona.
- echo (boolean) Przełącznik decydujący czy wynik działania funkcji ma być wpisany do strumienia wyjściowego (umieszczony w treści generowanego html) czy jedynie przypisany zmiennej. Domyślnie: 1 (tak)
W naszym przykładzie użyjemy funkcji w następujący sposób:
<?php
wp_link_pages('before=<p>&after=</p>&next_or_number=number&pagelink=Strona %');
?>
Każdy artykuł opatruje się zwykle opisującymi go atrybutami, takimi jak data wprowadzenia, autor, itp. Dane tego typu możemy wyświetlić na przykład tak:
<div class="art-meta">
<span class="author">Autor: <?php the_author_link(); ?></span>, Opublikowano:
<span class="data"><?php the_time('Y-m-d H:i:s') ?> </span>
<?php edit_post_link( "Edytuj post" ) ?>
</div>
Dane autora pobieramy funkcją the_author_link() która zwraca nam dane określone w profilu autora (np. imię i nazwisko) oraz link do jego strony domowej. Jeśli w profilu autora nie określono strony, wyświetlana jest tylko "nazwa" autora. Samą nazwę autora moglibysmy też pobraą funkcją the_author(), jednakowoż uważam, że zastosowanie funkcji the_author_link() jest bardziej eleganckie.
Datę utworzenia artykułu pobrano funkcją the_time() z parametrami formatującymi datę. Otrzymana data będzie miała format RRRR-mm-dd HH-mm-ss.
Funkcja edit_post_link() informuje silnik WordPress, że w trybie edycji ma zostać wyświetlony link opisany tekstem 'Edytuj', który zalogowanemu autorowi pozwoli przejść bezpośrednio do edycji artykułu.
Kiedy już wyświetlimy nasz artykuł, możemy zająć się innymi elementami głównego obszaru strony. Czasami na blogach widzimy linki do poprzedniego czy następnego posta. Nic nie stoi na przeszkodzie, aby w treści naszej strony umieścić podobny mechanizm. Wystarczy w tym celu użyć predefiniowanych funkcji next_posts_link() i previous_posts_link() umieszczając je w wybranym miejscu kodu strony.
Tym samym kod naszego szablonu przybierze postać:
<?php get_header(); ?>
<div id="container"><!-- #container -->
<div id="content"> <!-- #content, główny kontent strony -->
<?php while ( have_posts() ) : the_post() ?>
<?php the_title('<h1>', '</h1>'); ?>
<div class="art-meta">
<span class="author">Autor: <?php the_author_link(); ?></span>, Opublikowano:
<span class="data"><?php the_time('Y-m-d H:i:s') ?> </span>
<?php edit_post_link( "Edytuj post" ) ?>
</div>
<?php the_content(); ?>
<div class="link-pages">
<?php wp_link_pages('before=<p>&after=</p>&next_or_number=number&pagelink=Strona %'); ?>
</div>
<?php endwhile; ?>
</div> <!-- #content, główny kontent strony -->
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
<?php get_footer(); ?>
W ciele szablonu index.php umieściliśmy poprzednio także wywołania funkcji które ładują nam nagłówek oraz stopkę. Wydaje się, że zapomnieliśmy o bocznych paskach które będziemy wyświetlać na naszej stronie. Czas najwyższy naprawić to zaniedbanie. Użyjemy w tym celu funkcji get_sidebar(). Ale to już w kolejnym odcinku naszej serii ...
piątek, 23 listopada 2012
Atak Pandy czyli Internet w popłochu
Dzisiaj będzie coś na temat pozycjonowania. Osobiście nie pasjonuję się tą dziedziną "wiedzy" a co więcej mam w stosunku do niej uczucia raczej mieszane.
Wiadomo, że w naszym okrutnym świecie pewnych zabiegów w zakresie SEO nie da się uniknąć, natomiast daleka jestem od zachwycania się wynikami pozycjonerów potrafiących śmieciową stronę wypromować do nieprzyzwoitości.
Dlatego wydarzenia ostatnich dni okrzyczane w mediach zajmujących się problematyką Internetu kolejnym armagedonem bardziej mnie cieszą niż martwią. Ale o co chodzi? Otóż chodzi o rzecz następującą: inżynierowie Google pracujący nad udoskonalaniem wyszukiwarki wprowadzają ponownie poważne zmiany w mechanizmie wyszukiwania. Po raz kolejny w tym roku wyniki wyszukiwania zachowują się zdumiewająco, a szczególnie dotyka to niektórych stron dotychczas ostro podkręconych przez pozycjonerów. Podobno na świecie zanotowano przypadki, kiedy liczba wejść na niektóre strony spadła tydzień do tygodnia o 98%
Na oko wygląda to wszystko na kolejny lifting mechanizmu o sympatycznej nazwie Panda, który to "zwierz" odpowiada za wyławianie kiepskich merytorycznie ale dobrze spreparowanych stron WWW
Jako przeciętny użytkownik Internetu chylę głowę przed mądrością wujka Googl'a. Bardzo mnie bowiem wkurza, gdy w trakcie pracy, szukając czegoś na już a właściwie na wczoraj, natrafiam na górze strony wyszukiwania na jakieś śmieciowe katalogi bezsensownych linków czy "inne takie". Poza tym uważam, że nadmierna podatność wyników wyszukiwania Google na zabiegi pozycjonerów jest z gruntu niedemokratyczna gdyż promuje tych, którzy poza kasą nie mają nic mądrego do przekazania ogółowi. Jak to się objawia? Ano tak, że wpisując w wyszukiwarkę dowolny niemal termin mamy wielką szansę trafić na górze wyników wyszukiwania, jeśli nie do katalogów, to do 125 sklepów oferujących mydło i powidło. Krótko mówiąc jak nie katalogi to sklepy. Możesz być sobie geniuszem i produkować tony świetnych treści, a mimo to bez kasy na pozycjonowanie wyżej d... nie podskoczysz. Czyż nie jest to bardzo niedemokratyczne?
Reasumując uważam, że Google robi dobrze. Chwała mu za to.
No dobrze. Ale dlaczego wyniki wyszukiwania nieco szaleją. Raz witryna jest na pierwszej stronie, raz na drugiej a potem na 10-tej. Moim zdaniem wiąże się to z faktem, iż po zmianie algorytmu roboty Google muszą przemieść ponownie cały internet, ponieważ pozycja naszej strony zależy między innymi od przychodzących do niej linków, dalej od "wartości" linkujących stron, których wartość zależy od wartości stron linkujących do nich itd. Zanim wszystko to nie zostanie do końca poindeksowane, mogą zdarzać się takie dziwne skoki.
Wracając jednak do Pandy, mimo że bestia to roślinożerna warto wiedzieć jak nie paść jej ofiarą. Oto kilka dobrych rad:
Po pierwsze i najważniejsze: odseparuj wszystkie treści niskiej jakości
O Google Panda wiedzieć trzeba jedno: wychwytuje ona treści słabej jakości. Jeśli znajdzie takie na Twojej stronie, automatycznie obniży jej ocenę nawet wtedy, gdy poza garstką śmieci znajdzie obok sporo treści wysokiej jakości.
Lepiej więc zablokować indeksowanie wszystkich treści niskiej jakości, aby zapobiec w ten sposób obniżeniu rankingu całej witryny.
No dobrze, ale co Google uważa za treści niskiej jakości? Otóż są to między innymi:
Nie kopiuj artykułów pochodzących z innych stron www. Nie kopiuj ich także i wtedy gdy zamierzasz dokonać "przeróbek" tak aby artykuł był "nie do poznania". Zwykle się to słabo udaje. Aby Panda nie wykryła podobieństwa, treści muszą różnić się zasadniczo. Naprawdę muszą być unikalne.
Uważaj z zatrudnianiem copywriterów dostarczających Ci 120 artykułów dziennie. Idę o zakład, że jedyną wątpliwością jaką będzie miała Panda oceniając takie treści, będzie wątpliwość do której kategorii Web Spamu je przydzielić.
Poza tym unikaj
Wiadomo, że w naszym okrutnym świecie pewnych zabiegów w zakresie SEO nie da się uniknąć, natomiast daleka jestem od zachwycania się wynikami pozycjonerów potrafiących śmieciową stronę wypromować do nieprzyzwoitości.
Dlatego wydarzenia ostatnich dni okrzyczane w mediach zajmujących się problematyką Internetu kolejnym armagedonem bardziej mnie cieszą niż martwią. Ale o co chodzi? Otóż chodzi o rzecz następującą: inżynierowie Google pracujący nad udoskonalaniem wyszukiwarki wprowadzają ponownie poważne zmiany w mechanizmie wyszukiwania. Po raz kolejny w tym roku wyniki wyszukiwania zachowują się zdumiewająco, a szczególnie dotyka to niektórych stron dotychczas ostro podkręconych przez pozycjonerów. Podobno na świecie zanotowano przypadki, kiedy liczba wejść na niektóre strony spadła tydzień do tygodnia o 98%
Na oko wygląda to wszystko na kolejny lifting mechanizmu o sympatycznej nazwie Panda, który to "zwierz" odpowiada za wyławianie kiepskich merytorycznie ale dobrze spreparowanych stron WWW
Jako przeciętny użytkownik Internetu chylę głowę przed mądrością wujka Googl'a. Bardzo mnie bowiem wkurza, gdy w trakcie pracy, szukając czegoś na już a właściwie na wczoraj, natrafiam na górze strony wyszukiwania na jakieś śmieciowe katalogi bezsensownych linków czy "inne takie". Poza tym uważam, że nadmierna podatność wyników wyszukiwania Google na zabiegi pozycjonerów jest z gruntu niedemokratyczna gdyż promuje tych, którzy poza kasą nie mają nic mądrego do przekazania ogółowi. Jak to się objawia? Ano tak, że wpisując w wyszukiwarkę dowolny niemal termin mamy wielką szansę trafić na górze wyników wyszukiwania, jeśli nie do katalogów, to do 125 sklepów oferujących mydło i powidło. Krótko mówiąc jak nie katalogi to sklepy. Możesz być sobie geniuszem i produkować tony świetnych treści, a mimo to bez kasy na pozycjonowanie wyżej d... nie podskoczysz. Czyż nie jest to bardzo niedemokratyczne?
Reasumując uważam, że Google robi dobrze. Chwała mu za to.
No dobrze. Ale dlaczego wyniki wyszukiwania nieco szaleją. Raz witryna jest na pierwszej stronie, raz na drugiej a potem na 10-tej. Moim zdaniem wiąże się to z faktem, iż po zmianie algorytmu roboty Google muszą przemieść ponownie cały internet, ponieważ pozycja naszej strony zależy między innymi od przychodzących do niej linków, dalej od "wartości" linkujących stron, których wartość zależy od wartości stron linkujących do nich itd. Zanim wszystko to nie zostanie do końca poindeksowane, mogą zdarzać się takie dziwne skoki.
Wracając jednak do Pandy, mimo że bestia to roślinożerna warto wiedzieć jak nie paść jej ofiarą. Oto kilka dobrych rad:
Po pierwsze i najważniejsze: odseparuj wszystkie treści niskiej jakości
O Google Panda wiedzieć trzeba jedno: wychwytuje ona treści słabej jakości. Jeśli znajdzie takie na Twojej stronie, automatycznie obniży jej ocenę nawet wtedy, gdy poza garstką śmieci znajdzie obok sporo treści wysokiej jakości.
Lepiej więc zablokować indeksowanie wszystkich treści niskiej jakości, aby zapobiec w ten sposób obniżeniu rankingu całej witryny.
No dobrze, ale co Google uważa za treści niskiej jakości? Otóż są to między innymi:
- powielone wielokrotnie na różnych stronach witryny artykuły o bardzo podobnej zawartości, różniące się od siebie niektórymi słowami lub grupami słów kluczowych. Typowym przykładem są strony sklepów internetowych gdzie występuje wiele produktów o zbliżonych opisach. Niestety jest to faktyczny problem, bo jak tu unikalnie opisać 150-tą pralkę?
- artykuły powielone na wielu różnych witrynach (jak wyżej, typowy przykład to strony sklepów internetowych gdzie opisy w różnych sklepach są bardzo podobne)
- treści posiadające niską "gęstość" to jest niski stosunek tekstu do znaczników html
- artykuły (teksty na stronach) zbyt krótkie lub zawierające dużo błędów (tak, tak, to też razi Pandę)
- artykuły generowane automatycznie. Google informuje, że obecnie Panda jest w stanie rozpoznać, czy artykuł został napisany ręką człowieka, czy też jest to zestaw zwrotów i zdań wygenerowanych z automatu. Wydaje się, że algorytm opiera się na wyszukiwaniu takich zestawień zwrotów które statystycznie nie występują w normalnym języku pisanym.
Nie kopiuj artykułów pochodzących z innych stron www. Nie kopiuj ich także i wtedy gdy zamierzasz dokonać "przeróbek" tak aby artykuł był "nie do poznania". Zwykle się to słabo udaje. Aby Panda nie wykryła podobieństwa, treści muszą różnić się zasadniczo. Naprawdę muszą być unikalne.
Uważaj z zatrudnianiem copywriterów dostarczających Ci 120 artykułów dziennie. Idę o zakład, że jedyną wątpliwością jaką będzie miała Panda oceniając takie treści, będzie wątpliwość do której kategorii Web Spamu je przydzielić.
Poza tym unikaj
- systemów wymiany linków. Oj, nie lubi tego Google.
- Key stuffing'u (przeładowania stron słowami kluczowymi, a już szczególnie gdy mają się one nijak do treści strony). Typowy przykład może wyglądać np tak: "Zapraszamy do naszego sklepu z ciepłymi szalikami. Nasze ciepłe szaliki są robione ręcznie. Sprzedawane u nas ciepłe szaliki są najlepsze na świecie. Kupuj nasze ciepłe szaliki, bo ciepłe szaliki warto mieć"
- Cloaking'u (to jest prezentowania robotom Google, a ogólnie wyszukiwarek, treści innych niż pozostałym odbiorcom)
- Nie używaj Doorway pages, to jest stron które prezentujesz robotom wyszukiwarek, zaś pozostałych użytkowników przekierowujesz z nich automatycznie do innej witryny. Typowe zachowanie Doorway page to takie, gdy wyszukiwarka widzi określoną treść która indeksuje, zaś użytkownik "ludzki" po kliknięciu linku w indeksie wyszukiwarki wchodzi na stronę tylko po to aby być z automatu przekierowywanym na inną stronę za pomocą np. javascriptu.
- Nie stosuj Page hijacking'u to jest tworzenia kopii prawdziwych stron tylko po to aby zostały zaindeksowane, zaś następnie automatycznie (jak Doorway pages) przekierowywały użytkowników na inne strony
- Ogólnie używaj redirect'ów rozsądnie i z umiarem
- Nie stosuj ukrytych tekstów bądź linków używanych po to aby wypełniać stronę nadmiarem informacyjnego szumu nacelowanego na wyszukiwarkę
wtorek, 30 października 2012
WordPress: Projektowanie własnego tematu WordPress, część 5
W poprzedniej części ukończyliśmy uzupełnianie szablonu nagłówka o elementy dynamiczne generowane przez silnik WordPress. Obecnie przystąpimy do uzupełniania szablonu stopki, która obecnie zawiera jedynie "czysty" html:
W tym celu wykorzystamy wymienioną poprzednio funkcję bloginfo() która wywołana z parametrem 'url' zwróci adres strony głównej naszego bloga, zaś wywołana z parametrem 'name' zwróci jego nazwę.
Niżej wyświetlimy łącza do listy naszych stron (wp_list_pages('title_li=')) oraz kategorii (wp_list_categories('title_li=')), gdyż podobno im więcej crosslinków tym lepiej.
Jesli chodzi o funkcję wp_list_pages('title_li='), możemy ją sparametryzowac według naszego uznania, dla przykładu kiedy chcemy ograniczyć liczbę wyświetlanych stron do kilku najistotniejszych, możemy zrobić to w sposób następujący:
gdzie 1, 5 i 8 są identyfikatorami stron (page id). Funkcja akceptuje również wiele innych parametrów:
z których warto wymienić
Na samym dole stopki wyświetlimy łącza do kanałów RSS'owych serwujących nasze artykuły: bloginfo('rss2_url') oraz komentarze: bloginfo('comments_rss2_url').
Tak oto otrzymamy kompletna stopkę naszego bloga wzbogaconą o gromadkę linków:
Pełna treść artykułu
</div><!-- #main --> <div id="footer"> <!-- stopka --> <div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki --> <div id="footer-info"> <!-- #footer-info --> </div> </div><!-- #footer-inner --> </div><!-- #footer --> </div> </body> </html>Podobnie jak nagłówek stopkę uzupełnimy o kilka informacji dynamicznie generowanych przez środowisko WordPress. U góry stopki umieścimy link do strony głównej, bo linków wewnętrznych nigdy nie jest za wiele:)
W tym celu wykorzystamy wymienioną poprzednio funkcję bloginfo() która wywołana z parametrem 'url' zwróci adres strony głównej naszego bloga, zaś wywołana z parametrem 'name' zwróci jego nazwę.
Niżej wyświetlimy łącza do listy naszych stron (wp_list_pages('title_li=')) oraz kategorii (wp_list_categories('title_li=')), gdyż podobno im więcej crosslinków tym lepiej.
Jesli chodzi o funkcję wp_list_pages('title_li='), możemy ją sparametryzowac według naszego uznania, dla przykładu kiedy chcemy ograniczyć liczbę wyświetlanych stron do kilku najistotniejszych, możemy zrobić to w sposób następujący:
<?php wp_list_pages('include=1,5,8&title_li=' ); ?>
gdzie 1, 5 i 8 są identyfikatorami stron (page id). Funkcja akceptuje również wiele innych parametrów:
<?php $args = array(
// parametry => wartosci domyślne parametrów
'depth' => 0,
'show_date' => '',
'date_format' => get_option('date_format'),
'child_of' => 0,
'exclude' => '',
'include' => '',
'title_li' => __('Pages'),
'echo' => 1,
'authors' => '',
'sort_column' => 'menu_order, post_title',
'link_before' => '',
'link_after' => '',
'walker' => '',
'post_type' => 'page',
'post_status' => 'publish'
); ?>
z których warto wymienić
- depth: określający maksymalny poziom zagłębienia do którego sięgamy w hierarchii stron (0 = bez ograniczeń)
- child_of: jeśli jest różny od zera, to wymusza wyświetlenie jedynie stron podrzędnych strony o podanym w tym parametrze identyfikatorze
- exclude: lista identyfikatorów stron które mają zostać wykluczone
- title_li: tytuł listy wyświetlanych stron
- sort_column: sposób sortowania wyników funkcji.
Na samym dole stopki wyświetlimy łącza do kanałów RSS'owych serwujących nasze artykuły: bloginfo('rss2_url') oraz komentarze: bloginfo('comments_rss2_url').
Tak oto otrzymamy kompletna stopkę naszego bloga wzbogaconą o gromadkę linków:
</div><!-- #main -->
<div id="footer"> <!-- stopka -->
<div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
<p>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">
<?php bloginfo('name'); ?>
</a> jest blogiem o ...
</p>
<ul class="footerlinks">
<?php wp_list_pages('title_li='); ?>
</ul>
<ul class="footerlinks">
<?php wp_list_categories('title_li='); ?>
</ul>
<div id="footer-info">
<!-- #footer-info -->
Copyright by © Windroos
</div>
</div><!-- #footer-inner -->
</div><!-- #footer -->
</div>
</body>
</html>
Pełna treść artykułu
czwartek, 25 października 2012
WordPress: Projektowanie własnego tematu WordPress, część 4
Budujemy temat WordPress
W poprzedniej części rozpoczęliśmy budowę tematu WordPress. Nasze dalsze działania rozpoczniemy od uzupełnienia szablonu nagłówka header.php o kolejne potrzebne elementy.
Obecnie nasz nagłówek zawiera "czysty" html:
Na wstępie uzupełnimy go o deklarację wersji językowej strony która umieścimy wewnątrz znacznika <html>:
Kolejnym krokiem będzie uzupełnienie sekcji head strony w tym meta tagów odpowiedzialnych za definiowanie tytułu, linków do arkuszów stylu itp. W tym celu sekcję <head></head> uzupełnimy w nastepujący sposób:
Znacznik title został uzupełniony kodem php który w zależności od typu strony generuje tytuł na podstawie atrybutów systemowych WordPressa. Dla przykładu dla stron wyszukiwania w tytule poza nazwą bloga (funkcja bloginfo(name);) pojawi się wpis Wyniki wyszukiwania dla oraz zawartość szukanej frazy (funkcja wp_specialchars($s);).
Trzeba tu koniecznie napisać kilka słów o funkcji bloginfo(). Funkcja ta służy do pobierania niektórych atrybutów systemowych WordPressa (głównie z profilu użytkownika i sekcji ustawień podstawowych systemu) i będzie często wykorzystywana we wszystkich szablonach, które zechcecie stworzyć.
W kolejnych wierszach mamy dynamicznie wygenerowane wartości metadanych dla meta tagów content-type i description, następnie zaś link do arkusza stylów.
Kolejny "tajemniczy" wiersz pozwala zainicjować skrypt ładujący wątki komentarzy dla stron, na których komentarze występują.
Funkcja wp_head(); w kolejnym wierszu jest hakiem który potrzebny jest po to, aby pluginy wyświetlane w dalszej części strony mogły za jego pośrednictwem załadować w nagłówku niezbędne im do funkcjonowania elementy (style, skrypty javascript).
Na koniec mamy odnośniki do RSS oraz pingback (pingback informuje o tym, że ktoś dodał linka do naszego bloga lub wpisu.)
W efekcie wprowadzonych modyfikacji nasz szablon nagłówka wygląda tak oto:
O ile sekcja head dokumentu html wygląda na ukończoną, o tyle kontenery które przygotowaliśmy na informacje w nagłówku strony są nadal puste. Najwyższy czas je uzupełnić.
Na poczatek w sekcji firma umieścimy warunkowy link do naszej strony głównej:
Kolejnym elementem niezbędnym na każdej stronie jest menu. Aby załadować w nagłówku menu WordPress skorzystamy z wbudowanej funkcji wp_page_menu(); Funkcja przyjmuje m.in. parametr pozwalający określić sposób uporządkowania wyświetlanych opcji menu oraz parametr pozwalający określić nazwę klasy CSS która zostanie przypisana głównemu kontenerowi menu. Dla przykładu:
Wywołanie powyższej funkcji umiescimy wewnątrz kontenera o identyfikatorze nav. Ostatecznie więc szablon nagłówka strony przybierze formę:
Na kolejnym etapie budowy tematu WordPress przystąpimy do uzupełniania stopki strony o elementy generowane przez silnik CMSa.
W poprzedniej części rozpoczęliśmy budowę tematu WordPress. Nasze dalsze działania rozpoczniemy od uzupełnienia szablonu nagłówka header.php o kolejne potrzebne elementy.
Obecnie nasz nagłówek zawiera "czysty" html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
Na wstępie uzupełnimy go o deklarację wersji językowej strony która umieścimy wewnątrz znacznika <html>:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
Kolejnym krokiem będzie uzupełnienie sekcji head strony w tym meta tagów odpowiedzialnych za definiowanie tytułu, linków do arkuszów stylu itp. W tym celu sekcję <head></head> uzupełnimy w nastepujący sposób:
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) {
bloginfo('name'); print '. '; bloginfo('description'); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) {
bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
elseif ( is_404() ) { bloginfo('name'); print '. Nie znaleziono'; }
else { bloginfo('name');}
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>"
title="<?php printf( 'Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>"
title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
Znacznik title został uzupełniony kodem php który w zależności od typu strony generuje tytuł na podstawie atrybutów systemowych WordPressa. Dla przykładu dla stron wyszukiwania w tytule poza nazwą bloga (funkcja bloginfo(name);) pojawi się wpis Wyniki wyszukiwania dla oraz zawartość szukanej frazy (funkcja wp_specialchars($s);).
Trzeba tu koniecznie napisać kilka słów o funkcji bloginfo(). Funkcja ta służy do pobierania niektórych atrybutów systemowych WordPressa (głównie z profilu użytkownika i sekcji ustawień podstawowych systemu) i będzie często wykorzystywana we wszystkich szablonach, które zechcecie stworzyć.
W kolejnych wierszach mamy dynamicznie wygenerowane wartości metadanych dla meta tagów content-type i description, następnie zaś link do arkusza stylów.
Kolejny "tajemniczy" wiersz pozwala zainicjować skrypt ładujący wątki komentarzy dla stron, na których komentarze występują.
Funkcja wp_head(); w kolejnym wierszu jest hakiem który potrzebny jest po to, aby pluginy wyświetlane w dalszej części strony mogły za jego pośrednictwem załadować w nagłówku niezbędne im do funkcjonowania elementy (style, skrypty javascript).
Na koniec mamy odnośniki do RSS oraz pingback (pingback informuje o tym, że ktoś dodał linka do naszego bloga lub wpisu.)
W efekcie wprowadzonych modyfikacji nasz szablon nagłówka wygląda tak oto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print '. '; bloginfo('description'); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
elseif ( is_404() ) { bloginfo('name'); print '. Nie znaleziono'; }
else { bloginfo('name');}
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>"
title="<?php printf('Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>"
title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
O ile sekcja head dokumentu html wygląda na ukończoną, o tyle kontenery które przygotowaliśmy na informacje w nagłówku strony są nadal puste. Najwyższy czas je uzupełnić.
Na poczatek w sekcji firma umieścimy warunkowy link do naszej strony głównej:
<div id="firma">
<?php if ( !is_home() && !is_front_page() ) { ?>
<div id="home-link">
<a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>" rel="home">
<?php bloginfo( 'name' ) ?>
</a>
</div>
<?php } ?>
</div>
Kolejnym elementem niezbędnym na każdej stronie jest menu. Aby załadować w nagłówku menu WordPress skorzystamy z wbudowanej funkcji wp_page_menu(); Funkcja przyjmuje m.in. parametr pozwalający określić sposób uporządkowania wyświetlanych opcji menu oraz parametr pozwalający określić nazwę klasy CSS która zostanie przypisana głównemu kontenerowi menu. Dla przykładu:
wp_page_menu(array( 'menu_class' => 'page-navi', 'sort_column' => 'menu_order' ));
Wywołanie powyższej funkcji umiescimy wewnątrz kontenera o identyfikatorze nav. Ostatecznie więc szablon nagłówka strony przybierze formę:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print '. '; bloginfo('description'); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
elseif ( is_404() ) { bloginfo('name'); print '. Nie znaleziono'; }
else { bloginfo('name');}
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>"
title="<?php printf('Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>"
title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<?php if ( !(is_home() || is_front_page()) ) { ?>
<div id="home-link">
<a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>" rel="home">
<?php bloginfo( 'name' ) ?>
</a>
</div>
<?php } ?>
</div>
<div id="nav">
<?php wp_page_menu(array( 'menu_class' => 'page-navi', 'sort_column' => 'menu_order' )); ?>
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
Na kolejnym etapie budowy tematu WordPress przystąpimy do uzupełniania stopki strony o elementy generowane przez silnik CMSa.
WordPress: Projektowanie własnego tematu WordPress, część 3
Od teorii do praktyki
W tym miejscu na moment porzucimy omawianie zasad działania WordPressa. Znamy już podstawową strukturę tematów, składających się na nie szablonów oraz funkcję najciekawszego mechanizmu systemu, czyli pętli.
Jak już wiemy "pliki szablonów są podstawowym składnikiem każdej strony WordPressa. Jak elementy puzzli poszczególne szablony składane są dynamicznie przez silnik systemu w całą stronę w odpowiedzi na żądanie wyświetlenia jej wysłane przez klienta."
Czas najwyższy aby zderzyć teorię z rzeczywistością. Wyobraźmy sobie, że docelowa struktura naszej strony www wyglądać będzie następująco:
Jak widać nasza strona jest dokumentem xhtml (transitional, ponieważ jest to obecnie najlepiej "sprawujący się" format dla WordPress), a składa się ogólnie mówiąc z nagłówka i stopki z kilkoma elementami wewnętrznymi oraz z głównego "kontenera" na treść w postaci div'a o identyfikatorze "main". Słowo kontener użyte zostało w tym kontekście nieprzypadkowo. Zobaczymy zaraz, że większość widocznych na listingu elementów typu div pełni funkcję kontenerów na fragmenty kodu xhtml które generował będzie silnik WordPress.
Div "main" zawiera między innymi kontener na zasadniczą treść strony (div o identyfikatorze "content") oraz dwa kontenery na widgety. Wygląd oraz położenie tych elementów na stronie określimy w arkuszu stylów CSS, obecnie zaś wystarczy wiedzieć, iż wyświetlone zostaną one w 3 kolumnach. Element #content umieszczony został jako pierwszy w przedstawionej strukturze, gdyż rozwiązanie takie jest najbardziej przyjazne wyszukiwarkom (zasadnicza treść umieszczona przed widgetami, czyli pod kątem pozycjonowania mniej istotną zawartością).
Szablony fragmentów strony
Nasza wzorcowa struktura strony musi zostać obecnie przełożona na formę zrozumiałą dla WordPressa. W tym celu podzielmy wzorcowy html na fragmenty które odpowiadać będą fragmentom strony w ramach tematu (WordPress theme).
Na pierwszy ogień weźmiemy nagłówek i stopkę. Szablon nagłówka strony utworzymy poprzez "wycięcie" z wzorca fragmentu kodu xhtml rozpoczynając od znacznika <html> (a właściwie deklaracji DOCTYPE) poprzez nagłówek html'a, znacznik <body> po otwierający główny kontener znacznik <div id="main"> włącznie:
Otrzymany w ten sposób szablon zapisujemy pod nazwą header.php. Podobnie czynimy tworząc szablon stopki. Kopiujemy kod html poczynając od znacznika zamykającego kontener główny a kończąc na tagu zamykającym dokument:
Otrzymany w ten sposób szablon zapisujemy jako plik footer.php.
Kolejnym naszym krokiem powinno być stworzenie pliku index.php. Jak łatwo się domyślić, jego treść uzyskujemy kopiując pozostały we wzorcu nieskopiowany dotychczas kod:
Aby szablon miał szanse działać, plik index.php uzupełniamy kodem php odpowiedzialnym za ładowanie nagłówka i stopki:
W ten sposób uzyskaliśmy główny plik szablonu, od załadowania którego silnik WordPress rozpoczyna procedurę aplikowania wskazanego tematu. Jednakże budowa szablonu bynajmniej nie kończy się w tym miejscu, zaś kolejnym etapem naszych działań będzie uzupełnienie szablonów nagłówka i stopki o kolejne niezbędne elementy.
Ciąg dalszy wkrótce ...
Pełna treść artykułu
W tym miejscu na moment porzucimy omawianie zasad działania WordPressa. Znamy już podstawową strukturę tematów, składających się na nie szablonów oraz funkcję najciekawszego mechanizmu systemu, czyli pętli.
Jak już wiemy "pliki szablonów są podstawowym składnikiem każdej strony WordPressa. Jak elementy puzzli poszczególne szablony składane są dynamicznie przez silnik systemu w całą stronę w odpowiedzi na żądanie wyświetlenia jej wysłane przez klienta."
Czas najwyższy aby zderzyć teorię z rzeczywistością. Wyobraźmy sobie, że docelowa struktura naszej strony www wyglądać będzie następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
</div><!-- #main -->
<div id="footer"> <!-- stopka -->
<div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
<div id="footer-info">
<!-- #footer-info -->
</div>
</div><!-- #footer-inner -->
</div><!-- #footer -->
</div>
</body>
</html>
Jak widać nasza strona jest dokumentem xhtml (transitional, ponieważ jest to obecnie najlepiej "sprawujący się" format dla WordPress), a składa się ogólnie mówiąc z nagłówka i stopki z kilkoma elementami wewnętrznymi oraz z głównego "kontenera" na treść w postaci div'a o identyfikatorze "main". Słowo kontener użyte zostało w tym kontekście nieprzypadkowo. Zobaczymy zaraz, że większość widocznych na listingu elementów typu div pełni funkcję kontenerów na fragmenty kodu xhtml które generował będzie silnik WordPress.
Div "main" zawiera między innymi kontener na zasadniczą treść strony (div o identyfikatorze "content") oraz dwa kontenery na widgety. Wygląd oraz położenie tych elementów na stronie określimy w arkuszu stylów CSS, obecnie zaś wystarczy wiedzieć, iż wyświetlone zostaną one w 3 kolumnach. Element #content umieszczony został jako pierwszy w przedstawionej strukturze, gdyż rozwiązanie takie jest najbardziej przyjazne wyszukiwarkom (zasadnicza treść umieszczona przed widgetami, czyli pod kątem pozycjonowania mniej istotną zawartością).
Szablony fragmentów strony
Nasza wzorcowa struktura strony musi zostać obecnie przełożona na formę zrozumiałą dla WordPressa. W tym celu podzielmy wzorcowy html na fragmenty które odpowiadać będą fragmentom strony w ramach tematu (WordPress theme).
Na pierwszy ogień weźmiemy nagłówek i stopkę. Szablon nagłówka strony utworzymy poprzez "wycięcie" z wzorca fragmentu kodu xhtml rozpoczynając od znacznika <html> (a właściwie deklaracji DOCTYPE) poprzez nagłówek html'a, znacznik <body> po otwierający główny kontener znacznik <div id="main"> włącznie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
Otrzymany w ten sposób szablon zapisujemy pod nazwą header.php. Podobnie czynimy tworząc szablon stopki. Kopiujemy kod html poczynając od znacznika zamykającego kontener główny a kończąc na tagu zamykającym dokument:
</div><!-- #main -->
<div id="footer"> <!-- stopka -->
<div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
<div id="footer-info">
<!-- #footer-info -->
</div>
</div><!-- #footer-inner -->
</div><!-- #footer -->
</div>
</body>
</html>
Otrzymany w ten sposób szablon zapisujemy jako plik footer.php.
Kolejnym naszym krokiem powinno być stworzenie pliku index.php. Jak łatwo się domyślić, jego treść uzyskujemy kopiując pozostały we wzorcu nieskopiowany dotychczas kod:
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
Aby szablon miał szanse działać, plik index.php uzupełniamy kodem php odpowiedzialnym za ładowanie nagłówka i stopki:
<?php get_header(); ?>
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
<?php get_footer(); ?>
W ten sposób uzyskaliśmy główny plik szablonu, od załadowania którego silnik WordPress rozpoczyna procedurę aplikowania wskazanego tematu. Jednakże budowa szablonu bynajmniej nie kończy się w tym miejscu, zaś kolejnym etapem naszych działań będzie uzupełnienie szablonów nagłówka i stopki o kolejne niezbędne elementy.
Ciąg dalszy wkrótce ...
Pełna treść artykułu
sobota, 20 października 2012
Matematyka i Web Design: liczby Fibonacci'ego
Zrozumienie czym jest ciąg Fibonacci'ego wymaga od nas "cofnięcia się" do czasów kursu matematyki w szkole średniej (na pierwszym roku studiów?). To oczywiście żart, zakładam bowiem, że teoria ciągów nie jest nikomu obca.
Ciąg Fibonacci'ego to ciąg liczb naturalnych określony rekurencyjnie w sposób następujący:
Innymi słowy, ciąg składa się z elementów (dla n>1) których wartość jest sumą dwóch poprzednich składników. Pierwszych piętnaście wartości ciągu to: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377.
Ciąg zawdzięcza swoją nazwę matematykowi z Pizy, Leonardowi, który pod nazwiskiem Fibonacci wydał w 1202 roku słynną księgę Liber Abaci. Ojciec Leonarda nosił przydomek Bonacci, stąd syn został Fibonaccim (filius Bonacci - syn dobrotliwego).
Ciąg Fibonacciego wiąże się z takimi koncepcjami matematycznymi jak:
Za średniowiecznym włoskim matematykiem Lucą Pacioli przyjęto, że będąca miarą złotego podziału liczba Φ przybliżana jest z dokładnością do trzech miejsc po przecinku . Stąd też w opracowaniach często podaje się, że Φ=1,618.
Φ posiada wiele ciekawych własności matematycznych, na przykład:
Złoty prostokąt to prostokąt którego krawędzie pozostają w złotym stosunku. Okazuje się, że po dorysowaniu doń kwadratu o boku równym dłuższemu bokowi prostokąta otrzymuje się nowy, większy złoty prostokąt. Stąd stosunek długości boków wyraża się zależnością:
Odpowiednio w drugą stronę, odcinając od złotego prostokąta kwadrat o boku równym krótszemu bokowi prostokąta otrzymuje się prostokąt, którego boki nadal pozostają w złotym stosunku.
Powtarzając te czynności otrzymuje się kolejne coraz większe lub coraz mniejsze złote prostokąty.
Złotym kątem jest kąt środkowy oparty na mniejszym z dwóch łuków powstałych w wyniku złotego podziału okręgu ( w przybliżeniu jest to 137,5 stopnia). Iloraz miary tego kąta i jego dopełnienia do kąta pełnego jest równy złotej liczbie (stąd nazwa). Jeśli jako a oznaczymy łuk na którym oparty jest złoty kąt, jako b jego dopełnienie do 360 stopni, zaś jako c obwód okręgu, to otrzymamy zależność:
Rys. Złoty kąt (źródło: wikipedia.org)
Złoty kąt pełni ważna rolę w teorii ulistnienia jako kąt dywergencji (kąt, jaki tworzą między sobą promienie biegnące od osi łodygi do 2 kolejno tworzonych liści). Bracia Bravais badając rośliny zauważyli, że najczęściej występującym kątem dywergencji jest złoty kąt.
Złota spirala i spirala fibonacciego są spiralami których proporcje są oparte o proporcje serii złotych prostokątów. Spirale konstruujemy wrysowując je w kwadraty o długościach boków proporcjonalnych do wartości kolejnych liczb ciągu. Złota spirala jest właściwie serią ćwierć okręgów wpisanych w kwadraty. które z kolei zostały wpisane w złote prostokąty jak widać to na poniższym rysunku
Obie spirale zbliżone są proporcjami, jednakże złota spirala jest spiralą logarytmiczną, zaś spirala fibonacciego nie. Kształty spiralne zbliżone do wymienionych spotykane są niezwykle często w przyrodzie. Wymienić tu można:
Liczby Fibonacciego pojawiają się w tak wielu sytuacjach i zjawiskach, że wydaje się to zupełnie nieprawdopodobne. Ciąg fibonacciego opisuje np. liczbę pędów rośliny jednostajnie przyrastających w kolejnych latach. W słoneczniku możemy zaobserwować dwa układy linii spiralnych, wychodzących ze środka. Liczba linii rozwijających się zgodnie z ruchem wskazówek zegara wynosi 55 natomiast 34 skręconych w przeciwną stronę. Takie same spirale można zaobserwować na wielu innych roślinach ( np. kalafior, ananas). Liczby spiral występujących w tych roślinach są kolejnymi liczbami Fibonacciego.
Liczby Fibonacciego były i są stosowane w wielu aspektach działalności i twórczości człowieka. W XX wieku ciąg Fibonacciego stosowany był przez niektórych kompozytorów do proporcjonalnego porządkowania rytmu lub harmonii. Na ciągu Fibonacciego zbudowane jest między innymi Trio klarnetowe Krzysztofa Meyera. Złote proporcje wywodzące się z ciągu Fibonacciego wykorzystano w starożytności podczas wznoszenia piramidy Cheopsa w Gizie oraz Partenonu w Grecji.
Wartości oraz proporcje wywodzące się z ciągu Fibonacciego wykorzystuje się współcześnie w wielu dziedzinach związanych z projektowaniem. Web Design jest dziedziną gdzie również warto rozważyć ich stosowanie. W jednym z moich poprzednich artykułów pisałam o złotym podziale w projektowaniu stron internetowych. Ale też pozostałe opisane konstrukty matematyczne wykorzystać możemy projektując grafikę stron internetowych.
Z uwagi na swoje cechy w tym przypisywaną im "naturalność" złoty podział, złoty prostokąt oraz złota spirala znajdują swoje szerokie zastosowanie w dziedzinie niezwykle bliskiej projektowaniu stron www, a mianowicie w fotografii, gdzie należą do kanonu komponowania zdjęć.
Dzieje się tak, ponieważ umysł ludzki postrzega proporcje opisane liczbami Fibonacciego jako wyjątkowo eleganckie i klasyczne. Projektant jest w gruncie rzeczy ograniczony jedynie własną kreatywnością jeśli chodzi o wykorzystanie zasad klasycznych proporcji. Najczęściej wartości wynikające ze stosunku kolejnych liczb Fibonacciego stosuje się do obliczania rozmiaru poszczególnych bloków strony. Nie chodzi tutaj o to, aby rozmiary bloków strony były dokładnie równe kolejnym liczbom z ciągu Fibonacciego, możemy zastosować odpowiedni przelicznik. Tak czy inaczej bowiem uzyskamy w ten sposób odpowiednie proporcje elementów.
Dla przykładu w wielu swoich projektach korzystam z proporcji wyliczonych z ciągu fibonacciego budując elementy siatki na której opieram kompozycję całej witryny.
Trzeba przy tym pamiętać, iż opieranie proporcji elementów strony o proporcje złotych prostokątów czy podobne konstrukcje wiąże się z pewną umownością. O ile strony internetowe ze swojej natury posiadają określoną szerokość, o tyle długość strony jest zwykle płynna i dostosowuje się do rozmiarów zawartości (na przykład ilości tekstu). Możemy jedynie zadbać, aby proporcje elementów widocznych w danej chwili na ekranie były odpowiednio zestawione.
Ciąg dalszy nastąpi...
Ciąg Fibonacci'ego to ciąg liczb naturalnych określony rekurencyjnie w sposób następujący:
Rys. definicja ciągu Fibonacci'ego
Innymi słowy, ciąg składa się z elementów (dla n>1) których wartość jest sumą dwóch poprzednich składników. Pierwszych piętnaście wartości ciągu to: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377.
Ciąg zawdzięcza swoją nazwę matematykowi z Pizy, Leonardowi, który pod nazwiskiem Fibonacci wydał w 1202 roku słynną księgę Liber Abaci. Ojciec Leonarda nosił przydomek Bonacci, stąd syn został Fibonaccim (filius Bonacci - syn dobrotliwego).
Ciąg Fibonacciego wiąże się z takimi koncepcjami matematycznymi jak:
- Złoty podział odcinka stworzony po raz pierwszy przez Euklidesa
- Złoty podział prostokąta(złoty prostokąt)
- Złoty kąt
- Złota spirala i spirala fibonacciego
- Elipsa logarytmiczna
Za średniowiecznym włoskim matematykiem Lucą Pacioli przyjęto, że będąca miarą złotego podziału liczba Φ przybliżana jest z dokładnością do trzech miejsc po przecinku . Stąd też w opracowaniach często podaje się, że Φ=1,618.
Φ posiada wiele ciekawych własności matematycznych, na przykład:
Złoty prostokąt to prostokąt którego krawędzie pozostają w złotym stosunku. Okazuje się, że po dorysowaniu doń kwadratu o boku równym dłuższemu bokowi prostokąta otrzymuje się nowy, większy złoty prostokąt. Stąd stosunek długości boków wyraża się zależnością:
Odpowiednio w drugą stronę, odcinając od złotego prostokąta kwadrat o boku równym krótszemu bokowi prostokąta otrzymuje się prostokąt, którego boki nadal pozostają w złotym stosunku.
Powtarzając te czynności otrzymuje się kolejne coraz większe lub coraz mniejsze złote prostokąty.
Rys. Złoty prostokąt (źródło: wikipedia.org)
Złotym kątem jest kąt środkowy oparty na mniejszym z dwóch łuków powstałych w wyniku złotego podziału okręgu ( w przybliżeniu jest to 137,5 stopnia). Iloraz miary tego kąta i jego dopełnienia do kąta pełnego jest równy złotej liczbie (stąd nazwa). Jeśli jako a oznaczymy łuk na którym oparty jest złoty kąt, jako b jego dopełnienie do 360 stopni, zaś jako c obwód okręgu, to otrzymamy zależność:
Rys. Złoty kąt (źródło: wikipedia.org)
Złoty kąt pełni ważna rolę w teorii ulistnienia jako kąt dywergencji (kąt, jaki tworzą między sobą promienie biegnące od osi łodygi do 2 kolejno tworzonych liści). Bracia Bravais badając rośliny zauważyli, że najczęściej występującym kątem dywergencji jest złoty kąt.
Złota spirala i spirala fibonacciego są spiralami których proporcje są oparte o proporcje serii złotych prostokątów. Spirale konstruujemy wrysowując je w kwadraty o długościach boków proporcjonalnych do wartości kolejnych liczb ciągu. Złota spirala jest właściwie serią ćwierć okręgów wpisanych w kwadraty. które z kolei zostały wpisane w złote prostokąty jak widać to na poniższym rysunku
Rys. Złota spirala
Obie spirale zbliżone są proporcjami, jednakże złota spirala jest spiralą logarytmiczną, zaś spirala fibonacciego nie. Kształty spiralne zbliżone do wymienionych spotykane są niezwykle często w przyrodzie. Wymienić tu można:
- kształt muszli ślimaka
- kształt ramion galaktyk, w tym drogi mlecznej
- kształt wirów huraganów i tornad
Liczby Fibonacciego pojawiają się w tak wielu sytuacjach i zjawiskach, że wydaje się to zupełnie nieprawdopodobne. Ciąg fibonacciego opisuje np. liczbę pędów rośliny jednostajnie przyrastających w kolejnych latach. W słoneczniku możemy zaobserwować dwa układy linii spiralnych, wychodzących ze środka. Liczba linii rozwijających się zgodnie z ruchem wskazówek zegara wynosi 55 natomiast 34 skręconych w przeciwną stronę. Takie same spirale można zaobserwować na wielu innych roślinach ( np. kalafior, ananas). Liczby spiral występujących w tych roślinach są kolejnymi liczbami Fibonacciego.
Liczby Fibonacciego były i są stosowane w wielu aspektach działalności i twórczości człowieka. W XX wieku ciąg Fibonacciego stosowany był przez niektórych kompozytorów do proporcjonalnego porządkowania rytmu lub harmonii. Na ciągu Fibonacciego zbudowane jest między innymi Trio klarnetowe Krzysztofa Meyera. Złote proporcje wywodzące się z ciągu Fibonacciego wykorzystano w starożytności podczas wznoszenia piramidy Cheopsa w Gizie oraz Partenonu w Grecji.
Wartości oraz proporcje wywodzące się z ciągu Fibonacciego wykorzystuje się współcześnie w wielu dziedzinach związanych z projektowaniem. Web Design jest dziedziną gdzie również warto rozważyć ich stosowanie. W jednym z moich poprzednich artykułów pisałam o złotym podziale w projektowaniu stron internetowych. Ale też pozostałe opisane konstrukty matematyczne wykorzystać możemy projektując grafikę stron internetowych.
Z uwagi na swoje cechy w tym przypisywaną im "naturalność" złoty podział, złoty prostokąt oraz złota spirala znajdują swoje szerokie zastosowanie w dziedzinie niezwykle bliskiej projektowaniu stron www, a mianowicie w fotografii, gdzie należą do kanonu komponowania zdjęć.
Dzieje się tak, ponieważ umysł ludzki postrzega proporcje opisane liczbami Fibonacciego jako wyjątkowo eleganckie i klasyczne. Projektant jest w gruncie rzeczy ograniczony jedynie własną kreatywnością jeśli chodzi o wykorzystanie zasad klasycznych proporcji. Najczęściej wartości wynikające ze stosunku kolejnych liczb Fibonacciego stosuje się do obliczania rozmiaru poszczególnych bloków strony. Nie chodzi tutaj o to, aby rozmiary bloków strony były dokładnie równe kolejnym liczbom z ciągu Fibonacciego, możemy zastosować odpowiedni przelicznik. Tak czy inaczej bowiem uzyskamy w ten sposób odpowiednie proporcje elementów.
Dla przykładu w wielu swoich projektach korzystam z proporcji wyliczonych z ciągu fibonacciego budując elementy siatki na której opieram kompozycję całej witryny.
Trzeba przy tym pamiętać, iż opieranie proporcji elementów strony o proporcje złotych prostokątów czy podobne konstrukcje wiąże się z pewną umownością. O ile strony internetowe ze swojej natury posiadają określoną szerokość, o tyle długość strony jest zwykle płynna i dostosowuje się do rozmiarów zawartości (na przykład ilości tekstu). Możemy jedynie zadbać, aby proporcje elementów widocznych w danej chwili na ekranie były odpowiednio zestawione.
Ciąg dalszy nastąpi...
sobota, 13 października 2012
Jak budować własny Fan page
W kolejnej części cyklu artykułów o Fan pages na Facebooku spróbujemy przyjrzeć się temu, jak zorganizować własną stronę fanów.
Przy pomocy Facebook’a można zrobić niemalże wszystko. Poza komunikowania się z przyjaciółmi, Facebook pozwala grać w gry, organizować imprezy, umawiać sesje zdjęciowe, dzielić się filmami czy muzyką. Media społecznościowe mogą być potężnym narzędziem promocyjnym, dlatego warto aby właściciele firm również przyłączali się do tego szaleństwa. W poprzednim artykule na temat Fan pages pisałam o tym bardziej szczegółowo.
Wracając do Fan page, stworzenie własnej strony jest łatwe i nie wymaga szczególnych kompetencji technicznych. Jednak aby Twój „Fanpejdż” miał szansę odnieść sukces, trzeba zadbać o kilka istotnych szczegółów.
Dobra strona startowa
„Landing page” czyli strona startowa jest pierwszą rzeczą, jaką użytkownik widzi na Twoim Fan page. Pierwsze wrażenie jest bardzo istotne, gdyż może go ono przekonać potencjalnego fana do pozostania na stronie, a co więcej do tego by ją „polubił”. Dlatego trzeba mieć bardzo dobrą stronę docelową. Ważna jest grafika, ogólny wygląd strony. Możesz też osiągnąć wyjątkową i przekonującą stronę przy użyciu odpowiednich aplikacji. Dodając do nich odpowiednią treść w sposób pozytywny pobudzisz zainteresowanie użytkownika.
Pamiętaj o wizerunku firmy
W Twoim Fan page wyróżniać się będą przede wszystkim dwie ilustracje, ale wszystkie inne fotografie które zamieszczasz muszą budować pozytywny wizerunek firmy. Na stronie startowej warto podać dane teleadresowe firmy, tak aby Twoi potencjalni Klienci wiedzieli gdzie znaleźć Cię w realu.
Dobra nazwa strony
Nazwa jest bardzo istotna. Dobierz ją tak, aby była łatwa do zapamiętania. Prawdopodobnie najlepszym pomysłem będzie użycie w nazwie Twojej firmy. Warto postarać się tak skonstruować nazwę aby odnieść jakieś korzyści w zakresie indeksowania strony przez wyszukiwarki, z drugiej jednak strony nazwa nie może być zbyt nachalną reklamą, przeładowaną dodatkowo słowami kluczowymi. Pamiętaj że nazwa Fan page pojawiać się będzie w razie aktualizacji na profilach Twoich klientów, a nic tak bardzo nie drażni jak wiadomości opatrzone „spamerskimi” tytułami. Jest to najszybsza droga do tego, aby użytkownik przestał je czytać i wyrzucił je ze swojego pulpitu.
Pełna treść artykułu
czwartek, 11 października 2012
Dlaczego warto mieć Fan page
Zapewne wielu z nas zna osoby spędzające na Facebooku całe dnie. Takie zjawisko jak i samą popularność Facebooka można rozpatrywać wielostronnie, gdy jednak spojrzeć na nie chłodno z pozycji właściciela firmy czy też pracownika działu marketingu, to łatwo zauważyć rodzące się okazje. Facebook oferuje nam darmowe narzędzie marketingowe z którego żal nie skorzystać.
Jeśli więc masz firmę a nie masz jeszcze Fanpage, to tracisz bezpowrotnie okazję darmowej reklamy, tracisz po prostu wielu potencjalnych klientów.
Oto kilka powodów, dla których powinieneś jak najszybciej utworzyć Facebook Fan Page:
Po pierwsze i najważniejsze, obecnie Facebook chwali się niemal miliardem użytkowników na całym świecie. Czy w świetle tej wiadomości trzeba dodatkowo tłumaczyć dlaczego warto reklamować się na Facebooku? Szczególnie gdy to nic nie kosztuje?
Fan page na Facebooku zapewnia stałą interakcję z klientem. Jeśli osoba "polubi" Twoją stronę, to jednocześnie zapisuje się na informacje o aktualizacji Twojego "fanpejdża". Gdy tylko wprowadzisz na stronie nowe informacje, informacja o tym zostanie przekazana Twoim potencjalnym klientom.
Interakcje mogą być znacznie głębsze. Jeśli ktoś lubi twój Fan page, to jednocześnie udostępnia Ci możliwość korzystania ze wspólnych narzędzi komunikacyjnych. Od momentu gdy ktoś Cię polubi, otrzymujesz możliwość komunikowania się z nim poprzez dyskusje, ankiety itp.
Łatwość poszerzania bazy klientów to także kolejna zaleta Fan page. Gdy rozsądnie prowadzisz swojego "fanpejdża", umieszczasz na nim artykuły czy filmy, to mogą one być (i zwykle są) udostępniane przez tych którzy lubią Twoją stronę kolejnym użytkownikom bez Twojego udziału. Dzięki temu pochodzące od Ciebie materiały są promowane i rozpowszechniane rękami Twoich Klientów. Facebook to doprawdy genialne narzędzie marketingowe.
W końcu świat reklamy ewoluuje w kierunku reklamy sprofilowanej pod zainteresowania klienta. A mechanizmy Facebooka dostarczają klientom takich reklam które współgrają z ich zainteresowaniami. W końcu znajomi dzielą się między sobą tym, co jest zgodne z zainteresowaniami czy potrzebami obu stron.
Pełna treść artykułu
Jeśli więc masz firmę a nie masz jeszcze Fanpage, to tracisz bezpowrotnie okazję darmowej reklamy, tracisz po prostu wielu potencjalnych klientów.
Oto kilka powodów, dla których powinieneś jak najszybciej utworzyć Facebook Fan Page:
Po pierwsze i najważniejsze, obecnie Facebook chwali się niemal miliardem użytkowników na całym świecie. Czy w świetle tej wiadomości trzeba dodatkowo tłumaczyć dlaczego warto reklamować się na Facebooku? Szczególnie gdy to nic nie kosztuje?
Fan page na Facebooku zapewnia stałą interakcję z klientem. Jeśli osoba "polubi" Twoją stronę, to jednocześnie zapisuje się na informacje o aktualizacji Twojego "fanpejdża". Gdy tylko wprowadzisz na stronie nowe informacje, informacja o tym zostanie przekazana Twoim potencjalnym klientom.
Interakcje mogą być znacznie głębsze. Jeśli ktoś lubi twój Fan page, to jednocześnie udostępnia Ci możliwość korzystania ze wspólnych narzędzi komunikacyjnych. Od momentu gdy ktoś Cię polubi, otrzymujesz możliwość komunikowania się z nim poprzez dyskusje, ankiety itp.
Łatwość poszerzania bazy klientów to także kolejna zaleta Fan page. Gdy rozsądnie prowadzisz swojego "fanpejdża", umieszczasz na nim artykuły czy filmy, to mogą one być (i zwykle są) udostępniane przez tych którzy lubią Twoją stronę kolejnym użytkownikom bez Twojego udziału. Dzięki temu pochodzące od Ciebie materiały są promowane i rozpowszechniane rękami Twoich Klientów. Facebook to doprawdy genialne narzędzie marketingowe.
W końcu świat reklamy ewoluuje w kierunku reklamy sprofilowanej pod zainteresowania klienta. A mechanizmy Facebooka dostarczają klientom takich reklam które współgrają z ich zainteresowaniami. W końcu znajomi dzielą się między sobą tym, co jest zgodne z zainteresowaniami czy potrzebami obu stron.
Pełna treść artykułu
wtorek, 9 października 2012
"Landing page"
Hasło „landing page” oznacza pierwszą stronę witryny, stronę na której najczęściej „lądują” internauci. Wszystkie witryny i portale internetowe, nawet jeśli nie są zaprojektowane w wyjątkowy sposób, mają swoją landing page.
Landing page (strona docelowa) ma istotny wpływ na wizerunek każdej witryny, a szczególnie witryny e-commerce. Słabo zaprojektowane mogą wpływać negatywnie na rozwój firmy w internecie, przemyślane strony tego typu mogą zwiększyć ruch na stronie, sklepie, zachęcając do akcji i podejmowania dalszych działań. Przyczyniają się tym samym do sukcesu strony firmowej.
Najważniejszym miernikiem skuteczności „landing page” jest tzw. "współczynnik odrzuceń" jest to procent użytkowników, którzy natychmiast opuszczają witrynę bez żadnego innego kliknięcia. Ilość odrzuceń jest odwrotnie proporcjonalna do skuteczności strony docelowej. Wysoki wskaźnik odrzuceń zasadniczo oznacza, że strona docelowa nie jest na tyle przekonująca dla odwiedzających, aby wykazali większe zainteresowanie nią lub podejmowali na niej inne działania. Normalnie, strona główna jest podstawową stroną docelową większości typowych witryn, jednakże coraz częściej właściciele stron umieszczają „landing page” poza stroną główną i to z dobrym skutkiem.
Większość użytkowników woli pomijać informacje, które są dla nich nieistotne. Chcą otrzymać dokładnie to czego poszukują czyli „landing page”, która dostarcza dokładnie tych poszukiwanych informacji. Unikają tym samym straty czasu spowodowanej koniecznością klikania ze strony na stronę. Strony docelowe spełniają swoje zadanie, gdy właściciel zdaje sobie sprawę z tego jaki rodzaj użytkowników jest na nią kierowanych, wie co odwiedzający musi kliknąć aby znaleźć się na jego stronie. Przykład: Potencjalny klient po kliknięciu w reklamę produktu nie chce przechodzić przez szereg stron aby znaleźć informacje o produkcie. Chce te informacje otrzymać po jednym kliknięciu.
Nie wszyscy odwiedzający szukają tych samych informacji, jedni mogą kliknąć na Twój link po przeczytaniu artykułu, który udostępniłeś w przeglądarce podczas gdy drudzy dotrą do strony po wejściu na Twoją reklamę. Dla każdego szczególnego gościa można zaprojektować landing page, która zaspokoi jego potrzeby i zawiera informacje których poszukuje.
Landing pages powinny być poddane ocenie ich efektywności. Opisany wcześniej wskaźnik odrzuceń jest kluczowym miernikiem ale nie jedynym. Innym miernikiem jest sukces tzw. „kolejnej akcji”, może to być zakup produktu, uzyskanie większej ilości informacji, zapisanie się na darmowe testy produktu itd. Możemy określić tzw. współczynnik konwersji poprzez podzielenie liczby podejmujących działania na liczbę odwiedzających. Typowy współczynnik konwersji wynosi 3 do 5 procent dla wiodących stron oraz 1 do 2 procent dla stron e-commerce. Twoja witryna osiągnie sukces jeśli otrzymasz wynik dwukrotny.
Pojęciem, które jest nieodłącznym elementem tworzenia skutecznych stron docelowych jest tzw. "wyrównanie". Jest to połączenie między źródłem (skąd użytkownik przychodzi) i strony docelowej. Im bardziej są związane, tym wyższy sukces konwersji.
Dobrym przykładem jest baner reklamowy konkretnego produktu z firmy kosmetycznej. Kliknięcie w baner reklamowy i skierowanie użytkownika bezpośrednio na „landing page” z opisem dokładnie tego produktu, daje to bardzo wysoki współczynnik konwersji.
DOBRA LANDING PAGE POWINNA BYĆ:
Wiarygodna
Strona musi zyskać zaufanie odwiedzającego poprzez wiarygodny wygląd. Usuń wszystko, co może spowodować negatywne skojarzenia w świadomości użytkowników, takie jak:
-brak informacji kontaktowych
-błędy gramatyczne i literówki
-potoczne wyrażenia
-rozciągnięta, toporna grafika
-zbyt dużo czcionek typu serif ( np. Times New Roman )
Przekonująca
Twoja strona musi być w stanie przekonać gości, że produkt lub usługa może pomóc im osiągnąć ich cel. Pamiętaj, o tym co jako pierwsze przyciągnęło gości do Twojego produktu, więc możesz zrozumieć, czego odwiedzający szuka.
Rozpoznawalna
Twoja strona musi wywołać w odwiedzającym myśl „To jest dokładnie tom czego szukam!” zaraz po załadowaniu.
Zachęcająca do akcji
Musisz nałożyć nacisk na podjęcie akcji przez użytkownika, podczas gdy jest on na stronie docelowej.
JAK ZAPROJEKTOWAĆ SKUTECZNĄ STRONĘ DOCELOWĄ.
Oto główne zasady, które prowadzą użytkownika w procesie tworzenia skutecznej strony docelowej:
Czytaj dalszy ciąg artykułu
Landing page (strona docelowa) ma istotny wpływ na wizerunek każdej witryny, a szczególnie witryny e-commerce. Słabo zaprojektowane mogą wpływać negatywnie na rozwój firmy w internecie, przemyślane strony tego typu mogą zwiększyć ruch na stronie, sklepie, zachęcając do akcji i podejmowania dalszych działań. Przyczyniają się tym samym do sukcesu strony firmowej.
Najważniejszym miernikiem skuteczności „landing page” jest tzw. "współczynnik odrzuceń" jest to procent użytkowników, którzy natychmiast opuszczają witrynę bez żadnego innego kliknięcia. Ilość odrzuceń jest odwrotnie proporcjonalna do skuteczności strony docelowej. Wysoki wskaźnik odrzuceń zasadniczo oznacza, że strona docelowa nie jest na tyle przekonująca dla odwiedzających, aby wykazali większe zainteresowanie nią lub podejmowali na niej inne działania. Normalnie, strona główna jest podstawową stroną docelową większości typowych witryn, jednakże coraz częściej właściciele stron umieszczają „landing page” poza stroną główną i to z dobrym skutkiem.
Większość użytkowników woli pomijać informacje, które są dla nich nieistotne. Chcą otrzymać dokładnie to czego poszukują czyli „landing page”, która dostarcza dokładnie tych poszukiwanych informacji. Unikają tym samym straty czasu spowodowanej koniecznością klikania ze strony na stronę. Strony docelowe spełniają swoje zadanie, gdy właściciel zdaje sobie sprawę z tego jaki rodzaj użytkowników jest na nią kierowanych, wie co odwiedzający musi kliknąć aby znaleźć się na jego stronie. Przykład: Potencjalny klient po kliknięciu w reklamę produktu nie chce przechodzić przez szereg stron aby znaleźć informacje o produkcie. Chce te informacje otrzymać po jednym kliknięciu.
Nie wszyscy odwiedzający szukają tych samych informacji, jedni mogą kliknąć na Twój link po przeczytaniu artykułu, który udostępniłeś w przeglądarce podczas gdy drudzy dotrą do strony po wejściu na Twoją reklamę. Dla każdego szczególnego gościa można zaprojektować landing page, która zaspokoi jego potrzeby i zawiera informacje których poszukuje.
Landing pages powinny być poddane ocenie ich efektywności. Opisany wcześniej wskaźnik odrzuceń jest kluczowym miernikiem ale nie jedynym. Innym miernikiem jest sukces tzw. „kolejnej akcji”, może to być zakup produktu, uzyskanie większej ilości informacji, zapisanie się na darmowe testy produktu itd. Możemy określić tzw. współczynnik konwersji poprzez podzielenie liczby podejmujących działania na liczbę odwiedzających. Typowy współczynnik konwersji wynosi 3 do 5 procent dla wiodących stron oraz 1 do 2 procent dla stron e-commerce. Twoja witryna osiągnie sukces jeśli otrzymasz wynik dwukrotny.
Pojęciem, które jest nieodłącznym elementem tworzenia skutecznych stron docelowych jest tzw. "wyrównanie". Jest to połączenie między źródłem (skąd użytkownik przychodzi) i strony docelowej. Im bardziej są związane, tym wyższy sukces konwersji.
Dobrym przykładem jest baner reklamowy konkretnego produktu z firmy kosmetycznej. Kliknięcie w baner reklamowy i skierowanie użytkownika bezpośrednio na „landing page” z opisem dokładnie tego produktu, daje to bardzo wysoki współczynnik konwersji.
DOBRA LANDING PAGE POWINNA BYĆ:
Wiarygodna
Strona musi zyskać zaufanie odwiedzającego poprzez wiarygodny wygląd. Usuń wszystko, co może spowodować negatywne skojarzenia w świadomości użytkowników, takie jak:
-brak informacji kontaktowych
-błędy gramatyczne i literówki
-potoczne wyrażenia
-rozciągnięta, toporna grafika
-zbyt dużo czcionek typu serif ( np. Times New Roman )
Przekonująca
Twoja strona musi być w stanie przekonać gości, że produkt lub usługa może pomóc im osiągnąć ich cel. Pamiętaj, o tym co jako pierwsze przyciągnęło gości do Twojego produktu, więc możesz zrozumieć, czego odwiedzający szuka.
Rozpoznawalna
Twoja strona musi wywołać w odwiedzającym myśl „To jest dokładnie tom czego szukam!” zaraz po załadowaniu.
Zachęcająca do akcji
Musisz nałożyć nacisk na podjęcie akcji przez użytkownika, podczas gdy jest on na stronie docelowej.
JAK ZAPROJEKTOWAĆ SKUTECZNĄ STRONĘ DOCELOWĄ.
Oto główne zasady, które prowadzą użytkownika w procesie tworzenia skutecznej strony docelowej:
Czytaj dalszy ciąg artykułu
wtorek, 21 sierpnia 2012
Strona internetowa Klubu Malucha Bajeczna Akademia
Chcę się pochwalić miłym dla oka projektem strony internetowej przedszkola Bajeczna Akademia. Oprawę przygotowałam przy użyciu bardzo fajnego GPLowego narzędzia MyPaint które świetnie sprawdza się przy pracy z tabletem graficznym.
Subskrybuj:
Komentarze (Atom)