{"id":75,"date":"2006-12-14T23:45:39","date_gmt":"2006-12-14T22:45:39","guid":{"rendered":"http:\/\/eriz.pc-inside.org\/weblog\/2006\/12\/14\/efekt-wiecej-w-wordpressie-ajax\/"},"modified":"2007-02-12T22:51:05","modified_gmt":"2007-02-12T21:51:05","slug":"efekt-wiecej-w-wordpressie-powered-by-ajax","status":"publish","type":"post","link":"https:\/\/eriz.pcinside.pl\/weblog\/efekt-wiecej-w-wordpressie-powered-by-ajax-75.html","title":{"rendered":"Efekt &#8222;wi\u0119cej&#8221; w WordPressie &#8211; powered by AJAX"},"content":{"rendered":"<p>Specjalnie dla <strong><a href=\"http:\/\/livio.i64.pl\/\">Livia<\/a><\/strong> opisz\u0119 tutaj jak zrobi\u0107 rozwijanie post\u00f3w bez prze\u0142adowywania strony. Czego potrzebujemy? Troch\u0119 czasu, ch\u0119ci, oraz mo\u017cliwo\u015bci edytowania szablon\u00f3w WordPressa <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/> (czyli hosting na blogi w stylu wordpress.com odpada)<\/p>\n<p><strong>Uwaga: przy &#8222;instalowaniu&#8221; rozszerzenia wymagana jest podstawowa wiedza nt. (X)HTML, PHP, JS. Wiadomo\u015bci o sk\u00f3rkach WordPressa przydadz\u0105 si\u0119, aczkolwiek nie s\u0105 niezb\u0119dne. Te zdob\u0119dziesz w <a href=\"http:\/\/codex.wordpress.org\">Codexie<\/a><\/strong>.<\/p>\n<p>Do roboty!<\/p>\n<p><!--more--><\/p>\n<p>Po pierwsze, potrzebujemy wtyczki, kt\u00f3ra pozwoli nam cokolwiek zrobi\u0107 z linkiem &#8222;wi\u0119cej&#8221;. Wystarczy j\u0105 <a href=\"http:\/\/txfx.net\/files\/wordpress\/wp-customized-more-link.phps\">\u015bci\u0105gn\u0105\u0107<\/a>, zainstalowa\u0107 i uruchomi\u0107. Jak nie jeste\u015b w stanie tego zrobi\u0107, to zapraszam do manuala WordPressa i przeczytania jakiego\u015b kursu PHP.<\/p>\n<p>Nast\u0119pnie, \u015bci\u0105gamy framework <a href=\"http:\/\/jquery.com\">jQuery<\/a>, zapisujemy plik JS (mo\u017cemy go r\u00f3wnie\u017c <a href=\"http:\/\/javascriptcompressor.com\/\">skompresowa\u0107<\/a>) do folderu z szablonem i edytujemy plik <em>header.php<\/em> (nag\u0142\u00f3wek szablonu, z poziomu administracji WP). Musimy dopisa\u0107 do sekcji <em>&lt;head&gt;<\/em> nast\u0119puj\u0105c\u0105 linijk\u0119:<\/p>\n<p><code lang=\"php\"><br \/>\n<script type=\"text\/javascript\" src=\"<?php bloginfo('template_directory'); ?>\/jquery.js\"><\/script><br \/>\n<\/code><\/p>\n<p>Teraz przysz\u0142a kolej na edycj\u0119 arkusza styl<strong>\u00f3w<\/strong>. Dodajemy przy ko\u0144cu:<\/p>\n<p><code lang=\"css\"><br \/>\ndiv.loader {text-indent: -5000px; height: 50px; height: 100px; background: center center url('gfx\/wait.gif') no-repeat; }<br \/>\ndiv.postMore { width: 100%; clear: both; float: left; display: none; }<br \/>\n<\/code><\/p>\n<p>Ostyluj to sobie jak chcesz, pamietaj tylko, aby nazwy klas si\u0119 zgadza\u0142y (chyba, \u017ce Ci zale\u017cy koniecznie na zmianie nazw, ale pami\u0119taj o tym, \u017ceby p\u00f3\u017aniej je zmieni\u0107 w odpowiednich miejscach). Mo\u017ce Ci si\u0119 r\u00f3wnie\u017c przyda\u0107 moja <a href=\"\/weblog\/wp-content\/themes\/inBlueDiary\/gfx\/wait.gif\">klepsyderka<\/a> ;]<\/p>\n<p>Teraz przysz\u0142a kolej na g\u0142\u00f3wn\u0105 artyleri\u0119, czyli kod, kt\u00f3ry to wszystko nap\u0119dza:<\/p>\n<p><code lang=\"javascript\"><br \/>\nfunction getObject(e){\t\/\/taka funkcja pomocnicza<br \/>\n\treturn window.event ? window.event.srcElement : e ? e.target : null;<br \/>\n}<\/p>\n<p>function loadContent(id){<br \/>\n\t\/\/je\u015bli nazwa kontenera na post jest zmieniona, to uwzgl\u0119dnij j\u0105 tutaj<br \/>\n\t$('#post-'+id+' a.more').hide(250);<br \/>\n\t$('#post-'+id+' .storycontent').append('<\/p>\n<div class=\"loader\">Chwilka...<\/div>\n<div class=\"postMore\" id=\"postMore-'+id+'\"><\/div>\n<p>');<br \/>\n\t$('#post-'+id+' .loader').slideDown(1000);<\/p>\n<p>\t\/\/wstaw tu adres do g\u0142\u00f3wnej strony swojego bloga, niewa\u017cne, czy masz w\u0142\u0105czone niestandardowe URL-e. Przekazujemy dodatkowo parametr \"ajax=1\", kt\u00f3rym poinformujemy szablon, \u017ce nie chcemy ca\u0142ej zawarto\u015bci strony (czyli bez nag\u0142\u00f3wka, sidebara, itp.).<br \/>\n\t$.get('http:\/\/adres.do.bloga\/?p='+id+'&ajax=1', function(data){<br \/>\n\t\t$('#postMore-'+id).html(data);<br \/>\n\t\t$('#post-'+id+' .loader').slideUp(1000);<br \/>\n\t\t$('#postMore-'+id).slideDown(1000);<br \/>\n\t});<br \/>\n}<\/p>\n<p>\/\/podczepmy funkcje pod potrzebne nam obiekty<br \/>\n$(document).ready(function(){<br \/>\n\t\/\/2 linijki opcjonalne - to preload obrazka sygnalizuj\u0105cego wczytywanie. Je\u015bli go nie u\u017cywasz, to je pomi\u0144.<br \/>\n\tvar hourglass = new Image;<br \/>\n\thourglass.src = '\/wp-content\/themes\/<skorka>\/gfx\/wait.gif';<\/p>\n<p>\t\/\/za\u0142\u00f3\u017cmy, \u017ce kontener na post ma klas\u0119 .post (w domy\u015blnym szablonie tak jest i nie trzeba wprowadza\u0107 zmian<br \/>\n\t$('div.post').each(function(){<br \/>\n\t\t\/\/w identyfikatorze bloku posta trzymamy ID wpisu w formacie: \"post-<id>\"<br \/>\n\t\tvar id = $('div.post')[i].id;<\/p>\n<p>\t\t\/\/dodajemy w\u0142asny obiekt, kt\u00f3ry zawiera ID posta. W kodzie zwr\u00f3conym przez WordPressa jest on po my\u015blniku.<br \/>\n\t\t$('#'+id+' a.more').each(function(){this.postId = id.split('-')[1];});<\/p>\n<p>\t\t\/\/doklejamy funkcj\u0119, kt\u00f3ra odczyta nam zawarto\u015b\u0107 reszty posta i odpowiednio wklei. Przy wywo\u0142aniu funkcji (czyli przy klikni\u0119ciu na \"wi\u0119cej\") jako parametr dostajemy uchwyt zdarzenia, a nie obiekt, wi\u0119c musimy sobie go \"przet\u0142umaczy\u0107\", st\u0105d ta funkcja getObject.<br \/>\n\t\t$('#'+id+' a.more').click(function(e){loadContent(getObject(e).postId);return false;});<br \/>\n\t});<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Zapisz to w katalogu sk\u00f3rki pod jak\u0105\u015b jednoznaczn\u0105 nazw\u0105.<\/p>\n<p>No, a teraz kolej na plik index.php Twojego skina. Na samym pocz\u0105tku doklej co\u015b takiego:<\/p>\n<p><code lang=\"php\"><br \/>\n\/\/je\u015bli tre\u015b\u0107 pr\u00f3buje pobra\u0107 nasz skrypt, to nie wysy\u0142aj niepotrzebnie ca\u0142ej strony, tylko tre\u015b\u0107 posta<br \/>\nif(!empty($_GET['ajax']) AND $_GET['ajax']==1){<br \/>\n\t\/\/sprawdzamy na wszelki wypadek ;)<br \/>\n\tif(have_posts()){<br \/>\n\t\tthe_post();<\/p>\n<p>\t\t\/\/drugi parametr sprawia, \u017ce zostanie wy\u015bwietlona zostanie tylko zawarto\u015b\u0107 po znaczniku <!--more--><br \/>\n\t\tthe_content('', true);<br \/>\n\t}<\/p>\n<p>\t\/\/voil\u00e1, wi\u0119cej nam nie trzeba<br \/>\n\texit;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Teraz upewniamy si\u0119, \u017ce w <a href=\"http:\/\/codex.wordpress.org\/The_Loop\">g\u0142\u00f3wnej p\u0119tli<\/a> WordPressa blok wy\u015bwietlaj\u0105cy wpis jest odpowiednio nazwany. Zaraz po rozpocz\u0119ciu jej definicji szukamy pojemnika na ka\u017cdy wpis:<\/p>\n<p><code lang=\"php\"><\/p>\n<div class=\"post\" id=\"post-<?php the_ID(); ?>\"><br \/>\n<\/code><\/p>\n<p>Je\u015bli wszystko jest tak, jak powy\u017cej, to nie musimy niczego wi\u0119cej zmienia\u0107. Je\u015bli nazwy si\u0119 r\u00f3\u017cni\u0105, to mamy dwa wyj\u015bcia: albo pozmienia\u0107 nazwy w pliku <em>index.php<\/em> albo w naszej &#8222;artylerii&#8221;.<\/p>\n<p>Przechodzimy teraz ponownie do edycji pliku nag\u0142\u00f3wka i dodajemy linijk\u0119 w <em>&lt;head&gt;<\/em> (najlepiej zaraz po jQuery):<\/p>\n<p><code lang=\"php\"><br \/>\n<script type=\"text\/javascript\" src=\"<?php bloginfo('template_directory'); ?>\/nasza_artyleria.js\"><\/script><br \/>\n<\/code><\/p>\n<p>Zapisujemy zmiany i &#8222;od\u015bnie\u017camy&#8221;. Powinno dzia\u0142a\u0107, ale nie zapewniam, \u017ce od razu, poniewa\u017c pisa\u0142em z palca.<\/p>\n<p>Inspiracj\u0105 by\u0142 <a href=\"http:\/\/riddle.jogger.pl\">blog Riddle&#8217;a<\/a>, kod m\u00f3j.<\/p>\n<p>Je\u015bli tutorial Ci si\u0119 przyda\u0142, by\u0142oby mi\u0142o, gdyby\u015b do niego zalinkowa\u0142(a). <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Specjalnie dla Livia opisz\u0119 tutaj jak zrobi\u0107 rozwijanie post\u00f3w bez prze\u0142adowywania strony. Czego potrzebujemy? Troch\u0119 czasu, ch\u0119ci, oraz mo\u017cliwo\u015bci edytowania szablon\u00f3w WordPressa (czyli hosting na blogi w stylu wordpress.com odpada) Uwaga: przy &#8222;instalowaniu&#8221; rozszerzenia wymagana jest podstawowa wiedza nt. (X)HTML, PHP, JS. Wiadomo\u015bci o sk\u00f3rkach WordPressa przydadz\u0105 si\u0119, aczkolwiek nie s\u0105 niezb\u0119dne. Te zdob\u0119dziesz w [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[79,30,74,66],"_links":{"self":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts\/75"}],"collection":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":0,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"wp:attachment":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}