chcesz to zrobić bez przeładowania strony? jeśli tak to musisz treści ładować ajaxowo. Dla stron, które będziesz ładować ajaxem najlepiej przygotować własny template, tzn taki, który zawiera tylko content (bez headera i footera, samą treść wpisu) – nie jest to konieczne, ale zalecane.
Tworzysz np. taki template:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”page-content”>
<article class=”post” id=”post-<?php the_ID(); ?>”>
<h1 class=”pagetitle”><?php the_title() ?></h1>
<div class=”entry”>
<?php the_content(); ?>
</div>
</article>
</div>
<?php endwhile; endif; ?>
Ze strony WordPressa nie wymaga to żadnych sztuczek, cała sprawa rozbija się o utworzenie w javascriptcie zapytania do odpowiedniej strony i wyświetlenia tej strony w odpowiednim miejscu.
Ja to robię tak, że po kliknięciu w dany odnośnik, pobieram jego atrybut „href”, blokuję domyślne zachowanie (czyli przejście pod podany adres) i pobieram z tego adresu zawartość, a następnie wrzucam w odpowiedniego diva.
Wygląda to mniej więcej tak:
$(„nav a”).on(„click”, function(e) { // klikany element
e.preventDefault(); // anulujemy domyślną akcję
url = url + ” .page-content”; // adres url do którego kierujemy zapytanie
var container = $(’#container’); // element do którego wrzucamy treść
container.load(url, function() {// ajaxowe wczytywanie treści w conainer
// callback, który wykona się po załadowaniu treści
})
return false;
}
});
To taki przykład na szybko, nie testowałem, bo kopiowałem z nieco bardziej skomplikowanego skryptu, ale ogólna zasada jest taka.
Jak masz ochotę zobaczyć źródło to tutaj jest bardzo proste wdrożenie czegoś takiego: http://warsztatjezykowy.pl/