Cómo introducir en wordpress un nuevo campo en la instancia de una imagen

Como sabemos, por una parte podemos introducir un campo adicional en una imagen que esté subida a wordpress, y ese campo estará disponible siempre que introduzcamos esa imagen en un post, pero hoy hablaremos que cómo añadir un nuevo campo en una instancia de un post (esa pantalla que aparece cuando insertas una imagen en un post y posteriormente clicas en ella y la editas).

Los pasos a seguir son los siguientes:

En el functions.php es necesario incluir el siguiente código:

/**
 * Include in Image Details of a photo the possibility of having another param called
 * @return string
 */
function add_my_settings() {
 ob_start();
 wp_print_media_templates();
 $tpl = ob_get_clean();
 if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
	&& ( $before_idx = strpos( $tpl, '

Es necesario crear un nuevo archivo llamado imageDetailsModification.js (o el nombre que sea, recordar modificarlo entonces también en el código anterior)

// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
	data.metadata.my_setting_know_more = data.editor.dom.getAttrib( data.image, 'data-know-more' );
});

// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
	data.editor.dom.setAttrib( data.image, 'data-know-more', data.metadata.my_setting_know_more );
});

Eso sería todo lo referente a la parte de administración. En la parte de front tendremos que usar dicho valor que ya estaría almacenado. Yo lo tengo hecho por ejemplo habiendo realizado un add_filter de img_caption_shortcode

add_filter('img_caption_shortcode', function ($empty, $attr, $content) { .... } , 10, 3);

Y ya lo último es en el punto que queramos usar

preg_match_all('/data-know-more=([\'"]?)(.+?)\1[ >]/', $content, $matches);
$knowMore = $matches[2];

Urls que me han ayudado:

  • Añadir más opciones a la instancia de una imagen (link)
  • Guardar opciones como atributos data-* (link)
  • Incluir un nuevo tag html (link)

WordPress – Cómo incluir un campo personalizado en un adjunto

En este caso tenía la necesidad de crear un campo personalizado para las imágenes (que en wordpress se consideran adjuntos) para después utilizarlo en un post. Para generar dicho campo simplemente he seguido los siguientes pasos:

En el functions.php que tengamos en nuestra personalización simplemente tendremos que añadir las siguientes líneas:

add_filter('attachment_fields_to_edit', 'edit_media_custom_field', 11, 2 );
add_filter('attachment_fields_to_save', 'save_media_custom_field', 11, 2 );

function edit_media_custom_field( $form_fields, $post ) {
	$form_fields['custom_field'] = array( 'label' => 'Custom Field', 'input' => 'text', 'value' => get_post_meta( $post->ID, '_custom_field', true ) );
	return $form_fields;
}

function save_media_custom_field( $post, $attachment ) {
	update_post_meta( $post['ID'], '_custom_field', $attachment['custom_field'] );
	return $post;
}

Con ello ya tendremos al subir cualquier imagen el siguiente resultado:

WordPress – Cómo incluir otro tipo de categoría taxonomía

A colación del otro post que cree hablando de “Cómo incluir otro tipo de post” diferente al los que hay por defecto necesité después ser capaz de categorizarlos, y para eso necesité informarme acerca de las taxonomías (vaya palabro)

Pero… ¿qué es una taxonomía?

Pues básicamente es una forma de agrupar determinados elementos juntos. En wordpress, es un mecanismo para agrupar algunos posts (o links o tipos de posts a medida como el que hicimos).

Existen ya algunas taxonomías creadas por defecto, que serían:

  • Category: Agrupar post (de tipo ‘post’)
  • Tag: Es como las categorías pero dando una mayor libertad.
  • Link Category: Es para categorizar los links.
  • Post Formats: Vale para ser usados por los temas, pero no podemos crearlos a voluntad como los otros.

En nuestro caso vamos a registrar una nueva taxonomía y asociarla al tipo de post que hicimos anteriormente mediante este código (incluido en el functions.php de un template que estamos usando):

add_action( 'init', 'create_web_taxonomies', 10, 0 );

function create_web_taxonomies() {
  // create a new taxonomy
  register_taxonomy(
    'cursos_category',
    array('cursos'),
    array(
      'labels' => array(
        'name' => __( 'Categorías de cursos' ),
        'singular_name' => __( 'Categoría de curso' ),
        'edit_item' => __( 'Editar curso' ),
        'add_new_item' => __( 'Añadir nuevo curso' ),
        'search_items' => __( 'Buscar cursos' )
      ),
      'public' => true,
      'hierarchical' => true,
      //'rewrite' => array( 'slug' => 'secciones_cursos' )
    )
  );
}

Ya con eso automáticamente nos apareció cuando pasábamos por “curso” un apartado Categoría del Curso, y cuando editábamos un curso nos permitía seleccionar la categoría del curso a la que pertenecía dicho curso.

Hay más información de Taxonomías en este link.

WordPress – Cómo incluir otro tipo de post

Actualmente, en wordpress, hay varios tipos de posts por defecto (todos ellos se almacenarán en la tabla wp_post), que son:

  • Post (Post Type: ‘post’).
  • Página (Post Type: ‘page’)
  • Adjunto (Post Type: ‘attachment’)
  • Revision (Post Type: ‘revision’)
  • Menú de navegación (Post Type: ‘nav_menu_item’)

Pero a veces necesitaremos crear otro nuevo tipo de post para posteriormente mostrarlo en el front de otra forma, bien a través de una template que contenga todos los nuevos posts, o que contenga solo uno,…

El código para crear un nuevo tipo de post (llamado por ejemplo curso) es el siguiente. Lo introduje en un archivo functions.php que tenía el template que estoy utilizando:

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'curso',
    array(
      'labels' => array(
        'name' => __( 'Cursos' ),
        'singular_name' => __( 'Curso' )
      ),
      'public' => true,
      'menu_icon' => 'dashicons-feedback',
      'rewrite' => array( 'slug' => 'curso' )
    )
  );
}

Notas:

  • He incluido el icono feedback, aunque no sería necesario ningún icono.
  • Slug también es opcional, está por si quiero posteriormente acceder a través de una url amigable a los contenidos.

Y simplemente con ese código ya tendremos acceso en la administración a la creación de ese tipo de post.

Hay más información de lo que se puede hacer con register_post_type en este link.

WordPress – Cómo mostrar el número de visitas a un post sin utilizar un plugin

Hoy mostraremos una forma de realizar el conteo de las visitas en los diferentes posts que tengamos en un blog de wordpress usando el “post meta” que proporciona wordpress

Paso 1 – Incluir en el functions.php el siguientes código.

function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "0";
    }
    return $count;
}
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}
// Remove issues with prefetching adding extra views
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

Paso 2 – Incluir en la página single.php el siguiente código (permitirá almacenar una visita al post, hará uso del código que hemos incluido en el paso 1).

<?php setPostViews(get_the_ID()); ?>

Paso 3 – Incluir en la página single.php dentro del bucle del fichero el siguiente código (permite visualizar dicho número de visitas.

<?php echo getPostViews(get_the_ID());?>

En mi caso por ejemplo el código que he introducido dentro del single.php es el siguiente (el tema incluye font-awesome)

<li><i class="fa fa-eye"></i><span><?php echo getPostViews(get_the_ID()).' visitas'; ?><span></li>

Tomada esta información de este link y ligeramente modificada para su correcta visualización

WordPress – Cómo mostrar el title de una imagen propia de un post

Me he encontrado con la necesidad de obtener el title de una imagen en una de las templates de wordpress, la forma que he tenido de hacerlo es la siguiente:

//Obtengo el id del thumbnail
$thumbnail_id = get_post_thumbnail_id($post->ID);
//Obtengo toda la imagen junto con sus datos
$thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
//En caso de que existan esos datos mostraré dentro de un p tanto el título como el contenido de dicha imagen (por contenido no significa la propia imagen)
if ($thumbnail_image && isset($thumbnail_image[0])) {
echo '<p>'.$thumbnail_image[0]->post_title.' '.$thumbnail_image[0]->post_content.'</p>';

WordPress – Como añadir o quitar home del wp_nav_menu

Imaginaos que tenéis un blog en el cual queréis mostrar dos veces el esqueleto de la página, con la diferencia de que en uno necesitáis que tenga el “Home” (Header) y en el otro no(footer).

La solución utilizada ha sido la siguiente:

header.php

wp_nav_menu( array( 'theme_location' => 'primary' ) );

footer.php (le he metido ese valor en la variable tienehome, podéis llamarla cómo queráis)

wp_nav_menu( array( 'tienehome' => 'false' ) );

functions.php (modificamos el twentyeleven_page_menu_args, pero porque estaba con esta plantilla, podríais utilizar el page_menu_args original)

/* Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link. */
function twentyeleven_page_menu_args( $args ) {
   if($args['tienehome']){$args['show_home'] = false;	}
   else {$args['show_home'] = true;	}
   return $args;
}

add_filter( 'wp_page_menu_args', 'twentyeleven_page_menu_args' );

WordPress – Añadir opción de imagen destacada en una template

Pues aquí estoy de nuevo, y esta vez me he encontrado con que tenía un problema al crear una plantilla para un wordpress.
Lo que necesitaba exactamente era que al crear un post/página/… me diera la posibilidad de incluir una imagen destacada asociada a ese post/página (y que no tuviera que ponerlo en el cuerpo del mensaje).
Hay muchas templates que lo tienen por defecto, pero en mi caso no.

1 (en caso de que no te aparezca en el dashboard al editar o crear un post) – Debes añadir en el archivo functions.php que se encuentra en el interior de tu template la siguiente línea de código:
add_theme_support( ‘post-thumbnails’ );

2 – Selecciona el “set featured image” o el “Selecciona imagen destacada” y sigue todos los pasos que se presentan para subirla.

3 – Para incluir la imagen en cuestión únicamente has de ir a la template que estés utilizando o al fichero /Appearance/editor/loop.php e incluir la línea de código siguiente:

Así de sencillo y así de complicado, espero que os haya servido!!

Como convertir WordPress en multi idioma

Los 4 pasos a seguir para hacer que tu blog wordpress sea multi idioma:

  • En el panel de control vas a Plugins->Añadir nuevo (o add new)
  • Buscas “WPML Multilingual CMS”.
  • Lo instalas y activas. Verás que una vez activado aparece un nuevo menú que pone “WPML”.
  • Si expandes este menú aparecerá la opción de “Languages”. Clicamos y seguimos la instalación

Ahora, cada vez que crees un post se te dará la posibilidad de agregarlo en los idiomas que has escogido en el proceso de configuración.

Un consejo: También probé a instalar el zdMultilang (otro plugin), pero no lo recomendaré en ningún momento puesto que me ha dado muchos problemas.

Plugin de wordpress para creación y actualización de sitemap

Llevo con este blog casi un mes, y me di cuenta que tenía un problema con los buscadores como Google, ya que sólo me habían indexado la página principal. Por ello, decidí crear un sitemap de la web (es como un esquema de las páginas que tiene la web), cosa que hice por medio de esta página. El problema ahora viene porque dicho sitemap.xml es necesario actualizarlo cada vez que cree un post, cosa que no tenía ganas de hacer cada vez, y por ello, como creo que la mejor forma de hacerlo es de forma automática, he estado buscando por internet una solución.

En esta página podéis encontrar un plugin de wordpress que se actualizará automáticamente cada vez que añadáis un post a vuestro blog. Recordad que tenéis que descargarlo, subirlo a vuestro sitio, activarlo y configurarlo.

El resultado, ya os lo contaré…….. pero desde luego es algo totalmente necesario con lo que debe contar toda página web/blog.