0 Fusées éclairantes 0 Fusées éclairantes ×

Introduction

En-tête Customizer est un plugin WordPress développé par vmux qui vous permet de modifier votre en-tête en live image affichée en aperçu en même temps.
Seulement si vous êtes heureux avec vos paramètres, vous pouvez enregistrer et publier en toute sécurité.
Cette Documentation est destinée à vous aider à configurer et à profiter au maximum de votre en-tête Customizer.

En-tête Customizer est un plugin pour WordPress premium permettant de remplacer votre tête de WordPress entièrement, est réactif et possède également une fonction post-it. Il vous permet d'avoir jusqu'à quatre couches de navigation dans l'en-tête.

Son but est de rendre votre site plus utile, facile à utiliser et d'améliorer l'apparence générale, même sur les téléphones et tablettes.

Vous pouvez modifier votre en-tête visuellement à l'aide WordPress Customizer API,
qui vous permet de modifier l'en-tête tout en regardant votre site Internet en même temps.

Installation d'en-tête Customizer

Ce plugin nécessite la version minimale de WordPress 3.4.

Vous pouvez installer Customizer en-tête via FTP (ou copier de toute autre technique) de la manière suivante:

  1. Télécharger le plugin à partir et extraire le contenu
  2. Copiez le dossier de l'en-tête génial pour les plugins/répertoire
  3. Activer le plugin via la page des Plugins dans tableau de bord WordPress
  4. Mettre code suivant à l'intérieur de votre contenu: <?php echo apply_filters('hc_print_header', ''); ?>
  • La plupart du temps, il serait dans votre fichier header.php, juste après l'ouverture <body> Tag

Prochaine, à l'aide Personnalisation de WordPress vous pouvez commencer à personnaliser! Passer en apparence - à l'intérieur de la zone d'administration> Personnaliser. Là, choisir En-tête Customizer volet pour utiliser les fonctionnalités de ce plugin. J'ai préparé vous gif sympa si vous ne vous sentez pas confondu:

intro

Insérer en-tête dans votre thème

Il suffit d'insérer la suite code juste en dessous <corps> Tag:

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

Et c'est tout. Vous serez en mesure de voir les changements tout en modifiant votre en-tête, par Customizer en-tête!

Paramètres généraux

Customizer en-tête peut remplacer l'en-tête de votre thème et il peut apparaître une fois qu'un utilisateur fait défiler vers le bas et l'en-tête de votre thème disparaît de la vue (option de collante).

Ce panneau contient les paramètres suivants:

  1. Largeur de l'en-tête – largeur du contenu header
  2. Étirer la largeur d'en-tête? – devriez wrapper en-tête étirer toute la largeur d'un navigateur?
  3. Position gauche en-tête – Si votre tête est collante, vous devez utiliser cette option si vous ne voulez pas en-tête être horizontalement sur le centre
  4. Haut de la marge
  5. Bas de la marge
  6. Marge gauche
  7. Marge droite
  8. Polices Google – choisir la police de l'en-tête; Il y a des options plus spécifiques pour les polices (par exemple. uniquement pour le secteur de logo) mais il s'agit de l'en-tête de tout à la fois
  9. Custom CSS – vous pouvez taper n'importe quel CSS ici; Veillez à commencer vos définitions CSS avec ”.HC-wrap {” donc vous ne plaisante pas avec les définitions CSS d'autres site Web

Ici vous pouvez voir certains de jouer à l'intérieur des paramètres généraux (Cliquez sur cette image pour la voir qu'elle complètement élargie):

general settings

En-tête central

En-tête central est l'article du Personnalisateur d'en-tête qui contient le secteur de logo (logo & Description) et menu principal (avec les sous-menus). Vous pouvez personnaliser suivant:

  1. Type d'en-tête – Comment votre logo et vos menus sont placés; par défaut, logo passe sur le côté gauche, alors que le menu principal va à droite de l'en-tête; vous pouvez définir les deux alignés au centre, ou faire défiler le menu vers la gauche à côté du logo
  2. Couleur d'arrière-plan – couleur d'arrière-plan de l'en-tête central, couleur unie avec transparence régler éventuellement par le biais de sélecteur de couleurs
  3. Image de fond – image d'arrière-plan de l'en-tête central (remplace la couleur d'arrière-plan)
  4. Image de fond répétée – image d'arrière-plan de l'en-tête central (remplace la couleur d'arrière-plan)
  5. Pièce jointe image d'arrière-planla propriété background-attachment définit si une image d'arrière-plan est fixe ou défile avec le reste de la page; C'est génial définir l'effet de parallaxe par exemple si la valeur “fixe”
  6. Position de l'image de fondla propriété background-position définit la position de départ d'une image d'arrière-plan
  7. Taille d'image de fondla propriété background-size spécifie la taille de l'images de fond
  8. Rembourrage (haut/bas) – rembourrage d'en-tête central, donc vous pouvez bien s'intégrer verticalement votre menu ou votre logo
  9. Rembourrage (gauche/droite) – rembourrage d'en-tête central, donc vous pouvez régler la distance de contenu interne du côté gauche ou droit de l'écran
  10. Frontière dessus (et en bas, gauche, droit) Couleur – pas visible jusqu'à la largeur de la bordure est définie sur au moins 1 (un) Pixel (PX)
  11. Frontière dessus (et en bas, gauche, droit) Largeur – largeur de la bordure
  12. En haut à gauche (et en bas à gauche, en haut à droite, en bas à droite) rayon – rayon de la bordure de l'en-tête central

Ici vous pouvez voir certains de jouer avec des milieux à l'intérieur de l'en-tête central (Cliquez sur les images pour les voir complètement agrandi):

middle background color

middle background image

Ici vous pouvez voir certains de jouer autour de rayon de bordure de l'en-tête du milieu afin qu'il ressemble arrondie>

border radius of middle header

En-tête en haut

En-tête en haut est une autre importante section d'en-tête Customizer. Il contient (même en tant qu'en-tête de fond) gauche et droite, qui va en centrant lorsque le mode réactif est activé (Lorsque la taille de votre écran est petite, C'est à dire. la taille définie dans panneau en-tête sensibles). Vous pouvez choisir pour les deux parties d'avoir soit: quelques autres menus, chapelure, boîte de titre ou de la recherche actuelle page. Voici les paramètres que vous pouvez modifier:

  1. Activé? – l'en-tête de la partie supérieure est activée à tous? (case à cocher)
  2. Côté du menu de gauche type – choisir entre le menu, chapelure, actuelle page titre recherche boîte d'ou pour le côté gauche du haut en-tête
  3. Type de menu à droite côté – choisir entre le menu, chapelure, actuelle page titre recherche boîte d'ou pour le côté droit du haut en-tête
  4. Couleur d'arrière-plan – même chose ici en ce qui concerne l'en-tête central
  5. Image de fond – même chose ici en ce qui concerne l'en-tête central
  6. Image de fond répétée – même chose ici en ce qui concerne l'en-tête central
  7. Pièce jointe image d'arrière-plan – même chose ici en ce qui concerne l'en-tête central
  8. Position de l'image de fond – même chose ici en ce qui concerne l'en-tête central
  9. Taille d'image de fond – même chose ici en ce qui concerne l'en-tête central
  10. Google famille de polices – Choisissez la famille de polices uniquement pour cela (Retour au début) en-tête; vous pouvez me contacter si vous avez besoin de plus de polices ajoutées
  11. Taille de police – Choisissez la taille de la police uniquement pour cela (Retour au début) en-tête
  12. Frontière dessus (et en bas, gauche, droit) Couleur – même chose ici en ce qui concerne l'en-tête central
  13. Frontière dessus (et en bas, gauche, droit) Largeur – même chose ici en ce qui concerne l'en-tête central
  14. Rembourrage (haut/bas) – même chose ici en ce qui concerne l'en-tête central
  15. Rembourrage (gauche/droite) – même chose ici en ce qui concerne l'en-tête central
  16. Marge de lien (gauche/droite) – marges entre les liens (par exemple les éléments de menu)
  17. Rembourrage de lien – rembourrages (Retour au début, bas, gauche, droit) de tous les liens
  18. Rembourrage de point de menu (gauche/droite) – rembourrages de gauche et droit d'uniquement les éléments de menu (Si le menu est réglé à un gauche ou droite); Il y a lieu à LI (liste) Tags du menu
  19. Rembourrage de point de menu (haut/bas) – rembourrages de haut et le bas des éléments de menu seulement (même chose s'applique ici)
  20. Couleur des liens (et la couleur hover, couleur d'arrière-plan, couleur d'arrière-plan de vol stationnaire) – couleurs de liens
  21. Couleur du texte – couleur des textes (“non-liens”, C'est à dire. dernier titre de morceau ou page de fil d'Ariane)
  22. Couleur de bordure de lien – tous les quatre (Retour au début, bas, gauche, droit) couleur de frontières; pas visible jusqu'à la largeur de la bordure est définie sur au moins 1 (un) PX (Pixel)
  23. Largeur de bordure de lien – tous les quatre (Retour au début, bas, gauche, droit) largeur des bordures pour les liens
  24. Rayon de frontière de lien – tous les quatre (Retour au début, bas, gauche, droit) rayon de frontières pour les liens
  25. En haut à gauche (et en bas à gauche, en haut à droite, en bas à droite) rayon – même chose ici en ce qui concerne l'en-tête central

En-tête inférieur

En-tête de fond est une autre importante section d'en-tête Customizer. Il contient (même en tant qu'en-tête de fond) gauche et droite, qui va en centrant lorsque le mode réactif est activé (Lorsque la taille de votre écran est petite, C'est à dire. la taille définie dans panneau en-tête sensibles). Vous pouvez choisir pour les deux parties d'avoir soit: quelques autres menus, chapelure, boîte de titre ou de la recherche actuelle page. Voici les paramètres que vous pouvez modifier:

  1. Activé? – l'en-tête de fond est activée à tous? (case à cocher)
  2. Côté du menu de gauche type – même chose ici en ce qui concerne l'en-tête dessus
  3. Type de menu à droite côté – même chose ici en ce qui concerne les bas en-tête
  4. Couleur d'arrière-plan – même chose ici en ce qui concerne l'en-tête central
  5. Image de fond – même chose ici en ce qui concerne l'en-tête central
  6. Image de fond répétée – même chose ici en ce qui concerne l'en-tête central
  7. Pièce jointe image d'arrière-plan – même chose ici en ce qui concerne l'en-tête central
  8. Position de l'image de fond – même chose ici en ce qui concerne l'en-tête central
  9. Taille d'image de fond – même chose ici en ce qui concerne l'en-tête central
  10. Google famille de polices – même chose ici en ce qui concerne l'en-tête dessus
  11. Taille de police – même chose ici en ce qui concerne l'en-tête dessus
  12. Frontière dessus (et en bas, gauche, droit) Couleur – même chose ici en ce qui concerne l'en-tête central
  13. Frontière dessus (et en bas, gauche, droit) Largeur – même chose ici en ce qui concerne l'en-tête central
  14. Rembourrage (haut/bas) – même chose ici en ce qui concerne l'en-tête central (n'existe que si vous n'êtes pas actuellement sur la page de couverture)
  15. Rembourrage (haut/bas) sur la page de couverture – C'est la même que ci-dessus sauf que c'est seulement lorsque vous êtes sur la page d'accueil! Lorsque vous êtes sur une page autre que la maison ou avant (dépend de vos paramètres de WordPress) alors cette option n'existe pas
  16. Rembourrage (gauche/droite) – même chose ici en ce qui concerne l'en-tête central
  17. Couleur du texte – même chose ici en ce qui concerne l'en-tête dessus
  18. Couleur des liens (et la couleur hover) – même chose ici en ce qui concerne l'en-tête dessus
  19. Marges pour les éléments de menu (gauche/droite) – Si le menu est choisi pour être sur le côté gauche ou droit, ce sera leurs marges gauche et droite
  20. En haut à gauche (et en bas à gauche, en haut à droite, en bas à droite) rayon – même chose ici en ce qui concerne l'en-tête central

Secteur de logo

Secteur de logo fait partie de votre en-tête qui affiche le logo (lien texte ou image) Description du site. Voici les paramètres que vous pouvez modifier:

  1. Image du logo – image de votre logo
  2. Type de logo – type d'ensemble de votre logo: lien image ou lien texte
  3. Texte du logo – titre du site par défaut
  4. Largeur hors tout – Il est utile ne pas d'étirer lorsque l'en-tête va répondre
  5. Rembourrage (haut/bas) – rembourrages de haut et en bas; jouer du pour mettre verticalement bien contre menu principal
  6. Google famille de polices – pour le logo textuel uniquement
  7. Famille de polices Google pour description – pour la description uniquement
  8. Le salon logo? – Oui ou Non (case à cocher); Si vous devez supprimer complètement une zone de logo
  9. Afficher le logo? – Oui ou Non (case à cocher); Si vous devez enlever logo seulement
  10. Afficher la description du logo? – Oui ou Non (case à cocher); Si vous devez supprimer description (slogan) seulement
  11. Couleur du titre site (et la couleur hover) – Si votre logo est textuelle, définir sa couleur ici
  12. Couleur de description de site – couleur de la description du logo (slogan)
  13. Taille de police pour le titre site – taille de la police pour logo textuelle
  14. Taille de police site description – taille de la police pour la description (slogan)

Menu principal

Menu principal fait partie de l'en-tête qui est placé à l'intérieur de l'en-tête central aux côtés avec secteur de logo. C' est les sous-menus sont placés au sein de la section principale sous-menus. Voici les paramètres que vous pouvez modifier:

  1. Couleur des liens (et la couleur hover, couleur active) – ces options sont uniquement pour le lien (<un> Tags) couleurs; la couleur active est couleur d'un lien quand sur la page en cours
  2. Taille de police – taille de la police des éléments de menu
  3. Google famille de polices – famille de polices des éléments de menu
  4. Afficher les flèches de sous-menu? – case à cocher; Voir la flèche pointant vers le bas pour les éléments de menu qui ont des sous-menus
  5. Marge du menu à gauche (et à droite) – marge à gauche et à droite de l'ensemble du menu (pas des éléments de menu!)
  6. Couleur d'arrière-plan de lien (et stationnaire et les couleurs d'arrière-plan active) – uniquement pour les liens
  7. Rayon de frontière de lien – uniquement pour les liens, ainsi ils peuvent être “arrondis”
  8. Couleurs d'arrière-plan de menu item (et le vol stationnaire, couleurs d'arrière-plan active) – éléments de liste (<Li> Tags!)
  9. Éléments de menu rembourrage (haut/bas) – rembourrages de balises de liste, donc vous pouvez aligner joliment avec secteur de logo
  10. Éléments de menu rembourrage (gauche/droite)
  11. Marge d'éléments de menu (haut/bas)
  12. Marge d'éléments de menu (gauche/droite)
  13. Rembourrage de liens de menu (haut/bas) – pour les liens (<un> Tags)
  14. Rembourrage de liens de menu (gauche/droite) – même
  15. Retour en haut de menu point frontière (et en bas, gauche, droit) Couleur – couleur de bordure des éléments de liste
  16. Retour en haut de menu point frontière (et en bas, gauche, droit) Largeur – largeur de la bordure
  17. Élément de menu supérieur gauche (et haut-droite, bas-gauche, bas à droite) rayon – chacune de ces options ont la possibilité d'exclure tous les autres éléments sauf le premier ou le dernier élément, pour l'ensemble du menu ressemble “arrondis” (Jetez un oeil à l'exemple de gif ci-dessous!)

Au menu principal d'installation, tout d'abord, vous devez affecter à n'importe quel menu à que vous avez enregistré avant d'être placé “Menu principal de HC” emplacement. Jetez un oeil à l'exemple suivant:

main menu setup

Voici comment vous pouvez modifier les couleurs de lien par exemple:

menu item colors

Sous-menus principaux

Sous-menus apparaissent au survol ou cliquez sur les éléments du menu principal. Il y a jusqu'à quatre niveaux de sous-menus pour choisir quelle profondeur sous-menus ira. Beaucoup plus d'options sont ici, Nous allons donc énumérer ci-dessous:

  1. Profondeur de sous-menus – comme indiqué précédemment, vous pouvez choisir le nombre de niveaux de sous-menus vous avez
  2. Afficher le sous-menu au survol de la souris? – s'il faut cliquer ou éléments de menu principal de vol stationnaire ou des éléments de sous-menu afin de montrer les sous-menus; en-tête de réactif réagira toujours sur le robinet (Cliquez sur)
  3. Couleur d'arrière-plan – couleur d'arrière-plan de tous les sous-menus
  4. Min. Largeur – largeur minimale qui prennent votre sous-menus; par défaut, il est réglé sur auto
  5. Taille de police – taille de la police de tous les éléments de sous-menu
  6. Couleur de la bordure – couleur de la bordure de tous les quatre côtés de la colonne d'un sous-menu: Retour au début, bas, gauche, droit
  7. Frontière dessus (et en bas, gauche, droit) Largeur – quatre options distinctes pour les bordures’ Largeur
  8. Les éléments de menu à la frontière haut (et en bas) Couleur – couleur de la bordure des liens du sous-menu (exception de première, ou le dernier si c'est la couleur de fond)
  9. Les éléments de menu à la frontière haut (et en bas) Largeur – largeur de la bordure des liens du sous-menu (exception de première, ou le dernier si c'est la largeur du bas)
  10. Ombre – ombre définie à l'aide de la propriété CSS box-shadow; Il se situe dans le champ de texte à l'aide de la définition complète, par exemple. 2PX 2px 2px 2px rgba(85, 85, 85, 0.8) et lorsque vous apportez des modifications à l'une des valeurs vous pouvez voir en live lors de la frappe

Chapelure

Chapelure est parfaits pour améliorer la visibilité de votre site Web sur les moteurs de recherche et référencement. Header Customizer’s breadcrumbs implement data-vocabulary.org definition.

  1. Taille de police – taille de la police de chapelure uniquement
  2. Google famille de polices – famille de polices pour chapelure uniquement
  3. Afficher un lien vers page d'accueil? – chapelure s'présentent des lien vers la page d'accueil; par défaut, il fait
  4. Texte séparateur – caractère de séparation(s) qui s'asseoir entre les page de liens
  5. Couleur du séparateur – couleur du texte séparateur
  6. Marges de séparateur (gauche/droite) – marges de séparateur

Remarque: Chapelure est placé en haut ou en bas de tête, mais vous devez d'abord activer un d'eux et placer la chapelure dans le menu de gauche ou à droite, comme ceci:

Breadcrumbs

Titre de la page

Titre de la page est très approprié pour être placé sur la partie inférieure de l'en-tête. Il montre le nom de la page de la page actuelle. Vous pouvez modifier ce qui suit:

  1. Couleur – couleur du titre de la page
  2. Voir la page d'accueil? – Si vous souhaitez afficher le titre pour la page d'accueil
  3. Marge haut/bas
  4. Taille de police – taille de la police du titre de la page uniquement
  5. Famille de polices – famille de polices du titre de la page uniquement

Remarque: Pour avoir le titre de la page vous devez la sélectionner dans le menu de gauche ou du côté droit en haut ou en bas des en-têtes.

Zone de recherche doit être partie intégrante de votre tête si vous souhaitez qu'elle soit là au lieu de, par exemple, sur la barre latérale. Vous pouvez modifier de nombreux paramètres ici:

  1. Couleur – couleur du texte seulement; couleur du texte tapé (espace non réservé)
  2. Largeur – largeur de base de la boîte
  3. Taille de police – taille de la police de texte de recherche
  4. Famille de polices – famille de polices de texte de recherche
  5. Couleur d'arrière-plan – couleur d'arrière-plan de la boîte
  6. Espace réservé – espace réservé du champ de saisie
  7. Couleur de la bordure – couleur de la bordure de la boîte
  8. Largeur de la bordure – largeur de la bordure de la boîte
  9. Remplissage haut/bas (gauche/droite) – rembourrages de champ de saisie
  10. Haut de la marge (et en bas, gauche, droit – marges de la boîte
  11. Rayon de frontière haut-gauche (et haut-droite, bas-gauche, bas à droite) – rayon de la frontière de la zone de recherche

Remarque: Pour que la zone de recherche, vous devez le sélectionner dans le menu de gauche ou du côté droit en haut ou en bas des en-têtes.

En-tête de réactif

Réceptif en-tête apparaît lorsque la taille de votre écran (que vous pouvez également définir) est assez petit pour votre en-tête alors il transforme ce qui en fait un appel en faveur de votre téléphone ou votre tablette. Vous pouvez définir des options suivantes:

  1. Largeur sensible – largeur qui définit le point de rupture entre le bureau et réactive dans l'en-tête; Lorsque vous chargez votre site sur les tailles d'écran inférieure à ce point votre en-tête ressemblera “minimisé”
  2. Couleur de hamburger – “Hamburger” icône s'affiche au lieu de votre menu principal, lequel vous pouvez cliquer sur pour afficher le menu sur de petits écrans, mais cette fois les éléments de menu sont classés en dessous de l'autre

En-tête collant

Et enfin, l'en-tête collant. Comme la plupart d'entre nous est déjà familier avec ce terme, Cela signifie que votre en-tête “bâtons” sur le dessus de votre site Web, même lorsque vous commencez à défiler le contenu. Post-it en-tête grandement
améliore le taux de rebond de vos visiteurs. Vous pouvez réactiver il marche il suffit de cocher/décocher la case. Pour l'instant, vous êtes présenté avec les paramètres suivants:

  1. En-tête collante est activé? – comme indiqué plus haut, vous pouvez facilement activer/désactiver en-tête collant avec cette case à cocher
  2. Compensé – en pixels, Il s'agit de la distance en combien de temps vous faites défiler jusqu'à ce que l'en-tête bâtons vers le haut; Il peut également être définie à zéro alors votre tête devient collante immédiatement
  3. Remplissage haut/bas pour Top en-tête – rembourrages uniquement pour Top en-tête; Ceci est très utile, ainsi vous pouvez par exemple faire en-tête plus petits en hauteur quand il devient collant (avec effet de transition nice)
  4. Remplissage haut/bas pour en-tête central – identique au point ci-dessus mais pour en-tête central
  5. Remplissage haut/bas pour bas en-tête – identique au point ci-dessus mais pour en-tête inférieur
  6. Afficher l'en-tête en haut? – vous pouvez masquer (ou non) En-tête en haut complètement lorsque l'en-tête devient collante
  7. Afficher en-tête central? – identique au point ci-dessus mais pour en-tête central
  8. Voir la partie inférieure en-tête? – identique au point ci-dessus mais pour en-tête inférieur

sticky header

La désinstallation

Vous pouvez trouver la désinstallation (supprimer) option après que vous désactivez le plugin à partir de la page des Plugins.

Gardez à l'esprit que lorsque vous supprimez des en-tête Customizer vous supprimera également toutes ses couleurs, menu et tous les autres paramètres. Si vous désactivez seulement les options du plugin, ses paramètres resteront et ne devront pas être entrés à nouveau si le plugin est ré-activé.

Pour le support demandes s'il vous plaît utiliser ma page de soutien. Si vous aimez le plugin, s'il vous plaît prendre le temps de le noter. Cela signifie beaucoup pour moi.

0 Fusées éclairantes Twitter 0 Facebook 0 Google 0 Broche il partager 0 LinkedIn 0 Messagerie -- 0 Fusées éclairantes ×

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués *