- [A][A]
La generación de contenidos se ve afectada por la organización y disposición de los contenidos en pantalla, WordPress diferencia en un post o artículo, el título y el contenido, pero nuestro interactivo puede precisar para determinados contenidos informaciones con entidad para poder identificarlas y presentarlas en pantalla con total libertad.
Si en la estructura del contenido además del título que lleva por defecto e necesita un subtítulo (ocurre bastante en formatos tipo revista o periódico online), existe el plugin Secondary Title de Kolja Nolte, que tras activarlo y configurar nos incluirá un nuevo texto junto al título.
En la configuración podemos indicarle la manera en que queremos que lo incluya dentro del título, eso si queda dentro de la etiqueta h1 en la que se muestra el título, por lo que si queremos hacer cambios sobre el aspecto, cuerpo de texto y demás conviene colocarlo entre etiqueta span:
%title%<br><span class="subtitulo">%secondary_title%</span>
En muchos proyectos es necesario separar contenidos del post para mostrarlos en sitios en concreto y asegurarnos de que esas informaciones las contiene el artículo, para ello podemos utilizar plugins que nos permitan generar bloques personalizados tanto para páginas como para artículos (post), que incluirán además de los campos estándar del WordPress aquellos campos nuevos que deseemos crear.
Para generar más campos tenemos la opción de usar el sistema que aporta el propio WordPress, para activarlo hay que pulsar en el icono de los tres puntos verticales situado en la parte superior derecha, nos abre una pestaña y pulsamos en el botón Opciones:
Al abrir opciones nos sale un listado de opción con un check cada una para activarlos, en el listado activamos el de los campos personalizados:
Una vez activados debajo de el texto del post tendremos un formulario para crear campos personalizados:
Para crear un campo personalizado, pulsamos en el enlace de texto que pone «Nuevo» debajo del campo nombre si el campo no lo hemos utilizado aún en ningún post, si ya lo hemos usado pulsamos sobre «Elegir» en el campo y nos listará los nombres de los que ya se han utilizado.
Una vez lo creamos o elegimos, podemos rellenar el valor que tendrá en ese post. El dato se almacena en la tabla wp_postmeta, con la id del post y compuesto por una key y un value.
Para recoger el valor en el código personalizado de presentación del post normalmente el archivo single.php, usaremos la función get_post_meta pasándole: la id del post, la key o nombre del campo y si recogemos solo el primer valor que haya, por defecto esta en false y recoge todos los valores de esa key que se hayan creado en el post.
get_post_meta( get_the_ID(), 'nombrecampo', true );
La ventaja de este sistema con otras opciones es que no hace falta instalar y mantener ningún plugin. Pero tiene la desventaja es que se crean para cada post, lo que provoca algo más de trabajo.
Si no queremos usar ningún plugin pero queremos tener un bloque de campos personalizados para un tipo de post, usaremos entonces código en el archivo functions.php del tema.
Para realizar este código me base en la solución que Pablo López publicó en su blog Desarrollo WordPress en Español.
Comenzamos creando un meta_box con la función add_meta_box(), pasándole los parámetros:
function miembro_metabox() {
// add_meta_box( 'id', 'title', 'callback', 'screen', 'context', 'priority' );
add_meta_box( 'miembro-metabox', 'Datos de un miembro', 'campos_miembro', 'post', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'miembro_metabox' );?>
Al elegir post en el valor de screen, le indicamos que son campos que queremos tenerlos activos en todos los posts.
A continuación añadimos la función que creará los campos:
<?php
function campos_miembro($post) {
//comprobamos si ya tenemos esos datos rellenos en el post
$miembro_nom = get_post_meta( $post->ID, 'miembro_nom', true );
$miembro_secc = get_post_meta( $post->ID, 'miembro_secc', true );
$miembro_tel = get_post_meta( $post->ID, 'miembro_tel', true );
$miembro_email = get_post_meta( $post->ID, 'miembro_email', true );
$miembro_linkedin = get_post_meta( $post->ID, 'miembro_elinkedin', true );
$miembro_twitter = get_post_meta( $post->ID, 'miembro_twitter', true );
$miembro_facebook = get_post_meta( $post->ID, 'miembro_facebook', true );
//Como las secciones van a ser una lista la rellenamos
$array_secc = array("Oficina", "Alamacén", "Taller");
// Añadimos un campo para comprobaciones
wp_nonce_field( 'campos_moembro_metabox', 'campos_miembro_metabox_nonce' );
?>
<table width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
<td width="20%"><strong>Nombre</strong><br /></td>
<td width="80%"><input type="text" name="miembro_nom" value="<?php echo sanitize_text_field($miembro_nom);?>" class="large-text" placeholder="Nombre" /></td>
</tr>
<tr>
<td><strong>Sección</strong><br /></td>
<td><select name="miembro_secc" class="postform"> <?php foreach ($array_secc as $key => $secc) {?> <option value="<?php echo ($key);?>" <?php if ($event_secc == $key){?>selected="selected"<?php }?>><?php echo $secc;?></option> <?php }?> </select></td>
</tr>
<tr>
<td><strong>E-mail</strong></td> <td><input type="email" name="miembro_email" value="<?php echo sanitize_email($miembro_email);?>" class="large-text" placeholder="E-mail de contacto" /></td>
</tr>
<tr>
<td><strong>Linkedin</strong></td> <td><input type="email" name="miembro_linkedin" value="<?php echo sanitize_email($miembro_linkedin);?>" class="large-text" placeholder="Linkedin" /></td>
</tr>
<tr>
<td><strong>Twitter</strong></td> <td><input type="email" name="miembro_twitter" value="<?php echo sanitize_email($miembro_twitter);?>" class="large-text" placeholder="Twitter" /></td>
</tr>
<tr>
<td><strong>Facebook</strong></td> <td><input type="email" name="miembro_facebook" value="<?php echo sanitize_email($miembro_facebook);?>" class="large-text" placeholder="Facebook" /></td>
</tr>
</table>
<?php
}
?>
La función sanitize_text_field de WordPress Developer formatea el texto para que se guarde sin problemas en la base de datos.
Una vez tenemos el meta_box y los campos personalizados, añadimos la función que guardará los datos del meta_box en la base de datos cuando se guarde el post, añadiendo la acción save_post:
function campos_miembro_save_data($post_id) {
// Comprobamos si se ha definido el nonce.
if ( ! isset( $_POST['campos_miembro_metabox_nonce'] ) ) {
return $post_id;
}
$nonce = $_POST['campos_miembro_metabox_nonce'];
// Verificamos que el nonce es válido.
if ( !wp_verify_nonce( $nonce, 'campos_miembro_metabox_nonce' ) ) {
return $post_id;
}
// Si es un autoguardado nuestro formulario no se enviará, ya que aún no queremos hacer nada.
if ( defined( 'DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
return $post_id;
}
// Comprobamos los permisos de usuario.
if ( $_POST['post_type'] == 'page' ) {
if ( !current_user_can( 'edit_page', $post_id ) )
return $post_id;
} else {
if ( !current_user_can( 'edit_post', $post_id ) )
return $post_id;
}
// Vale, ya es seguro que guardemos los datos.
// Si existen entradas antiguas las recuperamos
$old_miembro_nom = get_post_meta( $post_id, 'miembro_nom', true );
// Saneamos lo introducido por el usuario.
$miembro_nom = sanitize_text_field( $_POST['miembro_nom'] );
// Actualizamos el campo meta en la base de datos.
update_post_meta( $post_id, 'miembro_nom', $miembro_nom, $old_miembro_nom );
}
add_action( 'save_post', 'campos_miembro_save_data' );
Para recoger el valor en el código personalizado de presentación del post normalmente el archivo single.php, al igual que si usáramos los campos personalizados propios del WordPress usaremos la función get_post_meta pasándole: la id del post, la key o nombre del campo y si recogemos solo el primer valor que haya, por defecto esta en false y recoge todos los valores de esa key que se hayan creado en el post.
get_post_meta( get_the_ID(), 'nombrecampo', true );
Este sistema tiene la ventaja de que los campos están disponibles automáticamente en todos los elementos (post, page, custom_post_type, …) que hayamos indicado, lo que nos evita trabajo a la hora de dar de alta un nuevo contenido.
Otra forma de añadir campos personalizados de manera que estén fijos en una parte del contenido que decidamos, como ocurre en el segundo método que he planteado, sería usar un plugin, yo uso Avanced Custom Fields de Elliot Condon.
La ventaja de usar este plugin es que no necesitas escribir nada de código, esta preparado para generar campos de todo tipo. Trabaja generando grupos de campos (aunque puedes crear un grupo de un solo campo.
Cada grupo tiene un nombre, le puedes indicar cuando quieres que aparezca (en todos los post, en las páginas, o en alguna de ellas en concreto, en los de una categoría …), también en que posición de la página de edición quieres que aparezca.
A la vez puedes desactivar determinados elementos de la pantalla de edición por que no los vas a utilizar (extracto, Imagen destacada…).
Una vez creado el grupo le podemos añadir tantos campos como queramos. Nos permite crear campos de muchos tipos (texto, área de texto, email, imagen, archivo …), lo identificamos con un nombre que tiene que ser único porque con el identificaremos el campo en el código de lectura del post y le colocaremos una etiqueta para identificarlo. Si necesitamos dar alguna explicación para su relleno, tenemos un apartado instrucciones.
A los campos del podemos poner un valor por defecto, limitar el número de caracteres y más opciones. Cubre todas las necesidades normales que puedan surgir a la hora de personalizar los contenidos de un proyecto Wordpress.
Para recoger el valor en el código personalizado de presentación del post normalmente el archivo single.php, al igual que si usáramos los campos personalizados propios del WordPress usaremos la función get_field:
get_field(“cf_pdf_file”);
Lo que nos devolverá un array con los datos:
[id] [alt] [title] [description] [mime_type] [url]
En el caso de las galerías de imágenes es especial y usa dos funciones:
if ( get_field( "cf_gallery" ) ) {
while ( has_sub_field( "cf_gallery" ) ) {
get_sub_field("cf_gallery_item");
}
Lo que nos devuelvá un array con estos datos:
[id] [alt] [title] [description] [mime_type] [url] [width] [height] [sizes]
Además el plugin tiene la opción de exportar los campos personalizados para poder importarlos en otro blog de WordPress que tenga instalado el mismo plugin.
A la hora de personalizar la forma de listar los artículos podemos necesitar una imagen pequeña que acompañe al resumen del texto que ya incluye el panel de control. Para ello debemos añadir esa funcionalidad, editando el archivo functions.php de nuestro “nuevoTema” y añadiendo:
if( function_exists( 'add_theme_support' )) add_theme_support( 'post-thumbnails' );
Al incluir este código se añadirá automáticamente un campo personalizado “Post Thumbnail” en el panel de control en la creación edición de artículos.
Para mostrar la miniatura en la pantalla, en el archivo loop-single.php añadiremos:
<?php the_post_thumbnail(); ?>
Si queremos personalizar la forma en que aparecerá podemos indicarle el tamaño, tiene 3 predefinidos: pequeño(‘thumbnail’), medio(‘medium’), grande(‘large’) o personalizado, ancho, alto( array( 200,200 ) ).
Podemos añadirle una clase o estilo ( array(‘class’ => ‘nombredelaclase’) ).
Añadirle un alt ( ‘alt’ => ‘alt que a queramos’ ).
También un titulo: ( ‘title’ => ‘titulo que queramos’ ).
<?php the_post_thumbnail( 'medium', array('class' => 'iconoArticulo', 'alt' => 'imagen que presenta el artículo', 'title' => 'Imagen' )); ?>
Tenemos el diseño del interfaz y ajustado la edición de contenidos para que incluya lo necesario, ahora vamos a generar un nuevo tema.