0 Llamaradas 0 Llamaradas ×



Introducción

Personalizador de cabecera es un plugin para WordPress desarrollado por vmux que le permite modificar su encabezado por vivo previsualización a la vez.
Sólo después de que usted esté satisfecho con sus ajustes, puede guardar y publicar con seguridad.
Esta documentación está diseñada para ayudarle a configurar y aprovechar al máximo su Personalizador de cabecera.

Personalizador de cabecera es un plugin para WordPress premium que puede sustituir completamente su cabecera de WordPress, es sensible y también tiene una característica pegajosa. Le permite tener hasta cuatro capas de la navegación en el encabezado del.

Su propósito es hacer su sitio de Internet más útil, fácil de usar y para mejorar la apariencia general, incluso en los teléfonos y tabletas.

Usted puede modificar su encabezado visualmente mediante Personalizador de WordPress API,
que le permite realizar cambios en la cabecera mientras mira a su sitio de Internet al mismo tiempo.

Instalación cabecera Customizer

Este plugin requiere mínima versión de WordPress 3.4.

Usted puede instalar Customizer encabezado por FTP (o copiar por otras técnicas) de la siguiente manera:

  1. Descargar el plugin desde y extraer el contenido
  2. Copie la carpeta impresionante encabezado en el content/directorio
  3. Activar el plugin a través de la página de Plugins en WordPress dashboard
  4. Poner el siguiente código dentro de su contenido: <?php echo apply_filters('hc_print_header', ''); ?>
  • Mayoría de las veces es en el archivo header.php, después de la apertura <body> etiqueta

Próxima, usando Personalización de WordPress puede empezar a personalizar! Simplemente dentro de área de administración ir a apariencia-> Personalizar. Allí elegir Personalizador de cabecera panel para utilizar las funciones de este plugin. He preparado bonito gif para que no se siente confundido:

intro

Insertar encabezado en tu tema

Simplemente inserte el siguiente código justo debajo de <cuerpo> etiqueta:

<?php echo apply_filters('hc_print_header', ''); ?>

Y eso es todo. Usted podrá ver cambios al modificar su Rúbrica por Rúbrica Customizer!

Configuración general

Personalizador de cabecera puede substituir el encabezado de tu tema y puede aparecer una vez que un usuario se desplaza hacia abajo y la cabecera de tu tema desaparece de la vista (opción de pegajoso).

Este panel contiene después de ajustes:

  1. Ancho de la cabecera – anchura de los contenidos de la cabecera
  2. Tramo ancho de la cabecera? – debe envoltura encabezado estirar toda la anchura de un navegador?
  3. Posición izquierda de la cabecera – Si el encabezado es pegajoso, usted debe usar esta opción si no quieres encabezado que horizontalmente en el centro
  4. Parte superior del margen
  5. Parte inferior de la margen
  6. Margen izquierda
  7. Margen derecha
  8. Google Font – elegir tipo de letra para el encabezado; hay opciones más específicas para fuentes (e.g. sólo para el área de logotipo) pero esto es para el encabezado de todo a la vez
  9. Custom CSS – puede escribir cualquier CSS aquí; Asegúrese de comenzar sus definiciones de CSS con ”.HC-wrap {” así que no hagan lios con las definiciones de CSS de la web

Aquí puedes ver algunos jugando dentro de la configuración General (Haga clic en esta imagen para ver que completamente ampliada):

general settings

Cabecera de medio

Medio es sección de Personalizador de encabezado que contiene la zona con el logotipo (logotipo & Descripción) y menú principal (con submenús). Usted puede personalizar siguientes:

  1. Tipo de encabezado – Cómo son su insignia y menús coloca; por defecto el logo va en el lado izquierdo, mientras que menú principal va a la derecha de la cabecera; puede configurarlos dos centralmente alineada, o mueva el menú a la izquierda al lado del logo
  2. Color de fondo – color de fondo de cabecera de medio, color sólido con transparencia fijar opcionalmente a través del selector de color
  3. Imagen de fondo – imagen de cabecera de medio fondo (reemplaza el color de fondo)
  4. Imagen de fondo repetida – imagen de cabecera de medio fondo (reemplaza el color de fondo)
  5. Archivo adjunto de imagen de fondola propiedad de fondo-accesorio establece una imagen de fondo se fija o se desplaza con el resto de la página; es ideal establecer el efecto de paralaje por ejemplo si a “fijo”
  6. Posición de la imagen de fondola propiedad background-position establece la posición inicial de una imagen de fondo
  7. Tamaño de la imagen de fondola propiedad de fondo tamaño especifica el tamaño de las imágenes de fondo
  8. Acolchado (superior/inferior) – relleno de medio encabezado por lo que caben verticalmente su menú o insignia bien
  9. Acolchado (izquierda/derecha) – acolchado del medio encabezado de modo que puede establecer la distancia del contenido interno de lado izquierdo o derecho de la pantalla
  10. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Color – no es visible hasta el ancho del borde se establece en al menos 1 (uno) pixel (PX)
  11. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Ancho – ancho de la frontera
  12. Arriba a la izquierda (y abajo a la izquierda, arriba a la derecha, abajo a la derecha) radio – radio frontera de la cabecera de media

Aquí puedes ver algunos jugando con antecedentes dentro cabecera media (Haga clic sobre las imágenes para agrandarlas completamente):

middle background color

middle background image

Aquí puedes ver algunos jugando radio frontera del medio encabezado por lo que ve redondeado>

border radius of middle header

Encabezado superior

Encabezado superior es otra sección importante de cabecera Customizer. Contiene (igual que el encabezado de la parte inferior) lado izquierdo y derecho, que va alineada centralmente cuando está activado el modo sensible (Cuando el tamaño de su pantalla es pequeño, i.e. tamaño en el panel de encabezado de respuesta). Usted puede elegir para que ambas partes que han: algunos otros menú, pan rallado, cuadro de título o búsqueda de página actual. Los siguientes son configuraciones que se pueden modificar:

  1. Habilitado? – está habilitado en el encabezado de la parte superior? (casilla de verificación)
  2. Menú de la izquierda lateral tipo – elegir entre menú, pan rallado, actual página título o búsqueda de caja para el lado izquierdo del encabezado superior
  3. Tipo de menú derecho lado – elegir entre menú, pan rallado, actual página título o búsqueda de caja para el lado derecho del encabezado de la parte superior
  4. Color de fondo – Aquí mismo en cuanto a la cabecera de medio
  5. Imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  6. Imagen de fondo repetida – Aquí mismo en cuanto a la cabecera de medio
  7. Archivo adjunto de imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  8. Posición de la imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  9. Tamaño de la imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  10. Familia de fuentes de Google – Elija familia solamente para esto (Arriba) cabecera; Usted puede entrarme en contacto con si usted necesita más fuentes ha añadido
  11. Tamaño de la fuente – Elija tamaño de fuente sólo para esto (Arriba) cabecera
  12. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Color – Aquí mismo en cuanto a la cabecera de medio
  13. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Ancho – Aquí mismo en cuanto a la cabecera de medio
  14. Acolchado (superior/inferior) – Aquí mismo en cuanto a la cabecera de medio
  15. Acolchado (izquierda/derecha) – Aquí mismo en cuanto a la cabecera de medio
  16. Margen de enlace (izquierda/derecha) – márgenes entre enlaces (por ejemplo elementos de menú)
  17. Relleno de enlace – rellenos (Arriba, parte inferior, izquierda, derecho) de todos los enlaces
  18. Relleno del elemento de menú (izquierda/derecha) – izquierda y derecha juntas de elementos de menú sólo (Si el menú se establece en uno de izquierda o derecha); aplicable a LI (lista) Tags de menú
  19. Relleno del elemento de menú (superior/inferior) – relleno superior e inferior de los elementos de menú sólo (mismo se aplica aquí)
  20. Color del vínculo (y el color del hover, color de fondo, color de fondo de suspender) – colores de enlaces
  21. Color del texto – color de textos (“no enlaces”, i.e. último título de página o pedazo de migas de pan)
  22. Color del borde del vínculo – los cuatro (Arriba, parte inferior, izquierda, derecho) fronteras de color; no es visible hasta el ancho del borde se establece en al menos 1 (uno) PX (pixel)
  23. Ancho de borde de enlace – los cuatro (Arriba, parte inferior, izquierda, derecho) ancho de las fronteras para enlaces
  24. Radio frontera de enlace – los cuatro (Arriba, parte inferior, izquierda, derecho) radio fronteras para enlaces
  25. Arriba a la izquierda (y abajo a la izquierda, arriba a la derecha, abajo a la derecha) radio – Aquí mismo en cuanto a la cabecera de medio

Cabecera inferior

Inferior es otra sección importante de cabecera Customizer. Contiene (igual que el encabezado de la parte inferior) lado izquierdo y derecho, que va alineada centralmente cuando está activado el modo sensible (Cuando el tamaño de su pantalla es pequeño, i.e. tamaño en el panel de encabezado de respuesta). Usted puede elegir para que ambas partes que han: algunos otros menú, pan rallado, cuadro de título o búsqueda de página actual. Los siguientes son configuraciones que se pueden modificar:

  1. Habilitado? – está habilitado en el encabezado de la parte inferior? (casilla de verificación)
  2. Menú de la izquierda lateral tipo – Aquí mismo en cuanto a la cabecera de la parte superior
  3. Tipo de menú derecho lado – Aquí mismo en cuanto a la cabecera de la parte inferior
  4. Color de fondo – Aquí mismo en cuanto a la cabecera de medio
  5. Imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  6. Imagen de fondo repetida – Aquí mismo en cuanto a la cabecera de medio
  7. Archivo adjunto de imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  8. Posición de la imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  9. Tamaño de la imagen de fondo – Aquí mismo en cuanto a la cabecera de medio
  10. Familia de fuentes de Google – Aquí mismo en cuanto a la cabecera de la parte superior
  11. Tamaño de la fuente – Aquí mismo en cuanto a la cabecera de la parte superior
  12. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Color – Aquí mismo en cuanto a la cabecera de medio
  13. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Ancho – Aquí mismo en cuanto a la cabecera de medio
  14. Acolchado (superior/inferior) – Aquí mismo en cuanto a la cabecera de medio (existe sólo si usted actualmente no está en portada)
  15. Acolchado (superior/inferior) en portada – es igual que arriba excepto que es solamente cuando usted está en página de inicio! Cuando estás en la página que no sea de casa o frente (depende de la configuración de WordPress) entonces esta opción no existe
  16. Acolchado (izquierda/derecha) – Aquí mismo en cuanto a la cabecera de medio
  17. Color del texto – Aquí mismo en cuanto a la cabecera de la parte superior
  18. Color del vínculo (y el color del hover) – Aquí mismo en cuanto a la cabecera de la parte superior
  19. Márgenes para elementos de menú (izquierda/derecha) – Si el menú es seleccionado para estar en el lado izquierdo o derecho, se trata de sus márgenes izquierdo y derecho
  20. Arriba a la izquierda (y abajo a la izquierda, arriba a la derecha, abajo a la derecha) radio – Aquí mismo en cuanto a la cabecera de medio

Área de logotipo

Zona con el logotipo es parte de su encabezado que contiene logotipo (como enlace de texto o imagen) y descripción del sitio. Los siguientes son los ajustes que puede modificar:

  1. Imagen del logotipo – imagen de su logotipo
  2. Tipo de logotipo – tipo de conjunto de su logotipo: imagen de Link o enlace de texto
  3. Logotipo texto – título de la página por defecto
  4. Anchura máxima – es útil no para estirarse cuando encabezado va responde
  5. Acolchado (superior/inferior) – relleno superior e inferior; jugar a acérquelo verticalmente bien menú principal
  6. Familia de fuentes de Google – logotipo textual sólo
  7. Familia de fuentes de Google para la descripción – para la descripción sólo
  8. Mostrar área de logotipo? – Sí o no (casilla de verificación); Si necesita quitar logo área completamente
  9. Logotipo? – Sí o no (casilla de verificación); Si necesita quitar logo sólo
  10. Mostrar logotipo Descripción? – Sí o no (casilla de verificación); Si necesita eliminar descripción (lema) Sólo
  11. Color de título del sitio (y el color del hover) – Si su logotipo es textual, establezca su color aquí
  12. Color de Descripción del sitio – color de la insignia de Descripción (lema)
  13. Tamaño de fuente título de sitio – tamaño de fuente para logotipo textual
  14. Tamaño de fuente Descripción sitio web – tamaño de fuente para la descripción (lema)

Menú principal

Menú principal es parte del encabezado que se coloca dentro de medio encabezado junto con la zona con el logotipo. Submenús que se colocan dentro de la sección principal de submenús. Los siguientes son los ajustes que puede modificar:

  1. Color del vínculo (y el color del hover, color activo) – Estas opciones son solo para enlace (<un> Etiquetas) colores; color activo es el color de un enlace en la página actual
  2. Tamaño de la fuente – tamaño de la fuente de los elementos de menú
  3. Familia de fuentes de Google – familia de elementos de menú
  4. Mostrar submenú flechas? – casilla de verificación; Mostrar flecha apuntando hacia abajo para elementos de menú con submenús
  5. Margen del menú izquierdo (y a la derecha) – margen izquierdo y derecho de todo el menú (elementos de menú no!)
  6. Color de fondo de Link (y suspender y colores de fondo activo) – sólo para enlaces
  7. Radio frontera de enlace – sólo para enlaces, para que puedan ser “redondeado”
  8. Colores de fondo de elemento de menú (y suspender, colores de fondo activo) – para elementos de lista (<Li> Etiquetas!)
  9. Elementos del menú relleno (superior/inferior) – rellenos de etiqueta lista, así que muy bien puede alinear con el área de logotipo
  10. Elementos del menú relleno (izquierda/derecha)
  11. Margen de los artículos de menú (superior/inferior)
  12. Margen de los artículos de menú (izquierda/derecha)
  13. Relleno de enlaces de menú (superior/inferior) – para enlaces (<un> Etiquetas)
  14. Relleno de enlaces de menú (izquierda/derecha) – mismo
  15. Parte superior el menú elemento frontera (y la parte inferior, izquierda, derecho) Color – colores del borde de elementos de lista
  16. Parte superior el menú elemento frontera (y la parte inferior, izquierda, derecho) Ancho – ancho del borde
  17. Menú superior izquierda (y arriba-derecha, esquina inferior izquierda, abajo a la derecha) radio – cada una de estas opciones tienen la posibilidad de excluir todos los otros elementos excepto el primer o último elemento, por lo que parece todo el menú “redondeado” (Echa un vistazo al siguiente ejemplo de gif!)

Al menú principal de configuración, primero debes menú que guardar antes de ser colocado cualquier menú “Menú principal de la HC” Ubicación. Echa un vistazo al siguiente ejemplo:

main menu setup

Aquí es cómo se pueden modificar colores de enlace por ejemplo:

menu item colors

Submenús principales

Submenús aparecen en suspender o haga clic en menú principal. Hay hasta cuatro niveles de submenús para escoger submenús profundos irá. Muchas más opciones están aquí, así que vamos a enumerar a continuación:

  1. Profundidad de submenús – como se indicó anteriormente, Usted puede elegir cuántos niveles de submenús que
  2. Mostrar submenú hover mouse? – si haga clic en o elementos del menú principal suspender o elementos de submenú para mostrar los submenús; encabezado de respuesta siempre va a reaccionar el grifo (Haga clic en)
  3. Color de fondo – color de fondo de todos los submenús
  4. Min. Ancho – anchura mínima que sus submenús; por defecto se establece en auto
  5. Tamaño de la fuente – tamaño de la fuente de todos los elementos de submenú
  6. Color del borde – color del borde de los cuatro lados de la columna de un submenú: Arriba, parte inferior, izquierda, derecho
  7. Parte superior de la frontera (y la parte inferior, izquierda, derecho) Ancho – cuatro opciones separadas por fronteras’ Ancho
  8. Elementos del menú superior de la frontera (y la parte inferior) Color – color del borde de los enlaces del submenú (excepto primera, o de última si es fondo color)
  9. Elementos del menú superior de la frontera (y la parte inferior) Ancho – ancho del borde de los enlaces del submenú (excepto primera, o de última si se trata de anchura inferior)
  10. Sombra – sombra mediante la propiedad CSS Box-shadow; se encuentra en el campo de texto mediante definición completa, e.g. 2PX 2px 2px 2px rgba(85, 85, 85, 0.8) y cuando se realizan cambios en cualquiera de los valores puedes verlos en vivo mientras se escribe

Pan rallado

Migas de pan son ideales para mejorar la visibilidad de su sitio web en buscadores y SEO. Pan rallado de cabecera Personalizador implementación de definición de datos-vocabulary.org.

  1. Tamaño de la fuente – tamaño de la fuente de pan rallado sólo
  2. Familia de fuentes de Google – familia de fuentes para pan rallado sólo
  3. Ver página enlace? – Si pan rallado Mostrar enlace a página de inicio; por defecto lo hace
  4. Texto del separador – carácter separador(s) que se sientan entre los enlaces de la página
  5. Color separador – color del texto de separador
  6. Márgenes de separador (izquierda/derecha) – márgenes de separador

Nota: Migas de pan se colocan en la parte superior o inferior de la cabecera, pero primero tienes que activar cualquiera de ellos y poner pan rallado como menú de lado izquierdo o derecho, así:

Breadcrumbs

Título de la página

Título de la página es muy conveniente ser colocado en la parte inferior de la cabecera. Muestra nombre de la página de la página actual. Usted puede modificar los siguientes:

  1. Color – color del título de la página
  2. Mostrar en página de inicio? – Si se muestran a título para la página de inicio
  3. Margen superior/inferior
  4. Tamaño de la fuente – tamaño de la fuente del título de la página
  5. Familia de fuentes – familia de fuente del título de la página

Nota: Para tener el título de la página debe seleccionar como menú de lado izquierdo o derecho en las cabeceras de la parte superior o inferior.

Cuadro de búsqueda debe ser parte integral de su encabezado si desea tenerlo allí en vez de, por ejemplo, en la barra lateral. Usted puede cambiar muchas opciones aquí:

  1. Color – sólo el color del texto; color de texto mecanografiado (marcador de posición no)
  2. Ancho – ancho básico del cuadro de
  3. Tamaño de la fuente – tamaño de la fuente de texto de búsqueda
  4. Familia de fuentes – familia de fuentes de texto de búsqueda
  5. Color de fondo – color de fondo de la caja
  6. Marcador de posición – marcador de posición de campo de entrada
  7. Color del borde – color del borde de la caja
  8. Ancho del borde – ancho del borde de la caja
  9. Acolchado superior e inferior (y de izquierda/derecha) – juntas del campo de entrada
  10. Parte superior del margen (y la parte inferior, izquierda, derecho – márgenes de la caja
  11. Radio frontera superior izquierda (y arriba-derecha, esquina inferior izquierda, abajo a la derecha) – radio de borde de la caja de búsqueda

Nota: Para que el buscador debe seleccionar como menú de lado izquierdo o derecho en las cabeceras de la parte superior o inferior.

Encabezado de respuesta

Encabezado de respuesta aparece cuando el tamaño de su pantalla (que también se puede definir) es lo suficientemente pequeño como para su jefe así que transforma lo que es atractivo para su teléfono o tableta. Se puede establecer después de opciones:

  1. Anchura sensible – ancho que define el punto de ruptura entre cabecera escritorio y sensible; Cuando usted carga su sitio web en tamaños de pantalla por debajo de este punto se verá el encabezado del “minified”
  2. Color de la hamburguesa – “Hamburguesa” aparece el icono en vez de su menú principal, que usted puede hacer clic en para mostrar el menú en pantallas pequeñas, pero esta vez se ordenan los elementos de menú debajo de uno al otro

Rúbrica pegajoso

Y por último, la cabecera de pegajosa. Como la mayoría de nosotros ya está familiarizada con este término, Esto significa que el encabezado del “se pega” encima de su sitio web incluso cuando empiezas a desplazarse por el contenido. Encabezado pegajoso grandemente
mejora la tasa de rebote de tus visitantes. Usted puede girarla y simplemente marque/desmarque la casilla de verificación. Por ahora se presentan con la siguiente configuración:

  1. Se habilita la Rúbrica pegajoso? – como se mencionó anteriormente, Usted puede fácilmente activar/desactivar sticky encabezado con esta casilla de verificación
  2. Offset – en píxeles, se trata de la distancia cuánto se desplaza hasta la cabecera se adhiere a la parte superior; también puede ser fijado a cero por lo que su jefe se vuelve pegajosa inmediatamente
  3. Acolchado superior e inferior para el jefe superior – juntas sólo de encabezado superior; Esto es muy útil para por ejemplo encabezado más pequeño en altura cuando se vuelve pegajosa (con efecto de transición agradable)
  4. Acolchado superior e inferior para el jefe del medio – igual al punto anterior pero para el jefe del medio
  5. Acolchado superior e inferior para el jefe del fondo – igual al punto anterior pero para el jefe del fondo
  6. Mostrar encabezado superior? – puede ocultar (o no) Encabezado superior completamente cuando la cabecera se vuelve pegajosa
  7. Mostrar encabezado de medio? – igual al punto anterior pero para el jefe del medio
  8. Mostrar el encabezado de la parte inferior? – igual al punto anterior pero para el jefe del fondo

sticky header

Desinstalar

Usted puede encontrar desinstalar (borrar) opción después de desactivar el plugin desde la página de Plugins.

Tenga en cuenta que al eliminar encabezado Personalizador también eliminará todo su color, menú y otras opciones. Si sólo desactiva el plugin, la configuración permanecerá y no tendrá que introducir otra vez si se volverán a activar plugin.

Apoyo las peticiones por favor usan el mi página de apoyo. Si te gusta el plugin, por favor tome el tiempo para valorarlo. Significa mucho para mí.

0 Llamaradas Twitter 0 Facebook 0 Google 0 PIN comparte 0 LinkedIn 0 Correo electrónico -- 0 Llamaradas ×

Deja un comentario

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