Pętla WordPress – WordPress Loop
We wcześniejszych wpisach o tworzeniu szablonów zasygnalizowałem tylko, temat pętli wordpressa. Dziś napiszę co to takiego i jak stosuje się taką pętlę. Dla osób, które znają angielski polecam przeczytać artykuł na ten temat na oficjalnej stronie wordpressa: http://codex.wordpress.org/The_Loop
Czym zatem jest ta tajemnicza pętla? Jest to podstawowy składnik każdego szablonu i służy do wyświetlania wszystkich wpisów, stron archiwów itp. Jeśli WordPress natknie się na pętle podczas przetwarzania szablonu i wyświetlania strony to w zależności od tego na jakiej stronie znajduje się użytkownik wyświetli mu albo listę ostatnich wpisów, albo pojedynczy wpis bądź stronę statyczną itp.
Pętla powinna znajdować się w pliku index.php. Jeśli nie pamiętasz z jakich plików składa się szablon WP to wróć do poprzednich lekcji tworzenia szablonów. WordPress Loop to kilka linijek kodu php i ma taką postać:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
[tutaj wyświetlanie wpisów]
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
Wszystko co znajduje się w miejscu [tutaj wyświetlanie wpisów] jest już zawartością pętli i tylko od nas zależy jak to wykorzystamy. Możemy w tym miejscu odwoływać się do wielu zmiennych takich jak nazwa wpisu, data utworzenia, autor itp. wyświetlać i formatować te dane zgodnie z naszym uznaniem. Przykładowa działająca pętla może wyglądać tak:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2
<small><?php the_time('F jS, Y'); ?></small>
<?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
Jak widać między tagami h2 wyświeliliśmy nazwę posta, która linkuje do jego zawartości, a poniżej datę utworzenia wpisu. I to wszystko co na tym etapie powinieneś wiedzieć o pętli WP. Wiesz już jak działa i z wiedzą, którą dziś otrzymałeś będziesz umiał ją zastosować. Jeśli chcesz poznać pozostałe zmienne jakie można tu wyświelić to polecam przeglądnąć pliki defaultowych szablonów WP. W następnym odcinku kursu przejdziemy już do konkretów i przerobimy darmowy szablon html tak, aby działał pod WP.
Pytania i komentarze jak zwykle mile widziane.
Chyba najlepsze porady jakie znalazłem w sieci na temat WP
Jedyne co kuleje, to chyba info o Twoim blogu bo znalazłem się tu dopiero po 3 dniach studiowania silnika WP. Swój szablo prawie zintegrowałem z WP, ale zostało mi do zrobienia styl komentarzy. Chyba, że można pobrać gotowe w sieci???
A i mam problem z pozycjonowaniem z prawej strony znacznika < ! --more-- >. Nie mogę zrobić tego bezpośrednio w szablonie, a pomaga dodanie poniższego stylu do każdego wpisu
< ! --more-- >
Za wygląd komentarzy odpowiadają dwa pliki w szablonie: comments.php i comments-popup.php. Jeśli nie ma tych plików w szablonie to są pobierane domyślne. Możesz na początek spróbować przegrać te pliki z innego szablonu i odpowiadające im style z plików css. Ja z reguły kopiuje pliki z szablonu default albo classic i później tylko styluje w css. Do tego, aby znaleźć identyfikatory i klasy dla elementów możesz użyć dodatków do Firefoxa – Web Developer Toolbar lub Firebug.
Co do drugiego tematu musisz bardziej sprecyzować. Generalnie zasada jest taka, że korzystając z funkcji the_content() w pętli WP jako pierwszy parametr podajemy treść linka czytaj dalej np. the_content(‘Czytaj dalej…’);
Tutaj jest to dokładnie opisane: http://codex.wordpress.org/Customizing_the_Read_More
Możesz też użyć funkcji bez parametru i samemu stworzyć niżej link ‘dalej’ za pomocą funkcji the_permalink(), która wypisuje link do danego artykułu w pętli. Wada tego rozwiązania jest taka, że link ten pokazuje się zawsze, nawet jeśli nie ma kontynuacji artykułu. Nie wiem czy dokładnie o to Ci chodziło w każdym razie kombinacji jest bardzo wiele.
No właśnie wymieniłeś dwa sposoby, o których myślałem. Pomogło jednak dziwnie jest to interpretowane, do czego zdążyłem się już przyzwyczaić
Stworzyłem klase .linki z cechą, wartością ‘text-align: right’ i wrzuciłem w środek funkcji między znaczniki p.
Efekt:
http://dl.dropbox.com/u/544318/BLOG/os.png
Wyżej pisałem, że dziwnie jest to interpretowane, ponieważ w znaczniku span, efektu brak, ale już drobnostka…
Autorze, miałbyś czas, ochotę rozszerzyć artykuł o dodatkowe informacje? Dokładnie, to chodzi mi o styl komentarzy bo nie jest to takie proste. Struktura komentarzy np. w domyślnym szablonie, powiązana jest aż z czterema plikami tj. style.css, comments.php, comments-popup.php i functions.php. Zauważyłem, że jeśli brakuj pliku functions.php, to Avatar ustawia się z lewej strony. Wiec sam widzisz, że niby jest to proste, jednak szczegół potrafi dużo zmienić.
Jeśli chodzi o te pliki, które wymieniasz to: style.css jest to główny szablon css i jest odpowiedzialny za wygląd poszczególnych elementów strony w tym przeważnie komentarzy (choć niekoniecznie). Aby korzystać z tego pliku potrzebna jest znajomość cssa.
Co do reszty plików, które wymieniłeś to comments-popup praktycznie nie jest wykorzystywany choć znajduje się w prawie każdym szablonie. Jest to plik, który generuje komentarze w formie okienka popup. Raczej rzadko się tego używa – mi się nigdy nie zdarzyło. Można ten plik śmiało skasować i nic się nie powinno stać.
Functions.php z kolei zawiera inne dodatkowe funkcje szablonu np. aktywowanie miniaturek, obsługę widgetów itp. Być może w twoim przypadku ma on jakieś powiązanie z komentarzami.
Zostaje plik comments.php, który jest odpowiedzialny za generowanie wszystkich treści i tagów związanych z obsługą komentarzy. Tak więc używając tylko dwóch wymienionych plików można dowolnie zmienić wygląd komentarzy: comments.php i style.css
Dla początkujących osób powinna wystarczyć edycja pliku css. Najlepiej skorzystać z pomocy w postaci dodatków do firefoxa takich jak Web Developer Toolbar lub Firebug, aby zlokalizować dany element i wyedytować po prostu styl dla tego elementu.
Dzięki za zainteresowanie. Poradziłem sobie korzystając z darmowego szablonu GlossyBlue. W domyślnym szablonie WP, jakiekolwiek zmiany nie przynosiły efektów. Przypadkiem (z powodzeniem) zmodyfikowałem plik comments.php theme GlossyBlue i na tym zacząłem stworzyć własny styl. Więc jeśli ktoś będzie przerabiał ten temat, polecam właśnie ten szablon. Plik comments.php jest prosty, a w moim pliku CSS, zostawiłem komentarze, które z pewnością pomogą
Jeszcze raz dzięki za artykuł, zainteresowanie i pozdrawiam
Jeśli mógłbym zasugerować ciąg dalszy tego działu, to byłbym bardzo wdzięczny, gdybyś w kolejnych postach bardziej szczegółowo wyjaśnił działanie poszczególnych funkcji.
Wyjaśnię na przykładzie funkcji . Funkcja odpowiada za wyświetlanie daty (to wie każdy, nawet ja), ale np skróty literowe w nawiasie są już dość magiczne.
Jeśli w tym kierunku będzie przebiegał rozwój tego działu, to na pewno będę tu często zaglądał.
Pozdrawiam
Co do skrótów literowych w nawiasie: oznaczają one nic innego jak dzień-miesiąc-rok (D-M-Y). Przestaw ich kolejność, to zmienisz kolejność wyświetlania elementów daty.
Co do bloga: wiele ciekawy rzeczy można się z niego dowiedzieć. Aktualnie sam tworzę theme pod WP – docelowo jako CMS. Korzystam z porad zamieszczonych na tym blogu oraz dokumentacji WP.
Polecam również zajrzeć tutaj:
- http://jonathanwold.com/tutorials/wordpress_theme/
- http://www.cypherhackz.net/archives/2006/12/13/make-your-own-wordpress-theme-part-1/
A w załączonym przykładzie jest tak:
F – miesiąc
jS – data dzienna
Y – rok
Przyłączam się do prośby o kontynuację kursu.
Jest to zdecydowanie najlepszy podręcznik do wordpressa jaki znalazłem
Jedyna wada za mało :/
Na pewno będę regularnie zaglądał