Cómo crear un blog con el tema EXTRA de WordPress

por | 8 Comentarios

Si hablamos de temas Premium de WordPress, tenemos que hablar de Elegant Themes, gracias a las continuas actualizaciones y mejoras de sus productos, podemos disfrutar de auténticas herramientas para crear un sitio web de cualquier tipo. Y eso vamos a realizar, un blog con el tema EXTRA en WordPress.

Suscríbete:

 

Construir un blog con el tema EXTRA paso a paso

Podemos hacer infinidad de sitios con esta plantilla, aunque se diseñó inicialmente para crear publicaciones, podemos configurarla como queramos para conseguir nuestro propósito.

En varios tutoriales que podéis encontrar en esta web, explico cómo personalizar distintos aspectos de este tema, uno de mis favoritos.

Pero no te preocupes, para los que han llegado a este artículo sin saber nada, voy a explicarte todo el proceso paso a paso.

El resto puede navegar por el menú para localizar lo que le interesa.

 

Requisitos antes de crear el blog en EXTRA

Extra es un buen tema de WordPress, y como tal, debemos tratarle como se merece. Necesitamos disponer de un hosting, y al ser posible que no sea gratuito, ya que estos carecen de la tecnología mínima necesaria para su buen funcionamiento.

Yo empecé desde cero contratando un hosting en Hostgator, para empezar considero que es de lo mejor que hay en calidad-precio, pero también podéis valorar otras posibilidades como Siteground o Webempresa, estos dos últimos con planes especializados en WordPress y en español.

Os dejo un vídeo para que podáis ver cómo contratar un hosting en Hostgator y los pasos a seguir para conseguirlo. Es fácil, sencillo y rápido. Recomiendo adquirir el dominio conjuntamente con el servidor la primera vez.

Suscríbete:

 

Utiliza los siguiente cupones si quieres conseguir descuentos a la hora de contratar el hosting en Hostgator:

  • JSC1MESMENOS – Te descontarán el primer mes sobre el precio final
  • JSC25DESCUENTO – 25% de descuento en cualquier plan que adquieras

 

Instalar WordPress en el servidor

Tras contratar el hosting y recibir la información necesaria para acceder al panel e control (cPanel), hay que realizar una instalación de WordPress. El proceso es automático y no requiere de conocimientos especiales paraiello.

PRIMERO: Accedemos a la aplicación de instalación, puede haber un enlace directo de WordPress o unas herramientas llamadas «QuickInstall» o «Softaculous» desde las que podemos WordPress para instalar.

Blog con el tema EXTRA theme. WordPress en Hostgator

cPanel en Hostgator

 

cPanel en Siteground

 

SEGUNDO: Nos pedirá una serie de datos para realizar la instalación, de los cuales los imprescindibles son únicamente el dominio que vamos a utilizar en el sitio, el correo electrónico y el nombre de administración con su clave de acceso.

En algunos servidores puede que, la clave para acceder a la administración de WordPress, nos la proporcionen aleatoriamente. Si es así, la copiamos para poder utilizarla para acceder.

El resto de campos no es bueno rellenarlos, pero no es muy importante, ya que vamos a poder modificarlos con posterioridad si lo necesitamos.

Blog con el tema EXTRA theme. formulario instalación

Después de esto ya tenemos WordPress instalado en nuestro hosting, y tendríamos que poder acceder escribiendo el dominio en internet.

 

Configuración básica e WordPress

En la Zona Premium hay un curso básico de WordPress donde explico todo lo necesario para poner en marcha este gestor de contenidos, como manejarlo y que necesitas saber para controlarlo con soltura.

[add_to_cart id=»1137″]

Antes de empezar a trastear con la web, debemos ir a la pestaña «Ajustes > Generales» y rellenar los siguientes campos:

  • Título del sitio
  • Descripción corta
  • Dirección del correo electrónico
  • Idioma (Muy importante)
  • Zona horaria
  • Formato de fecha
  • Formato de hora

Blog con el tema EXTRA theme. Ajustes generales

 

En esa misma pestaña de «Ajustes«, seleccionamos «Enlaces permanentes«. Y marcamos la opción de «Nombre de la entrada«.

De esta forma convertimos las URLs de nuestra web en direcciones amigables, permitiendo a los buscadores indexar el contenido de forma que pueda ser localizado con una búsqueda normal.

Blog con el tema EXTRA theme. Enlaces permanentes

 

Instalar el tema EXTRA en WordPress

Para instalar la plantilla en WordPress y poder tener un blog con el tema EXTRA, necesitamos descargar los archivos. La suscripción básica de Elegant Themes por un año cuesta 89$ (unos 75 euros), y tienes acceso a las actualizaciones durante ese periodo.

A todos los que están suscritos a la Zona Premium de mi web, les ofrezco descargarse el tema EXTRA de forma gratuita para que prueben, y si les gusta, suscribirse a Elegant Themes para obtener la licencia.

Además, en la Zona Premium podréis encontrar para descargar, un tema hijo para no tener que crearlo y los archivos de traducción al español. Aunque sólo sea por esto, ¿a qué estás esperando?

 

Instalar la plantilla Extra y el tema Hijo

No hay ningún misterio, vamos a la pestaña «Apariencia > Temas» y pinchamos primero en «Añadir un tema nuevo» y seguidamente en la pestaña «Subir tema«.

Primero realizamos el proceso con el tema padre y luego el tema hijo. Sólo debemos activar el tema hijo para empezar a funcionar.

Blog con el tema EXTRA theme. Instalacón

 

Si no disponemos del archivo del tema hijo, podemos crearlo instalando un plugin llamado «Child Theme Configurator«.

En este enlace puedes ver cómo crear el Child Theme de EXTRA con este plugin.

El tema hijo nos va a permitir realizar cambios, como modificar los créditos del pie de la página que podéis ver en el enlace anterior, y no perder esos cambios con las actualizaciones de tema.

Blog con el tema EXTRA theme. Modificar footer

 

Traducir el tema EXTRA al español

Si os manejáis bien con el inglés, puede que sólo necesitéis traducir algunas cadenas de palabras de cara al usuario que visitará nuestra web. Para eso podéis seguir el tutorial que tengo en este enlace.

Pero si os descargáis los archivos completos de traducción, que también podéis encontrar en el enlace anterior, tendremos traducido el 99% de una sola atacada.

PRIMERO: Descomprimimos el archivo de las traducciones en el escritorio del ordenador.

SEGUNDO: Instalamos un plugin llamado «File manager«, con el que podremos manejar los archivos del servidor sin necesidad de acceder a cPanel o de FTP.

Blog con el tema EXTRA theme. File manager

 

TERCERO: Abrimos el plugin desde la nueva pestaña y buscamos la ruta «wp-content > languages > themes«. Aquí subiremos los archivos .mo, ya que los .po son para editar las traducciones y no lo vamos a hacer.

Si el servidor que hemos contratado es Linux, también subiremos al mismo sitio el archivo .mo que hay en la carpeta «theme».

Blog con el tema EXTRA theme. subida de archivos

 

CUARTO: Vamos a plugins, desactivamos y borramos el plugin «File Manager» que ya no necesitaremos y refrescamos la página para ver los cambios.

Al cambiar el idioma, puede que tengamos que decirle a WordPress que recuerde los «Enlaces permanentes«. Para eso vamos a:

  • Ajustes > Enlaces permanentes: Elegimos la opción «Nombre de la entrada» y guardamos.
  • Extra > Opciones del Tema: Sólo pinchamos en guardar cambios.
  • Apariencia > Widgets: Elegimos de nuevo los widgets que queremos utilizar y los colocamos en la barra lateral.

 

Otras instalaciones necesarias para el blog con el tema EXTRA

Aunque pensemos que con tener un tema bonito, y que se vea bien en internet, está todo hecho, no es así. Hay que tener algunos puntos en cuenta como la seguridad y la optimización.

Piensa que internet es una plaza llena de gente de todo tipo, buenas y malas personas, y que tu web ahora mismo es un niño pequeño sólo en medio de todas ellas. Hay que enseñarle a protegerse.

Entre los plugins más básicos que todo WordPress debe tener están:

  • Seguridad: «Akismet» para evitar el spam de los comentarios y «Sucuri» para proteger el blog o la web de ataques.
  • Optimización: «Yoast seo» nos ayudará a definir la forma de indexar las páginas y optimizarla.
  • Cookies: Debemos avisar de la utilización de cookies con «Cookie notice«.

 

Configurar el layout de la página de inicio del blog en el tema EXTRA

Vamos a empezar por olvidarnos de la opción que trae EXTRA de crear la página de inicio con una categoría. Si quieres utilizar esa opción me parece bien, pero no es la que voy a usar yo, ya que está muy limitada la utilización de los módulos.

Lo primero que vamos a crear son dos páginas, una la llamaremos «Inicio» y la otra «Blog«, y las publicamos sin hacer nada más.

Vamos al menú «Ajustes > Lectura» y elegimos la opción de una «página estática» para elegir la página principal y el blog.

Blog con el tema EXTRA theme. ajuste pagina de inicio

 

Configuración básica de los módulos para crear un blog

Existen miles de formas de configurar la página de inicio para crear un blog con el tema Extra, las distintas combinaciones que podemos hacer con los módulos es muy variada. Pero todas las haremos desde el «Constructor DIVI«.

Para ir viendo el resultado tenemos que haber escrito varios artículos, al principio no tienen porque ser con contenido real, ya los cambiarás cuando escribas en serio.

La más básica sería añadir dos módulos «Blog«, el primero mostraría sólo el último artículo a una anchura completa y el segundo lo configuraríamos como «Grilla» o rejilla, para que muestre el resto de artículos en tres columnas.

Blog con el tema EXTRA theme. Blog básico

Blog con el tema EXTRA theme. Blog básico

 

No voy a explicar cómo se configuran los módulos para esta composición, voy a explicar otro formato del que podéis extrapolar la configuración si os gusta la de arriba.

 

Configuración del blog en el tema EXTRA a dos columnas

PRIMERO: Al editar la página de inicio, tenemos a la derecha unos paneles. Vamos a marcar la casilla «Ocultar título e información meta en la entrada» en el panel «Ajuste de EXTRA«.

SEGUNDO: Vamos a componer con el «Constructor Divi» la siguiente configuración sobre una única sección estándar.

Blog con el tema EXTRA theme. Blog a dos columnas

El módulo «Blog«, de la primera fila, tiene la siguiente configuración básica:

  • PESTAÑA CONTENIDO:
    • Número de entradas: 1
    • Contenido: Mostrar extracto
    • Número de compensación: 0
    • Mostrar imagen destacada: SI
    • Mostrar paginación: NO
    • (El resto de las opciones son libres de configuración)
  • PESTAÑA DISEÑO:
    • Diseño: Ancho completo
    • (Lasa demás opciones las configuráis para adaptarlas a vuestros gustos, tipografías, colores…)
  • PESTAÑA AVANZADO:
    • Clase CSS: margenblog colorfondoblog

El módulo de «Texto» es  únicamente para añadir una línea horizontal y crear una separación entre las filas. es totalmente prescindible si no queréis ponerlo.

En la segunda fila vamos a configurar una vez el módulo «Blog«, y después lo duplicaremos las veces que queramos cambiando el valor del apartado «Número de compensación» por un número cada vez mayor para evitar que se repitan las entradas:

  • PESTAÑA CONTENIDO:
    • Número de entradas: 1
    • Contenido: Mostrar extracto
    • Número de compensación: 1
    • Mostrar imagen destacada: SI
    • Mostrar paginación: NO
    • (El resto de las opciones son libres de configuración)
  • PESTAÑA DISEÑO:
    • Diseño: Ancho completo
    • Usar borde: SI y elegir un color
    • (Lasa demás opciones las configuráis para adaptarlas a vuestros gustos, tipografías, colores…)
  • PESTAÑA AVANZADO:
    • Clase CSS: margenblog

La «Llamada a la acción» es un simple botón que nos llevará a la página del fedd del Blog, donde se encuentran la totalidad de los artículos.

Podéis colocar un simple link con un módulo de texto, o no ponerlo si tenemos el acceso en el menú.

 

Añadir código CSS para ajustar los márgenes de las entradas del blog

Suena a lago complicado, pero no hay que asustarse, si habéis puesto bien los nombres en el apartado «Clase CSS» como os indicaba, es coser y cantar.

Abrimos el «Personalizador de Tema» desde «Apariencia > Personalizar«, nos dirigimos a la pestaña «CSS adicional» y copiamos las siguientes líneas de código tal cual.

El «layout» de la página de inicio debería quedarnos de la siguiente manera:

Blog con el tema EXTRA theme. Blog a dos columnas ok

Blog con el tema EXTRA theme. Blog 2 columnas termnado

 

Configuraciones adicionales para el blog con el tema EXTRA

Con esto ya podéis poneros a escribir como locos y publicar contenido en internet, cuanto más interesante sea más visitas recibiréis.

Pero, aunque el blog funcione a la perfección, debéis personalizarlo a nivel de diseño. Añadir imágenes, poner una cabecera única, añadir un formulario de contacto con el que interactuar con tu público…

Una serie de cosas, que según te vayan surgiendo, puedes consultar en muchos de los tutoriales que tengo en esta web sobre el tema EXTRA.

Y si no están, puedes sugerirlo en los comentarios y probaremos a buscar la solución.

Blog con el tema EXTRA terminado

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

8 Comentarios

  1. Marcelle

    Gracias pues justo estoy configurando este tema en mi blog u no le iba entendiendo. Ya oculte los créditos gracias a otro post tuyo pero no me funcionó lo del footer con un widget de texto. Gracias por las explicaciones enserio y intentare modificar un poco más esto

    Responder
  2. CubeNode

    ¡Hola, Juan! He pasado por aquí a darte las gracias porque esta guía me ha resultado muy útil. Andaba buscando por todas partes esta información, pero con tu post me ha quedado claro enseguida 🙂 Es una maravilla encontrar artículos tan útiles y prácticos por ahí, sobre todo cuando andamos desesperados buscando la manera de hacer algo en concreto.

    Así que, eso, ¡muchas gracias! Me guardo este blog para futuras consultas.

    Responder
    • Juan

      Hola CubeNode, encantado de poder ayudar

      Responder
  3. Alfonso

    Me lo imaginaba. Muchas gracias, Juan

    Responder
  4. Alfonso

    Hola Juan,
    Primero felicitarte por tu trabajo. Me gustaría conseguir en el tema Extra lo mismo que Elegant Themes hizo en su tema gratuito Serene que es poder asignarle a cada entrada un color de fondo (pongamos por caso de un blog) y que este fondo aparezca también en la página Inicio.¿Cómo se podría hacer? Gracias

    Responder
    • Juan

      Hola Alfonso, poder se puede hacer, pero también es complicado y lioso, tendrías que editar el código cada vez que escribieras una entrada para asignar un color diferente, y la página de inicio para que ese color quedara reflejado en la página principal. No lo recomiendo, estaríamos poniendo en peligro la integridad de la web continuamente.
      Extra tiene la opción de elegir un color diferente para cada categoría, que se ve en una pequeña banda que aparece en la parte superior cuando mostramos los post de esa categoría y en el color del título en la página principal.

      Responder
  5. gema.gt

    Hola e seguido tus pasos para Traducir el tema EXTRA al español y no se me a traducido todo algunas cosas se a quedado en ingles. Que puedo hacer

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido