¿Cómo actualizar un tema PREMIUM en WordPress?
Si has instalado un tema PREMIUM sin licencia, aprende a actualizarlo con un 'clic'.
Cuando se comenzaron a desarrollar sitios web, era necesario tener conocimientos de HTML. Hoy en día, gracias a los CMS, prácticamente no es necesario tener conocimientos de códigos ni programación.
De por si, la mayoría de sitios web desarrollados en la actualidad están creados con este lenguaje aunque ya no se hacen a mano sino que se automatizan gracias a los gestores de contenido.
Sin embargo, si eres exigente y te gusta un trabajo bien hecho, es recomendable que tengas algo de conocimientos de HTML y CSS para personalizar más tus proyectos.
Si estás usando WordPress para diseñar tu sitio web, te preguntarás, ¿por qué tengo que aprender HTML?
En realidad no es necesario que conozcas este lenguaje para crear un sitio web con WordPress. Sin embargo, si te familiarizas con HTML, te ayudará a entender y personalizar tu sitio web ya que, el código fuente de WordPress, está desarrollado con HTML.
HTML, que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language), es el lenguaje de construcción más básico de un sitio web y se usa para crear y representar visualmente sitios web.
Determina el contenido del sitio web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de un sitio web (CSS) o su funcionalidad (JavaScript).
En WordPress, el lenguaje HTML se utiliza en la caja de edición de texto. Todo lo que allí se escriba estará etiquetado y será parte del HTML del sitio web.
Anuncio publicitario
Las hojas de estilo en cascada, CSS (Cascading Style Sheets), actualmente son utilizadas en un gran número de sitios web y ayudan a mejorar el diseño visual además de reducir y simplificar el trabajo.
En WordPress, las hojas de estilo en cascada, son frecuentemente utilizadas en la creación de temas y controlan principalmente el color, formato, tipografía y tamaños además de otros parámetros que permiten hacer que un sitio web se vea atractivo.
Al igual que sucede con HTML, en WordPress no es necesario tener conocimientos de CSS para crear un sitio web ya que, con el uso de los temas, esta tarea se simplifica mucho lo que hace que el desarrollo del sitio sea una tarea sencilla.
La siguiente imagen representa la caja de edición de texto de WordPress:
En este editor de texto es donde, normalmente, se añade cualquier tipo de contenido en una página o entrada en WordPress.
Con la llegada de los editores de contenido, la caja de edición de texto de WordPress prácticamente no se utiliza.
Fíjate en la siguiente imagen:
Corresponde al widget Editor de Texto de Elementor. Este editor de texto es prácticamente igual al editor de texto nativo de WordPress pero ahora es un elemento dedicado solo al texto.
Los editores de texto cuentan con todo lo necesario para que puedas redactar el contenido sin necesidad de tener conocimientos de HTML y CSS.
Cada uno de los elementos añade etiquetas HTML y CSS al código automáticamente a medida que los vas usando.
En la parte superior derecha de la caja de edición de texto hay dos pestañas:
La idea principal es utilizar el editor de texto de Elementor solo para texto: párrafos, listas y enlaces.
Para archivos multimedia como imágenes, audios y vídeos, existen elementos individuales y ya no será necesario añadirlos desde el editor de texto como se hacía anteriormente con WordPress.
Para el desarrollo de este curso de WordPress vamos a utilizar el editor de contenidos Elementor que posee todas las herramientas necesarias para desarrollar un sitio web con WordPress.
Si aún no conoces Elementor, en la lección del curso de WordPress, instalación de Elementor, puedes encontrar una breve reseña de este plugin.
Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.
Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.
A continuación te indico algunas de las reglas HTML y CSS que más se utilizan en el editor de texto. Tu trabajarás en la pestaña Visual y la regla HTML se creará en la pestaña HTML.
La idea es que te familiarices con el uso de estos códigos por si en algún momento quieres personalizar el contenido de tu sitio web.
Cuando trabajes con textos en WordPress, no hace falta que añadas ningún código. El Editor de texto posee sus propias herramientas con las cuales crea el código automáticamente (muy similar a trabajar con Word, por ejemplo).
En la pestaña HTML: | En la pestaña Visual: |
<p style="text-align: left;">Alineado a la izquierda</p> | Alineado a la izquierda |
<p style="text-align: center;">Centrado</p> | Centrado |
<p style="text-align: right;">Alineado a la derecha</p> | Alineado a la derecha |
<p style="text-align: justify;">Texto justificado</p> | Texto justificado |
<strong>Texto en negrita</strong> | Texto en negrita |
<em>Texto en cursiva</em> | Texto en cursiva |
Para alinear un texto o párrafo hay que añadir la etiqueta <p> (paragraph, párrafo en inglés) y el estilo correspondiente mediante la propiedad "style" que es código CSS.
Aunque <p style="text-align: left;"> se utiliza para alinear un texto a la izquierda, no se necesario utilizarlo ya que, por defecto, cualquier texto se alinea a la izquierda ya que así funciona nuestro idioma.
Si estás utilizando un editor de contenidos como Elementor, no hace falta utilizar las etiquetas de párrafo ya que Elementor cuenta con la pestaña Estilo donde se puede alinear el contenido sin necesidad de utilizar código.
En la pestaña HTML: | En la pestaña Visual: |
<a href="URL">Esto es un enlace</a> | Esto es un enlace |
<a href="URL" target="_blank">Este es otro enlace</a> | Este es otro enlace |
En este caso el primer enlace abre en la misma ventana. El segundo enlace, gracias a la propiedad target="_blank", hace que el enlace abra en una nueva ventana (o pestaña) del navegador.
En la etiqueta href="URL" es donde se declara el destino del enlace siendo URL el enlace de destino. Por ejemplo: https://es.wordpress.org/.
En la pestaña HTML: | En la pestaña Visual: |
<h1>Título h1</h1> | Título h1 |
<h2>Título h2</h2> | Título h2 |
<h3>Título h3</h3> | Título h3 |
<h4>Título h4</h4> | Título h4 |
<h5>Título h5</h5> | Título h5 |
<h6>Título h6</h6> | Título h6 |
Muy importante...
Los encabezados se declaran con las etiquetas h1 hasta h6. H1 es el título principal y, en una página o entrada, solo puede estar 1 sola vez.
Desde h2 hasta h6 son subtítulos y pueden haber varios siempre y cuando se respete la jerarquía. Para el SEO es muy importante respetar esta regla.
A los títulos y subtítulos también se les puede aplicar las propiedades de los párrafos y enlaces: alinearlos a la izquierda, derecha o centrarlos.
En la pestaña HTML: | En la pestaña Visual: |
<h2 style="text-align: center;">Título h2 centrado</h2> | Título h2 centrado |
<h3 style="text-align: right;">Título h3 a la derecha</h3> | Título h3 a la derecha |
<h4><a href="#">Título h4 con enlace</a></h4> | Título h4 con enlace |
Si estás utilizando un editor de contenidos como Elementor, no hace falta utilizar etiquetas ya que Elementor incluye el widget Encabezado, para títulos y subtítulos, y ofrece todas las opciones para configurarlos sin utilizar código.
En la pestaña HTML: | En la pestaña Visual: |
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> |
|
<ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> |
|
La primera es una lista con viñetas y la segunda es una lista numerada que podrás utilizar según el tipo de contenido.
En el código HTML, las listas con viñetas tienen la etiqueta <ul> y las listas numeradas tienen la etiqueta <ol>.
Para ver el uso de una clase con CSS, supongamos que queremos formatear un texto en color rojo, centrarlo y modificar el tamaño de la fuente.
El código CSS sería algo como:
.textorojo {color:#FF0000; text-align:center; font-size:24px;}
Donde:
Cuando se declara una clase en un archivo .css, el nombre de la clase deberá comenzar con un "punto".
El código HTML quedaría de la siguiente manera:
Ejemplo de uso de CSS
Como puedes observar, dentro de la etiqueta <p> (párrafo) se ha añadido la clase con el formato class="textorojo".
El resultado sería el siguiente:
Ejemplo de uso de CSS
Otros conceptos fundamentales que debes conocer son: margin (margen), padding (relleno) y border (borde).
Estas son propiedades de CSS que se suelen aplicar mediante reglas al contenido aunque, con los editores de contenido como Elementor, solo tendrás que escribir los valores en unos recuadros sin necesidad de utilizar código.
En las propiedades border, padding y margin se indican 4 valores en el siguiente orden:
En la siguiente imagen se ilustra cómo se aplican estas propiedades a un elemento.
El recuadro interno de color negro es el contenido y el recuadro de color rojo es el borde.
Por defecto, el borde suele ser una línea imaginaria (invisible) que pertenece al contenido. Cuando se indican valores para esta propiedad es cuando se vuelve visible.
Si quieres aprender más sobre HTML y CSS, te recomiendo estos sitios web:
Anuncio publicitario
La finalidad de esta lección no es que aprendas HTML y CSS sino que te familiarices con estos códigos que son actualmente utilizados para el desarrollo de sitios web con WordPress.
Igualmente, no está de más ampliar este tipo de conocimientos ya que nunca sabrás cuando los puedas necesitar.
Te estaría muy agradecido si pudieras valorar esta entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.
(14 votos, promedio: 4.6 de 5)
Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo será pero, mantenerlo, requiere de muchos cafés y muuuuchas horas . Si te gusta mi trabajo y te está ayudando, considera invitarme un café para apoyarme y apoyar este proyecto. ¡Te invito un café!.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.
Si has instalado un tema PREMIUM sin licencia, aprende a actualizarlo con un 'clic'.
Aprende a editar archivos desde el servidor y WordPress
Instalación del plugin Starter Templates con el tema Astra y Elementor.
Aprende a configurar FIleZilla y a subir archivos por FTP.
Aprende a editar archivos desde el servidor y WordPress
Copyright © 2025 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.
La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Más información sobre nuestra política de cookies.