INS T I T U T O

DEP A R TA M E N T A L D E
OCC I D E N T E
WORDPRESS

DISEÑO WEB II-12 BTP1-1-2

OBJETIVOS DE LA CLASE

• -DISEÑA, EDITA, GENERA, PUBLICA E INTEGRA PÁGINAS WEB UTILIZANDO

CRITERIOS PROFESIONALES DE DISEÑO A TRAVÉS DE DIFERENTES
SOFTWARES, PONIENDO EN PRÁCTICA SUS HABILIDADES, DESTREZAS.
 WORDPRESS

•WORDPRESS ES UN GESTOR DE CONTENIDOS QUE USAN MILLONES DE

SITIOS WEB EN TODO EL MUNDO, DESDE PEQUEÑOS BLOGS A GRANDES
WEBS.
• ES UNA PLATAFORMA SENCILLA PERO MUY POTENTE QUE NOS OFRECE
MUCHAS POSIBILIDADES PARA CREAR, PERSONALIZAR Y LLEVAR A NUESTROS
SITIOS WEB AL NIVEL QUE QUERAMOS. ES DECIR, ES MUCHO MÁS QUE UNA
PLATAFORMA QUE NOS PERMITE CREAR Y PUBLICAR CONTENIDO EN
INTERNET.
1.DIFERENCIAS ENTRE WORDPRESS.COM Y WORDPRESS.ORG
•CON WORDPRESS.COM PODEMOS CREAR UN SITIO WEB SIN TENER QUE
CONTRATAR UN HOSTING. ESTE SITIO WEB ESTARÁ ALOJADO EN LOS
PROPIOS SERVIDORES DE WORDPRESS. EL NOMBRE DEL DOMINIO ESTARÁ
VINCULADO A WORDPRESS Y TU WEB SERÁ REALMENTE UN SUBDOMINIO.
2. Como Ingresar y Registrarse.
• Ingrese a: https://wordpress.com/alp/?aff=58022&cid=8348279
• Da clic en empezar y registrarse con tu correo y tu nombre.
• Elige un nombre de dominio para tu sitio y la extensión
• Seleccionar un plan de medida comienza gratis.
• Puedes iniciar a explorar para diseñar un Sitio Web de forma intuitiva.
CÓMO COMENZAR A CREAR TU SITIO WEB

•Escoge tu tema: empieza por escoger un tema que cuente con un diseño de una página de
inicio que te guste o adapta un tema para tener una página de inicio estática haciendo un
cambio sencillo.

•Añade páginas: las páginas es donde se añade el contenido estático de tu sitio web. Es muy
sencillo añadir páginas con nuestro editor visual. Si prefieres añadir el contenido de tu página
usando código HTML, accede a él mediante el editor de HTML.

•Escoge tu página de inicio: el siguiente paso es escoger una página de inicio para tu sitio web.
Para ello, accede a ajustes de la página de inicio, en el personalizador. En cuanto accedas a
ajustes de la página de inicio en el personalizador, elige la opción una página estática que se
encuentra debajo del texto tu página de inicio muestra.

•Cuando hagas esto, aparecerán dos menús desplegables. Uno de estos se denomina página de
inicio. Haz clic en el menú desplegable y elige la página de inicio que deseas establecer. No
olvides hacer clic en el botón publicar de la parte superior del panel del personalizador para
guardar tus cambios.
CREA UN BLOG DE WORDPRESS
•Un blog es un tipo de sitio en el que se publican tus artículos más recientes de
manera centralizada. Si tienes planeado escribir entradas nuevas, publicar fotos
regularmente y compartir noticias, es probable que un blog sea la opción más
recomendada para tu propósito.

•Los blogs se crean en función del contenido que publicas. Los diseños de blogs
muestran tus entradas más recientes en orden cronológico inverso por defecto.
Normalmente los temas incluyen una barra lateral y un pie de página en el que
puedes añadir bloques interactivos denominados widgets. Estos pueden usarse
para mostrar tu contenido o para Enlazarlo con tus redes sociales.
CÓMO COMENZAR A CREAR TU BLOG
•Cuando te registres en wordpress.com, podrás configurar tu blog en unos cuantos pasos:
1. Escoge un tema que te guste.
2. Añade algunos datos sobre tu blog.
3. Y ¡comienza a escribir!

•Tu sitio de wordpress.com mostrará por defecto tus entradas de blog en tu página de inicio
(las más recientes, en la parte superior).
•Crea una página de blog para mostrar tus entradas de blog más recientes y establécela en
ajustes de la página de inicio.

•Si quieres promocionar tus entradas de blog más recientes en tu página de inicio, puedes
añadir un widget de entradas recientes a tu zona de widgets para atraer la atención hacia
tus últimas novedades
GUIA DE MANEJO DE WORDPRESS
•1. Actualiza el título y la descripción de tu sitio
•Al registrarte, elegiste una URL como http://mimaravillosoblog.Wordpress.Com, pero puede poner
cualquier título a tu sitio. Los lectores tendrán información sobre tu sitio antes de siquiera leer una
entrada.

•Configuración general
•La configuración general te permite controlar cómo se muestran los elementos de tu sitio web,
como el título, la descripción corta, el idioma y la visibilidad.

•PASOS PARA CAMBIAR ESTA CONFIGURACIÓN:

1. DIRIGIRSE A LA PÁGINA CONFIGURACIÓN GENERAL EN ADMINISTRA – CONFIGURACIÓN.
2.ELIGE TU SITIO WEB PARA ABRIR LA PESTAÑA DE CONFIGURACIÓN GENERAL.
 CAMBIO DE TÍTULO Y DESCRIPCIÓN
CORTA DEL SITIO WEB
El primer ajuste que verás es Título del sitio web. El título del sitio web se muestra en la barra de
título de tu navegador web y en el encabezado de la mayoría de los temas.
El título del sitio web también se muestra en:
 Barra de administración: menú del blog (en la parte superior izquierda) al visualizarlo
 Barra de administración: menú principal (en la parte superior derecha) cuando visualizas los
blogs enlazados con tu cuenta
 Mis sitios web en la página de inicio de WordPress.com
 El nombre del remitente cuando tus seguidores reciben notificaciones

Puedes asignar el nombre que quieras al título del sitio web. No tiene que ser el mismo que el de la
URL de tu blog o tu nombre de usuario.

Nota: No importa los cambios que hagas al título, la dirección se mantiene igual.
La descripción corta se encuentra después del título y es una descripción breve o una frase atractiva
que describe la temática de tu blog. Algunos temas muestran la descripción corta en el encabezado o
en la barra lateral.

El icono del sitio web se utiliza como icono del navegador y de la aplicación para
tu web. Es la imagen que aparece al lado del título del sitio web en la pestaña
del navegador. También los puedes cambiar desde el Personalizador.

La dirección del sitio web te permite seleccionar un dominio para tu sitio web. Puedes usar un
dominio que ya tienes, comprar un dominio nuevo o transferir un dominio a WordPress.com.
También puedes crear una redirección.
Privacidad
La configuración de privacidad sirve para controlar quién puede ver el sitio web.

Configuración general en el escritorio de WP Admin

2.ESCOGE UN TEMA QUE TE GUSTE

Un tema es el aspecto general que tiene tu sitio. Los temas definen el lugar de tu sitio en el que se
muestran los menús y widgets, además de la combinación de colores y el diseño por defecto de las
páginas y entradas.
Ver temas
Expositor de temas con 200 distintos diseños, distribuciones y
combinaciones de colores que se ajustan a las necesidades de tu sitio.
1. Haz clic en Mis sitios web.
2. Desplázate hacia abajo y amplía la sección Diseño.
3. Haz clic en el botón Temas.
Versión de demostración – Un sitio especialmente diseñado para
mostrar todas las características de un tema en particular.
Activar – Activa el tema inmediatamente en tu sitio.

Previsualizar un Tema
La opción de Versión de demostración en el menú del Tema abrirá un
sitio de demostración con el tema aplicado. Puede usar esta opción
para ver el estilo de diferentes páginas antes de seleccionar un tema
para su sitio.
 1. Desde el menú Mis Sitios web, haz clic en Diseño y en la opción Temas.
2. Cada tema tiene un menú al lado del nombre del tema justo debajo de la vista
miniatura del tema.
3. Haz clic en los tres puntos para expandir el menú.
4. Del listado selecciona Versión de demostración.

En la Versión de demostración, puedes probar cómo se ve el tema en una

computadora de escritorio, tableta o dispositivo móvil. Puedes hacer clic
en Probar y personalizar para abrir el tema en el Personalizador con el
contenido de tu sitio cargado.

El uso de la opción Probar y personalizar no cambiará tu sitio

inmediatamente, solo cuando decidas hacer clic en el botón Activar y
publicar.
Activación de temas
Al activar un tema, este se aplica al sitio que tienes publicado. No cambia nada de tu contenido, solo
la forma en que está distribuido.
1. En el menú Mi sitio, accede a Diseño → Temas.
2. Todos los temas tienen un menú al lado del nombre, justo debajo de la miniatura del tema.
3. Haz clic en los tres puntos para ampliar el menú.
4. Haz clic en Activar para activar el tema.

Búsqueda de temas
Los temas predeterminados en el repositorio de temas están diseñados para funcionar mejor con el
editor de bloques, habilitando características como bloques de ancho completo. También están
diseñados para simplificar el proceso de configuración de su página de inicio y sitio.
Sin embargo, hay 200 temas disponibles, y es posible que quieras un tema más avanzado para tu sitio.
En Mi sitio → Diseño → Temas, ve hacia abajo de la página para Ver todos los temas.

Puedes limitar aún más los resultados de búsqueda por características, diseño, columnas, asunto y estilo.
Mi contenido y cambio de tema
Cuando cambias un tema, se conserva prácticamente todo. Es decir, mantienes tus entradas, páginas,
elementos multimedia, sitios de interés y todo tu contenido.
Tras cambiar a otro tema, tienes que hacer una serie de comprobaciones:
Menús personalizados
Te recomendamos que reasignes tus menús personalizados a las ubicaciones que quieras del nuevo
tema. Se admiten distintas ubicaciones en función del tema.
Widgets
Te recomendamos que coloques tus widgets en ubicaciones apropiadas. Del mismo modo que con los
menús personalizados, se admiten varias ubicaciones en función del tema.
CSS personalizado
Lo único que no se conserva es el CSS personalizado, porque es específico de cada tema. Encontrarás
tus CSS anteriores en el enlace de revisiones de CSS en Mis sitios → Diseño → Personalizar → CSS.
Barras laterales y pies de página
Las barras laterales y los pies de pie de página pueden editarse en Diseño → Personalizar →
Widgets. Cada tema tiene varias formas de mostrar los widgets de barra lateral y pie de página.
Así, puedes añadir widgets a tu sitio.
Plantillas de página
Algunos temas incluyen varias plantillas de página, que te permiten cambiar el diseño de una
página concreta. Por ejemplo, el tema Maisha tiene una plantilla concreta de “Página de inicio”.

Todos los temas tienen una sección Información que incluye instrucciones
sobre cómo configurar las funciones del tema en el Personalizador.
3. AÑADE UNA CABECERA O UN FONDO
Las cabeceras y los fondos son maneras sencillas de personalizar tu sitio (y son gratis). Añade tu foto
favorita para dar personalidad a tu sitio o destácalo con un color de fondo personalizado.
Con el Personalizador, puedes llevar el tema de tu sitio un paso más allá. Desde esta sección puedes
cambiar el título y la descripción corta del sitio, añadir widgets en la barra lateral o el pie de página,
crear menús personalizados, cambiar la configuración de la página de inicio y mucho más.

Para acceder al Personalizador:

1. Haz clic en Mi sitio
2. Accede a Diseño
3. Selecciona Personalizar.
Navegar por el Personalizador
 Haz clic en la X en la esquina superior izquierda para salir del Personalizador.
 Haz clic en el botón azul a la derecha de la X para publicar o guardar el borrador.
 Haz clic en el icono en forma de engranaje al lado del botón azul para cambiar la acción a Publica,
Guardar borrador o Programar una fecha para que se publiquen los cambios del Personalizador.
Cuando guardes el borrador tendrás la opción de compartir un enlace de vista previa con
aquellos que no tengan acceso a tu Personalizador.
 El menú puede contener opciones adicionales dependiendo del tema que utilices.
 En la parte inferior del menú del personalizador, puedes ocultar los controles de este o ver tu sitio
en un simulador de computadora, tableta o móvil.

Controles del Personalizador

Los controles del Personalizador son botones en los que puedes hacer clic para ocultar el
Personalizador y ver previamente tu sitio/blog como aparecería en un escritorio, una tableta o un
dispositivo móvil.

Icono del lápiz

Algunos elementos en la vista previa del personalizador tendrán al lado un
icono de un lápiz. Se trata de un atajo a los controles del personalizador para
editar ese elemento específico.
Crear un borrador, programar y compartir una vista previa

El Personalizador también permite al administrador hacer cambios y guardarlos como borradores antes
de publicarlos en el sitio. Es una buena función si se utiliza junto con la función para programar los
borradores del Personalizador. Cuando hayas realizado los cambios en la configuración del
Personalizador, aparecerá el icono de un engranaje al lado del botón Publicar:

 Guardar cambios: es la opción por

defecto. Elígela para publicar los
cambios en tu sitio.
 Guardar borrador: esta opción
cambiará el botón azul Publicar por el
de Guardar borrador. Elígela para
guardar los cambios del Personalizador
sin publicarlos en el sitio. El botón
cambiará a Borrador guardado en
letras oscurecidas.
 Programar: te permite programar los
cambios para que se publiquen en la
fecha y hora que quieras.
 Enlace para compartir la vista previa:
tras
guardar los cambios del Personalizador en un borrador o programarlos, podrás mostrar una vista
previa de los cambios con los colaboradores compartiendo el enlace en la parte inferior del
panel de acciones.
Identidad del Sitio

Logotipo: añádelo una vez y se mostrará automáticamente en todos los temas que admitan logotipos.

Título del sitio: aparece en la parte superior de tu sitio, en el encabezado. Es un espacio

fantástico para poner el nombre de tu negocio o blog.

Descripción corta: se muestra con un estilo más suave cerca del título del sitio. Es útil para poner
una cita o una breve declaración de la misión (de una frase).

Icono del sitio: es lo que ves en las pestañas del navegador, las barras de favoritos y en las
aplicaciones móviles de WordPress.

Los iconos del sitio deben ser cuadrados y de al

menos 512 × 512 píxeles.
Colores y fondos
Cada tema tiene distintas opciones de color. Algunos
tienen opciones muy básicas para cambiar el color
primario y otros proporcionan paletas de colores y
opciones de imágenes de fondo.
Como no todos los temas son iguales, la sección
Colores y fondos puede tener opciones de
configuración distintas a las que se muestran aquí a la
derecha.
El tema Sketch es uno los muchos que contienen las
opciones que se muestran a la derecha.

Fuentes e imágenes de cabecera

Algunos temas también incluyen distintas opciones
de fuentes e imágenes de cabecera. Fuentes
Si una opción del menú de fuentes está en el
Personalizador, puedes usarla para cambiar los
encabezados y la fuente base.
Puedes cambiar el tamaño, el grosor y el tipo de letra
de los encabezados.
La fuente base es la que se utiliza para el cuerpo del sitio. Puedes cambiar
el tamaño y el tipo de letra de la fuente base.
 Imágenes de cabecera
Si tienes un tema que te permita añadir una imagen en
la cabecera de tu sitio, puedes elegir
una imagen desde Diseño → Personalizar → Imagen
de cabecera.
Los temas que admiten cabeceras suelen incluir
información en esta sección sobre el tamaño adecuado
para que tu cabecera encaje perfectamente con el
tema.
Menús
Esta opción del Personalizador se utiliza para gestionar los
menús de navegación del contenido publicado en tu sitio.
Puedes crear menús y añadir elementos relacionados con el
contenido existente, como páginas, entradas, categorías,
etiquetas, formatos o enlaces personalizados.
Los menús se pueden mostrar en lugares definidos por el tema o
en áreas de widgets añadiendo el widget “Menú de
navegación”.
Opciones de contenido

Algunos temas incluyen un menú de opciones de

contenido. Las opciones de contenido te permiten
cambiar la apariencia de tu contenido en páginas
específicas.
A continuación, se describen algunas de las opciones
habituales disponibles en Opciones de contenido,
aunque estas pueden variar para cada tema que
tenga esta característica.
 Visualización del blog: puedes mostrar una
entrada completa o solo un extracto para el
blog y las páginas de archivo.
 Biografía del autor: si quieres que tu biografía
se muestre en entradas únicas.
 Detalles de la entrada: decide qué detalles
específicos de la entrada quieres que se
muestren (fecha, categorías, etiquetas y
autor).
 Imágenes destacadas: dónde deben o no
deben mostrarse imágenes destacadas (blog y
archivos, entradas únicas y páginas).
 4. WIDGETS
Un widget es una herramienta que puedes añadir a las barras laterales y los pies de
página de tu sitio.
Algunos temas tienen varias áreas de widgets y otros solo ofrecen un área de widgets
en la barra lateral o a pie de página.

Ajustes de la página de inicio

Por defecto, tu sitio está configurado para mostrar las últimas entradas en tu página de
inicio. En el menú de configuración de la página de inicio, puedes cambiar lo que ven
los visitantes cuando acceden por primera vez a tu sitio.

Una página estática

Una página del sitio fija o estática. Muchos temas utilizan esta opción para mostrar
contenido destacado. También puedes utilizar esta opción si no quieres una página de
blog.
Elige tu página de inicio de la lista de páginas que has creado desde Mi sitio → Páginas
del sitio. A continuación, elige tu página de entradas si quieres una página que muestre
entradas de blog.
AÑADE UN ICONO A TU SITIO ICONOS DE SITIO
Un icono del sitio (o “Blavatar”) es un icono único para tu sitio. Se
muestra en WordPress.com, en la pestaña del navegador del
usuario que visita tu sitio, en widgets como Blogs que sigo y como
marcador o icono de aplicación de la pantalla de inicio cuando se
guarda en un navegador o en un teléfono.
La imagen debe ser cuadrada y tener al menos 512 píxeles de
ancho y de alto.

Añadir o cambiar el icono de un sitio

Para cargar el icono personalizado de un sitio, ve a Mi sitio → Configuración y, en la
pestaña General, haz clic en el botón Cambiar:
Se mostrará tu biblioteca multimedia. Puedes elegir una imagen que ya tengas o
cargar una nueva. Recuerda que el tamaño mínimo recomendado es de 512
píxeles de ancho y alto.
En cuanto hayas elegido una imagen, haz clic en Continuar.
A continuación, debido a que el icono del sitio debe ser cuadrado, se te indicará
que recortes la imagen como desees. Utiliza los controladores de las esquinas
para redimensionar el cuadro o arrastra el cuadro para cambiar su ubicación.
Cuando hayas terminado, haz clic en Listo.

Eliminar el icono de un sitio

Para eliminar el icono personalizado de un sitio, ve a Mi sitio → Configuración y,
en la pestaña General, haz clic en el botón Eliminar.
5. Añade un widget
Los widgets son complementos que permiten que tu sitio disponga de más funciones y
contenido. Hacen de todo, desde resaltar tus archivos, hasta mostrar fotos de
Instagram, sin olvidarse de contar los días que faltan para el día de tu boda. Comienza
por un widget de texto sencillo y coloca una descripción breve de tu sitio en la página
de inicio.

Widget es una palabra sofisticada para hacer referencia a herramientas o contenidos

que puedes añadir, ordenar y eliminar de las barras laterales de tu sitio web o blog.
Los widgets facilitan la tarea de personalizar el contenido de tus barras laterales.

Puedes acceder a tus widgets desde Mis sitios → Personalizar (verás esta opción en el
menú, a la derecha de Temas).

Esta opción te lleva al Personalizador, en el que podrás añadir, eliminar y configurar

widgets para tu sitio.
 Añade widgets y configúralos

En el Personalizador, haz clic en la pestaña

Widgets.
A continuación, se mostrarán las áreas de
widgets disponibles en tu tema (que tendrán
un aspecto bastante similar al siguiente):

Para añadir un widget, primero haz clic en un

área de widgets. En el panel, haz clic en
Añadir un widget. El personalizador mostrará
todos los widgets disponibles para añadir.

Desplázate por la lista de widgets ordenada

alfabéticamente o utiliza el campo de
búsqueda de la parte superior para encontrar
uno. A continuación, haz clic en un widget
para añadirlo. Después, el personalizador
mostrará un cuadro para establecer la
configuración del widget.