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.
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.
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.
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.
Aprende a poner un botón de whatsapp en tu página creada con código HTML y CSS, el módulo ya esta listo par agregar y poner el código del botón solo descarga los recursos y acomodalos en tu sitio web.
Después de descargar los recursos, es necesario revisar que cuentas con un documento html que es el icono y función del botón de whatsapp y un CSS que son los estilos del botón flotante, colores y posiciones. ¿Ya cuentas con los archivos?. Perfecto ahora si iniciemos.
1.- Vamos a ubicarnos con el index.html de nuestro botón de whatsapp, abrelo y copia todo el código y muevelo al index.html de tu página.
2.- Los archivos CSS, cámbialo de nombre por ejemplo whatsapp.css y muevelo a tu carpeta donde tengas los estilos
3.-Vuelve a tu documento .html y abre una referencia buscando tu archivo whatsapp.css.
Listo, el módulo ya tiene que estar activo, si el botón de whatsapp aparece en la parte superior en color gris, es por que no esta agarrando los estilos.
Aprende a poner un botón Dínamico de whatsapp en tu página creada con código HTML y CSS, el módulo ya esta listo par agregar y poner el código del botón solo descarga los recursos y acomodalos en tu sitio web.
Al descargar los recursos tienes que tener estos recursos:
1.- whats.css y whats2.css (Son 2 archivos css que serán los estilos) 2.- index.html (página y contenido html) 3.- script2.js (Este lo volvera dínamico) 4.- Una imagen que aparecerá
Ojo, no funciona ni con Blogger ni con Google Site ya que por obvias razones no te deja modificar el código de tu sitio, dicho esto ahora si empecemos.
Primero es necesario mencionar que cada archivo es recomendable ponerlo en una carpeta, yo lo dejo todo junto para que sea fácil descargarlo. Por ejemplo WHATS.CSS Y WHATS2.CSS deberán de ir en una carpeta llamada CSS y modificar el index.html que la referencia no sea WHATS.CSS que sea CSS/WHATS.CSS es decir carpeta y archivo. Adjunto un vídeo donde se explica como agregarlo a tu sitio web creado en html
Aprende a poner una Barra Social flotante en tu página de HTML, este módulo ya esta creado y listo para agregarlo a tu sitio web y pospuesto para usarlo.
Al descargar los recursos tienes que tener estos recursos:
1.- El código visual del código index.html 2.- Tres documentos CSS que son los estilos 3.- Un documento de fuentes para los iconos
Es muy importante que se creen 2 carpetas y se organicen los documentos, esta así ya que muchas personas tienen problemas al descargar en .rar
Después de descargar tendremos todos los documentos en forma de lista, si abrimos el index, la barra social no se va a ver bien, ya que se tienen que crear 2 carpetas y organizar los documentos, la primera carpeta obligatoriamente se debe de llamar FONTS la segunda CSS. en Fonts debe de ir el documento llamado: fontawesome-webfont y en la carpeta CSS: normalize.css y font-awesome.min.css
Ya teniendo nuestro módulo correctamente es hora de pasarlo a nuestro sitio web, para este paso es recomendable ver el vídeo que a continuación pondremos:
Aprende a agregar un widget para tu página en wordpress, así tendrás un control de visitas de tus páginas y artículos
Vamos a iniciar, estando en nuestro backend y buscamos la opción plugins y a la pestaña añadir nuevo, buscamos el módulo PAGE VISIT COUNTER lo instalamos y finalmente lo instalamos. Y el siguiente paso es esperar, unos días después tendrás la facilidad de tener gráficas, contadores de páginas a continuación dejamos algunas captuas de pantalla
Aprende a agregar palabras clave en WORDPRESS, sin necesidad de instalar un módulo o plugin
Vamos a iniciar posicionándonos en el editor de nuestro tema, para esto vamos a nuestro backend de wordpress
Ya dentro de nuestro editor de temas tenemos que buscar la cabecera del tema tiene como nombre HEADER.PHP si tienes problemas con encontrarlo puedes apretar «ctrl + f » en la barra de búsqueda poner la sección que buscas en este caso header.php
Al tener éxito de encontrar la sección correspondiente, dentro de la etiqueta <head> se debe de poner el siguiente valor o etiqueta: <meta content=»» name=»keywords»> lo dejamos vació para que lo puedas copiar y pegar, dentro de las comillas en content=»palabra clave 1, palabra clave 2″ va tu palabra clave separada por comillas
<a href=»javascript:void(0);» onclick=»window.open(‘cambiar.html‘, ‘popup’, ‘top=100, left=100, width=599, height=680, toolbar=NO, resizable=NO, Location=NO, Menubar=NO, Titlebar=No, Status=NO’)» rel=»nofollow»>TEXTO DENTRO DEL URL</a></p>
Después creamos el botón y la página deseada para que aparezca nuestro enlace y nuestra ventana emergente yo por ejemplo hice un un aviso de privacidad
En la captura de pantalla de arriba «Ya adentro de nuestro código html» podemos observar que tenemos que crear una página en html o bien la tenemos que hacer redireccionar a una, en mi caso yo le puse terminos.html más adelante podemos cambiar el ancho «width» y lo largo «height» por ultimo tenemos que agregar un texto a nuestro enlace, también se puede un botón.
