Advanced Custom Fields

Advanced Custom Fields / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Advanced Custom Fields

La web corporativa de Florette Portugal, realizada con Wordpress, Bootstrap, css3, html5, JQuery, PHP y MySQL, es una web de diseño sencillo inspirado en las demás webs de la marca.  

Cuenta con mas de 7 secciones, todas ellas dinámicas para poder ser gestionadas desde el panel de control.  La web destaca por algunos detalles en el back.

Los textos, imágenes y videos dinámicos son llamados gracias al plugin Advanced Custom fields, una herramienta excelente para desarrolladores

"Advanced Custom Fields es la solución perfecta para cualquier sitio web WordPress que necesite más información extra que otros Sistemas de administración de contenido."

Su uso es muy sencillo, tras descargarlo y activarlo, no hay mas que llamarlo para cada sección de la web desde el archivo functions.php por ejemplo de esta manera:

<?php
add_action('init', 'addModulosHome');
function addModulosHome() {//add post type
    register_post_type('modulo_home', array(
        'labels' => array(
            'name' => 'nombre_sección',
            'singular_name' => 'nombre_sección',
            'menu_name' => 'nombre_sección',
            'name_admin_bar' => 'nombre_sección',
            'add_new' => 'Add New nombre_sección',
            'add_new_item' => 'Add New nombre_sección',
            'new_item' => 'New nombre_sección',
            'edit_item' => 'Edit nombre_sección',
            'view_item' => 'View nombre_sección',
            'all_items' => 'All nombre_sección'
        ),
        'description' => 'Configuracion de los modulos de la home nombre_sección',
        'public' => true,
        'menu_position' => 12, //posición en el panel lateral del CMS
        'supports' => array('title')
    ));
}


Tras eso creamos en el CMS los inputs necesarios, áreas de texto, imágenes, etc. Una herramienta sencilla tanto para desarrolladores como para gestores del panel de de control.

En el archivo, si existen post/ custom, los llama:

<?php $destacadosMiradas = new WP_Query( 'post_type=modulo_home&posts_per_page=1' ); ?>
<?php if ($destacadosMiradas->have_posts()) : ?>
<?php while ($destacadosMiradas->have_posts()) : $destacadosMiradas->the_post(); ?>

//contenido

 <?php endwhile; ?>
<?php endif; ?>

El código para pintarlos:

<img src="<?php the_field('modulo_uno_imagen'); ?>
<a href="<?php the_field('modulo_dos_link'); ?>" ></a>
<h1><?php the_field('modulo_dos_titulo'); ?></h1>

La sección productos dividida en categorías son enlazados de forma dinámica por el método get y mostrados con un bucle. Una técnica similar a la forma de llamar a los tags en este blog.

El buscador usa también el método get, para mostrar en la url los detalles de la palabra buscada, lo cual ayuda al posicionamiento. Un formulario sencillo pero efectivo.

<form method="get" id="searchform" action="#" class="search-form">
<input type="text" class="field" name="s" id="s" placeholder="Procurar aquí"">
    <input type="submit" class="submit submit-icon" name="submit" id="searchsubmit">
</form>

Estos son algunos detalles de la web que podéis visitar en este enlace Florette Portugal.

En otro post ya escribí sobre la versión en España de esta web, lo puedes ver aquí.

Web oficial Advanced Custom Fields

 

Mariano J. Muzas.

Muchas gracias poner el código, me ha sido de mucha ayuda.

Javi LLuch / 29-01-2017

¿La posición es obligatoria? ¿No se posicionan de forma natural al orden de creación?

Luis Cano / 29-01-2017

Luis, el orden es necesario para que tu mismo puedas decidir su posición y facilitar el trabajo a la hora de buscarlos. Puedes ordenarlos por secciones o categorías. Has de tener cuidado, si no lo pones corres el riesgo de sufrir errores.

Mariano J. / 29-01-2017

Escribe un comentario

Tu email no se hará visible