Skip to main content

Blog

Páginas de diferentes colores

Imágenes personalizadas diferentes en las cabeceras de WordPress

En esta entrada te mostraré como incluir imágenes personalizadas diferentes en cada página de tu web hecha con WordPress, sin necesidad de cambiar el código de tu tema ni de escribir ninguna línea de código.

En muchas ocasiones los temas de WordPress permiten incluir imágenes personalizadas en la cabecera de tus páginas. Sin embargo esa imagen suele ser la misma para todas las páginas. Si se cambia, cambia en todas las páginas. Esto fue lo que me ocurrió con el tema Transcend. Queríamos poner imágenes diferentes en las cabeceras de las páginas y el tema no lo permitía.

La solución fue instalar el plugin WP Add Custom CSS, que nos permite personalizar los estilos de una página o entrada concretas, como explicamos en una entrada anterior.

El siguiente paso fue ver el código fuente de una página con el inspector de código del navegador. Una forma de verlo es hacer clic con el botón derecho del ratón sobre la imagen de la cabecera y pulsar la opción  “Inspeccionar elemento”.

Menú contextual con Inspeccionar elemento

Se nos abrirá una sección en el navegador donde ver el código HTML de la página, centrándose en la parte de la imagen donde hemos hecho clic. En caso de no ser así, también podemos navegar hasta la imagen o seleccionarla con la herramienta de selección (flecha).

Código fuente con estilos CSS de la imagen de cabecera

En este caso la imagen de la cabecera se muestra como una imagen de fondo puesta con estilos CSS. Por lo tanto es muy simple cambiar dicha imagen, sobreescribiendo los estilos de cada página con la ayuda del plugin WP Add Custom CSS. Por ejemplo, en este caso tenemos que crear el siguiente estilo para la página:

#pagetitle {
background-image: url(http://www.midominio.es/wp-content/uploads/2016/12/cabecera_slider_boda.jpg) !important;
}

Un detalle a destacar, tuve que utilizar la palabra reservada “important” para que el estilo nuevo prevaleciera sobre el declarado directamente en el elemento, ya que no se estaba aplicando con una clase CSS, sino directamente en el elemento HTML.

Espero que esta entrada te haya servidor de ayuda. Si tiene cualquier duda o comentario, escríbeme.

Página con estilos CSS personalizados

Aplicar estilos CSS personalizados a una página o entrada de WordPress

En esta entrada explicaremos como podemos aplicar estilos CSS personalizados a ciertas entradas de nuestro blog o a páginas concretas de WordPress. Estas entradas o páginas podrán tener una apariencia diferente a la del resto de nuestra web. Esto puede resultarnos muy útil, por ejemplo, para añadir banners (imagen superior) diferentes a las distintas páginas de nuestra web o para destacar algunas entradas aplicando estilos CSS. Para ello debemos instalar el plugin WP Add Custom CSS.

Al añadir este plugin, aparecerá un nuevo campo en la parte inferior de las pantallas de edición de las entradas y páginas llamado “CSS personalizado”.

Campo CSS personalizado

Los estilos CSS que se escriban en esta sección sobreescribirán a los de la página o entrada que estamos añadiendo o editando. Esto es aplicable también a los tipos de entrada personalizados.

Este plugin nos permitirá, además, sobreescribir los estilos CSS de nuestro tema. Para ello tenemos que acceder a la nueva opción de menú llamada “Añadir CSS personalziado”.

Menú Añadir CSS personalizado

Espero que te haya servido de ayuda. Si tienes cualquier duda o comentario, escríbeme.

 

hombre fustrado

Quitar el autoformato de párrafos en WordPress

El editor de texto de WordPress añade automáticamente párrafos cada vez que pulsamos “INTRO”. Estos párrafos no aparecen en el código fuente HTML de la página, es decir, si pulsamos para ver el código HTML que estamos escribiendo, no veremos las etiquetas “<p>” de los diferentes párrafos.

Código HTML de los párrafos

Sin embargo, al visualizar la página en nuestros navegadores, WordPress automáticamente le añadirá estas etiquetas.

Código fuente dónde se ve la etiqueta p

Este comportamiento, que nos facilita la vida al escribir, puede resultar muy problemático en aquellos casos en los que deseamos introducir nuestro propio código HTML o código javascript dentro del contenido. Las etiquetas que añade automáticamente WordPress romperán la visualización que esperábamos.

Afortunadamente existe un plugin que evita la introducción de párrafos automáticos de un modo muy sencillo. Además, se activa para que actúe sólo en ciertas páginas o entradas, de modo que el resto sigan teniendo el mismo comportamiento y no se rompa el estilo de visualización. Dicho plugin es Don’t Muck My Markup.

Una vez instalado, cuando deseemos que el autoformateo no actúe en alguna página o entrada, simplemente tendremos que marcar la casilla “Disable auto-formatting for this page”.

Casilla "Disable auto-formatting for this page"

Sencillo ¿verdad?. A mi me resultó muy útil. Deja tu comentario si te ha gustado.

Ipad con web de empresa

Cómo crear una página web de empresa

Si tiene cualquier tipo de empresa y no tiene página web puede estar perdiendo oportunidades de negocio. Sea cual sea su actividad, el estar presente en Internet es fundamental por varios motivos:

  • Dar a conocer la empresa y sus servicios o productos a los clientes actuales.
  • Captar nuevos clientes, que mediante búsquedas lleguen a nuestra web.
  • Dar una imagen de empresa moderna y profesional, que utiliza las últimas tecnologías.

No es necesario gastar grandes cantidades de dinero para crear y mantener una web con un aspecto profesional, ni tampoco es necesario tener unos conocimientos técnicos elevados. A continuación le explicaremos qué pasos debe seguir para crear su propia web de empresa de un modo sencillo y consiguiendo resultados profesionales.

  1. Buscar alojamiento (hosting) para la web: Su página debe estar alojada en unos ordenadores especiales llamados servidores, que están disponibles las 24 horas del día y que responden ante las peticiones de los navegadores. Existen muchas empresas dedicadas a alquilar espacio en estos equipos. Este servicio se llama hosting. En España le recomendaría Webempresa o Raiola Networks (ver comparativa de hosting). Para empezar, puede contratar uno de los planes más baratos, que para una pequeña pyme es más que suficiente.
  2. Elegir su dirección web (dominio): Cuando contrate el hosting, le solicitarán el nombre del domino, que no es más que la dirección que debemos escribir en el navegador para acceder a nuestra futura web. Le recomendaría que utilizara el nombre de su empresa y que utilizara un nombre terminado en “.com” si su ámbito de actuación es internacional o “.es” si trabaja sólo en españa.
  3. Programa para crear su página web (CMS): Hoy en día ni siquiera los programadores profesionales creamos una página web de empresa desde cero. Se utilizan unos programas que se suelen llamar CMS (Content Management System). Existen muchos, pero si quieres crear una página de un modo sencillo y con resultados profesionales le recomiendo WordPress. Habitualmente los mismos proveedores de hosting se lo instalarán gratuitamente o bien lo podrá instalar con muy pocos clics gracias a los asistentes que le proporcionarán. Los dos hostings que hemos nombrado anteriormente harán la instalción por usted.
  4. Instalar un tema en nuestro CMS: El tema es un conjunto de archivos que definen el aspecto de nuestra página: cabecera, menús, gama de colores, etc. También pueden aportar funcionalidades adicionales, bien generales, o bien enfocadas a un determinado negocio. Su elección es fundamental para que nuestra página tenga una apariencia profesional. Existen muchos temas gratuitos de gran calidad o también puede comprarlo o pagar por usar funcionalidades extra. No resulta caro y puede merecer la pena. Estos son los pasos que debe seguir:
    1. Elija un buen tema, bien buscando en el directorio de temas WordPress y filtrando por nuestras necesidades, o bien haciendo una búsqueda por Google y navegando por alguno de los blogs que ofrecen listados de temas, por ejemplo https://colorlib.com/wp/free-wordpress-themes/.
    2. Instale el tema. Es una tarea muy sencilla en WordPress: en la sección de administración accedemos al menú “Apariencia -> Temas”. Una vez ahí pulsamos sobre “Añadir”, buscamos el tema, lo instalamos y lo activamos (ver instrucciones más detalladas).
    3. Observe las funcionalidades que le proporciona el tema y cómo queda su sitio. Acceda por ejemplo en el panel de administración a “Apariencia -> Personalizar” y observe todo lo que le permite hacer. También puede buscar si se ha añadido en el menú alguna opción particular del tema. Si no le gusta lo que le ofrece o cómo queda su web, instale otro tema.
  5. Crea la estructura de páginas de tu sitio y configura el menú: Antes de empezar, debes pensar qué páginas va a tener tu web profesional. Una estructura básica sería: Inicio, Nosotros, Servicios o Productos y Contacto. Ahora tendrás que crear una página en tu CMS para cada una de ellas y llenarla de contenidos. También tendrás que ir añadiendo estas páginas a tu menú. En este video te enseñan a hacerlo con WordPress: https://www.youtube.com/watch?v=110GqXH0QqQ.
  6. Añade también un slider (imágenes rotatorias) a la página inicial. Nada más acceder a tu web, las imágenes rotatorias del slider llamarán la atención del visitante. Añade mensajes que ayuden a vender tu empresa o sus productos o servicios. La mayoría de los temas de WordPress incorporan la posibilidad de crear tu propio slider. Las imágenes que añadas pueden ser suyas propias o bien puede utilizar algunos de los muchos bancos de imágenes gratuitas que existen: Pixabay,  Unsplash, MorgueFile, etc.

Si tienes cualquier duda o comentario, no dudes en escribirme.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

CERRAR