$images = get_children(array(
'post_type' => 'attachment',
'numberposts' => 1,
'post_status' => null,
'post_mime_type' => 'image',
'post_parent' => $id));
 
 
if(!empty($images)){
 
	foreach($images as $image){
	//$attachment = wp_get_attachment_image_src($image->ID, $size);
	$attachment = wp_get_attachment_image( $image->ID, $size );
	}
 
}

La funzione get_children(), che troviamo nella prima riga di questo script, è una funzione wordpress usata per prelevare dal database attachments, revisioni o sotto pagine di un post genitore .

Wp_get_attachment_image , invece, restituisce il codice html dell’immagine. Come secondo parametro è possibile inserire tre valori : thumbnail, medium, large or full .

Quandi se velessimo prelevare la thumb dell’immagine generata da wordpress basterebbe specificare nella funzione wp_get_attachment_image il valore thumbnail e il gioco è fatto

Il primo passo è quello di dichiarare le aree destinate a questo scopo nella pagina functions.php :

	register_sidebar( array(
		'name' =>'Sidebar',
		'id' => 'sidebar',
		'before_widget' => '
	<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>
',
		'before_title' => '
<h3 class="widget-title">',
		'after_title' => '</h3>
',
	) );

Nel parametro name inseriamo il nome dell’area . L’id ( secondo parametro ) è la stringa che identifica l’area . Con il terzo e quarto parametro indichiamo il codice che apre e chiude il box widget . Before_title e after_title sono i codici che aprono e chiudono il titolo del box .

Possiamo inserire quante  aree vogliamo , l’importante è dare un id diverso .

Il passo successivo consiste nel richiamare le aree dichiarate nelle pagine dove vogliamo visualizzarle :

 dynamic_sidebar("sidebar");

La funzione dynamic_sidebar accetta come argomento l’id dell’area .

Prima di procedere è assolutamente necessario conoscere l’identificativo della/e categoria/e da discriminare in home.  Dal pannello wordpress  in gestione categorie è  possibile ricavare l’id di qualsiasi categoria inserita. Dopo aver individuato la lista di tutte le categorie, basta spostare il cursore del mouse sopra la categoria da analizzare. Se date un’ occhiata in basso a sinistra del vostro browser, noterete un url del tipo “www.mioblog.it/wp-admin/…..” con diversi parametri verso la fine della stringa. Il parametro da prendere in considerazione è tag_id, annotatelo su un foglio di carta o copiatelo nella clipboard .

Perfetto, ora non ci resta che fornire a wordpress gli id delle categorie da escludere in homepage. Per fare ciò, modifichiamo la pagina index.php del nostro theme wordpress inserendo in alto, dopo la funzione che richiama la header ( get_header() ) , il seguente codice :

global $query_string;
query_posts($query_string . "&cat=-id_category");

Nota : non dimenticate di aggiungere prima dell’id category il trattino ( – ).

Se vuoi aggiungere più categorie nella query basta separarle con una virgola, esempio :

global $query_string;
query_posts($query_string . "&cat=-23,-21,-34");

Spero di esservi stato utile, alla prossima !

if($("#id_checkbox").is(":checked")){
      // Se checkbox è selezionato
}else{
      // Se checkbox non è selezionato
}

Spero di esservi stato utile A domani !

Inserirne uno è davvero semplice . Quando stai per salvare un nuovo post , in fondo alla pagina avrai sicuramente notato il box “Campi personalizzati” . Da li è possibile aggiungere tutti i parametri che vuoi .

Nella versione 3.0 di wordpress occorrono i seguenti passaggi :

1. Fare click su Aggiungere Nuovo
2. Compilare i due campi Nome e Valore
3. Fare click su Aggiungi Campo Personalizzato

Per richiamare i valori all’interno del post/pagina possiamo usare la funzione get_post_meta che accetta tre parametri . Ecco la sintassi della funzione :

get_post_meta(idpost,key,bArray)

idpost Se non conosciamo l’id del post basta usare la variabile $post->ID .

key Il nome del parametro inserito precedentemente

bArray Se impostata su true restituisce il valore sotto forma di stringa . Se esistono piu’ field con lo stesso nome restituisce l’ultimo inserito . Se invece è impostato su false restituisce un array di stringhe .

Proviamo a realizzare una semplice applicazione , tanto per capire l’importanza dei campi personalizzati : sviluppiamo una semplice fotogallery da inserire nei post .

Per prima cosa apriamo la pagina single.php e individuiamo il ciclo loop principale :

...
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...
<?php endwhile; endif; ?>

All’interno del ciclo inseriamo il seguente codice :

<?php $n = get_post_meta($post->ID,"numero gallerie",true);  		
for($i = 1 ; $i <= $n;$i++){
  $mykey_values = get_post_custom_values("galleria_$i");
  $nome = get_post_meta($post->ID,"galleria_".$i."_titolo",true);
?   <div class="boxSub">
        <div class="title"><?=$nome?></div>
        <ul class="images">
        <?php   foreach ( $mykey_values as $key => $value ) { ?>
          <li><a href="#"><img src="<?=$value?>" /></a></li>
          <?php } ?>
        </ul>
        <div class="clear"></div>
      </div>
      <?php     
}
	  ?>

Se vogliamo inserire una o piu’ gallerie all’interno di un post o una pagina dobbiamo inserire i seguenti campi personalizzati :

• numero gallerie – Qui inserire quante sono le gallerie
• galleria_id_titolo – Dove id è l’identificativo della galleria , in questo campo dovete inserire il nome della galleria
• galleria_id – Inserite tante volte questo campo quanti sono le immagini della galleria . In questi campi dovete aggiungere il link delle immagini

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
4. - Convertiamo i post
5. - Convertiamo la sidebar
6. - Convertiamo il footer

Convertendo il footer concludiamo la conversione generale del nostro theme wordpress. Nei prossimi articoli installeremo wordpress ed adatteremo easyTheme.

Il footer ha una struttura abbastanza semplice. Si tratta di due contenitori ( #footer e #footer-main ) . Il primo contenitore avrà una larghezza dinamica ( occupa orizzontalmente tutta la pagina) . Mentre il secondo contenitore sarà un div di 999px centrato.

<div id="footer">
<div id="footer-main">Qui footer</div>
</div>

#footer{
clear:both;
background:#D7D7D7;
padding:40px 0;
margin:40px 0 0 0;}
#footer-main{
width:999px;
margin:0 auto;}

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
4. - Convertiamo i post

Eccoci al 4° appuntamento della guida . Oggi convertiremo i post del nostro theme wordpress.

Aggiornare la index.html con questo nuovo codice :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyTheme by iosmanetto.it</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<div id="conteiner">
 <div id="header">
 <div id="logo">My <em>first</em> theme</div>
 <div id="slogan">Qui slogon wordpress</div>
 <div style="clear:both"></div>
 </div>
 <div id="main">
 <div class="post">
 <div class="title"><a href="#">Qui titolo post</a></div>
 <div class="detail"><a href="#">Nome Categoria</a> | Autore | Data</div>
 <div class="entry">qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo <a href="#" class="more-link">Continua a leggere ></a> </div>
 </div>
 </div>
</div>
</body>
</html>

Ho aggiunto la struttura del post e modificato un piccolo particolare della header.

Prima della chiusura del div header ho inserito un contenitore(div) con un clear:both. Clear both specifica che gli elementi successivi non saranno adiacenti all’elemento float di slogan.

La struttura del post è la seguente

Nel div title ci andrà il titolo del post. In detail i dettagli del post come l’autore , le categorie e i tags .Infine in entry il testo del post.

Aprite il file style.css e inserite nell’ultima riga queste regole

#main{
float:left;
width:540px;
}
#main .post{
padding:0 0 10px 0;}
#main .post .title{
font-size:24px;
color:#326EA1;}
#main .post .title a{
color:#326EA1;
text-decoration:none;
}
#main .post .title a:hover{
color:#326EA1;
text-decoration:underline;
}
#main .post .detail{
font-style:oblique;
padding:15px 0;}
#main .post .detail a{
color:#000000;
text-decoration:none;
}
#main .post .detail a:hover{
text-decoration:underline;
}
#main .post .entry{
font-size:16px;
line-height:160%;}
#main .post .entry .more-link{
font-size:14px;
color:#003366;
text-decoration:underline;
display:block;
padding:15px 0;}
#main .post .entry .more-link:hover{
text-decoration:none;
}

La maggior parte del codice lo conosciamo già. Occorre commentare i seguenti comandi :

text-decoration:none;
text-decoration:underline;
font-style:oblique;
line-height:160%;
display:block;

1. Effetto sottolineatura del testo non impostato
2. Effetto sottolineatura del testo impostato
3. Testo in corsivo
4. La distanza tre due righe di testo è uguale al 160% rispetto alle dimensioni del font
5. Trasformiamo l’elemento in un  blocco ( come un div )

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
   

Oggi spiegheremo passo passo il codice css, scritto nell’articolo precedente.

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}
#header{
padding:40px 0;
}
#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;
 
}
#header #slogan{
float:left;
padding:15px 0 0 30px;
}
#header #logo em{
color:#69950F;
}

Prima di procedere, devo parlarvi di alcuni concetti chiave per la sintassi del css.
Per attribuire una determinata proprietà a un elemento html , si usano i selettori . Sono selettori, nel nostro caso :
‘body’,'#conteiner’,'#header’,'#header #logo’,'#header #slogan’ e ‘#header #logo em’.
Se non avete mai smanettato in css, vi starete chiedendo cosa è # ( sharp ) . Il simbolo sharp viene usato per selezionare un elemento della pagina HTML con un determinato id.

La prima regola che abbiamo scritto è :

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

1. Con il selettore ‘body’ , diciamo al browser , che le regole dichiarate all’interno delle parentesi graffe , valgono solo per il tag body.
2. Dichiariamo che il margine dell’elemento è uguale a 0
3. Dichiariamo che lo spazio tra bordo elemento e contenuto è uguale a 0
4. Diciamo di usare il font Arial per i testi

#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}

1. Conteiner è l’id che abbiamo attribuito al div principale
2. Impostiamo larghezza uguale a 999px
3. Impostiamo margine superiore e inferiore a zero e i margini laterali dinamici.  Impostando i margini laterali in dinamici, il div si centra dinamicamente nella pagina.
4. Dichiariamo un padding di 30 px per i bordi laterali

#header{
padding:40px 0;
}

1. Selezioniamo l’elemento con l’id header
2. Impostiamo un padding superiore e inferiore uguale a 40 px

#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;

1. Selezioniamo l’elemento logo che si trova all’interno dell’elemento header
2. Spostiamo l’elemento a sinistra
3. Impostiamo un padding di 30 px per il lato destro
4. Usiamo un font-family Times New Roman
5. Dichiariamo che il testo deve essere a 36px
6. Impostiamo il colore del testo in #3c3c30
7. Il bordo destro deve essere di 1px di colore #cccccc. Solid è il tipo di bordo.

#header #slogan{
float:left;
padding:15px 0 0 30px;
}

1. Selezioniamo l’elemento slogan , all’interno dell’elemento header
2. Spostiamo l’elemento a sinistra
3. Impostiamo padding superiore a 15px e padding laterale sinistro a 30px

#header #logo em{
color:#69950F;
}

1. Selezioniamo il tag em
2. Impostiamo il seguente colore : #69950f

Per chi non conosce il css , seguire i commenti, puo’ essere certamente utile , ma è consigliabile la lettura di una guida .

Ecco la migliore in circolazione : Guida css di base

1. - Introduzione
2. - Convertiamo header
   

La grafica che convertiremo passo passo è la seguente  My Easy Theme

Si tratta , come accennato nell’articolo precedente, di una grafica molto semplice , studiata per chi non è tanto pratico .

Un layout grafico, per buona regola,  si divide in tre parti : header , contenuto centrale e footer. La header è quella parte del sito, fissa in alto, composta da un logo e da un menu . Il contenuto, sono i testi centrali di ogni pagina. Invece il footer , è quella parte fissa in basso che contiene il copyright.

Oggi convertiamo la header del nostro theme.

Creiamo la pagina index.html , il file style.css e la cartella images .

Nel file style.css inseriamo il seguente codice :

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}
#header{
padding:40px 0;
}
#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;
 
}
#header #slogan{
float:left;
padding:15px 0 0 30px;
}
#header #logo em{
color:#69950F;
}

Nel file index.html

<!DOCTYPE html PUBLIC "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<div id="conteiner">
 <div id="header">
 <div id="logo">My <em>first</em> theme</div>
 <div id="slogan">Qui slogon wordpress</div>
 </div>
</div>
</body>
</html>

Mentre convertivo, ho registrato ogni singolo movimenti nel video qui sotto. Nel prossimo articolo cercheremo di commentare ogni riga di codice .

Questa funzione è realizzabile. Vi posto il codice :

function get_first_image($post){
    preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $firstimage = $matches[1][0];
    return $firstimage;
}

Per renderla visibile in tutto il theme wordpress, basta inserirla nella pagina functions.php