Share
Si vous créez un site avec des pages de niveau supérieur sur lesquelles vous souhaitez attirer l'attention des visiteurs et les encourager à consulter, il est utile de les afficher bien en évidence dans l'en-tête de votre site..
Bien sûr, vous pouvez ajouter des pages de niveau supérieur à votre menu de navigation, mais dans ce tutoriel, je vais vous montrer comment ajouter des liens supplémentaires à ces pages à l'aide de la get_pages () une fonction.
Remarque: vous n'êtes pas obligé d'utiliser ce code dans l'en-tête de votre site. Si cela fonctionne mieux pour vous, vous pouvez toujours l'ajouter à votre barre latérale ou à votre pied de page en modifiant le sidebar.php ou footer.php fichiers au lieu de header.php.
Dans ce tutoriel, je vais créer un thème enfant du thème vingt seize, puis créer un duplicata de vingt seize ans. header.php déposer dans mon thème enfant, que je vais éditer. Vous ne devriez jamais éditer les fichiers d'un thème que vous avez téléchargé, car lorsque vous mettrez à jour le thème, vous perdrez votre travail. Si vous travaillez avec votre propre thème, vous pouvez également ajouter ce code à celui-ci..
Pour suivre ce tutoriel, vous aurez besoin des éléments suivants:
Alors, commençons.
Commencez par créer un enfant de vingt seize ans (sauf si vous travaillez avec votre propre thème).
Créez un nouveau dossier dans votre wp-content / thèmes / dossier et donnez-lui un nom logique: j'appelle le mien tutsplus-page-link-buttons.
Dans ce dossier, créez un nouveau fichier et nommez-le. style.css. Maintenant, ouvrez ce fichier et ajoutez-y ceci:
Accentsconagua
/ * Nom du thème: Tuts + Boutons Lien de page URI du thème: http: //.tutsplus.com/tutorials/using-get_pages-to-create-link-buttons-tour-sites-top-level-pages-creating-the -code - cms-24967 Description: thème prenant en charge tuts + tutoriel sur l’ajout de boutons aux pages de niveau supérieur dans l’en-tête de votre site (partie 1). Thème de l'enfant pour le thème des vingt seize ans. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: twentysixteen Version: 1.0 * / @import url ("… /twentysixteen/style.css"); Modifiez le code ci-dessus pour indiquer qu'il s'agit de votre thème et non du mien..
Maintenant, sauvegardez ce fichier et activez votre nouveau thème sur votre site.
Comme nous allons éditer le header.php fichier, nous devons créer une copie de ce fichier à partir du thème vingt seize du thème enfant. Trouvez le header.php classer dans vingt seize et le copier (ne pas déplacer!) dans le dossier de votre nouveau thème.
Maintenant, votre thème aura deux fichiers: style.css et header.php. WordPress utilisera automatiquement le header.php fichier de votre thème enfant plutôt que celui sur vingt seize, car c'est ainsi que fonctionnent les thèmes enfants.
Ouvrez le nouveau header.php déposer afin que vous puissiez commencer à le modifier.
Je vais ajouter mes liens vers les pages de haut niveau à l'intérieur du entête élément, juste avant la fermeture étiquette. Alors trouvez cette ligne dans votre thème et commencez à ajouter un nouveau code au-dessus de la fermeture étiquette.
Tout d’abord, créez les arguments pour get_pages () en tapant ce qui suit:
$ args = array ('parent' => 0, 'sort_order' => ASC, 'sort_column' => 'menu_order'); Cela garantit que get_pages () ne récupère que les pages sans parent ('parent' => 0) et trie les pages dans l’ordre que vous avez défini sur les écrans de modification des pages. Si vous souhaitez modifier l’ordre de tri, utilisez un ou plusieurs des arguments que vous pouvez trouver sur la page du codex. get_pages ().
Maintenant, sous vos arguments, ajoutez ceci:
$ pages = get_pages ($ args);
Cela lancera le get_pages () fonction en utilisant les arguments que vous avez spécifiés.
Avant de sortir du code, vous voulez vérifier qu’il ya des pages au niveau supérieur, alors vérifiez que get_pages () a retourné quelque chose.
Sous le get_pages () fonction, ajoutez ceci:
if ($ pages)
Vous allez ensuite ajouter la sortie de code à l'intérieur des accolades.
Maintenant pour la partie amusante. À l'intérieur des accolades que vous venez d'ajouter, tapez ce qui suit:
Cela ouvre une ul élément, puis à l'intérieur qui parcourt chaque page extraite par get_pages () et sort son titre à l'intérieur d'un lien.
Maintenant, sauvegardez votre fichier.
J'ai ajouté des pages factices à mon site. Comme vous pouvez le voir sur la capture d'écran, il y a trois pages de niveau supérieur et une page de second niveau, qui ne devraient pas apparaître dans mon en-tête:
Et voici à quoi ressemblent les liens sur mon site:
Comme vous pouvez le constater, seules les pages de premier niveau apparaissent. Pour le moment, ils ne sont pas très beaux: ils apparaissent dans une simple liste de balles. Donc, dans le prochain tutoriel, je vais vous montrer comment les styler pour ressembler à des boutons.
L'ajout de liens vers les pages de niveau supérieur dans l'en-tête de votre site peut être un moyen utile de générer du trafic vers ces pages. Au lieu de coder en dur ces liens, vous devriez utiliser WordPress get_pages () fonction pour automatiser le processus. Ici, vous avez appris comment faire cela, et dans la partie suivante, je vais vous montrer comment ajouter du style..
