WordPress – ukryte pola

WordPress dzięki wtyczkom pozwala rozszerzyć wpisy o dodatkowe pola. Dzięki nim można dodać pliki multimedialne (podpress), dodatkowe obrazki (to już związane z layoutem Gazette) albo dodatkowe pola. Jeśli dodatkowe dane mają się wyświetlać jedynie dla ludzi, to można zastosować rozwiązanie oparte o ajaxa (ukryte pole nadal będzie dostępne dla botów). Mechanizm jest dość prosty: w odpowiednim miejscu szablonu dajemy div, p lub span z ustawionym id oraz z odpowiednią klasą css. W pliku javascript (dodatkowym lub już istniejącym w layoucie) dodajemy obsługę kliknięcia na pole ze wskazaną klasą css. Wywoływana funkcja odpala poprzez ajax skrypt, który odsyła zawartość pola powiązanego z postem. Do tego można dodać kilka drobnych zabezpieczeń: jednorazowa obsługa kliknięcia dla danego pola, blokada bezpośrednich wywołań, itd. Całość może wyglądać następująco:

<script type="text/javascript">
jQuery( document).ready( function() {
 jQuery("div.kliknij_mnie").click( function() {
  var id = jQuery(this).attr( 'id' ) ;
  jQuery.ajax({
   url: "ajax.php",
   data: "id="+id,
   dataType: "json",
   cache: false,
   success: function(html){
    jQuery('#post_'+html.id).html( html.msg ) ;
   }
  });
 }) ;
}) ;
</script>

Do każdego posta wstawiamy div z klasą kliknij_mnie oraz z id post_ID:

<div id="post_<?php the_ID(); ?>" class="kliknij_mnie">kliknij mnie</div>

(jeżeli dany szablon już używa takich id, to wybierz inne).

Wywoływany jest skrypt ajax.php:

<?
 require_once('./wp-load.php');

 $id = str_replace('post_', '', $_GET['id'] ) + 0 ;
 $custom_fields = get_post_custom( $id );
 $tab = ( get_post_meta( $id, 'NAZWA_POLA' ) ) ;
 $dane['id'] = $id ;
 $dane['msg'] = $tab[0] ;
 echo json_encode( $dane ) ;
?>

Skrypt ten odbiera żądanie odnośnie wskazanego posta, wyciąga z bazy dane meta (pamiętaj o wprowadzeniu odpowiedniej NAZWY_POLA), a na koniec odsyła zakodowany jako json z id posta oraz zawartością pola.

Gotowe. Treść (o ile jest) pojawi się dopiero po kliknięciu na wskazany element. W css dodaj do niego cursor: pointer, wstaw jakiś tekst typu „kliknij, żeby zobaczyć dodatkowe informacje” i masz wszystko co jest potrzebne na początek.

• Tweet
• Pin It