Cómo centrar encabezados en WordPress

Escrito por sara williams | Traducido por paulo gutierrez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo centrar encabezados en WordPress
Usa márgenes automáticos para centrar un encabezado de WordPress en CSS. (Polka Dot RF/Polka Dot/Getty Images)

El archivo header.php de un tema de WordPress contiene el código de ese tema. Cómo mínimo, este código incluye programación HTML y PHP. El código CSS (Cascading Style Sheet - Hojas de estilo en cascada), generalmente encontrado en el archivo style.css, controla el aspecto y la ubicación del contenido del encabezado. Debes editar el código de esta hoja de estilo para centrar un encabezado en WordPress. Establece márgenes automáticos para tu encabezado en CSS para que el navegador calcule una posición centrada.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu navegador y carga el directorio wp-admin de tu sitio web WordPress. Ingresa tu nombre de usuario y contraseña para iniciar sesión en el panel de control.

  2. 2

    Navega hasta "Editor" en la sección "Apariencia" para cargar la pantalla "Editar temas". Carga el archivo de plantilla header.php en el cuadro editor haciendo clic sobre su enlace bajo el encabezado "Plantillas".

  3. 3

    Localiza el conjunto de etiquetas que envuelven tu encabezado. Dependiendo del tema y del estándar del HTML usado, podrías encontrar etiquetas "<div>", "<header>" o "<section>". Encuentra el ID asignado a la etiqueta de envoltura:

    <div id="miencabezado"> Contenido del encabezado aquí… </div>

    En el ejemplo anterior, "miencabezado" es el ID que necesitas.

  4. 4

    Carga style.css en el editor haciendo clic sobre su enlace en la parte inferior de la lista de archivos de plantilla. Encuentra el selector que se dirige a tu encabezado. Este es un ejemplo usando el ID "miencabezado":

    miencabezado {

    background: url(path/to/image.png) center no-repeat; width: 960px; height: 200px; }

  5. 5

    Agrega el siguiente código CSS entre las llaves para el selector "#miencabezado":

    margin-left: auto; margin-right: auto;

    Haz clic en el botón azul "Actualizar archivo" para guardar tu trabajo.

Consejos y advertencias

  • Debes establecer un ancho para tu encabezado con el fin de centrarlo correctamente. Ajusta el ancho en un valor de porcentaje si no quieres usar un ancho estático para tu encabezado.
  • El método de centrado anterior no funciona en Internet Explorer 6. Envuelve el encabezado en un nuevo conjunto de etiquetas "" con un ID y ajusta su "alineación de texto" de forma apropiada en CSS para "centrar" con el fin de brindar compatibilidad con ese navegador.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles