Nouveau : aucune personnalisation nécessaire
Mise à jour du 20/04/21 – Vous voudrez peut-être consulter le module complémentaire Affiliate Portal pro. C'est une nouvelle alternative à la zone affilié qui offre une interface attrayante pour vos affiliés sans aucune personnalisation nécessaire. Il fonctionne avec n'importe quel thème et est superbe sur les appareils mobiles.
Nous avons fait des efforts considérables pour que AffiliateWP ressemble et se sente comme une partie intégrante de l'administration de WordPress. Il est là quand vous en avez besoin, et hors de votre chemin quand vous n'en avez pas. De même, sur le front-end, nous avons conçu AffiliateWP pour qu'il s'intègre parfaitement à n'importe quel thème WordPress.
Nous croyons qu'il faut offrir aux affiliés une expérience cohérente sur l'ensemble du site Web.
Pour cette raison, AffiliateWP inclut une personnalisation minimale pour la zone affilié, et s'appuie sur la personnalisation actuelle du thème pour la plupart des tâches.
Pour beaucoup de nos clients, la personnalisation par défaut de la zone affilié est parfaite. Les liens apparaissent dans la couleur de lien du thème, le texte est affiché dans la police du thème, les éléments de formulaire ont la personnalisation de formulaire du thème, et ainsi de suite. Nous recevons cependant des tickets de support occasionnels demandant pourquoi la zone affilié n'a pas l'air très « flashy », avec des schémas de couleurs personnalisés, des icônes, des animations, des polices personnalisées ; vous l'appelez !
Nous aurions pu choisir de personnaliser la zone affilié en fonction des « tendances de conception actuelles », mais les clients ne seront pas toujours d'accord avec les décisions de conception que nous prenons. En tant que tel, une zone affilié fortement personnalisée ne correspondra probablement pas au thème WordPress du client, et compte tenu des milliers de clients qui utilisent AffiliateWP, vous pouvez imaginer le problème potentiel…
Les clients exigeront que nous « réparions » leur thème parce qu'AffiliateWP l'a « cassé ».
Il est préférable d'ajouter une personnalisation à une toile vierge (comme la zone affilié d'AffiliateWP), plutôt que de tout supprimer et de recommencer. De plus, certaines tendances de conception peuvent se démoder l'année suivante et nous serions obligés de redessiner la zone affilié encore et encore.
Puisque nous avons décidé de garder les choses simples dès le début, nos clients auront toujours une zone affilié d'aspect agréable qui correspond à leur thème WordPress. S'il y a un désir d'ajouter des éléments de conception personnalisés, tout ce qu'il faut, c'est une personnalisation CSS.
Personnalisation avec CSS
Enseigner le CSS n'est pas le but de cet article, mais heureusement, il existe d'innombrables tutoriels disponibles sur le Web. Il n'y a pas de meilleure façon d'apprendre que d'expérimenter, mais avant de le faire, vous devrez réfléchir à l'endroit où placer votre code CSS personnalisé.
Dans votre thème enfant
Le code CSS personnalisé peut être ajouté au fichier style.css de votre thème enfant. Si vous n'avez pas de thème enfant, il est très facile d'en créer un. L'ajout de CSS à un thème enfant garantit que vous ne perdrez pas votre personnalisation personnalisée lorsque le thème parent sera mis à jour.
Dans un plugin personnalisé
Il existe de nombreux plugins gratuits disponibles dans le répertoire WordPress qui vous permettent d'ajouter du code CSS personnalisé à votre site, en collant le CSS directement dans l'administration WordPress. Si votre thème est mis à jour, vous ne perdrez pas vos modifications. Voici un plugin de ce type qui me vient à l'esprit : Reaktiv CSS Builder.
Trouver les bons sélecteurs CSS à utiliser
Pour styliser la zone affiliée avec du CSS, vous devrez savoir quoi styliser. La manière la plus simple de le faire est d'utiliser les outils de développement intégrés à votre navigateur. Cela vous permet de survoler n'importe quel élément de la zone affiliée et de découvrir exactement quel est le sélecteur CSS pertinent à utiliser.
Chaque navigateur a une manière légèrement différente d'accéder à ses outils de développement :
Chrome
https://developer.chrome.com/devtools
Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
Une autre façon de trouver les sélecteurs CSS à utiliser est de consulter les fichiers de modèle d'AffiliateWP dans un éditeur de code. Tous les fichiers de modèle pertinents pour la zone affiliée sont inclus dans le dossier templates du plugin.
dashboard.php
Le tableau de bord de l'affilié
dashboard-tab-urls.php
L'onglet URL du tableau de bord de l'affilié
dashboard-tab-stats.php
L'onglet Statistiques du tableau de bord de l'affilié
dashboard-tab-graphs.php
L'onglet Graphiques du tableau de bord de l'affilié
dashboard-tab-referrals.php
L'onglet Références du tableau de bord de l'affilié
dashboard-tab-visits.php
L'onglet Visites du tableau de bord de l'affilié
dashboard-tab-creatives.php
L'onglet Créations du tableau de bord de l'affilié
dashboard-tab-settings.php
L'onglet Paramètres du tableau de bord de l'affilié
Styliser les liens de la zone affiliée pour qu'ils ressemblent à des « onglets »
L'une des demandes que nous avons reçues est de styliser les liens de la zone affiliée pour qu'ils ressemblent à des « onglets ». Vous trouverez ci-dessous un exemple de la façon dont vous pouvez y parvenir en utilisant le style CSS et le thème par défaut TwentySixteen de WordPress.
Il est très important de noter que tous les thèmes sont uniques. Bien que nous ayons fourni un exemple de code pour transformer les liens en onglets, des styles supplémentaires peuvent être nécessaires pour votre thème. Avec TwentySixteen, nous avons dû ajouter quelques styles supplémentaires pour que les choses aient l'apparence souhaitée. Ceci est noté dans les commentaires CSS à la toute fin.
Voici à quoi ressemblent les liens par défaut de la zone affiliée tels quels (avec le thème TwentySixteen).
Voici à quoi ressemblent nos nouveaux onglets une fois que le style CSS a été ajouté.
Pour essayer cela vous-même :
- Voir le code CSS.
- Copiez et collez le code CSS (tout ce qui se trouve entre les balises <style>) dans un plugin CSS personnalisé, ou directement dans le fichier style.css de votre thème enfant (comme discuté précédemment).
- Profitez bien !
Pour conclure, les extraits de code de notre dépôt sont configurés comme des plugins pour plus de commodité. Une autre façon d'utiliser le code CSS est de sauvegarder le fichier affiché et de l'installer directement comme un plugin sur votre site. Vous trouverez des instructions sur la façon de faire cela dans la section « Utilisation des extraits ». L'utiliser de cette manière présente l'avantage supplémentaire de ne charger le CSS que sur votre Espace affilié, et non sur toute autre page qui n'en a pas besoin.
Avec un peu d'enthousiasme et quelques connaissances de base en CSS, vous pouvez styliser l'Espace affilié pour qu'il ressemble exactement à ce que vous désirez. Si vous souhaitez en savoir plus sur le CSS, consultez quelques tutoriels et essayez d'expérimenter avec les différents éléments de conception. Vous pourriez même vous amuser !
Bon stylisme !
Bon tutoriel,
Je vais modifier mon espace affilié 😀
beaucoup plus facile avec le compositeur visuel, lol.
Bien sûr ! Il existe de nombreuses façons d'aborder cela 🙂
est-il possible d'utiliser elementor pour modifier la conception de l'espace affilié ?
J'attends également une réponse à cela. Peut-être qu'Andrew pourra répondre un jour cette année. Merci.
Bonjour, souhaitez-vous modifier la page elle-même (elle s'appelle « Espace affilié » par défaut), ou souhaitez-vous modifier les liens réels, les champs de formulaire, etc. dans l'Espace affilié ?
La page peut être conçue à l'aide d'Elementor, mais l'Espace affilié lui-même devrait être modifié en ajoutant du CSS personnalisé à Elementor. L'Espace affilié est généré à l'aide d'un bloc ou d'un shortcode (vous pouvez choisir celui que vous souhaitez utiliser), il n'est donc pas possible de le personnaliser depuis Elementor.
Comment remplacer les modèles du plugin ? Quelle hiérarchie devez-vous suivre pour placer les fichiers sous votre thème enfant ? J'ai essayé toutes les options évidentes, rien ne fonctionne. C'est une option de personnalisation absolument essentielle pour personnaliser l'espace affilié WP, et vous n'en parlez pas du tout dans cet article.
Voir cet article de documentation : http://docs.affiliatewp.com/article/118-modifying-template-files
Merci mec,
Ça marche comme sur des roulettes.
Heureux d'apprendre que cet article a aidé.
Quel est le meilleur thème ou modèle wp pour accompagner le plugin wp affiliate ?
AffiliateWP fonctionne bien avec n'importe quel thème WP. Le meilleur thème sera celui dont vous aimez le design et les fonctionnalités.
comment configurer sur un onglet de menu latéral …? pouvez-vous m'aider ?
Bonjour Yupi, l'un des consultants tiers peut vous aider si vous avez besoin de développement personnalisé : https://affiliatewp.com/consultants/
Je recommande de rendre le plugin et les extensions compatibles avec Beaver Builder.
Bonjour,
C'était bien, mais cela ne correspondait pas tout à fait à mes besoins, alors j'ai créé quelque chose d'un peu plus joli (si je puis me permettre 🙂
https://github.com/mattbingham/wordpress-affiliateswp/blob/master/style1.css
Capture d'écran ici : https://github.com/mattbingham/wordpress-affiliateswp/blob/master/affiliateswp-style1.jpg
Il est réactif, donc les onglets devraient passer à la ligne suivante sur les petits appareils.
Je t'aime ! Merci pour ça
Je cherche à acheter ce plugin, je l'ai déjà testé et aimé, mais j'ai une seule question et elle semble être la plus importante pour que je décide d'acheter ou de laisser tomber.
Votre plugin a l'air super sur ordinateur, mais d'une manière ou d'une autre sur petit écran comme sur téléphone portable, la zone d'affiliation, une fois que l'on clique sur n'importe quel onglet, qu'il s'agisse de Tableau de bord ou de statistiques, le contenu saute en bas de l'écran après la fin de tous les onglets. Et tout ce que je veux, c'est que sur petit écran je puisse éditer avec du CSS dans un thème enfant de manière à ce qu'une fois les onglets cliqués, ils glissent vers la page suivante avec leur contenu et que je puisse ajouter un bouton retour pour revenir au menu.
Si c'est possible, je l'achèterai
Salut Tabish !
Cela semble possible, mais vous aurez besoin de quelques connaissances en CSS et HTML (peut-être même en JavaScript pour obtenir l'effet de glissement) pour obtenir le résultat final que vous souhaitez.
La zone d'affiliation peut être entièrement personnalisée à votre goût en copiant les fichiers de modèle dans votre thème enfant WordPress.
Plus d'informations sur les fichiers de modèle peuvent être trouvées ici : https://docs.affiliatewp.com/article/118-modifying-template-files
J’espère que cela vous aide !
Salut
Je veux ajouter du texte sous l'onglet URL d'affiliation. Comment est-ce possible ?
Salut Saket,
Vous pourriez y parvenir de plusieurs manières :
1. Créez votre propre onglet d'URL personnalisé en utilisant le module complémentaire Affiliate Area Tabs : https://affiliatewp.com/add-ons/official-free/affiliate-area-tabs/
Vous pouvez utiliser une page WP pour l'onglet, ce qui signifie que vous pouvez y mettre n'importe quoi, y compris votre texte personnalisé. Vous pouvez ensuite placer le shortcode [affiliate_urls] sous votre texte pour imiter la fonctionnalité fournie sur l'onglet d'origine.
Ce shortcode est fourni par le module complémentaire Affiliate Area Shortcodes : https://affiliatewp.com/add-ons/official-free/affiliate-area-shortcodes/
2. Ajoutez le texte en utilisant le fichier de modèle dashboard-tab-urls.php fourni par AffiliateWP. Plus d'informations sur les fichiers de modèle ici : https://docs.affiliatewp.com/article/118-modifying-template-files
3. Ajoutez le texte via le hook d'action affwp_affiliate_dashboard_urls_top. Des connaissances en développement seraient nécessaires pour cela.
Comment puis-je combiner le contenu de deux onglets ?
Par exemple, je veux que les URL d'affiliation et les statistiques soient sous un seul onglet
Comment puis-je styliser le portail ? Spécifiquement, la page des créations. J'ai essayé d'ajouter les classes flex-1, w-0 -mr -px à mon CSS de thème enfant mais rien ne change. Il n'y a pas de "creatives.php" dans /wp-content/plugins/affiliatewp-affiliate-portal/templates/ pour que je puisse avoir une meilleure idée des classes utilisées (mais je suis à peu près sûr que ce sont celles-là).
Je veux juste changer la couleur de fond du blanc pour que l'art inversé soit visible.
Salut Shane,
Le module complémentaire Affiliate Portal a son propre style personnalisé, il n'est donc pas possible de personnaliser le CSS. Le portail supprime toutes les autres feuilles de style pour éviter tout conflit de style entre lui et le thème actif.
Nous ajouterons probablement quelques options de couleurs de base à l'avenir afin que vous puissiez mieux faire correspondre la ou les couleurs de votre marque. Nous envisageons également la prise en charge du mode sombre. Cela aiderait les illustrations inversées à être visibles sur le fond blanc de la page des créations.
L'espace affilié standard est-il toujours une option pour vous ? Vous pouvez le personnaliser comme vous le souhaitez et il contient des modèles que vous pouvez remplacer (le portail n'a pas de modèles).
Le portail m'a attiré et j'ai acheté la version Pro. Puis j'ai réalisé que cela ne fonctionnerait pas car mon site Web est en mode sombre avec des couleurs de police de corps BLANCHES.
J'ai passé les 7 dernières heures à essayer de personnaliser les couleurs via CSS et je viens de lire votre commentaire ici. Je meurs
salut j'ai envie d'afficher uniquement la page de connexion et une page d'inscription sur cette page de connexion l'utilisateur s'il n'est pas inscrit alors clique sur le lien d'inscription sinon se connecte à notre compte affilié comment est-ce possible ?
AffiliateWP affiche par défaut un formulaire de connexion et d'inscription sur la même page. Si un utilisateur est déconnecté, il verra les deux.
Il y a un lien brisé dans l'article : https://github.com/AffiliateWP/affiliatewp-code-snippet-library/blob/master/affiliate-area/affiliate-area-custom-styling.php
Merci Lucas, le lien a été mis à jour.
où puis-je mettre des classes CSS ?