Cómo crear un shortcode de Google maps en WordPress

Una de las cosas que podemos hacer en Wordpress es crear nuestros propios shortcodes. Son pedazos de código que podemos pegar en cualquier parte de nuestras entradas o páginas. Esta vez, vamos a ver cómo crear un shortcode para insertar un mapa de Google maps:

  1. Si tenemos una carpeta de includes podemos crear un archivo ahí con el nombre de shortcodes.php. En caso contrario lo podemos poner en nuestro archivo de funciones, functions.php. Si has optado por la primera, no olvides hacer un require en el functions.php de la carpeta includes/shorcodes.php.
  2. Creamos una función con el nombre que queramos, cuanto más específico mejor.­­­­­ En los parámetros le pasaremos los atributos. En los atributos (que es un array), especificamos el ancho, alto y la url que aporta Google en su iframe.
  3. Retornamos el <iframe> con las variables, si queremos darle algún estilo lo ponemos dentro de un div.
  4. Creamos un Hook con el nombre del shortcode del mapa de Google, que insertaremos en cualquier entrada o página. Por ejemplo [mapagoogle]

Veamos el código:

function googleMaps_shortcode($atts, $content = null) {
  extract(shortcode_atts([
      "width" => '100%',
      "height" => '300',
      "src" => 'https://www.google.com/maps/embed?tu-direccion-de-google-maps'
  ], $atts));
  return '<div class="mapa">
              <iframe style="border: 0;" src="' . $src .'" width="' . $width .'" height="' . $height .'" allowfullscreen="allowfullscreen"></iframe>
          </div>';
}
add_shortcode("mapagoogle", "googleMaps_shortcode");

Y así de fácil es insertar Google Maps en un shortcode para WordPress.

Ver más tips