Neu: Kein Styling erforderlich
Update 20.04.21 – Möglicherweise möchten Sie das Affiliate Portal Pro Add-on überprüfen. Es ist eine neue Alternative zum Affiliate-Bereich, die eine attraktive Benutzeroberfläche für Ihre Affiliates bietet, ohne dass eine Anpassung erforderlich ist. Es funktioniert mit jedem Theme und sieht auf Mobilgeräten großartig aus.
Wir haben erhebliche Anstrengungen unternommen, damit AffiliateWP wie ein Teil des WordPress-Adminbereichs aussieht und sich auch so anfühlt. Es ist da, wenn Sie es brauchen, und stört nicht, wenn Sie es nicht brauchen. Ebenso haben wir im Frontend AffiliateWP so gestaltet, dass es sich nahtlos in jedes WordPress-Theme einfügt.
Wir glauben daran, Affiliates eine konsistente Erfahrung auf der gesamten Website zu bieten.
Aus diesem Grund enthält AffiliateWP nur ein minimales Styling für den Affiliate-Bereich und verlässt sich für den Großteil der Arbeit auf das aktuelle Styling des Themes.
Für viele unserer Kunden ist das Standard-Styling des Affiliate-Bereichs perfekt. Links erscheinen in der Linkfarbe des Themes, Text wird in der Schriftart des Themes angezeigt, Formularelemente haben das Formular-Styling des Themes und so weiter. Wir erhalten jedoch gelegentlich Support-Tickets, in denen gefragt wird, warum der Affiliate-Bereich nicht sehr „flashy“ aussieht, mit benutzerdefinierten Farbschemata, Symbolen, Animationen, benutzerdefinierten Schriftarten; was auch immer Sie sich vorstellen können!
Wir hätten uns entscheiden können, den Affiliate-Bereich nach „aktuellen Designtrends“ zu gestalten, aber Kunden werden nicht immer mit unseren Designentscheidungen übereinstimmen. Daher wird ein stark gestylter Affiliate-Bereich wahrscheinlich nicht zum WordPress-Theme des Kunden passen, und angesichts der Tausenden von Kunden, die AffiliateWP verwenden, können Sie sich das potenzielle Problem vorstellen...
Kunden werden verlangen, dass wir ihr Theme „reparieren“, weil AffiliateWP es „kaputt gemacht“ hat.
Es ist besser, einem leeren Canvas (wie dem Affiliate-Bereich von AffiliateWP) Styling hinzuzufügen, als alles zu entfernen und neu anzufangen. Außerdem können einige Designtrends im folgenden Jahr aus der Mode kommen und wir wären gezwungen, den Affiliate-Bereich immer wieder neu zu gestalten.
Da wir uns von Anfang an entschieden haben, die Dinge einfach zu halten, haben unsere Kunden immer einen gut aussehenden Affiliate-Bereich, der zu ihrem WordPress-Theme passt. Wenn der Wunsch besteht, benutzerdefinierte Designelemente hinzuzufügen, ist alles, was dazu gehört, etwas CSS-Styling.
Styling mit CSS
Das Unterrichten von CSS ist nicht das Ziel dieses Artikels, aber glücklicherweise gibt es unzählige Tutorials im Web. Es gibt keinen besseren Weg zu lernen, als zu experimentieren, aber bevor Sie das tun, müssen Sie überlegen, wo Sie Ihren benutzerdefinierten CSS-Code platzieren.
In Ihrem Child-Theme
Benutzerdefinierter CSS-Code kann zur style.css-Datei Ihres Child-Themes hinzugefügt werden. Wenn Sie kein Child-Theme haben, ist es sehr einfach, eines zu erstellen. Das Hinzufügen von CSS zu einem Child-Theme stellt sicher, dass Sie Ihr benutzerdefiniertes Styling nicht verlieren, wenn das übergeordnete Theme aktualisiert wird.
In einem benutzerdefinierten Plugin
Es gibt viele kostenlose Plugins im WordPress-Repository, mit denen Sie benutzerdefinierten CSS-Code zu Ihrer Website hinzufügen können, indem Sie das CSS direkt in die WordPress-Administration einfügen. Wenn Ihr Theme jemals aktualisiert wird, gehen Ihre Änderungen nicht verloren. Hier ist ein solches Plugin, das mir einfällt: Reaktiv CSS Builder.
Die richtigen CSS-Selektoren finden
Um den Affiliate-Bereich mit CSS zu gestalten, müssen Sie wissen, was Sie gestalten möchten. Der einfachste Weg, dies zu tun, ist die Verwendung der integrierten Entwicklertools Ihres Browsers. Damit können Sie einfach über jedes Element im Affiliate-Bereich fahren und genau herausfinden, welcher relevante CSS-Selektor verwendet werden soll.
Jeder Browser hat eine etwas andere Methode, um auf seine Entwicklertools zuzugreifen:
Chrome
https://developer.chrome.com/devtools
Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
Eine andere Möglichkeit, herauszufinden, welche CSS-Selektoren verwendet werden sollen, ist ein Blick in die Vorlagendateien von AffiliateWP in einem Code-Editor. Alle Vorlagendateien, die für den Affiliate-Bereich relevant sind, sind im Ordner templates des Plugins enthalten.
dashboard.php
Das Affiliate-Dashboard
dashboard-tab-urls.php
Der URLs-Tab des Affiliate-Dashboards
dashboard-tab-stats.php
Der Stats-Tab des Affiliate-Dashboards
dashboard-tab-graphs.php
Der Graphs-Tab des Affiliate-Dashboards
dashboard-tab-referrals.php
Der Referrals-Tab des Affiliate-Dashboards
dashboard-tab-visits.php
Der Visits-Tab des Affiliate-Dashboards
dashboard-tab-creatives.php
Der Creatives-Tab des Affiliate-Dashboards
dashboard-tab-settings.php
Der Settings-Tab des Affiliate-Dashboards
Gestalten der Links im Affiliate-Bereich, damit sie wie „Tabs“ aussehen
Eine der Anfragen, die wir erhalten haben, ist, die Links im Affiliate-Bereich so zu gestalten, dass sie wie „Tabs“ aussehen. Unten finden Sie ein Beispiel, wie Sie dies mit CSS-Styling und dem Standard-WordPress-Theme TwentySixteen erreichen können.
Etwas sehr Wichtiges ist zu beachten: Alle Themes sind einzigartig. Obwohl wir Beispielcode bereitgestellt haben, um die Links in Tabs umzuwandeln, sind möglicherweise zusätzliche Stile für Ihr Theme erforderlich. Mit TwentySixteen mussten wir ein paar weitere Stile hinzufügen, um die Dinge so aussehen zu lassen, wie wir es wollten. Dies ist in den CSS-Kommentaren ganz am Ende vermerkt.
Hier sehen die Standardlinks des Affiliate-Bereichs aus (mit dem TwentySixteen-Theme).
Hier sehen unsere neuen Tabs aus, nachdem einige CSS-Stile hinzugefügt wurden.
Um dies selbst auszuprobieren:
- Sehen Sie sich den CSS- Code an.
- Kopieren Sie den CSS-Code (alles zwischen den <style>-Tags) und fügen Sie ihn in ein benutzerdefiniertes CSS-Plugin oder direkt in die style.css-Datei Ihres Child-Themes ein (wie bereits besprochen).
- Viel Spaß!
Abschließend sei darauf hingewiesen, dass Code-Snippets in unserem Repository der Einfachheit halber als Plugins eingerichtet sind. Eine alternative Möglichkeit, den CSS-Code zu verwenden, besteht darin, die angezeigte Datei zu speichern und direkt als Plugin auf Ihrer Website zu installieren. Anleitungen dazu finden Sie im Abschnitt „Snippets verwenden“. Die Verwendung auf diese Weise hat den zusätzlichen Vorteil, dass die CSS nur in Ihrem Affiliate-Bereich geladen wird und nicht auf anderen Seiten, die sie nicht benötigen.
Mit ein wenig Begeisterung und grundlegenden CSS-Kenntnissen können Sie den Affiliate-Bereich so gestalten, wie Sie möchten. Wenn Sie mehr über CSS erfahren möchten, sehen Sie sich einige Tutorials an und experimentieren Sie mit den verschiedenen Designelementen. Vielleicht macht es Ihnen sogar Spaß!
Viel Spaß beim Stylen!
Schönes Tutorial,
Ich werde meinen Affiliate-Bereich anpassen 😀
viel einfacher mit Visual Composer, lol.
Aber sicher! Es gibt viele Möglichkeiten, dies anzugehen 🙂
Ist es möglich, Elementor zu verwenden, um das Design des Affiliate-Bereichs zu bearbeiten?
Ich warte auch auf eine Antwort darauf. Vielleicht kann Andrew irgendwann dieses Jahr antworten. Danke.
Hallo, möchten Sie die Seite selbst bearbeiten (sie heißt standardmäßig „Affiliate-Bereich“) oder möchten Sie die tatsächlichen Links, Formularfelder usw. innerhalb des Affiliate-Bereichs bearbeiten?
Die Seite kann mit Elementor gestaltet werden, aber der Affiliate-Bereich selbst müsste durch Hinzufügen von benutzerdefiniertem CSS zu Elementor modifiziert werden. Der Affiliate-Bereich wird über einen Block oder Shortcode ausgegeben (Sie können wählen, welchen Sie verwenden möchten), sodass er nicht von Elementor aus angepasst werden kann.
Wie überschreibe ich die Vorlagen im Plugin? In welcher Hierarchie muss ich die Dateien unter meinem Child-Theme ablegen? Ich habe alle naheliegenden versucht, nichts funktioniert. Dies ist eine absolut kritische Anpassungsoption, die zur Anpassung des WP-Affiliate-Bereichs benötigt wird, und Sie sprechen in diesem Artikel überhaupt nicht darüber.
Siehe diesen Dokumentationsartikel: http://docs.affiliatewp.com/article/118-modifying-template-files
Danke Mann,
Es funktioniert wie am Schnürchen.
Schön zu hören, dass dieser Beitrag geholfen hat.
Was ist das beste WP-Theme oder Template für das WP-Affiliate-Plugin?
AffiliateWP funktioniert gut mit jedem WP-Theme. Das beste Theme ist das, dessen Design und Funktionalität Ihnen gefällt.
Wie richte ich es auf einem Seitenmenü-Tab ein...? Können Sie mir helfen...?
Hallo Yupi, einer der Drittanbieter-Berater kann Ihnen bei Bedarf helfen, wenn Sie benutzerdefinierte Entwicklungen benötigen: https://affiliatewp.com/consultants/
Ich empfehle, das Plugin und die Add-ons mit Beaver Builder kompatibel zu machen.
Hallo,
Das war nett, aber es entsprach nicht ganz meinen Anforderungen, also habe ich etwas erstellt, das etwas schöner aussieht (wenn ich das selbst sagen darf 🙂
https://github.com/mattbingham/wordpress-affiliateswp/blob/master/style1.css
Screenshot hier: https://github.com/mattbingham/wordpress-affiliateswp/blob/master/affiliateswp-style1.jpg
Es ist responsiv, sodass Tabs auf kleineren Geräten zur nächsten Zeile springen sollten.
Ich liebe dich! Danke dafür
Ich möchte dieses Plugin kaufen, habe es bereits getestet und es gefällt mir, aber ich habe nur eine Frage, die für mich entscheidend ist, ob ich es kaufe oder überspringe.
Ihr Plugin sieht auf dem Desktop großartig aus, aber irgendwie auf kleinen Bildschirmen wie auf Mobiltelefonen springt der Affiliate-Bereich, sobald man auf einen Tab klickt, sei es Dashboard oder Statistiken, zum Ende des Bildschirms, nachdem alle Tabs beendet sind. Und alles, was ich möchte, ist, dass ich auf kleinen Bildschirmen mit CSS in einem Child-Theme bearbeiten kann, so dass, sobald die Tabs angeklickt werden, sie zur nächsten Seite mit ihrem Inhalt gleiten und ich eine Zurück-Schaltfläche hinzufügen kann, um zum Menü zurückzukehren.
Wenn es möglich ist, werde ich es kaufen
Hallo Tabish!
Das klingt zwar möglich, aber Sie benötigen einige Kenntnisse in CSS und HTML (vielleicht sogar JavaScript, um den Schiebeeffekt zu erzielen), um das gewünschte Endergebnis zu erzielen.
Der Affiliate-Bereich kann durch Kopieren von Vorlagendateien in Ihr WordPress-Child-Theme vollständig nach Ihren Wünschen angepasst werden.
Weitere Informationen zu Vorlagendateien finden Sie hier: https://docs.affiliatewp.com/article/118-modifying-template-files
Ich hoffe, das hilft!
Hallo
Ich möchte Text unter den Affiliate-URL-Tabs hinzufügen. Wie ist das möglich?
Hallo Saket,
Sie könnten dies auf verschiedene Arten erreichen:
1. Erstellen Sie Ihre eigenen benutzerdefinierten URL-Tabs mit dem Affiliate Area Tabs Add-on: https://affiliatewp.com/add-ons/official-free/affiliate-area-tabs/
Sie können eine WP-Seite für den Tab verwenden, was bedeutet, dass Sie alles darauf platzieren können, einschließlich Ihres benutzerdefinierten Textes. Sie können dann den [affiliate_urls] Shortcode unter Ihrem Text platzieren, um die Funktionalität des ursprünglichen Tabs nachzuahmen.
Dieser Shortcode wird vom Affiliate Area Shortcodes Add-on bereitgestellt: https://affiliatewp.com/add-ons/official-free/affiliate-area-shortcodes/
2. Fügen Sie den Text über die Vorlagendatei dashboard-tab-urls.php hinzu, die von AffiliateWP bereitgestellt wird. Weitere Informationen zu Vorlagendateien finden Sie hier: https://docs.affiliatewp.com/article/118-modifying-template-files
3. Fügen Sie den Text über den Action Hook affwp_affiliate_dashboard_urls_top hinzu. Hierfür wären einige Entwicklungskenntnisse erforderlich.
Wie kann ich den Inhalt von zwei Tabs kombinieren?
Zum Beispiel möchte ich, dass Affiliate-URLs und Statistiken unter einem Tab stehen
Wie kann ich das Portal gestalten? Insbesondere die Creatives-Seite. Ich habe versucht, flex-1, w-0 -mr -px Klassen zu meinem Child-Theme CSS hinzuzufügen, aber nichts ändert sich. Es gibt kein "creatives.php" in /wp-content/plugins/affiliatewp-affiliate-portal/templates/ für mich, um eine bessere Vorstellung von den verwendeten Klassen zu bekommen (aber ich bin ziemlich sicher, dass es diese sind).
Ich möchte nur die Hintergrundfarbe von Weiß ändern, damit umgekehrte Kunst gesehen werden kann.
Hallo Shane,
Das Affiliate Portal Add-on hat seine eigene benutzerdefinierte Formatierung, daher ist es nicht möglich, das CSS anzupassen. Das Portal entfernt alle anderen Stylesheets, um Konflikte zwischen sich und dem aktiven Theme zu vermeiden.
Wir werden in Zukunft wahrscheinlich einige grundlegende Farboptionen hinzufügen, damit Sie die Farbe(n) Ihrer Marke besser anpassen können. Wir erwägen auch die Unterstützung des Dunkelmodus. Dies würde dazu beitragen, dass umgekehrte Grafiken auf der Creatives-Seite vor dem weißen Hintergrund sichtbar sind.
Ist der Standard-Affiliate-Bereich für Sie noch eine Option? Sie können diesen nach Belieben anpassen und er verfügt über Vorlagen, die Sie überschreiben können (das Portal hat keine Vorlagen).
Das Portal hat mich angezogen und ich habe die Pro-Version gekauft. Dann stellte ich fest, dass es nicht funktionieren würde, da meine Website im Dunkelmodus mit WEISSEN Textfarben für den Körper ist.
Habe die letzten 7 Stunden damit verbracht, die Farben über CSS anzupassen und lese gerade Ihren Kommentar hier. Ich sterbe
Hallo, ich möchte nur eine Login-Seite und eine Registrierungsseite anzeigen. Auf dieser Login-Seite kann sich der Benutzer, wenn er nicht registriert ist, über den Registrierungslink registrieren, andernfalls kann er sich in unser Partnerkonto einloggen. Wie ist das möglich?
AffiliateWP zeigt standardmäßig ein Login- und Registrierungsformular auf derselben Seite an. Wenn ein Benutzer abgemeldet ist, sieht er beide.
Es gibt einen defekten Link im Artikel: https://github.com/AffiliateWP/affiliatewp-code-snippet-library/blob/master/affiliate-area/affiliate-area-custom-styling.php
Danke Lucas, der Link wurde aktualisiert.
Wo kann ich CSS-Klassen einfügen?