sábado, 1 de diciembre de 2018

Soporte de primer nivel

Como ingresar a cpanel o al webmail de un dominio?


- Abrir una ventana en el navegador.
- Para entrar al cpanel, coloca el dominio de la siguiente forma: ejemplo.com/cpanel
- Para entrar al webmail. coloca el dominio de la siguiente forma: ejemplo/webmail
Vídeo de como ingresar al cpanel y webmail:



Como enviar los datos de acceso al Panel de control a un cliente?

- Ingresar a IBI, colocando nuestro usuario y contraseña.
- Ir a la pestaña Soporte y renovaciones.
- Click en la opción Todos los dominios.
- En la caja de búsqueda filtramos el dominio que deseamos ubicar.
- Ubicamos al dominio y hacemos click en la opción Hosting.
- Probamos los datos de acceso de cpanel que está en IBI.
- Para enviar la carta con los datos de acceso realizamos lo siguiente:
    - Ir al menú principal de IBI
    - Ir a la pestaña Clientes, y luego click en carta nueva.
    - Ubicamos la carta que vamos a usar para enviar los datos de acceso, que se llamada "Hosting y          dominio activado"
    - Se llena la carta con los datos que deseamos enviar y la enviamos.

Vídeo de como enviar loa datos de acceso al Panel de control



Como cambiar la contraseña de cpanel, de correo corporativo y revisar la cola de correo en el servidor.

- Ingresamos al servidor, colocando nuestro usuario y contraseña de soporte.
- En la caja de búsqueda del servidor ubicado al lado izquierdo, buscamos y seleccionamos la opción Modificación de contraseña.
- En el listado que aparece en el lado derecho de la ventana, colocamos el dominio al cual cambiaremos la contraseña de cpanel.
- Seleccionamos el dominios.
- Se genera una nueva contraseña y aceptamos el cambio.
- Se ingresa al nueva contraseña en los datos del dominio grabados en IBI.

Para cambiar la contraseña de un correo, se realiza lo siguiente:

- Ya dentro del Panel de control.
- Nos ubicamos en la sección CORREO ELECTRÓNICO.
- Luego hacemos click en la opción Cuentas de correo electrónico y se abrirá el listado de correos.
- Ubicamos al correo y vamos a la opciones que aparecen al lado derecho del correo que vamos a cambiar la contraseña.
- Y damos click en la opción Password and Authentication
- Generamos una nueva contraseña y aceptamos el cambio.

Ver vídeo:




Pruebas de soporte de primer nivel

Estas pruebas de soporte de primer nivel, es realizada el operador de soporte remoto durante la llamada al cliente:
















viernes, 23 de noviembre de 2018

Instalar una plantilla en Wordpress Multisitio

Para instalar una plantilla en Wordpress Multisitio, se deben seguir los siguientes pasos:

1. Acceder al sitio archivo /wp-admin e ingresar el usuario y contraseña.

Iniciar Sesión en Wordpress
2. Acceder a la opción en Mis sitios > Administración de la red > Sitios.


3. Aparece la pantalla Sitios y hacer clic en “Agregar nuevo”.


4. En la pantalla de Agregar nuevo sitio en Dirección del sitio (URL) por ejemplo w1, w2 w3, w4, w5. Agregar el Título del sitio, Idioma del sitio, Agregar un correo. Luego hacer clic en “Agregar sitio”.


5. Después de crear el nuevo sitio aparecerá un mensaje con el mensaje que el sitio se creó correctamente. Luego hacer clic en la opción “edite el sitio”.


6. Aparecerá la pantalla Editar sitio y hacer clic en la opción “Temas”.


7. Aparecerá la pantalla Temas luego hacer clic en la opción “Agregar nuevo” para subir el nuevo tema y la plantilla se instalará.


8. Después de instalado la plantilla. Dirigirse a la opción “Mis sitios” y elegir el sitio creado que se desea activar la plantilla. (Ejemplo w8)


9. Aparecerá la pantalla del sitio seleccionado (Ejemplo w8). Mis sitios > Apariencia > Temas.


10. Activar el tema de la plantilla instalada.


lunes, 19 de noviembre de 2018

Error 500 o pantalla en blanco


Al migrar un sitio web de servidor puede ocurrir que aparezca en la pantalla lo siguiente:
Error 500 o una página en blanco.

Para detectar cuál es el error  hay que buscar el archivo error_log y revisarlo.

1.- Dentro del public_html existe un archivo llamado error_log.

2.- Este archivo debe ser descargado y visto con un editor de texto. Puede ser notepad++ o cualquier otro.
Puede ser muy grande a veces. En ese caso es mejor cambiarle de nombre por ejemplo:  error_log_anterior.
y volver a cargar la página que falla para que se cree uno nuevo con los errores producidos al cargar la página.
Al ser abierto, el archivo debe mostrar algo como esto:


Como se puede ver aquí, el archivo dice:
Access denied for user 'muniasce_asmun12'@'localhost' (using password: YES) in /home/muniasce/public_html/Connections/cn1.php on line 9
Es decir, indica que falló el acceso a la base de datos y muestra el archivo exacto en que está el error y la línea.

3.- Se  busca ese archivo en la ruta indicada. En este caso era este:


Como se puede notar en la línea 9 está la llamada a la conexión con mySQL que es lo que falla. En la línea 8 está el password.

Para corregir este error hay que entrar a la sección: Bases de datos MySQL del panel de control: cpanel.
Y al usuario respectivo se le pone el pass que aparece en la línea 8. En este caso el usuario aparece en la línea 7.
$username_cn1 = "muniasce_asmun12";

Y el sitio debe volver a funcionar.

Algo adicional. Cómo se puede leer en en la línea 26   dice lo siguiente:
PHP Deprecated:  mysql_pconnect(): The mysql extension is deprecated and will be removed in the future:

Esencialmente indica que la función de PHP mysql_pconnect es obsoleta y que se eliminará en el futuro.
Por lo cual el software debe ser actualizado, porque en futuras versiones de PHP ya no funcionará.


Insertar un botón de Facebook Messenger en una página web

Agregar Facebook Messenger a una página web:

1. Se necesita tener una cuenta de Facebook.

2. También, sí se trata de un negocio, se necesita una Fan Page o Página de Facebook.

3. Primero, se necesita saber el código de nuestra página de facebook. Para ello,

  • Inicia sesión en tu cuenta de Facebook.
  • Ingresa a tu Fan Page (como Administrador, si es necesario).
  • En la parte lateral izquierda, hacer clic en "Información". Se cargará un pantalla con toda la información de la Fan Page.
  • En la sección "Información de Contacto", copia el URL (link) de Messenger, el cual debe empezar con "m.me/.../
4. Abre tu archivo HTML, y pega dicha URL

Pegar la URL de Facebook Messenger
5.  Guarda los cambios y actualiza tu página web.

6. Al hacer clic en este botón, se abrirá la página de Facebook Messenger, directo para escribir un mensaje. Puede que solicite iniciar sesión con cuenta de Facebook.

7. No te olvides de dar formato al botón con una hoja de estilos CSS. También puedes agregar una etiqueta IMG en el HTML para que el botón sea reconocible.

Instalar un Slider en una plantilla de Wordpress

Instalar un Slider en una plantilla de Wordpress es muy sencillo, solo hay que seguir los siguientes pasos:

1. Inicia sesión en tu cuenta de Wordpress.

2. Verifica que la plantilla de tu preferencia esté instalada y activada. Para ello, hacer clic en la opción "Apariencia > Temas"

3. En la barra lateral, hacer clic en la opción "Plugins" y seleccionar "Añadir Nuevo".

Barra Lateral de Wordpress - Opción Plugins
4. Una vez que haya cargado la página, a la derecha aparecerá la barra de búsqueda. Escribe el nombre del plugin, en este caso "MetaSlider" y presiona la techa Enter.

5. Busca el plugin "MetaSlider". Hacer clic en "Instalar ahora" y luego en "Activar"

6.  Una vez instalado, el plugin "MetaSlider" debe aparecer en la lista de plugins.

Lista de Plugins
7.  Al último de la barra lateral, debe aparecer la opción "MetaSlider". Hacer click en dicha opción.

Barra Lateral - Opción MetaSlider
8.  Hacer clic en la opción "New".

Selecciona la opción "New"
9. Una vez que cargue, asigna un nombre al Slider, por ejemplo: "Slider Principal".  Luego, hacer clic en "Add Slide" para agregar las imágenes.


10. A continuación, aparecerá una ventana con las opciones: "Subir Ficheros" (para subir las imágenes desde el dispositivo)  y "Biblioteca Multimedia" (para seleccionar imágenes previamente subidas). Seleccionar la opción que corresponda y hacer clic en "Add to Slideshow".

11. Ahora, en la parte inferior derecha, en la sección "How to Use", copia únicamente el código en color naranja. (No se preocupe el ID puede ser diferente)

Código del Slider
12. Ahora, se necesita una sección donde insertar el Slider. 

12.a. Algunas plantillas, tienen la sección "Slider". Si este es su caso, ingresa a "Apariencia > Personalizar" y localice la sección para el Slider (generalmente es la "Cabecera").

12.b. Por otro lado, no todas las plantillas tienen una sección específica para el Slider, o simplemente lo queremos posicionar en otra sección de nuestra página. Para esto, se puede añadir una nueva entrada o una nueva página.

13. Para cualquiera de las opciones anteriores, los pasos son los mismos. En este caso, se agregará una nueva página.

Agregar una nueva página
14.  En la nueva página, agrega el título, por ejemplo "Slider", pegar el código color naranja en el área en blanco, y publicar la página.

Pegar el código del Slider
15.  Ahora se puede ver el Slider en la página de Wordpress.

Slider en Wordpress
16. Si se quiere cambiar el tamaño del Slider. Regresa a la barra lateral, opción "MetaSlider", y en la parte lateral derecha del plugin, encontrarás una sección para modificar el tamaño (alto y ancho) del Slider. Asimismo, se puede usar las opciones avanzadas del mismo plugin.


sábado, 17 de noviembre de 2018

Añadir un botón flotante de Whatsapp

Para HTML,

1. En un archivo HTML, dentro de la etiqueta BODY, inserta una etiqueta DIV con la clase "btn-whatsapp" (este será usado en el archivo de CSS).

2.Dentro de dicha etiqueta, agrega un link (etiqueta "a") y dentro del mismo, agrega la etiqueta IMG.

3. La etiqueta IMG debe tener como SRC la ruta de la imagen de whatsapp. Si es necesario, ajustar el width dentro de la misma etiqueta.

El código debe parecerse a lo siguiente. (por supuesto, debes reemplazar: 5199999999, por el número de tu celular).

<div class="btn-whatsapp">
<a href="https://api.whatsapp.com/send?phone=5199999999" target="_blank">
<img src="http://s2.accesoperu.com/logos/btn_whatsapp.png" alt="">
</a>
</div>

4. Crear una hoja de estilos (si es que no se tiene una previamente).

5. En dicha hoja de estilos CSS, agregar el siguiente código

.btn-whatsapp {
        display:block;
        width:70px;
        height:70px;
        color#fff;
        position: fixed;
        right:20px;
        bottom:20px;
        border-radius:50%;
        line-height:80px;
        text-align:center;
        z-index:999;
}

5.1. Si no se está usando una Hoja de estilos, coloque este código dentro de la etiqueta HEAD del archivo HTML, utilizando la etiqueta STYLE, de la siguiente manera:

<style>
.btn-whatsapp {
       display:block;
       width:70px;
       height:70px;
       color:#fff;
       position: fixed;
       right:20px;
       bottom:20px;
       border-radius:50%;
       line-height:80px;
       text-align:center;
       z-index:999;
}
</style>

6. Finalmente, visualiza tu HTML para comprobar los cambios.

Nota: En lugar del atributo "right" (derecha), se puede utilizar "left" (si se desea posicionar a la izquierda). Asimismo, se pueden usar "top" o "bottom", dependiendo de las características que se quieran lograr.


Para Wordpress:

1. Se necesita un plugin.

2. En la barra lateral, selecciona "Plugins" y luego la opción "Añadir Nuevo"

3. Busca el plugin "WhatsHelp Chat Button". Instala y activa. En la barra lateral debe aparecer una opción "WhatsHelp". Hacer clic en esta opción.

4. Aparecerán dos pasos, los cuales hay que seguir.

4.a. Primero, haz clic en la URL que se indica en el "Step1" (paso 1). Aquí se personaliza la apariencia del botón.

- Esta configuración consta de 3 pasos: Primero, selecciona el icono de Whatsapp  e ingresa tu número de contacto. Segundo, personaliza un mensaje (opcional), selecciona la posición del botón (derecha o izquierda). Finalmente, agrega un correo como información adicional y haz clic en "Get Button Code" para obtener el código.

4.b. Copia el código anterior y pegalo en la sección "Step2".

5. Guarda los cambios y actualiza Wordpress

viernes, 28 de septiembre de 2018

Añadir una empresa en Google Maps

Añadir una empresa en Google Maps, es muy sencillo, lo primero es contar con una cuenta de google, en este caso Gmail, aquí le explicaremos paso a paso:

1.- Iniciar sesión, con tu cuenta de gmail.

2.- Luego en la parte superior izquierda buscamos el menú


3.- Abrimos el menú y buscamos la opción Agregar un lugar


3.- Le aparecerá un pequeño formulario, donde hay que llenar:


4.- Mientras llenas el formulario en la dirección te da la opción de mover el marcador para que la dirección que necesitas sea la más precisa. Mientras mueves el marcador el campo de la dirección se va llenando.




5.- Terminamos de llenar y enviamos

6.- Si el lugar ya esta registrado le saldrá un anuncio como este


7.- Y listo a esperar el correo de Google Maps confirmando que ya esta tu empresa registrada




miércoles, 19 de septiembre de 2018

Crear un tema de Wordpress. Clase 3


En el segundo post habíamos visto los archivos necesarios que necesitamos para ir creando nuestra plantilla ahora vamos a ir poniendo contenido a estos archivos, empezando con style.css.



1.- Agregando CSS


Ahora, agregaremos una sola regla al archivo CSS que cambia el color de fondo de la página.

Añada una línea en blanco después del cierre del comentario */ en la línea 12.

En la siguiente línea debajo de la nueva línea en blanco (línea 13 del archivo), escriba lo siguiente.

*{
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

La primera entrada es una parte importante del estilo sensible. * es un comodín y coincide con todas las clases que se encuentran en el documento HTML. Indica que el ancho final y la altura de cada elemento en la página deben incluir contenido, relleno y borde. Si no establece esto y tiene dos cajas de 50% de ancho que están lado a lado con cualquier relleno o borde, no se sentarán lado a lado ya que su tamaño real es superior al 100%. Una caja de ancho de 100% con 1% de relleno es en realidad 102% de ancho, ya que se agrega 1% de relleno a la izquierda ya la derecha. Esta regla efectivamente agrega el relleno dentro de la caja en lugar de fuera de ella.

La segunda entrada sólo cambia el color de fondo de blanco para que podamos ver rápidamente si la hoja de estilo se está utilizando. También establecemos la fuente predeterminada que se utilizará en nuestro tema.

2.- Construir un diseño con plantillas
header.php


header.php definirá la parte superior de nuestro documento, comenzando con la declaración DOCTYPE.

Todos los documentos HTML deben comenzar con una declaración DOCTYPE, que te indican a tu navegador web cómo interpretar el documento. El doctype HTML5 es simplemente html. La etiqueta <html> de apertura necesita un atributo de idioma y WordPress proporciona una función para introducir el código de idioma correcto para el idioma que escogió durante la instalación – language_attributes().

En el campo de título, utiliza una línea de código que muestra el nombre de tu sitio, seguido de una instrucción abreviada if… then… para mostrar el lema de tu sitio web O el título de la página o publicación actual que estás viendo.

Los ? character es un operador condicional de PHP llamado operador ternario. En esta línea de código, is_front_page() es una función de WordPress que devuelve TRUE si se visualiza la portada, o FALSE si se está viendo cualquier post o página. La función antes de los dos puntos se utiliza si TRUE se devolvió, y la función después de los dos puntos se utiliza si se devuelve FALSE.

Como veremos a continuación, la función bloginfo() se utiliza repetidamente con diferentes parámetros para obtener diferentes partes de información de la base de datos de WordPress. Antes de que la etiqueta <head> se cierre con </head>, debe incluir el gancho de acción wp_head() para asegurarse de que se ejecutan las funciones asociadas a él.

La función body_class() le da a su cuerpo las clases CSS predeterminadas establecidas por WordPress. La última línea permite visualizar el menú de navegación si se ha creado uno en el panel de control del administrador. El header.php final se parece a esto:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
   <header class="my-logo">
   <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
 </header>
 <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

 Si deseas utilizar un logotipo como encabezado, reemplaza <?php bloginfo (‘name’); ?> con su código de imagen dentro de las etiqueta <header>.

Guarda header.php y subelo a la carpeta de tu tema.


index.php

index.php define la página de inicio y también se utilizará como el diseño predeterminado si no se encuentran plantillas específicas (por ejemplo, single.php, page.php).

Usaremos etiquetas de plantilla para asegurarnos de que el código de encabezado (get_header), barra lateral (get_sidebar) y pie de página (get_footer) esté incluido en nuestra página principal.

También utilizaremos los elementos semánticos HTML5 <section>, <main>, <header> y <article>. Algunos de nuestros elementos tendrán clases asignadas a ellos, y las clases se escribirán cuando lleguemos al archivo style.css.

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

El ciclo comienza en <?php if (have_posts ()): while (have_posts ()): the_post (); ?> y termina en <? php endif; ?>. Dentro del bucle, se utilizan las siguientes etiquetas de plantilla:

<?php the_permalink (); ?> – genera la URL correcta de la publicación real
<?php the_title_attribute (); ?> – emite el título de la publicación en un formato seguro para el atributo title del enlace
<?php the_title (); ?> – emite el título de la publicación
<?php the_author (); ?> – emite el nombre del autor
<?php the_excerpt (); ?> – emite el extracto de la publicación, que se genera automáticamente si no escribe su propio

Guarda el archivo index.php y cargarlo en el directorio de su tema. Si visita su sitio ahora, verá una página muy simple.

Puedes ver que el título de la pestaña es el nombre y el eslogan de su sitio web. La parte superior de la página tiene el título de su sitio web (o su logotipo si lo usó en su lugar). Todos los posts que existen tienen su título, autor y extracto. Aunque la página se muestre bien, todavía tiene que cerrar las etiquetas <body> y <html> abiertas en footer.php.

footer.php

footer.php define el pie de cada página y debe cerrar cualquier etiqueta HTML abierta en otros archivos de plantilla. En este caso, <body> y <html> siguen abiertos desde header.php.

También debe incluir el gancho de acción wp_footer() para garantizar que cualquier código final de WordPress y JavaScript se añada a la página. Si ha iniciado sesión como administrador cuando visitó su página principal, publicaciones o páginas, notará que falta la barra de administración. El código que muestra la barra de administración se engancha al gancho de acción wp_footer().

También agregaremos el elemento semántico HTML5 <footer> </ footer> para definir explícitamente nuestro pie de página.

<footer>
      <p>Copyright &copy; 2017</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

Guardar el archivo footer.php y cargarlo en el directorio de tu tema.

single.php

single.php define el diseño al ver una sola publicación en tu sitio web. Puede ser completamente diferente a index.php.

En este caso, no agregamos la barra lateral a las publicaciones sólo para resaltar la diferencia en el diseño.

El contenido principal toma todo el ancho de la página, ya que le dimos la clase content-full-width de la hoja de estilo. El enlace se eliminó del título, ya que no es necesario aquí. La función para mostrar la publicación completa es the_content():

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

page.php

page.php define la forma en que se muestran las páginas y puede ser diferente de nuevo desde el índice y el diseño de la entrada.

Recuerda que si las plantillas no existen, en su lugar se utiliza la plantilla index.php. Si no creas page.php, no se utilizará el mismo diseño que posts.php.

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Para que la diferencia sea más visible, volveremos a añadir la barra lateral a este diseño y haremos que el contenido de la página tome el 70% del ancho de la página.

Guarde el archivo página.php y subirlo al directorio de su tema.

style.css

Agrega lo siguiente a la parte inferior de la hoja de estilo. Esto hará que las distintas cajas tengan un fondo blanco y borde azul, para ayudar a visualizar cuánto espacio ocupa cada uno realmente.

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}
.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {

}
footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

Guarde el archivo style.css y subirlo al directorio de tu tema.

Ahora que tiene las plantillas básicas y una hoja de estilo, puede navegar fácilmente por sus publicaciones y páginas. Su tema recién creado debe tener este aspecto.



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

jueves, 28 de junio de 2018

Problemas con Wordpress - No se pueden ver las imágenes


Hace poco tuvimos un problema con un cliente que usa wordpress, las imágenes, completamente todas, habían desaparecido.

Vaya problema, revisamos todo el wordpress, primero apariencia -->Personalizar y fuimos por el logo, al entrar a multimedia nos dimos con la sorpresa que no se veían las imágenes, solo cuadros plomos, como si estuvieran y no hubiera cargado la página bien, esa sensación tuve.

Bueno fui a un link para ver si se veía la imagen sola, tampoco, me arroja error 404, página no existe.

Ahora a revisar Ajustes--> Multimedia
Ajustes--> Enlaces Permanentes

Y todo lo que se pueda revisar en wordpress y nada

Entramos al panel de control del cliente y revisamos el phpMyAdmin, la base de datos a ver que encontramos y bueno nada.

A buscar en google, de repente alguien tuvo  algún problema parecido, hubo muchos, pero no todos son los mismos problemas, al menos no encontraba lo que yo buscaba.

Entonces se me ocurrió buscar en los archivos del cliente, de nuevo al panel de control del cliente --> achivos -->html

Tenemos el archivo .htaccess y entramos a revisar y nos damos con la sorpresa que tiene un contenido de más, bueno antes de hacer cualquier cambio hacemos un backup del archivo y luego creamos el archivo sin el contenido adicional que era este

RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]


# php -- BEGIN cPanel-generated handler, do not edit
# Configure el paquete “ea-php71” como el lenguaje de programación predeterminado “PHP”.
<IfModule mime_module>
  AddType application/x-httpd-ea-php71 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

Y grabamos y probamos nuestro sitio nuevamente y se arreglo el problema, las imágenes volvieron a aparecer.

Un aparte para saber que nos indica los indicadores [F,NC]

El uso del indicador [NC] hace coincidir a RewriteRule de una manera que no distingue entre mayúsculas y minúsculas.

El uso del indicador [F] hace que el servidor devuelva un código de estado Prohibido 403 al cliente. Si bien el mismo comportamiento se puede lograr utilizando la directiva Deny , esto permite una mayor flexibilidad en la asignación de un estado Prohibido.

Modal Popup Box 




¿Qué es Modal Popup Box? 

Modal Popup Box, es un simple efecto CSS3 y jQuery que le permite superponer un elemento sobre un sitio web.

¿Cómo ayuda? 

El beneficio más importante de Modal Popup Box es que evita la necesidad de usar ventanas emergentes tradicionales o recargas de página.

¿Qué puedo poner dentro de estas ventanas emergentes modales? 

¡Casi cualquier cosa!, códigos abreviados, imágenes, videos, formularios de contacto o widgets de redes sociales.

Requerimientos mínimos
WordPress 4.0 y superior

¿Cómo accedemos a este plugin?

Para poder acceder a este plugin que es muy fácil de usar:

1. Vamos a Plugin --> Añadir nuevo

En la caja de busqueda ponemos el nombre del plugin



2. Instalamos y Activamos

3. Ahora en la parte izquierda de nuestra pantalla buscamos el plugin instalado  y Modal Popup Box -->Add New

4. Se abrirá una ventana, como si fueras a crear una página  cualquiera

5. Elegimos el nombre y colocamos el contenido que querramos

6. En la parte inferior podremos elegir los cambios

Tenemos el Shortcode, que es lo que usaremos en la página que queremos tener nuestra ventana emergente.

También si queremos que sea un botón lo que salga para al darle clic veamos la ventana y en settings el tipo de animación que tendrá nuestra ventana emergente.



Hasta aquí es la configuración libre, si quisieras más tienes que obtener el premium

Pero hacer una bonita ventana que no necesita más

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