Resumen

Esta publicación se ha publicado con el propósito de facilitar la búsqueda y consulta de contenido en publicaciones futuras que puedan resultar confusas. Puedes verificar en la tabla de contenidos (índice) a la derecha de esta publicación para encontrar información fácilmente.

 

No es necesario que leas todo desde el principio hasta el final, sino que puedes revisar los temas y estilos antes de consultar otros contenidos en publicaciones futuras cuando encuentres algo desconocido. (Planeo agregar enlaces)

 

Además, el contenido aquí se actualizará periódicamente según sea necesario.

Tema (Theme)

En la página principal del administrador de WordPress, verás en la barra lateral izquierda que dice Apariencia – Temas.

En la versión en coreano, parece que ‘Apariencia’ se traduce como ‘외모’, pero como yo uso la versión en coreano, a veces encuentro que la traducción es más confusa, así que la uso en inglés.

 

¿Qué es un tema? WordPress no es una plataforma como Naver Blog. Es una herramienta diseñada para facilitar la creación de sitios web, en comparación con métodos tradicionales.

Por lo tanto, al instalar WordPress, no se crea un marco como en Naver Blog, donde solo puedes subir publicaciones. Los usuarios deben construirlo todo desde cero.

 

Si intentas crear todo desde el principio, puede ser difícil, ¿verdad? Un tema es lo que te ayuda con eso.

 

Un tema proporciona un marco básico. Puedes elegir un tema que te guste y adaptarlo a tus necesidades. Con un buen tema, incluso los principiantes pueden construir un sitio web funcional y publicar contenido. El método que el youtuber ‘로알남’ explica en WordPress también utiliza temas.

Al hacer clic en ‘Agregar nuevo’ en Temas, puedes descargar y aplicar muchos temas. También puedes buscar en la parte superior derecha y si ya tienes un tema, puedes subirlo para usarlo.

 En mi caso, no utilizo un tema específico y disfruto construyendo desde cero, así que uso el Kava Child Theme que viene integrado en Crocoblock.

 No te preocupes si usas un tema diferente. Las funcionalidades básicas son las mismas y al final, se trata de personalizarlo a tu gusto.

 ¿Ves el botón de Personalizar? Es el botón para modificar las configuraciones del tema, como colores básicos, formato de texto, logotipo del sitio, etc. Vamos a revisarlo.

Modificar Tema (Personalizar)

 Esta es la pantalla de entrada a Personalizar de mi blog TogePi. Explicaré brevemente cada sección.

(1) Identidad del Sitio

Puedes configurar el título y el tagline del sitio.

(2) Configuración General del Sitio

 Configuras el favicon, el diseño de la página, las migas de pan (Breadcrumbs), el botón de desplazamiento (To top button) y más.

 Para el diseño de la página, establecí en ancho completo (Full width), pero puedes configurarlo a tu gusto, y esta configuración se puede modificar posteriormente, así que no es necesario ajustarlo ahora.

 No he utilizado la función de migas de pan aquí.

 El botón de desplazamiento se genera al desplazarse hacia abajo en la página y lleva de vuelta a la parte superior, así que puedes agregarlo según tu preferencia. Si deseas cambiar la apariencia de este botón, consulta la sección sobre ‘Estilo’ más adelante.

(3) Colores / Esquema de Colores

 Puedes configurar el color de fondo de la página y los colores del texto básico, así como el color aplicado a los enlaces.

 Sin embargo, esto se puede personalizar por separado durante el proceso de creación de la página, así que no es necesario tocarlo a menos que desees cambiar colores básicos que no se pueden modificar mediante widgets.

(4) Tipografía

 Puedes definir el tamaño, grosor, ancho, altura y más para los títulos de H1 a H6.

 He especificado H1 a H6, mientras que los contenidos utilizan H5 para los textos.

 En lugar de configurar todo desde el principio, es más fácil modificarlo a medida que escribes.

(5) Configuración de la Página de Inicio

 Puedes especificar qué página quieres que sea la página de inicio de tu sitio web. La página de inicio es la que aparece cuando haces clic en el logotipo.

 Los elementos no mencionados anteriormente, como el encabezado (Header), la imagen de fondo, los menús y los widgets, se configurarán por separado, por lo que no es necesario tocarlos a menos que quieras. También ten en cuenta que este contenido fue elaborado con el tema Kava Child, por lo que las configuraciones pueden variar entre temas.

Configuración Detallada de Widgets

 Hay una variedad de tipos de widgets, ¿verdad? En la captura, he mostrado un widget de botón, pero también hay varios otros como texto, imagen, icono, etc. La aplicación de estilos a estos widgets es bastante similar, así que te lo explico a continuación.

 Para la explicación básica, creo que el widget de botones es el más práctico, ya que se usa bastante.

Contenido

 Si buscas ‘botón’ en la barra lateral izquierda, saldrán varios resultados. Generalmente utilizo el botón de Crocoblock, que aparece debajo del botón regular, pero para explicarte usaré el botón predeterminado de WordPress.

 Al hacer clic en el widget de botones, verás la ventana de Contenido.

El tipo (Type) puedes dejarlo en el valor predeterminado.

 

(1) Texto

Puedes cambiar el nombre del botón.

(2) Enlace

 Cuando se hace clic en este botón, se puede redirigir a un enlace específico. El valor predeterminado # no hace nada. Este símbolo se utiliza en la configuración del menú más tarde.

 Dentro de este campo, puedes vincular páginas dentro de tu sitio web o externos. Para vincular a una página externa, solo necesitas copiar y pegar la URL. Para las páginas internas, puedes hacerlo de la misma manera, pero si conoces el slug (URL amigable) de la página, solo necesitas ingresar /slug/ y el enlace se activará.

 A la derecha hay un botón de configuración y un icono de pancake. Vamos a revisar el botón de configuración primero.

 Al hacer clic en el botón de configuración (Link Options), se despliegan las opciones. El enlace se maneja como mencioné, a continuación explicaré los dos puntos adicionales.

• Abrir en nueva ventana

 Si habilitas el botón de abrir en una nueva ventana, al hacer clic en este botón, se abrirá el enlace en una nueva ventana sin salir de la página actual.

 Esto también puede ser importante para el SEO, aunque no es necesario saber esto ahora. Para explicarlo brevemente, el SEO toma en cuenta cuánto tiempo pasa un usuario en una página, así que abrir el enlace en una nueva ventana mantiene la página original abierta, lo que puede ser beneficioso para el puntaje SEO. Sin embargo, si estás considerando generar ingresos con Google Adsense, podrías perder ingresos ya que a menudo los anuncios son visibles solo cuando el usuario entra y ve el contenido.

• Añadir nofollow

 Esta característica no es necesariamente importante en esta etapa, pero está relacionada con el SEO.

 En resumen, al activar esta opción, le dices al enlace que no cuente para el puntaje SEO de la página de destino.

 Al hacer clic en el botón de etiquetas dinámicas (Dynamic tags), verás esta pantalla.

 Al principio, esta función me parecía complicada y confusa, pero una vez que te acostumbras, se convierte en una herramienta muy útil. En esta etapa puede que no necesites saberlo, ya que generalmente no se aplica.

 

 Tanto el JetEngine de Crocoblock como Elementor incluyen funciones dinámicas que permiten utilizar datos de manera eficaz. Por ejemplo, si escribes una entrada y deseas mostrar el título, debes ingresar el texto en el bloque. Pero, si lo haces de esta manera, cada vez que cambies el contenido necesitarás ajustar el texto manualmente. Esa es la razón por la que la función dinámica puede ser muy útil.

 Si configuras la función dinámica para que muestre el título de la entrada, aparecerá automáticamente en tu contenido sin tener que ingresarlo de nuevo. En otras palabras, esta función te permite establecer un marco que optimiza la presentación de la información en tu sitio.

 Si haces clic en Post URL y lo configuras, atraerás automáticamente la información de URL de esta entrada en particular.

(3) Alineación

 No es necesario que explique esto, ¿verdad? Es la configuración que determina la alineación del contenido. También podemos omitir la configuración del tamaño.

(4) Icono

 Puedes agregar un icono antes del título del botón y configurarlo aquí. Si eliminas el texto y solo dejas el icono, el botón consistirá únicamente en un icono.

 La opción de Espaciado de Icono define la distancia entre el icono y el texto.

 Ahora, resumamos lo visto al implementar un botón práctico con las configuraciones pertinentes.

 Nota que el color por defecto del botón es rosa debido a las configuraciones de color que mencionamos en la personalización del tema.

 Al hacer clic en cualquier botón, si funciona correctamente, redirigirá al enlace configurado.

Click aquí

Página principal de TogePi

Naver

Estilo (Style)

 El recuadro rojo es donde configuras los estilos.

 ¿Qué significa estilo? Se refiere a la personalización de elementos visuales de tu widget, como fuente, color, tamaño, fondo, márgenes y bordes.

 Usaré el widget de botones nuevamente para explicarte el estilo.

(1) Tipografía

 

• Familia: Especifica la fuente del texto.

• Tamaño: Define el tamaño del texto.

• Peso: Establece el grosor del texto.

• Transformar: Establece las mayúsculas y minúsculas.

• Estilo: Define la inclinación del texto.

• Decoración: Permite agregar subrayado al texto.

• Altura de línea: Ajusta el espacio vertical entre líneas de texto.

• Espaciado de letras: Configura el espacio entre letras.

• Espaciado de palabras: Define el espacio entre palabras.

 La diferencia entre el espaciado de letras y palabras podría ser algo confusa, pero es fácil de entender con ejemplos.

Click aquí

Click aquí

(2) Sombra de Texto

 Personalmente, no utilizo esta función con frecuencia, pero permite agregar un efecto de sombra detrás del texto. A continuación, un botón que lo muestra.

 He aplicado un efecto exagerado en la configuración para mostrar la diferencia claramente.

Click aquí

Click aquí

(3) Normal / Hover

 Has notado que los botones cambian de color o dan una sensación de acción cuando mueves el ratón sobre ellos, ¿verdad? Esa es la función que estamos configurando.

 Hover se refiere a cuando el ratón está sobre un elemento, como en el caso de un helicóptero que permanece en el aire (hovering). La configuración de Normal determina cómo se ve el botón cuando no está siendo tocado, mientras que Hover se ocupa de cómo debería aparecer el botón cuando el ratón está encima.

 

• Color del Texto: Establece el color del texto.

• Tipo de Fondo: Define si el fondo será un color sólido o un degradado.

• Color: Esta sección determina el color del fondo una vez que seleccionas el tipo.

• Color del Borde: Si tu botón tiene un borde, aquí puedes definir su color.

• Animación de Hover: Define la animación que se aplicará al botón en estado Hover.

 

 Vamos a comprobar las configuraciones de los botones que hemos mencionado y ver las diferencias.

Click aquí

Click aquí

(4) Borde

 El borde se mencionó brevemente antes; es simplemente el contorno de tu widget.

 Aquí puedes definir las configuraciones relacionadas con el borde.

• Tipo de Borde: Especifica si el borde será sólido, punteado, etc.

• Ancho: Define cuán grueso será el borde.

• Radio del Borde: Controla qué tan redondeadas o rectas serán las esquinas del borde.

• Sombra de Caja: Similar al efecto de sombra mencionado anteriormente.

 

 A continuación, revisa las diferencias entre los bordes que configuramos.

Click aquí

Click aquí

(5) Relleno (Padding)

 Hemos introducido un nuevo concepto. Relleno puede recordarte a la ropa de invierno, ya que significa ‘almohadilla’. El significado es similar.

 Relleno se refiere a añadir espacio dentro del borde de un widget, lo cual incrementa su tamaño visual. Por otro lado, el margen (Margin) es un concepto similar que se usa para disminuir el tamaño visual del widget.

 Vamos a observar algunos ejemplos para clarificar la diferencia entre Relleno y Margen.

Click aquí

Click aquí

 ¿Notas la diferencia?

 El valor al lado de los números indica si estás usando unidades de píxeles (px) o proporciones. La opción en forma de cadena es una función de sincronización (SYNC), que facilita ajustar el mismo valor en todos los lados (superior, inferior, derecho, izquierdo).

 Hasta aquí llega la explicación de la sección de estilo del widget de botones.

Avanzado (Advanced)

 -Contenido adicional programado para el futuro-