In DISEÑO WEBby

Respaldo y Restauración en WordPress

Primer paso tenemos que acceder al CPANEL de nuestra página web es tu dominio una diagonal y la palabra CPANEL ya dentro buscamos la pestaña ARCHIVOS y en la opción de Administrador de archivos ya dentro tenemos que buscar la opción public_html seleccionar todos los archivos y comprimirlos, al finalizar se crea un .zip llamado wp-admin este lo descargamos.

a continuación algunas capturas de pantalla:

 

Ahora la base de datos, en la página principal del CPANEL tendemos que acceder a la pestaña de ARCHIVOS y acceder a la opción de ASISTENDE DE COPIA DE SEGURIDAD, vamos a la opción llamada Backup ahí podemos descargar nuestras bases de datos MySQL la cual tenemos que descargar, a continuación unas capturas de pantalla:

 

Excelente ya tenemos nuestra copia de seguridad lista ahora vamos a Restaurar nuestra página web, para eso tenemos que seguir los pasos el primer punto, Administrador de archivos,  public_html y ahora tenemos que subir el .zip llamado wp-admin ya arriba lo tenemos que descomprimir, ahora tenemos que hacer lo del paso número 2  vamos al ASISTENDE DE COPIA DE SEGURIDAD esta ves le damos en restaurar y subimos nuestro .zip de MySQL.

Y listo  tendremos nuestra página web restaurada solo que ahora hay un error de conexión en la base de datos (adjunto captura)

Esto sale así por que tenemos que configurar la siguiente información:

Bases de datos
Nombre de usuario
Contraseña

Tanto en el public_html  y el WordPress y porsupuesto en la bases de datos tener creado el usuario.

 

Primero vamos al public HTML y buscamos el archivo y buscamos el archivo wp-config.php ya encontrado le damos clic derecho y editar saldrá un cuadro y a ese igualmente le damos en editar
podemos observar que tenemos información sobre la BD y el usuario tenemos que memorizar el nombre de la Base de datos ya que lo utilizaremos más adelante, vamos a centrarnos en el usuario y la contraseña  debes agregar un nombre y una clave (Preferentemente la que tenias anteriormente)  después de reemplazar el usuario y la contraseña le damos en editar.

 

Podemos ver que en la tercera captura cambie el DB_USER y la contraseña y el DB_NAME lo encerré ya que debe de tener el mimo nombre en nuestro MySQL vamos a la página principal del CPANEL , buscamos la pestaña bases de datos y la opción PHPMYADMIN y solo tenemos que confirmar que el nombre de la BD tenga el mismo nombre que en wp-config (para ver el ejemplo te puedes guiar en la 3ra captura de pantalla anterior.

 

¿Ya confirmaste que tengan el mismo nombre? ahora vamos a crear un usuario vamos a la Pestaña Bases de datos  y ahora en la segunda opción Bases de Datos MySQL  al entrar tenemos que crear un usuario como el que pusimos en wp-config.php despues de crearlo la página ya debe de funcionar de manera correcta

 

¿no funciona? ve al Softaculous al wordpress y modifica las opciónes de configuración y pones tanto la Base de datos, usuario y contraseña que creaste anteriormente. A continuación un video a detalle.

 

In DISEÑO WEBby

Carousel de imagenes HTML

A continuación un botón para obtener los recursos del widget Carousel de imágenes en HTML

ya no es necesario que agregues nada solo edítala a tu gusto

Descarga los recursos

Es necesario tener instalado Winrar o un programa para descomprimir archivos  al descargarlo obtendrás un archivo html y 3 carpetas contenedoras de JS, Imagenes y Estilos
recomiendo tener abiertas las 2 carpetas la del widget y la de tu sitio web.


Primeros pasos:

1.- Pasar todos los recursos del modulo descargado en tu carpeta raíz de html por ejemplo, el portafolio.html y todos los contenedores de JS, IMG Y CSS

2.- Ahora es necesario abrir el index.html y portafolio.html con algún editor de código y copiar todo lo contenido del carousel html  y pasarlo a tu sitio web

3.- Finalmente es editar los contenidos a tu gusto.

A continuación agrego un video explicando a detalle cada punto.

In DISEÑO GRÁFICOby

Remueve marca de agua de una imagen

Algún ves haz querido utilizar alguna imagen que al final es de pago, entonces tiene marca de agua del autor.
la mayor parte de las veces es mejor pagar así ayudamos al fotografo para que siga subiendo excelente contenido

Hay veces que no es posible por es veremos un sitio web que nos dará este resultado.

pra lograrlo solo descarga una imgen con marca de agua y accede al siguiente link: https://www.watermarkremover.io/es

este sitio quitara es molesta marca de agua y podemos disfrutar la imagen.

Aqui un video:

In DISEÑO GRÁFICOby

Animar bandera | Deformación con Ondas After Effects

En este video vamos a ver un efecto muy sencillo en After Effects, el cual hace posible animar una bandera , todos los recursos los pueden descargar en el botón de arriba.

Si ya tienes tu bandera en PNG o en VECTORES, solo es abrir un documento o composición a la resolución que te guste, en mi caso fue de 750 x 500

 

Colocas la imagen o la vectorización de la bandera y buscamos el efecto DEFORMACIÓN DE ONDAS, y el resultado lo arrastramos a la imagen o vectorización de la bandera.

 

 

En las opciones del efecto controlamos la ANCHURA DE ONDAS y la dejamos a nuestro gusto.

Contamos con un video paso  a paso.

 

In DISEÑO WEBby

Limitar Caracteres en un FORMULARIO *HTML Y WORDPRESS*

En esta ocasión aprenderemos a limitar caracteres en nuestro formulario de nuestro sitio web, Vamos a ver 2 formas diferentes, la primera si nuestro sitio esta en HTML yo WordPress.
Primero vamos a ver la opción de HTML, para esto vamos a nuestra carpeta y vamos a seguir los siguientes pasos.

Empecemos con HTML

Vamos a ubicar el Input deseado de nuestro formulario normalmente es el input de teléfono y es normal limitarlo a una cantidad de caracteres.

Ya ubicado el Input deseado vamos a agregar una regla y es la siguiente maxlength=»10″ limitando el Input a solo 10 caracteres.

Ahora pasamos a WordPress

Ahora pasamos a WordPress, es necesario contar con la herramienta de ELEMENTOR que es un editor visual, si es así vamos a seguir con los pasos (en caso de no contar con elementor, es recomendable descargar un formulario que te deje editarlo como código) por ejemplo Contact Form 7 y seguir con los pasos de arriba.

Tomando en cuenta que tienes elementor procedemos.

.-Accedemos al Editor visual y vamos a nuestro formulario.
.-Buscamos el Widget de HTML y agregamos ese Widget abajo de nuestro formulario.

.-Ahora copiamos y pegamos este Script: <script> document.getElementById(«form-field-field_b36b88f»).maxLength = «10»; </script> (Si lo dejamos así, la regla de maxleght todavía no va a funcionar)

.-Ahora tenemos que buscar el ID de nuestro campo, para eso es necesario ubicar el cursor en la casilla donde le deseamos poner la regla, dar clic derecho e inspeccionar.

 

.-Ahora buscamos el ID de nuestro campo,

.-Finalmente ponemos ese ID es nuestro Scrip. <script> document.getElementById(«form-field-field_b36b88f»).maxLength = «10»; </script>

 

En dado caso que no funcione vamos al editor de ELEMENTOR, Seleccionamos nuestro formulario vamos a la casilla que le deseamos agregar la regla, vamos a AVANZADO y en ID agregamos estos caracteres field_b36b88f, ese es el ID que tiene el Script entonces nada más es copiar y pegar.

 

Es todo, de igual forma dejo un video donde explico el procedimiento a detalle.

 

In DISEÑO WEBby

Arregla cualquier formulario

 

En este artículo aprenderemos  a hacer funcionar cualquier formulario de html que descargaron por internet, es muy común descargar plantillas HTML de internet y que su formulario no este configurado correctamente entonces vamos a iniciar con los pasos.

.- descarga los recursos de este módulo, de hecho solo es un archivo PHP pero si igualmente adjunte una plantilla llamada onix, igualmente la puedes descargar si gustas.

.- Ya descargado el envia.php se debe de colocar dentro de tu plantilla de html justo alado del index.html

.- Ahora abrimos la carpeta de nuestra plantilla html, nos vamos al index o al html donde tengamos nuestro formulario y lo ubicamos la etiqueta tiene que ser <form>

.- veamos que tiene que decir <form action=»envia.php» method=»post»>

.- en la parte inferior del formulario debe de decir  <button type=»submit»> si tiene más atributos o estilos html esta bien, solo es necesario poner TYPE=»SUBMIT»

.- ahora veamos que todos los input del formulario en html tiene algo llamado name=»#»  en cada input tenemos que poner esa etiqueta por ejemplo si el input es de teléfono el name se debe de llamar telefono sin acentos y en minuscula.

 

Ahora pasamos con el php:

.- Hay varios comentarios en el formulario donde te guía donde poner tu correo y el asunto.

.- Muy importante, podemos ver que el formulario transforma los input a variables para que sea posible, el name que vimos en el ultimo punto de html, tiene que tener sincronía con el $_POST[«telefono»].

 

Si el html y el php tienen sincronía el formulario debería de funcionar sin problemas al hacer pruebas y enviar datos el html debería de mandar al php si es así quiere decir que el formulario funciona correctamente, el ultimo paso es probarlo en un servidor local o en un servidor contratado, si tienes más dudas puedes ver un video donde se explica a detalle.

 

In DISEÑO WEBby

Franja con efecto PARALLAX

 

En este artículo aprenderemos a colocar una franja con efecto parallax en nuestro sitio web creado con html y CSS, vamos con los pasos.

Lo primero es descargar los recursos del módulo enlace directo y sin publicidad.
Al descargar el módulo podemos ver que son 3 archivos (un html, css y una imagen)
Ultimo paso es pasar el módulo a nuestra página web para esto vamos a repasar  un tutorial.

Primero y vamos a cambiarle el nombre al archivo llamado style.css y lo dejamos como style2.css y lo movemos a nuestra carpeta de estilos normalmente se llama css y la imagen la movemos a nuestra carpeta de imágenes. por ultimo solo tenemos que mover todo lo que esta en el index de nuestro modulo al index o página deseada de nuestra página web. NO OLVIDES  que tienes que hacer la referencia sobre los estilos y la imagen.

Si tienes problemas al pasar el módulo, te adjunto un video con toda la explicación a detalle.

 

In DISEÑO WEBby

Carrusel en 3D // HTML Y CSS

 

En este artículo aprenderemos a agregar el módulo 3d en nuestra página de html, lo primero que tenemos que hacer es descargar los recursos del módulo en el botón ubicado en la parte superior, al descargar deben de ser 3 archivos y son: 1 imagen en jpg, un archivo en html y otro en css como están en la foto a continuación

 

Ahora solo queda agregarlo a nuestro sitio web, primero la imagen la ubicamos en alguna carpeta de imagenes, el archivo style.css le cambiamos  el nombre y lo pasamos a la carpeta css.

Por ultimo pasamos la información del index.html  del módulo al index.html de nuestro sitio web.

 

¿Se te complica? te adjunto un video para que puedas hacerlo paso a paso y de manera correcta.

 

In Uncategorizedby

Cambiar o Traducir textos en WP

Woocommerce cuenta con la traducción al español, pero en ocasiones en nuestra tienda online preferiríamos que algún texto mostrado fuese otro, ya sea por cuestiones personales o comerciales. Es importante saber que debemos de pegar el código que encontraras a continuación se encuentra en * Apariencia/Editor de temas/function.php *

Me refiero a textos como «Añadir al carrito«, «Ir a la tienda«, «Oferta» o cualquier otro texto por defecto.

Pues bien, es muy fácil, solo tienes que adaptar el siguiente código a tus necesidades:

 

add_filter('gettext',  'translate_text');
add_filter('ngettext',  'translate_text');
 
function translate_text($translated) {
     $translated = str_ireplace('Post a Comment',  'Agrega un comentario',  $translated);
     return $translated;
}


Solo tienes que personalizarlo a tu gusto, con las palabras que quieras sustituir, y añadirlo al archivo functions.php de tu tema hijo o a tu plugin de personalizaciones, snippets, etc.

Para cambiar el texto “Detalles de facturación” solo debes agregar el siguiente código y cambiar por el que desees:

 

add_filter('gettext', 'translate_text');
function translate_text($translated) {
 $translated = str_ireplace('Detalles de facturación', 'Detalles de matricula', $translated);
 return $translated;
}

¿NECESITAS CAMBIAR MÁS DE UN TEXTO EN WOOCOMMERCE?

 

Por petición popular amplio el artículo por si necesitas cambiar más de un texto en tu tienda.

Si necesitas cambiar varios textos, de nuevo gracias a gettext, crearíamos entonces una función algo más compleja, como esta:

function my_text_strings( $translated_text, $text, $domain ) {
 switch ( $translated_text ) {
 case '¡Oferta!' :
 $translated_text = __( '¡Rebajado!', 'woocommerce' );
 break;
 case 'Añadir al carrito' :
 $translated_text = __( 'Añadir a la cesta', 'woocommerce' );
 break;
 case 'Productos relacionados' :
 $translated_text = __( 'Quizás te interesen estos fantásticos productos', 'woocommerce' );
 break;
 }
 return $translated_text;
}
add_filter( 'gettext', 'my_text_strings', 20, 3 );
Adjunto un video  donde explico más a detalle.

In DISEÑO WEBby

Atributos y variaciones en WORDPRESS

Descarga el plugin

En este artículo aprenderemos a utilizar la opción de atributos y variaciones por parte de Woocomerce en WordPress
Vamos por pasos:

1.- Primero tenemos que descargar un plugin llamado Variation Swatches for WooCommerce el cual te dejamos un link directo:
https://wordpress.org/plugins/woo-variation-swatches/ (Así como lo descargas lo subes en la sección de plugins)

2.- Vamos a la pestaña de productos y a la sub pestaña de atributos, le ponemos el nombre general que aparecerá en el sitio por ejemplo color
le ponemos que es de tipo color y se agregara una tabla de lado izquierdo el cual le damos en configurar términos, ya dentro  creamos cada termino
de nuestro atributo, por ejemplo si tenemos 3 vasos de diferente color son 3  términos.

3.- Como agregamos el plugin antes mencionado tendremos la opción de agregar colores a cada termino

4.- Ya teniendo los términos y atributos deseados es hora de publicar un artículo, vamos  a la pestaña de productos y publicamos uno nuevo, tenemos una tabla en la parte superior la cual tenemos que cambiar el tipo de producto ahora mismo esta en simple y tenemos que pasarla a producto variable, vamos a la pestaña de atributos y seleccionamos la pestaña creada que en este caso es colores, nos va a pedir que elijamos los términos en este caso serán los creados anteriormente, podemos poner la opción de seleccionar todos y al final le ponemos «usado como variaciones»

5.- por ultimo vamos a la pestaña de variaciones y tenemos que crear una variación por color afortunadamente woocomernce las puede crear de manera automática,  ya creadas las 3 variaciones tenemos que poner una imagen que concuerde con el color seleccionado y el precio y listo ya tendremos un producto variable.

 

Adjunto un video  donde explico cada paso.