DEXT - Escuela de Tecnologías Digitales
DEXT - Escuela de Tecnologías Digitales
Bitácora - Curso de Diseño de Sitios Web Profesionales con HTML5, CSS3 y WordPress
1. Instalación inicial de WordPress en Servidor
1.1. Acceder a CPanel
1.2. Crear Correo Electrónico en CPanel (opcional).
1.3. Instalar WordPress a través del apartado Softaculous App Installer.
1.3.1. Definir el Dominio o Subdominio en el que se desea instalar.
1.3.2. Elegir instalar en HTTPS.
1.3.3. Elegir la opción de hacer Backup de WordPress automáticamente en la opción Default.
1.3.4. Elegir el Usuario y el Password. Se sugiere crear la contraseña desde http://www.clavesegura.org/ y generar una hoja de claves en algún sistema de almacenamiento en la nube tipo Google Drive o OneDrive.
2. Acceso y Configuración de WordPress
2.1. Acceder a WordPress usando el Usuario y Password, a través de la URL de acceso al Panel de Administración. Siempre tendrá la siguiente estructura:
https://[dominio sin www y con su extensión de dominio]/wp-login.php
2. Acceso y Configuración de WordPress
2.2. Buscar la opción Plugins del menú gris ubicado a la izquierda en el panel de WordPress. En dicha opción, buscar el botón azul llamado Añadir Nuevo, que se encuentra ubicado en la parte superior de la pantalla, y hacer click en éste.
2.3. Instalar los Plugins recomendados para las funcionalidades principales que se necesiten en el sitio. En el caso de nuestro curso, los plugins a instalar serán los siguientes:
2.3.1. Ninja Forms para Formularios de Contáctenos y Suscripciones a Blog.
2. Acceso y Configuración de WordPress
2.3.2. Smart Slider para Slider´s de Imágenes.
2.3.3. Yoast SEO para Optimización SEO On Page (palabras claves, títulos de página, descripciones de páginas, meta etiquetas, URL´s amigables y Open Graph para Facebook y Twitter.
2. Acceso y Configuración de WordPress
2.3.4. Google Analytics Dashboard for WP para ver estadísticas de Google Analytics directamente desde el Dashboard de WordPress.
2.3.5. List Category Posts para ocultar o mostrar categorías específicas de
las Entradas del blog, en páginas específicas. Ideal para cuando uno tiene Blog y zona de Noticias en el mismo sitio web.
2.3.6. PhpSword Favicon Manager para cargar el Favicon del sitio web sin necesidad de convertirlo a imagen .png, y asegurándose de que éste se muestre correctamente en todos los navegadores.
2. Acceso y Configuración de WordPress
2.3.7. Woo Commerce para construir tiendas virtuales dentro de cualquier sitio web, manejando inventarios, monedas, características de productos y métodos de pago.
2.4. Dirigirse al apartado de Plugins, seleccionar todos los plugins y activarlos uno por uno o de forma masiva.
2. Acceso y Configuración de WordPress
2.5. Dirigirse al apartado de Apariencia > Temas, y hacer click en el botón Añadir Nuevo. Posteriormente, buscar el tema Astrid (recomendado por DEXT porque es muy fácil de "limpiar", no tiene problemas de scripts de JavaScript que generen incompatibilidades con los plugins a utilizar y porque 100% compatible con WooCommerce).
Se instala y se activa este tema, y se eliminan los 3 temas que vienen por defecto en WordPress.
Nota Importante
Recordemos que instalamos este tema porque WordPress obliga a que usemos un tema, pero todo el diseño será 100% personalizado sin depender de frameworks de maquetación ni plantillas predeterminadas.
2. Acceso y Configuración de WordPress
2.6. Dirigirse al apartado de Apariencia > Widgets, y eliminar los widgets que vienen por defecto. Se debe hacer click sobre cada uno de los módulos ubicados en el espacio denominado Sidebar, y hacer click en el enlace Borrar de cada uno. Deben quedar vacíos todos los espacios de la derecha.
2. Acceso y Configuración de WordPress
2.7. Dirigirse al apartado de Apariencia > Personalizar, y realizar las siguientes acciones:
2.7.1. Hacer click en el apartado Header area > Cabecera multimedia, escoger la opción Eliminar de la opción Small screens header image.
2. Acceso y Configuración de WordPress
2.7.2. Hacer click en el apartado Header area > Cabecera multimedia, escoger la opción Esconder imagen de la opción Imagen de cabecera.
2.7.3. Click en Publicar para guardar los cambios.
2. Acceso y Configuración de WordPress
2.8. Ir a Páginas, en el menú principal de la izquierda, y crear las páginas del sitio web. En caso de querer que una página sea sub-página de otra previamente creada, se debe elegir dicha página superior en la opción Superior de la zona derecha de la vista de página.
2. Acceso y Configuración de WordPress
2.9. Ir a Páginas, y se debe elegir la página de Inicio como Portada, y la página de Blog o de Noticias como Página de entradas. El número máximo de entradas a mostrar en el feed y en la página de Inicio, se sugiere que sea mayor o igual a 9, siempre en múltiplos de 2 o de 3, dependiendo si se quiere que el feed del blog esté en 3 o en 4 columnas.
3. Preparación de Código Fuente con HTML5 y CSS3
3.1. Acceder por FTP con Filezilla Cliente y dirigirse a la siguiente ruta:
/public_html/wp-content/themes/astrid
3.2. Descargar todo el tema Astrid en una carpeta del equipo de trabajo.
3.3. Abrir el software Adobe Brackets, o el editor de código de su preferencia. Otros editores de código recomendados con Atom, Sublime Text y Light Table.
3.4. Editar el header.php, integrando las librerías Prefix Free, Material Design Icons y Font Awsome Icons. Adicionalmente, la etiqueta de contenido debe cambiarse de <div> a <main>, etiqueta principal de contenido en HTML5. Adicionalmente debeos crear los archivos nuevos header.css, footer.css y menu-mobile.css, subirlos al servidor y enlazarlos a antes del cierre de <head>. Descargar aquí el header.php.
3. Preparación de Código Fuente con HTML5 y CSS3
3. Preparación de Código Fuente con HTML5 y CSS3
4. Código HTML de Página de Inicio - Día 3 y 4
Bitácora de Curso de Diseño de Sitios Web Profesionales con HTML5, CSS3 y WordPress
By DEXT - Escuela de Tecnologías Digitales
Bitácora de Curso de Diseño de Sitios Web Profesionales con HTML5, CSS3 y WordPress
Bitácora de Curso de Diseño de Sitios Web Profesionales con HTML5, CSS3 y WordPress
