Share
Comment voudriez-vous utiliser le gestionnaire de liens de WordPress? Vous trouverez que c'est très utile, si utilisé pour les bonnes raisons.
J'aimerais vous montrer comment ajouter des liens vers votre site Web WordPress qui utilisent non seulement le Gestionnaire de liens, mais également la création de contenu supplémentaire pour votre site Web avec un flux de travail rapide et facile..
Permettez-moi de commencer par un examen rapide de Links Manager for WordPress. Le gestionnaire de liens vous permet de stocker un ensemble de liens externes, également appelé votre blogroll. Ces liens peuvent être classés en catégories, importés, exportés, ajoutés, supprimés et édités. Les catégories de liens peuvent également être ajoutées, supprimées et modifiées. Vous pouvez trouver le gestionnaire de liens dans la section des liens du panneau d'administration de WordPress..
A partir de la version 3.5, Links Manager et blogroll sont masqués pour les nouvelles installations et pour toutes les installations WordPress existantes ne comportant aucun lien. Si vous effectuez une mise à niveau à partir d'une version précédente de WordPress avec des liens actifs, le gestionnaire de liens continuera à fonctionner normalement..
Si vous souhaitez restaurer le panneau Liens sur votre installation, vous pouvez télécharger et installer le plug-in Links Manager..
Un moyen utile d'utiliser le gestionnaire de liens de WordPress consiste à afficher une liste compilée quotidienne de liens externes, tels que des sites Web favoris, des partenaires affiliés, des chansons, des vidéos amusantes, etc..
Les options sont illimitées, mais gardez à l'esprit la stratégie de votre site Web. Ainsi, par exemple, je vais compiler une liste de liens de mes chansons préférées, lien hypertexte vers la chanson dans iTunes, où ils peuvent écouter et / ou télécharger la chanson..
Avant de commencer à développer le modèle de page de liens, nous devons déterminer quelles seront les catégories de liens. Cela peut être déterminé de différentes manières. Certains exemples sont classés par genre - tels que le reggae, le rap, le country, le métal - par 5 étoiles ou par ordre alphabétique. Comme je compile une liste de chansons préférées, j'organise les catégories de liens par ordre alphabétique..
Commencez par vous connecter à WordPress, survolez des liens et cliquez sur "Catégories de liens". Pour ajouter correctement une catégorie de lien, assurez-vous que vous avez un nom et un slug. La description n'est pas nécessaire. Le nom est comment il apparaît sur votre site. Le slug est la version du nom conviviale pour les URL. Il est généralement tout en minuscule et ne contient que des lettres, des chiffres et des traits d'union. Si un slug n’est pas entré lors de la création d’une catégorie de liens, Links Manager en créera automatiquement une en fonction du nom..
Puisque nous organisons les chansons par ordre alphabétique, indiquez le nom de la première catégorie de liens "#", la deuxième catégorie de liens "A", la troisième catégorie "B", et ainsi de suite jusqu'à atteindre "Z". Ne créez pas de catégories de liens supplémentaires, sinon elles apparaîtront dans votre navigation sur votre modèle de page de liens. Assurez-vous donc de supprimer toutes les catégories de liens existantes.
Maintenant que toutes les catégories de liens sont créées, nous pouvons commencer à créer le modèle de page de liens. Commençons donc par copier-coller un modèle de page déjà construit dans votre thème WordPress, en le renommant liens-page-template.php, et en l'ouvrant dans votre éditeur de texte préféré.
Le raisonnement pour copier et coller un modèle de page déjà créé est dû au fait que vous voulez que le modèle de page de liens ait la même conception que le reste de votre site..
Si vous rencontrez des difficultés pour trouver un modèle de page déjà construit dans votre thème WordPress, recherchez un ensemble de fichiers portant le même nom, comme suit: page-contact.php, page-portfolio.php, page-full-width.php, etc.
Il est courant que les thèmes WordPress aient plusieurs modèles de page nommés de manière cohérente pour rester organisés. Vous pouvez également ouvrir un fichier pour voir s'il commence par l'identifiant du modèle de page, comme dans l'exemple ci-dessous:
La première chose à faire est de changer le nom du modèle (voir le code ci-dessus) en "Liens". Le code ci-dessus indique à WordPress qu’il s’agit d’un modèle. Il sera donc disponible dans le menu déroulant via l’éditeur de pages sous le nom de modèle auquel vous le donnez, dans ce cas, nommé "Liens"..
Maintenant, cherchez le code le contenu(). Ce code récupère le contenu de la page, le contenu ajouté à l'éditeur WYSIWYG pour la page..
C’est un bon endroit pour mettre votre menu déroulant et un bon endroit pour montrer vos liens., qui n'apparaîtra pas jusqu'à ce que vous ajoutiez un nouveau lien vers l'une des catégories de liens que vous venez de créer. Nous y reviendrons plus tard. Au dessous de le contenu() code dans votre template ajouter:
'. $ cat-> nom_cat. ''; ?>
Le code $ cats = get_categories ("taxonomy = link_category & hierarchical = 0") renvoie toutes les catégories de liens créées et affiche le nom de la catégorie en utilisant la valeur '. $ cat-> nom_cat. '. Si vous souhaitez en savoir plus, allez à get_categories dans le codex WordPress.
le id = "scrollablemenu" est connecté à du JavaScript (dont je parlerai plus loin) pour que le menu fonctionne correctement et class = "scrollablemenubutton" est un CSS qui donnera à vos boutons un style très basique. Je vous encourage à être plus créatif avec le CSS, mais le style de base fonctionnera pour l'instant..
Pour voir le CSS de base, téléchargez les fichiers de ce tutoriel. Bientôt, je vous montrerai comment ajouter la feuille de style (et JavaScript) à votre modèle de page afin qu'il ne soit chargé que lorsque votre modèle de page est chargé à l'aide de wp_enqueue_ *.
Pour votre id = "scrollablemenu" vous voudrez ajouter les propriétés:
position: fixe; en haut: 10 px; / * Assurez-vous que la propriété top a la même valeur que le fichier javascript * / padding: 20px; largeur: 90px; marge gauche: 500px;
le position: fixe; et en haut: 10 px; maintient le menu fixe à l’emplacement que vous avez choisi. le en haut: 10 px; le style peut et doit être modifié pour obtenir les résultats souhaités.
Si vous deviez mettre en haut: 100px; cela donnerait à votre menu un rembourrage supérieur de 100px à partir du sommet de votre site Web, donc si vous lui avez donné 0px votre menu devrait toucher le sommet de votre site Web. Gardez à l'esprit que chaque fois que vous modifiez le style principal, vous devez également modifier le code JavaScript afin qu'il corresponde..
Ne vous inquiétez pas - nous allons arriver au code JavaScript dans un peu.
J'ai emballé le menu dans un div avec un marge gauche style pour positionner le menu déroulant sur le côté droit. En effet, le menu flotte au-dessus du contenu. Par conséquent, si le menu n'était pas poussé à droite, les liens se perdraient derrière le menu déroulant. le marge gauche: 500px; devra probablement être modifié pour s'adapter à la largeur de votre site Web.
J'ai également fait le menu déroulant comme un menu vertical au lieu horizontal en faisant une largeur de 90px. Vous pouvez facilement changer le menu en un menu horizontal en supprimant le largeur: 90px; marge gauche: 500px;, mais sachez que votre contenu risque de se perdre derrière le menu.
Parlons du fichier JavaScript qui fait fonctionner le menu déroulant. Téléchargez les fichiers de ce tutoriel et ouvrez le fichier JavaScript appelé scrollablemenu.js.
Accentsconagua
$ (fenêtre) .scroll (function () $ ("# scrollablemenu"). css ("top", Math.max (0, 10 - $ (this) .scrollTop ())); Les deux parties importantes du code sont #scrollablemenu et dix.
#scrollablemenu doit correspondre à votre id = "scrollablemenu" ou ça ne marchera pas.
Nous parlions plus tôt de la façon dont vous changez le en haut: 10 px; style, vous devrez le modifier dans le fichier JavaScript en conséquence. Vous pouvez le faire simplement en changeant la dix montant à la quantité que vous avez changé votre style.
Maintenant que vous avez compris le fonctionnement du code JavaScript, ajoutons-le et la feuille de style au modèle de page afin que le menu défile et que les boutons aient un style..
Une façon simple et organisée de le faire est d'utiliser wp_enqueue_script et wp_enqueue_style; il en fait de sorte que vous ne devez pas ajouter de CSS à une autre feuille de style ou JavaScript à votre header.php fichier. Il charge les fichiers uniquement lorsque votre modèle de page est chargé, ce qui permet à votre site Web de fonctionner plus rapidement..
Ajoutons d'abord le fichier JavaScript. Prenez le code ci-dessous et ajoutez au début de votre modèle de page (sous le nom du modèle).
Maintenant FTP le scrollablemenu.js déposer sur votre site d'hébergement. Assurez-vous de changer le /js/scrollablemenu.js emplacement dans le dossier dans lequel vous avez téléchargé le fichier JavaScript. Ajoutons maintenant le fichier de feuille de style juste en dessous du code que vous venez d'ajouter..
FTP le scrollablemenu.css déposer sur votre site d'hébergement. Assurez-vous de changer le /css/scrollablemenu.css emplacement dans le dossier dans lequel vous avez téléchargé le fichier de feuille de style. Maintenant, les fichiers JavaScript et les feuilles de style seront chargés lors du chargement du modèle de page de liens..
La principale différence entre les deux codes sont les fonctions wp_enqueue_script et wp_enqueue_style. Si vous voulez en savoir plus sur wp_enqueue_ * Jetez un oeil au tutoriel Comment inclure JavaScript et CSS dans vos thèmes et plugins WordPress.
Ajoutons maintenant la partie la plus importante à votre modèle de page de liens… les catégories de liens.
Ajoutez ce code sous le code du menu déroulant.
'. $ cat-> nom_cat. '
'; écho ''; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ livres en tant que livre) echo '
'; // end cats loop; ?>- '; echo 'link_url. '">'. $ book-> nom_lien. ''; echo '
'; // fin des livres en boucle echo '
Encore une fois, nous utilisons $ cats = get_categories ("taxonomy = link_category & hierarchical = 0"), le code retourne toutes les catégories de liens créées et affiche le nom de la catégorie en utilisant la valeur '. $ cat-> nom_cat. '.
La partie importante du code est comment '. $ cat-> nom_cat. ' renvoie le nom de la catégorie en tant que nom de l'ancre (un nom = "'. $ cat-> nom_cat.'"). Le menu déroulant fonctionne ainsi. Ainsi, lorsqu'un visiteur clique sur le menu déroulant, il crée un lien vers la section appropriée de votre modèle de page..
Le reste du code affiche l'URL du lien en utilisant la valeur '. $ book-> link_url. ' et affiche le nom du lien en utilisant la valeur '. $ book-> nom_lien. '. Tout cela est accompli en utilisant la fonction get_bookmarks ("category = $ cat-> cat_ID").
Vous pouvez en apprendre plus en allant à get_bookmarks dans le codex WordPress.
Chaque ligne de code est dans un div avec le class = "linkcategories" (qui est ajouté à la scrollablemenu.css fichier) et chaque ligne de code affichera le titre (nom de la catégorie) avec un h3 balise, le titre sera également le nom de l'ancre et les liens créés dans le gestionnaire de liens seront encapsulés dans li tags, hyperliens avec l'URL du lien.
Donc, vous savez que le code est enveloppé dans un div avec une largeur de 490px, Ainsi, aucun texte ne sera perdu derrière le menu déroulant (vertical). le largeur: 490px; devra probablement être modifié pour s'adapter à la largeur de votre site Web.
Si vous changez la largeur, n'oubliez pas de changer le menu déroulant div style marge gauche: 500px;. Il est poussé à droite 10px plus encore le menu déroulant div ne chevauchera pas les catégories de liens div.
Votre modèle de page de liens est terminé! Assurez-vous de transférer le liens-page-template.php déposer dans le répertoire racine de votre thème WordPress.
Maintenant que les catégories de liens ont été créées et que le modèle de page de liens est créé et téléchargé, ajoutons une nouvelle page à l'aide du modèle..
Dans votre section d'administration WordPress, sous pages, cliquez sur Ajouter. Ajoutez d’abord le nom de votre page, puis sélectionnez le modèle Liens dans le menu déroulant sous Attributs de page (côté droit). Publiez et passons à la dernière étape.
Si vous avez déjà prévisualisé la page que vous venez de créer et avez remarqué que seul le menu déroulant vertical était affiché, c'est que vous devez ajouter des liens aux catégories de liens que vous avez créées précédemment. Si la catégorie de liens ne contient aucun lien, rien ne s'affiche.
Alors, ajoutons un lien en cliquant sur ajouter nouveau sous Liens dans votre section d’administrateur WordPress. Entrez le nom, tel que Daniel Lee Kendall - perdu dans l'instant, adresse Web et sélectionnez la catégorie. Côté droit, cliquez sur le lien Ajouter, et vous pouvez maintenant consulter votre page pour voir les résultats. Vous avez tous fini!
Si vous n'obtenez pas les résultats escomptés, jouez avec la largeur de chaque div, et / ou créer une meilleure feuille de style pour le menu déroulant.
