Efekt „więcej” w WordPressie – powered by AJAX
Specjalnie dla Livia opiszę tutaj jak zrobić rozwijanie postów bez przeładowywania strony. Czego potrzebujemy? Trochę czasu, chęci, oraz możliwości edytowania szablonów WordPressa (czyli hosting na blogi w stylu wordpress.com odpada)
Uwaga: przy „instalowaniu” rozszerzenia wymagana jest podstawowa wiedza nt. (X)HTML, PHP, JS. Wiadomości o skórkach WordPressa przydadzą się, aczkolwiek nie są niezbędne. Te zdobędziesz w Codexie.
Do roboty!
Po pierwsze, potrzebujemy wtyczki, która pozwoli nam cokolwiek zrobić z linkiem „więcej”. Wystarczy ją ściągnąć, zainstalować i uruchomić. Jak nie jesteś w stanie tego zrobić, to zapraszam do manuala WordPressa i przeczytania jakiegoś kursu PHP.
Następnie, ściągamy framework jQuery, zapisujemy plik JS (możemy go również skompresować) do folderu z szablonem i edytujemy plik header.php (nagłówek szablonu, z poziomu administracji WP). Musimy dopisać do sekcji <head> następującą linijkę:
Teraz przyszła kolej na edycję arkusza stylów. Dodajemy przy końcu:
div.loader {text-indent: -5000px; height: 50px; height: 100px; background: center center url('gfx/wait.gif') no-repeat; }
div.postMore { width: 100%; clear: both; float: left; display: none; }
Ostyluj to sobie jak chcesz, pamietaj tylko, aby nazwy klas się zgadzały (chyba, że Ci zależy koniecznie na zmianie nazw, ale pamiętaj o tym, żeby później je zmienić w odpowiednich miejscach). Może Ci się również przydać moja klepsyderka ;]
Teraz przyszła kolej na główną artylerię, czyli kod, który to wszystko napędza:
function getObject(e){ //taka funkcja pomocnicza
return window.event ? window.event.srcElement : e ? e.target : null;
}
function loadContent(id){
//jeśli nazwa kontenera na post jest zmieniona, to uwzględnij ją tutaj
$('#post-'+id+' a.more').hide(250);
$('#post-'+id+' .storycontent').append('
');
$('#post-'+id+' .loader').slideDown(1000);
//wstaw tu adres do głównej strony swojego bloga, nieważne, czy masz włączone niestandardowe URL-e. Przekazujemy dodatkowo parametr "ajax=1", którym poinformujemy szablon, że nie chcemy całej zawartości strony (czyli bez nagłówka, sidebara, itp.).
$.get('http://adres.do.bloga/?p='+id+'&ajax=1', function(data){
$('#postMore-'+id).html(data);
$('#post-'+id+' .loader').slideUp(1000);
$('#postMore-'+id).slideDown(1000);
});
}
//podczepmy funkcje pod potrzebne nam obiekty
$(document).ready(function(){
//2 linijki opcjonalne - to preload obrazka sygnalizującego wczytywanie. Jeśli go nie używasz, to je pomiń.
var hourglass = new Image;
hourglass.src = '/wp-content/themes/
//załóżmy, że kontener na post ma klasę .post (w domyślnym szablonie tak jest i nie trzeba wprowadzać zmian
$('div.post').each(function(){
//w identyfikatorze bloku posta trzymamy ID wpisu w formacie: "post-
var id = $('div.post')[i].id;
//dodajemy własny obiekt, który zawiera ID posta. W kodzie zwróconym przez WordPressa jest on po myślniku.
$('#'+id+' a.more').each(function(){this.postId = id.split('-')[1];});
//doklejamy funkcję, która odczyta nam zawartość reszty posta i odpowiednio wklei. Przy wywołaniu funkcji (czyli przy kliknięciu na "więcej") jako parametr dostajemy uchwyt zdarzenia, a nie obiekt, więc musimy sobie go "przetłumaczyć", stąd ta funkcja getObject.
$('#'+id+' a.more').click(function(e){loadContent(getObject(e).postId);return false;});
});
}
Zapisz to w katalogu skórki pod jakąś jednoznaczną nazwą.
No, a teraz kolej na plik index.php Twojego skina. Na samym początku doklej coś takiego:
//jeśli treść próbuje pobrać nasz skrypt, to nie wysyłaj niepotrzebnie całej strony, tylko treść posta
if(!empty($_GET['ajax']) AND $_GET['ajax']==1){
//sprawdzamy na wszelki wypadek ;)
if(have_posts()){
the_post();
//drugi parametr sprawia, że zostanie wyświetlona zostanie tylko zawartość po znaczniku
the_content('', true);
}
//voilá, więcej nam nie trzeba
exit;
}
Teraz upewniamy się, że w głównej pętli WordPressa blok wyświetlający wpis jest odpowiednio nazwany. Zaraz po rozpoczęciu jej definicji szukamy pojemnika na każdy wpis:
Jeśli wszystko jest tak, jak powyżej, to nie musimy niczego więcej zmieniać. Jeśli nazwy się różnią, to mamy dwa wyjścia: albo pozmieniać nazwy w pliku index.php albo w naszej „artylerii”.
Przechodzimy teraz ponownie do edycji pliku nagłówka i dodajemy linijkę w <head> (najlepiej zaraz po jQuery):
Zapisujemy zmiany i „odśnieżamy”. Powinno działać, ale nie zapewniam, że od razu, ponieważ pisałem z palca.
Inspiracją był blog Riddle’a, kod mój.
Jeśli tutorial Ci się przydał, byłoby miło, gdybyś do niego zalinkował(a).
12 komentarzy
dopisz swój :: trackback :: RSS z komentarzami
-
Muszę powiedzieć, że efekt ciekawy, tylko że u mnie też nie działa, tylko nie mam pojęcia co robię źle
jquery mam, twój skrypt też (zmieniłem jedynie klasę diva na news, bo tak mam u siebie), dodałem div’a storycontent bo nie miałem, wkleiłem ten kod php na samym początku index.php, oczywście pomiędzy , dałem odpowiednie script w head i nie działa… jakieś pomysły? Jakby co to próbuję to dać na swoim mini (link przy komentarzu). Byłbym bardzo wdzięczny za jakąś pomoc
-
ten trackback możesz usunąć (przez przypadek mi wyszedł – sorki)
poza tym – dawanie kodu jako listy ol fajnie wygląda i w ogóle ale jest trochę niepraktyczne przy kopiowaniu (numerki też się kopiują, przynajmniej w Fx, ale chyba jest jakaś wtyczka do tego)
no i czekam na wersję tego poradnika w stylu „jak to zrobić krok-po-kroku, czyli how to dla idiotów” ;]
-
A po wywołaniu http://blog.pl/?p=123 jakiś kod się pokazuje?
Próbowałem to cudo 'zainstalować’, ale nie działa .
Być może złemu blokowi dałem
id="post-"
Nie mam div-a z klasą 'post’.