Exercici Camps Personalitzats i Entrades Personalitzades

La idea d’aquest exercici és repassar els conceptes que hem aprés amb els Camps Personalitzats i les Entrades Personalitzades fent una fitxa que podria ser utilitzada amb una web d’una immobiliaria. El resultat serà una entrada personalitzada que es dirà inmoble on l’usuari podrà entrar cada propietat amb les seves característiques utilitzant camps personalitzats.

Per començar crearem una entrada personalitzada que es dirà Immoble:

Deixarem totes les opcions que venen per defecte menys les de Supports on desmarcarem totes les opcions menys títol, descripció i imatge destacada. I guardarem. Si ho hem fet bé al lateral ja ens apareixerà la nova entrada personalitzada.

Ara afegirem etiquetes personalitzades a aquesta entrada personalitzada. Per fer-ho anirem al panell administrador de CPT UI i Marcarem Add New . Si ens fixem en la part dreta veurem l’apartat que ens permetrà crear les taxonomies. El funcionament és molt similar al de les entrades personalitzades amb la diferència que aquí ens preguntarà a quina entrada personalitzada volem associar la nova taxonomia. En el nostre exemple, crearem una taxonomia, que es dirà tipus, associada a les entrades d’immoble:

De la mateixa manera que en les entrades aquí també tenim molts paràmetres per modificar i configurar, però, per aquest exemple ho deixarem tot per defecte. Crearem una altre taxonomia associada a immobles que es dirà població:

Aprofitarem l’exemple per veure com podem afegir camps personalitzats a les entrades personalitzades. Anirem al panell de ACF i crearem un nou grup de camps personalitzats anomenat Immoble i dins crearem 2 camps personalitzats de text anomenats Preu i cycloneslider. També crearem 4 camps True/fals anomenats cuna, microones, nevera i barbacoa.

Aquest grup de camps anirà associat a les entrades d’immoble. Ens quedarà una cosa així.

Per poder continuar instal·larem 2 plugins nous, Cyclone slider 2 i Contact form 7 amb el métode convencional e WordPress. aquests plugins els integrarem a la fitxa de immoble que estem crean.

Crearem 2 entrades personalitzades una que es diguin Apartament amb terrassa i l’altre Casa amb vistes al mar i emplenarem tots els camps.

Després crearem 2 sliders amb cliclone amb el mateix nom que els apartaments. No serà necessari crear un nou formulari de contacte per que utilitzarem el que ve d’exemple.

Per mostrar la fitxa crearem un nou arxiu anomenar single-immoble.php amb el següent codi:

[php]
<?php get_header(); ?>

</div><!– end of meitat –>

<div class="meitat">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="tags"><?php echo get_the_term_list($post->ID, ‘poblacions’, ‘Població: ‘, ‘, ‘, ”); ?> </div>
<div class="tags"><?php echo get_the_term_list($post->ID, ‘tipus’, ‘Tipus: ‘, ‘, ‘, ”); ?></div>
<div class="tags">Preu: <?php the_field(‘preu’); ?></div>
<h2>Serveis</h2>

<div class="icones">
<?php if ( get_field(‘nevera’) ) { ?> <span class="icones_imm nevera"><div class="icones_text">Nevera</div></span> <?php } ?>
<?php if ( get_field(‘barbacoa’) ) { ?> <span class="icones_imm barbacoa"><div class="icones_text">Barbacoa</div></span> <?php } ?>
<?php if ( get_field(‘cuna’) ) { ?> <span class="icones_imm cuna"><div class="icones_text">Bressol</div></span> <?php } ?>
<?php if ( get_field(‘microones’) ) { ?> <span class="icones_imm microones"><div class="icones_text">Microones</div></span> <?php } ?>

</div>

</div><!– end of meitat –>

<div class="entrada">
<h2>Descripció</h2>
<?php the_content(); ?>

</div><!– end of meitat –>
<h2>Contacte</h2>
<div class="entrada">

<?php echo do_shortcode (‘[contact-form-7 404 "No s'ha trobat"]‘); ?>
</div>

<?php endwhile; else: ?>
<h2>No hi ha entrades</h2>
<?php endif; ?>

</div><!– end of wrapper–>
<?php get_sidebar(); ?>

<?php get_footer(); ?>

[/php]

I els següents estils:

[css]
/* IMMOBLES */

.meitat {
width: 273px;
float:left;
padding: 15px;
}

#wrapper h2{
padding: 0 0 10px 0;
}

.tags{
font-size: 16px;
padding: 0 0 10px;
}

.icones{
padding-bottom:20px;
overflow: hidden;
}

.icones_imm{
float: left;
display: block;
width: 120px;
color: #525252;
margin-bottom: 15px;
}
.icones_text{
height: 15px;
padding: 10px 0px 10px 40px;
font: italic 14px Georgia, serif;
}

.barbacoa{
background: url(images/pictos/barbacoa.png) no-repeat;
}
.microones {
background: url(images/pictos/microones.png) no-repeat;
}
.nevera {
background: url(images/pictos/nevera.png) no-repeat;
}
.cuna{
background: url(images/pictos/cuna.png) no-repeat;
}
.imatge_imm{
margin-bottom: 20px;
}
.center_text{
text-align: center;

}

/*contacte*/

.wpcf7 input[type=text], .wpcf7 textarea, .wpcf7-email {
border: 1px solid #A0A0A0;
border-radius:5px;
background:#E0E0E0;
}

[/css]

Per que es carreguin els icones afegirem una carpeta anomenada pictos a dins de images amb les imatges de les icones.

Fet això ja podem veure el resultat mostrant les entrades.

Si volem que el formulari s’envii amb la info del immoble afegir:

[php]
Inmueble:[_post_title]
Enlace:[_post_url]
[/php]

És important remarcar que si volem fer un archive-immoble.php s’ha de marcar l’opció has archive de la configuració de cada CPT, ja que, per defecte aquesta opció no vindrà marcada.

El codi del archive-immoble.php serà

[php]

<?php get_header(); ?>

<div class="meitat center_text">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="imatge_imm"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( ‘immobles-thumb’ ); } ?> </div></a>
<div class="tags"><?php the_field(‘preu’); ?></div>

</div><!– end of entrada –>

<?php endwhile; else: ?>
<h2>No hi ha entrades</h2>
<?php endif; ?>

</div><!– end of wrapper–>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
[/php]

El resultat serà el següent:

Podeu descarregar els fitxers de l’exercici aquí:

[download id=”950″]