Advanced Custom Fields

Selecció_001

A aquesta classe veurem un plugin que ens pot ajudar molt a l’hora de treballar amb Camps Personalitzats per que amplia notablement les possibilitats que ens ofereix Woprdpress per defecte.

S’instal.la com qualsevol altre plugin de WordPress:

  • El podem descarregar desde aquesta web.
  • Un cop descarregat el posem al directori ‘/wp-content/plugins/’ . i el descomprimim
  • Activem el plugin mitjançant el menú dels “plugins” en WordPress

Una altre opció que tenim és integrar el plugin al nostre tema de manera que al instal.lar el tema el pluguin ja vingui inclòs. Seguirem aquest passos:

  • Primer descarregarem el plugin de aquesta web.
  • Un cop descarregat el posem al directori ‘/wp-content/temapropi/plugins’ . i el descomprimim
  • Obrim el functions.php i afegim el següent codi:
    /* INCLOU ACF PLUGIN */
    
    include_once('plugins/advanced-custom-fields/acf.php' );
    

Fet això ja podem accedir al panell administrador i veure que apareix una nova opció anomenada “Custom Fields”.

Ja podem fer clic al nou menú lateral “Custom Fields” i creem el seu primer grup de camps personalitzats que es dirà Samarretes.

Advanced_custom_fields

El primer que veiem és un apartat que ens pregunta a on volem mostrar els nostres camps personalitzats. Si obrim el desplegable veurem que tenim moltes opcions, com per exemple, mostrar els camps només a les entrades (post), a les pàgines(page), per un usuari concret(User Type), a una pàgina o entrada concreta, per una categoria… Crearem una categoria nova que es digui Samarretes i triarem l’opció “Post Category”, “is equal to”, Samarretes.

A l’apartat opcions podem definir 4 paràmetres:

  • Order No:Número id del grup de camps personalitzats
  • Position: Posició a la pàgina, sota el títol, sota del contingut o al lateral.
  • Style:Agrupat o no.
  • Hide on screen:Ens permet eliminar els elements que no ens interessin de la pàgina on entrem les dades.

Modificarem les opcions de Hide on screen marcan-les totes menys Hide /Show all i Categories. A Style que posarem Standard. Ara ja podem començar a crear camps. Una de les característiques d’aquest plugin és que ens permet crear molts tipus de camps.

File_types

La majoria de tipus de camps son gratuïts però també n’hi ha que són de pagament. Podeu mirar tots els tipus camps i les seves funcions aqui

Veurem alguns exemples que ens podem fer molt de servei. Començarem creant un camp de text. Veiem que te moltes opcions però les que ens interessant de moment són el nom, l’etiqueta, la descripció i el tipus. Com ha exemple crearem un camp de text que es dirà Nom emplenant els camps que hem comentat abans. Es quedarà alguna cosa com això:

Crear_camp_personalitzat

Crearem una altre camp de text que es digui descripció seguin els passos comenetats abans.

Per veure una altre tipus de camp ara en crearem un de tipus “Select”. Aquest camp ens crearà un menú desplegable amb varies opcions. Crearem un camp d’aquest tipus anomenat color. Ens quedarà alguna cosa així:

Camp_select

Un altre tipus de camps són els “True/Fals”. Aquests camps tenen dos valors possibles si o no. Com ha exemple, crearem un camp que es digui Oferta. Ens quedarà alguna cosa així:

camp_oferta

Un altre tipus de camp és el camp “Image”. Aquests camps ens permeten guardar imatges. Crearem un camp que es digui imatge. Ens quedarà una cosa així:

camp_imatge_url

Per aquest primer exemple és important que de les opcions del camp imatge tinguem Return Value a Image URL. Si ho tinguessim marcat a Image Object ens retornaria un array amb tots els parametres del camp imatge i no es veuria.

Fet això ja podem guardar el grup de camps. Ara mirem com ho farem per que aquests camps es mostrin allà on volem. Fem una copia de l’arxiu single.php, per guardar el que tenim fet fins ara, i obrim l’arxiu original. Busquem aquest codi:

<?php the_content(); ?>
<?php the_meta(); ?>
<p>Preu:<?php echo get_post_meta($post->ID, 'Preu', true); ?></p>
<p>Estoc:<?php echo get_post_meta($post->ID, 'Estoc', true); ?></p>
<?php the_time('F jS, Y') ?> | <?php the_author_posts_link(); ?>

I el substituïm per:

<div id="fitxa_samarreta">
    <img src="<?php the_field('imatge'); ?>" alt="" />
    <p><b>Nom:</b> <?php the_field('nom'); ?></p>
    <p><b>Descripció:</b> <?php the_field('descripcio'); ?></p>
    <p><b>Color:</b> <?php the_field('color'); ?></p>
</div>

I el següent css:

/* FITXA SAMARRETA */

#fitxa_samarreta{
overflow: hidden;
padding: 20px 0;
}

Per veure el resultat crearem dues entrades a la categoria “Samarreta” emplenant tots els camps que hem creat. Fet això, ja podem veure el resultat mostrant les entrades.

Ara anem a veure com ho farem per mostrar el camp “true/false”. A sota del codi que hem afegit abans però dins del div id=”fitxa_samarreta” posarem:

<?php if ( get_field('oferta') ) { 

?> <div class="oferta">Oferta</div>

<?php
}
?>

Aquest codi és un condicional. Això el que ens permetrà serà mostrar o no el div class=”oferta” depenent de si tenim marcat o no el camp. Millorarem l’aspecte amb estils.

.oferta{
font-size: 18px;
color: #F00;
text-decoration: overline underline;
}

Ara ja podem veure el resultat mostrant una de les entrades per pantalla. El que més destaca és que no hem pogut determinar la mida final de la imatge i això pot ser un problema. Si el que volem és que la imatge que carreguem a un camp personalitzat s’escali amb la funció crop haurem de fer alguns canvis.

Pimer haurem de definir una mida al nostre functions.php a l’apartat add_theme_support. Crearem una nova mida que es dirà samarretes-thumb de 250px x 250px. El codi que afegirem serà el següent.

add_image_size( 'samarretes-thumb', 250, 250, true );

Després haurem de canviar els paràmetres del nostre camp imatge definit a Advanced custom fields. Editarem el camp i canviarem l’opció Return Value de Image URL a Image ID. Fet això, ja podem editar l’arxiu single.php i buscar:

<img src="<?php the_field('imatge'); ?>" alt="" />

I canviar-lo per:

<?php
$attachment_id = get_field('imatge');
$size = "samarretes-thumb"; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
?>

<img style="float:left;" src="<?php echo $image[0]; ?>" />

El resultat serà que ara les nostres imatges es veuran de 250px x 250px.

Al cridar la variable de la imatge hem afegir un paràmetre [0]. Aquest paràmetre pot tenir diferents valors:

// url = $image[0];
// width = $image[1];
// height = $image[2];

Depenent de la informació que volguem obtenir.

Per jugar amb els parametres dels camps podem provar de fer servir el “Conditional Logic”. Aquest paràmetre ens permetrar relacionar camps amb un condicional, per exemple, podrem mostrar o no un camp al formulari d’introducció de dades depenent de l’estat d’un altre camp. Com ha exercici crearem un nou camp “Vols posar les mides” true/flase i dos camps de text “amplada” i “llargada” que depenguin d’aquest camp.

Un altre exercici que es pot provar és fer el slider de la classe anterior utilitzant els advanced custom fields.

Per fer-ho crearem un nou grup de camps que es dirà Slider. Crearem 2 camps de texts anomenats “Slider Link” i “Slider Text”. Un camp d’imatge que es dirà “Sliderimatge” amb l’opció Return Value a Imatge ID, ja que, volem que les imatges s’escalin.

Fet això, crearem 2 o 3 entrades a la categoria “acfslider” emplenant els camps creats. Finalment, modificarem el nostre home amb el codi necessari.

Podeu descarregar els arxius de la classe aquí:

[download id=”867″]