eRIZ’s weblog

PHP, webdesign, Linux, Windows i inne, bo nie samym chlebem człowiek żyje
Serdecznie zapraszam do udziału w ANKIECIE

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ę:

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>

Teraz przyszła kolej na edycję arkusza stylów. Dodajemy przy końcu:

  1. div.loader {text-indent: -5000px; height: 50px; height: 100px; background: center center url('gfx/wait.gif') no-repeat; }
  2. 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:

  1. function getObject(e){  //taka funkcja pomocnicza
  2.         return window.event ? window.event.srcElement : e ? e.target : null;
  3. }
  4.  
  5. function loadContent(id){
  6.         //jeśli nazwa kontenera na post jest zmieniona, to uwzględnij ją tutaj
  7.         $('#post-'+id+' a.more').hide(250);
  8.         $('#post-'+id+' .storycontent').append('<div class="loader">Chwilka...</div><div class="postMore" id="postMore-'+id+'"></div>');
  9.         $('#post-'+id+' .loader').slideDown(1000);
  10.  
  11.         //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.).
  12.         $.get('http://adres.do.bloga/?p='+id+'&ajax=1', function(data){ 
  13.                 $('#postMore-'+id).html(data);
  14.                 $('#post-'+id+' .loader').slideUp(1000);
  15.                 $('#postMore-'+id).slideDown(1000);
  16.         });
  17. }
  18.  
  19. //podczepmy funkcje pod potrzebne nam obiekty
  20. $(document).ready(function(){
  21.         //2 linijki opcjonalne - to preload obrazka sygnalizującego wczytywanie. Jeśli go nie używasz, to je pomiń.
  22.         var hourglass = new Image;
  23.         hourglass.src = '/wp-content/themes/<skorka>/gfx/wait.gif';
  24.  
  25.         //załóżmy, że kontener na post ma klasę .post (w domyślnym szablonie tak jest i nie trzeba wprowadzać zmian
  26.         $('div.post').each(function(){
  27.                 //w identyfikatorze bloku posta trzymamy ID wpisu w formacie: "post-<id>"
  28.                 var id = $('div.post')[i].id;
  29.  
  30.                 //dodajemy własny obiekt, który zawiera ID posta. W kodzie zwróconym przez WordPressa jest on po myślniku.
  31.                 $('#'+id+' a.more').each(function(){this.postId = id.split('-')[1];});
  32.  
  33.                 //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.
  34.                 $('#'+id+' a.more').click(function(e){loadContent(getObject(e).postId);return false;});
  35.         });
  36. }

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:

  1. //jeśli treść próbuje pobrać nasz skrypt, to nie wysyłaj niepotrzebnie całej strony, tylko treść posta
  2. if(!empty($_GET['ajax']) AND $_GET['ajax']==1){
  3.         //sprawdzamy na wszelki wypadek ;)
  4.         if(have_posts()){
  5.                 the_post();
  6.  
  7.                 //drugi parametr sprawia, że zostanie wyświetlona zostanie tylko zawartość po znaczniku <!--more-->
  8.                 the_content('', true);
  9.         }
  10.  
  11.         //voilá, więcej nam nie trzeba
  12.         exit;
  13. }

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:

  1. <div class="post" id="post-<?php the_ID(); ?>">

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):

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/nasza_artyleria.js"></script>

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

RSS z komentarzami :: trackback

Skomentuj

Możesz używać znaczników XHTML. Dozwolone są następujące tagi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Wszystkie komentarze przechodzą przez moderację oraz filtry antyspamowe. Nie zostanie opublikowany komentarz, jeśli:

  • Jego treść obraża kogokolwiek.
  • W treści znajdują się wulgaryzmy i słownictwo ogólnie uznane za nieprzyzwoite.
  • Mam wątpliwości co do autora wpisu (Wszelkie anonimy są kasowane - niezależnie od zawartości - wpisz prawdziwy e-mail. Jeśli usunąłem, Twoim zdaniem, komentarz niesłusznie - daj znać). Zdarza się, iż sprawdzam kim jest komentujący.
  • Zawiera jakąkolwiek formę reklamy.

Szufladka