domingo, 27 de mayo de 2018

Crear un tema de Wordpress. Clase 2


En el primer post habíamos visto los dos archivos básicos styles.css e index.php.

Ahora veremos dos archivos más funciones.php y sidebar.php


1.- Otros archivos necesarios

Cada archivo de la plantilla debe utilizar el nombre correcto definido por la documentación de WordPress.

Algunos de los archivos de plantilla aparte de index.php:
  • header.php
  • index.php
  • footer.php
  • funciones.php
  • sidebar.php
  • single.php
  • page.php
Los copiamos dentro de la carpeta wp-content/themes/chaveztoro/ (este es en mi caso).

2.- Antes de iniciar el desarrollo

En primer lugar, incluiremos un archivo CSS denominado normalize.css. Diferentes navegadores tienen diferentes ajustes predeterminados para cosas como los márgenes de página y el relleno.

Normalize.css establece explícitamente un número de atributos para garantizar que todos los navegadores muestren su página exactamente igual.

3.- funciones.php

Abrir functions.php y agrega el siguiente código

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}

4.- activar los widgets de la barra lateral

Si no incluyes este código, el enlace del menú de widgets no estará visible en el panel de control del administrador y no podrás agregar ningún widget.

debajo de la función anterior, agregue el código siguiente:

// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name'          => 'Sidebar',
                                'id'            => 'sidebar',
                                'before_widget' => '<div>',
                                'after_widget'  => '</div>',
                                'before_title'  => '<h2>',
                                'after_title'   => '</h2>',
                ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );

5.- Registrar un menú de navegación personalizado para permitir el uso de la función Apariencia -> Menús

Debajo del código anterior, añada lo siguiente:

// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );

Guardar functions.php y subelo al directorio de tu tema.

En mi caso, el tema se llama chaveztoro.
Y la ruta sería: wp-content/themes/chaveztoro/

6.- sidebar.php

abre el archivo sidebar.php y el siguiente código. Hace que la barra lateral y los widgets aparezcan en su tema dondequiera que se llame a get_sidebar().

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

La primera línea indica a WordPress que si no se habilitan widgets, no se debe mostrar el código HTML de la barra lateral. La segunda línea establece los atributos del elemento que contiene los widgets.

Guardar y cargar sidebar.php en el directorio de su tema.

Bueno, eso es todo por hoy.
Nos vemos en la siguiente clase.

sábado, 26 de mayo de 2018

Direcciones a Google Maps

Resultado de imagen para direcciones google maps

Google Maps es el más popular y el preferido por la gran mayoría, para mostrar cualquier punto geográfico, usando diferentes vistas.

Es muy fácil de utilizar creando enlaces, si tenemos las coordenadas geográficas de un lugar, en formato decimal.

Para hacer cualquier consulta que direccione a un lugar en Google Maps, necesitamos usar una dirección con la siguiente estructura:

https://maps.google.com/?parametro=valor

Los parámetros más empleados son: "q" (query), "loc:" (localización) y "ll" (latitud y longitud).
q se puede usar especificando en el valor las coordenadas de un lugar o un nombre que lo identifique, por ejemplo: "catedral+de+la+habana"

En las siguientes consultas de ejemplo se emplean las mismas coordenadas.

Consulta simple a Google Maps

La siguiente dirección devuelve un resultado
https://maps.google.com/?q=-12.07137592,-77.16308379

Abriéndose la pestaña de google maps y llevándonos a la dirección solicitada


Como hacer "Clic para llamar" en tu sitio web


Etiquetando manualmente cada número de teléfono, puedes asegurarte de que los números de teléfono estén siempre habilitados para la función “Clic para llamar” y que tengan un estilo que coincida con tu sitio.

Para marcar un número de teléfono como un vínculo, usa el esquema tel:. La sintaxis es simple: <a href="tel:+ 01 2422830">(01) 242 2830</a>

Usa el formato de marcación internacional

Proporciona siempre el número de teléfono en formato de marcación internacional: el signo más (+), el código de país, el código de área y el número. Si bien no es absolutamente necesario, te recomendamos separar cada segmento del número con un guión (-) para facilitar la lectura y mejorar la detección automática.

El uso del formato de marcación internacional con guiones garantizará que se pueda realizar la llamada, independientemente del lugar desde el cual llame el usuario (ya sea desde unos cientos de metros o desde miles de kilómetros de distancia).

Resultado de imagen para clic para llamar