Curso de Wordpress Prof. Joel O.

Burgos Palacios

DISEÑO WEB PROFESIONAL CON WORDPRESS

1. Fundamentos de Internet
1.1. Cómo funciona internet
Internet es una gran red de computadoras a nivel mundial, que pueden intercambiar
información entre ellos. Se pueden comunicar porque están unidos a través de
conexiones telefónicas, cable, ondas u otro tipo de tecnología y gracias a que utilizan
un lenguaje o protocolo común llamado TCP/IP, que son unas normas que nos dicen
como tienen que viajar los datos por la red.

Figura 1: Cómo funciona internet

1.2. Qué es un hosting

Es un espacio (alojamiento) en el disco duro de un servidor, con las configuraciones
necesarias para subir tu sitio web.
Un servidor Web almacena los archivos de un Sitio Web para emitirlos por Internet
para poder ser visitado por los usuarios. Básicamente es una gran computadora que
guarda y transmite datos por Internet.

1.3. Qué es un dominio

Un Dominio es el nombre único y exclusivo de un sitio web en Internet.
Ejemplo: [Link]
Las extensiones pueden ser: com, pe, net, online, info, tk, org, etc.
Si tienes un negocio de venta de comida para mascotas, un dominio EMD (Exact
Match Domain) puede ser: [Link] o [Link] LO CUAL NO
ES RECOMENDABLE, en su lugar debes utilizar un nombre original y acorde a tu
empresa, que podría ser [Link] o [Link]

1
Curso de Wordpress

Si tu negocio está ubicado en argentina y quieres que identifiquen la ubicación

rápidamente entonces utiliza una extensión ".ar", de igual forma ".pe" para Perú,
".mx" para México, etc. Si descubres que el dominio no está disponible entonces
juega y prueba con las otras extensiones.
Al elegir un Dominio se recomienda no utilizar tildes, puntos, raya abajo u otros
caracteres especiales.
Lo que si puedes utilizar es la raya al medio: [Link]
En cuanto a la longitud se recomienda no sobrepasar los 15 caracteres, trata de ser
claro y directo, no queremos aburrir a los clientes con nombres demasiados largos,
esto aplica también para los correos corporativos.

Figura 2: Dominio [Link]

1.4. Tecnologías para crear una Web

En este curso utilizaremos el CMS Wordpress, sin embargo no es la única alternativa
cuando hablamos de Diseñar una Página Web.
1.4.1. Maquetación tradicional
Se utiliza la codificación manual con las tecnologías de HTML5, CSS3, Javascript,
PHP, entre otros. En general requiere de un IDE (eg. Netbeans) o Editor de código
(eg. Sublime Text) que nos hace la codificación más amigable porque nos brinda
colores, autocompletado, alertas de errores, teclas rápidas, etc.

Figura 3: Tecnologías de diseño web con codificación manual

2
Curso de Wordpress

1.4.2. CMS
Es un programa desarrollado para que cualquier usuario pueda administrar y
gestionar contenidos de una página web con facilidad.
Los CMS son plataformas web estandarizadas que permite a los usuarios crear
contenido para su página desde un backend o gestor de contenidos sin necesidad
de contar con conocimientos técnicos muy específicos.

Figura 4: CMS más populares del mercado

1.4.3. WIX
Es una plataforma para el desarrollo web basada en la nube, permite a los
usuarios crear sitios web HTML5 y sitios móviles a través del uso de herramientas
de arrastrar y soltar en línea.
Los usuarios pueden agregar funcionalidades como plugins, ecommerce,
formularios de contacto, marketing por correo electrónico, y foros comunitarios
con sus sitios web utilizando una variedad de aplicaciones desarrolladas por Wix
y de terceros.

2. Instalación de Wordpress [ Descargar Xampp y wordpress ]

Para poder empezar a trabajar con este CMS tenemos 2 opciones: Comprar (alquilar) un
Dominio con Hosting que soporte Wordpress, o instalar un Servidor Local que emule las
funciones de un Servidor Web.

2.1. Instalación de Xampp en Windows 7/10

3
Curso de Wordpress

XAMPP es una distribución de Apache completamente gratuita y fácil de instalar que

contiene MariaDB, PHP y Perl. El paquete de instalación de XAMPP ha sido diseñado
para ser increíblemente fácil de instalar y usar.
Descargar Xampp desde aquí [Link]
Una vez obtenido el archivo de instalación de XAMPP, hay que hacer doble clic sobre
él para ponerlo en marcha. Al poner en marcha el instalador XAMPP nos muestra un
aviso que aparece si está activado el Control de Cuentas de Usuario y recuerda que
algunos directorios tienen permisos restringidos:

Figura 5: Control de cuentas de Usuario

A continuación se inicia el asistente de instalación. Para continuar, haga clic en el

botón "Next".

Figura 6: Iniciando la configuración de la instalación del Servidor Local Xampp

4
Curso de Wordpress

Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje
PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de
componentes puede elegir la instalación o no de estos componentes. Para seguir
estos apuntes se necesita al menos instalar MySQL y phpMyAdmin:

Figura 7: Selección de componentes para instalar

En la siguiente pantalla puede elegir la carpeta de instalación de XAMPP. La carpeta

de instalación predeterminada es C:\xampp. Si quiere cambiarla, haga clic en el icono
de carpeta y seleccione la carpeta donde quiere instalar XAMPP. Para continuar la
configuración de la instalación, haga clic en el botón "Next".

Figura 8: Seleccionar ubicación de la instalación

5
Curso de Wordpress

La siguiente pantalla ofrece información sobre los instaladores de aplicaciones para

XAMPP creados por Bitnami. Haga clic en el botón "Next" para continuar. Si deja
marcada la casilla, se abrirá una página web de Bitnami en el navegador.

Figura 9: Complementos de Bitnami (dejar desmarcado)

Una vez elegidas las opciones de instalación en las pantallas anteriores, esta pantalla
es la pantalla de confirmación de la instalación. Haga clic en el botón "Next" para
comenzar la instalación en el disco duro.

Figura 10: Instalación de Xampp

6
Curso de Wordpress

El proceso de copia de archivos puede durar unos minutos.

Figura 11: Instalando Xampp

Durante la instalación, si en el ordenador no se había instalado Apache

anteriormente, en algún momento se mostrará un aviso del cortafuego de Windows
para autorizar a Apache a comunicarse en las redes privadas o públicas. Una vez
elegidas las opciones deseadas (en estos apuntes se recomienda permitir las redes
privadas y denegar las redes públicas), haga clic en el botón "Permitir acceso".

Figura 12: Permitir acceso al servidor Local

7
Curso de Wordpress

Una vez terminada la copia de archivos, la pantalla final confirma que XAMPP ha sido
instalado. Si se deja marcada la casilla, se abrirá el panel de control de XAMPP. Para
cerrar el programa de instalación, haga clic en el botón "Finish".

Figura 13: Fin de la instalación de Xampp

2.2. Iniciar y detener Xampp

Xampp facilita este proceso porque posee un Panel de Control.
Al panel de control de XAMPP se puede acceder a través de C:\xampp\xampp-
[Link] o, si ya está iniciado, mediante el icono del área de notificación.
La primera vez que se abre el panel de control de XAMPP, se muestra una ventana de
selección de idioma que permite elegir entre inglés y alemán.

Figura 14: Idioma de Xampp (se recomienda ingles)

El panel de control de XAMPP se divide en tres zonas:

8
Curso de Wordpress

- La zona de módulos, que indica para cada uno de los módulos de XAMPP: si está
instalado como servicio, su nombre, el identificador de proceso, el puerto
utilizado e incluye unos botones para iniciar y detener los procesos,
administrarlos, editar los archivos de configuración y abrir los archivos de registro
de actividad.
- La zona de notificación, en la que XAMPP informa del éxito o fracaso de las
acciones realizadas
- La zona de utilidades, para acceder rápidamente

Figura 15: Zonas del Panel de Control de Xampp

Si se ha minimizado el panel de control de XAMPP, se puede volver a mostrar

haciendo doble clic en el icono de XAMPP del área de notificación.

Figura 16: Xampp desde el área de notificación de Windows

2.3. Instalación de Wordpress en LocalHost
Recuerda que Xampp contiene los programas que simularan un servidor en nuestra
computadora para así poder crear Sitios Web profesionales. Por otro lado Wordpress

9
Curso de Wordpress

es el Sistema Gestor de Contenidos (CMS) que nos permite diseñar y administrar

WebSites de forma sencilla con una curva de aprendizaje bastante corta.
[Link] Wordpress
Ir a la página oficial de Wordpress [Link]

Figura 17: Descargar Wordpress en español

Dentro del archivo descargado esta una carpeta llamada “wordpress”, debemos
extraerlo en C:\xampp\htdocs

Figura 18: Extracción de Wordpress en Xampp

Cambiaremos el nombre de la carpeta de “wordpress” a “ejemplo1”, este será el

nombre del proyecto

Figura 19: El nombre del proyecto queda como “ejemplo1”

10
Curso de Wordpress

[Link] Xampp
Para iniciar este programa ir a C:\xampp\[Link] o si lo prefieres
puedes hacer click en el buscador de Windows que está a lado del menú de inicio

Figura 20: Iniciar Xampp de forma rápida

Aparece el panel de control, ahí debemos iniciar los módulos de apache y mysql
haciendo click en el botón start

Figura 21: Apache y Mysql iniciados

Ahora abrimos un navegador web y en la barra de direcciones escribimos

[Link] (con esto vemos que el servidor web está en funcionamiento)

Figura 22: localhost de Xampp en Navegador Google Chrome

11
Curso de Wordpress

Si prefieres acceder de forma rápida puedes hacer click en los botones Admin del
Panel de Control de Xampp

Figura 23: Al hacer click en Admin de Apache se abre localhost en el navegador

[Link] una Base de Datos

Hacer click en Admin de MySQL o si lo prefieres ir a
[Link]
En esta ventana hacer Click en Bases de datos

Figura 24: phpMyAdmin

Figura 25: Crear la base de datos llamada “ejemplo1_bd”

[Link] Wordpress
En la barra de direcciones del navegador escribir [Link]

Figura 26: Accediendo a la carpeta ejemplo1 de htdocs de Xampp

12
Curso de Wordpress

En seguida nos aparece la siguiente pantalla

Figura 27: Iniciando instalación de Wordpress en ejemplo1

Dar click en “Vamos a ello!”, se abre una nueva ventana donde nos pide ciertos
datos. En “Nombre de la base de datos” ponemos la base de datos que creamos
en phpMyAdmin la cual llamamos “ejemplo1_bd”. En “Nombre de usuario”
colocamos root. En “contraseña” lo dejamos en blanco ya que por defecto no
tiene. En “Servidor de la base de datos” debe decir “localhost”. Finalmente en
“Prefijo de tabla” dejarlo por defecto en wp_. Hacer click en Enviar

Figura 28: Configurar conexión a la base de datos

13
Curso de Wordpress

Si los datos ingresados anteriormente son correctos entonces aparece la

siguiente ventana:

Figura 29: Wordpress se comunica con la base de datos

Al hacer click en “Ejecutar la instalación” se abre una nueva ventana que solicita
información para la gestión del CMS, rellenarlo según su criterio. El “Título del
sitio” generalmente es el nombre de la empresa, en “Nombre de usuario” y
“Contraseña” crear las credenciales para que puedas acceder a Wordpress

Figura 30: Rellenar información para nuestra Web

14
Curso de Wordpress

Recuerda que los datos ingresados arriba son demostrativos, al elegir un usuario
y contraseña estos deben ser seguros. Hacer click en instalar Wordpress

Figura 31: Fin de instalación de Wordpress

Al hacer click en Acceder se abre la ventana del login para acceder al

administrador de Wordpress, también puedes llegar a esta ventana escribiendo
[Link] o en su defecto a
[Link]

Figura 32: Login en ejemplo1 de Wordpress (para nuestro caso el Nombre de usuario es admin
y la contraseña pass)

2.4. Pantalla de Bienvenida

Hasta este punto debemos aclarar que un Sitio Web en Wordpress tiene 2
“secciones”:
a. La zona de administración protegida con un login (privado)

15
Curso de Wordpress

A esta zona accedes ingresando a [Link]

Figura 33: Panel de Administración de Wordpress

b. La que puede ver el público (las páginas informativas que todos podemos ver)
A esta zona accedes haciendo click en [Link]

Figura 34: Zona pública de Wordpress (Lo ven los visitantes)

16
Curso de Wordpress

3. Configuraciones Iniciales de Wordpress

3.1. Instalar Tema Astra:
Ir a Apariencia  Temas  Añadir nuevo  Buscar “Astra”  Instalar  Activar

Figura 35: Instalar Astra

3.2. Instalar Elementor

Ir a plugins  Añadir nuevo  Buscar “Elementor page builder”  Instalar  Activar

Figura 36: Instalar Elementor

3.3. Instalar Elementor PRO

Ir a plugins  Añadir nuevo  Subir plugin  Seleccionar ElementorPro  Instalar 
Activar

Figura 37: Instalar ElementorPRO

17
Curso de Wordpress

3.4. Configurar apariencia en Astra

Ir a Apariencia  Personalizar

Figura 38: Configurar apariencia de Tema Astra

[Link] ancho
Ir a Global  Contenedor  Ancho completo / estirado

Figura 39: Ancho de Tema Astra

18
Curso de Wordpress

[Link] lateral
Ir a Barra lateral  Sin barra lateral

Figura 40: Sin barra lateral de Tema Astra

[Link]
Ir a Cabecera  Identidad del sitio  Elegir logo

Figura 41: Logo de Tema Astra

Finalmente hacer click en Publicar “Publicar” (botón esquina superior izquierda)

y luego click en la “X” (botón esquina superior izquierda)

3.5. Crear páginas

Ir a Páginas  Eliminar las páginas existentes

Figura 42: Eliminar páginas por defecto

19
Curso de Wordpress

Ir a Páginas  Añadir nueva  Escribir “Inicio”  Atributos de página  Plantilla 

Elementor Ancho Completo  Publicar  Publicar (se da 2 veces a publicar)

Figura 43: Crear página de Inicio

Repetir el proceso y crear las páginas de: Nosotros, Servicios, Blog y Contacto, debería
quedar así:

Figura 44: Crear todas las páginas de la web

3.6. Crear menú de navegación

Ir a Apariencia  Menús  Asignar un nombre “Menú1”  Crear menú

Figura 45: Crear menú

20
Curso de Wordpress

Click en “Seleccionar todos”  Añadir al menú  Ordenar  Marcar como Menú

primario  Guardar menú

Figura 46: Agregar las páginas al menú

3.7. Configurar páginas por defecto

Ir a Ajustes  Lectura  Marca “Una página estática”:
- En Portada seleccionar “Inicio”
- En Página de entradas seleccionar “Blog” y click en Guardar cambios, el sitio web
debería quedar así:

Figura 47: Avances iniciales

4. Crear Header
Ir a Plantillas  Theme builder  Añadir nueva  Header  Poner de nombre
“Cabecera”  Crear Plantilla
5. Crear Footer
Ir a Plantillas  Theme builder  Añadir nueva  Footer  Poner de nombre “Pie de
página”  Crear Plantilla
6. Diseñar cada página
Ir a la página de Inicio  Click en Editar con Elementor
Hacer lo mismo para las demás páginas a excepción del Blog (es con Theme builder)

21