4. Woche: WP Plugin AmazonSimpleAdmin, weitere Inhalte, Video nicht geschafft

4.-Woche-Aufbau-Nischenwebsite

Die 4. Woche ist nun schon wieder vorbei und es geht in großen Schritten Richtung Halbzeit.

In der vergangenen Woche habe ich mich mit dem WordPress Plugin AmazonSimpleAdmin und dem Erstellen weitere Inhalte beschäftigt. Alle Details findest du in diesem Artikel.

AmazonSimpleAdmin WordPress Plugin

Mittlerweile bin ich ein richtiger Fan von dem AmazonSimpleAdmin Plugin für WordPress geworden. Ich nutze es auf all meinen Nischenseiten. Hat man einmal die Grundeinstellungen vorgenommen und das Design individuell angepasst, kann man es auf jeder Website/Blog einsetzten.

Was kann das Plugin?

Doch zunächst erst einmal – Was kann das Plugin? Das Plugin greift auf die Amazon API zu und liest eine Vielzahl an Produktinformationen aus (wie z.B. den aktuellen Preis des Produktes, das Produkt-Bild, Die Beschreibung, den Titel, Affiliate-Link usw.)

Diese Informationen kann man dann via Shortcode [asa]ASIN[/asa] in jeden beliebigen Beitrag/Seite einfügen. Das Wort ASIN ergänzt man dann mit der jeweiligen ASIN-Nummer des zu bewerbenden Produktes.

Standardmäßig sieht das dann in etwa so aus:

mazonSimpleAdmin standard

Wie habe ich es angepasst?

Da mir das Design und die Anordnung nicht unbedingt gefiel, habe ich es mit etwas CSS-Code aufgehübscht. Das sieht dann z.B. so aus (Beispiel 1):

AmazonSimpleAdmin angepasst1

Oder so (Beispiel 2):

AmazonSimpleAdmin angepasst

Aufgrund der doch recht großen Nachfrage gehe ich nun im Folgenden genau auf die Anpassung via css ein und das 2. Beispiel ein:

1. AmazonSimpleAdmin arbeitet mit verschiedenen Templates

Um die Darstellung der Ausgabe des AmazonSimpleAdmin Plugins anzupassen, erlaubt das Plugin, das Einschleusen verschiedener Templates. Im Beitrag schreibt man an gewünschter Stelle dann nur [asa test]ASIN[/asa], fügt also in den Shortcode das Wörtchen test ein (individuell wählbar).

Nun muss natürlich noch das entsprechende Template namens test erstellt werden, damit die Datei überhaupt angesprochen werden kann.

Von Haus aus befinden sich schon ein paar fertige Templates in einem Unterordner des Plugins (auf dem Server). Standardmäßig ist das der Pfad: /deine-domain.de/wp-content/plugins/amazonsimpleadmin/tpl/built-in (Das Kürzel tpl in dem Pfad steht für Template).

Ich habe es so gemacht, dass ich mir ein bereits vorhandenes Template kopiert, dieses in test umbenannt und dort dann die Änderungen vorgenommen habe. Mein fertiges test-Template sieht so aus:

<div class=“asa_box“>
<div class=“asa_img“>
<a href=“{$AmazonUrl}“ target=“_blank“><img src=“{$MediumImageUrl}“ width=“{$MediumImageWidth}“ height=“{$MediumImageHeight}“ border=“0″ style=“border: 0;“/></a>
</div>
<div class=“asa_title ellipsis“>
<a href=“{$AmazonUrl}“ target=“_blank“>*{$Title}</a>
</div>

<div class=“asa_ratingstars“>
{$RatingStars} <span style=“font-size: 14px; color: grey;“>({$TotalReviews})</span>
</div>

<div class=“asa_price“>
<span style=“font-size: 12px;“>ab </span> <span style=“color: #008b00; font-weight: bold“> {$AmazonPrice} €</span>
</div>

<div class=“asa_button“>
<a href=“{$AmazonUrl}“ class=“asa_button“ target=“_blank“><span style=“color: #fff“>zum Shop*</a></span>
</div>
<div style=“clear: both;“></div>
</div>

Ich schleuse also in das Template test verschiedene css-Klassen ein, damit ich diese dann im Anschluss ansprechen und die Darstellung dann designen kann. (Zum Ausprobieren den Code einfach in ein (zuvor kopiertes) Template kopieren und dieses als test speichern.)

2. Die eigenen CSS-Klassen im Theme ansprechen

Nun müssen nur noch die im Template eingeschleusten Klassen angesprochen und gestylt werden. Ich mache das gleich in der style.css des Themes. Dort habe ich also den folgenden Code (an beliebiger Stelle) rein geschrieben:

.asa_box{
width: 240px;
border: 1px solid #E8E8E8;
float: left;
margin-right: 10px;
margin-bottom: 20px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.asa_img{
text-align: center;
height: 180px;
padding-top: 8%;
}

.asa_title{
text-align: center;
font-size: 14px;
height: 55px;
padding: 1.5%;
}

.asa_ratingstars{
text-align: center;
}

.asa_price{
text-align: center;
}

.asa_button{
text-align: center;
background: #256a99;
text-decoration: none;
margin-top: 10px;
}

.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
}

(Letzeres (.ellipses) ist dafür da, den Titel des jeweiligen Produktes abzuschneiden. Bei einem sehr langen Produkt-Titel würde dieser nämlich z.B. in die Bewertungssterne reinragen und das Design dadurch kaputt machen.)

Update: Und hier noch für das Beispiel 1.

Template 1. Variante:

<div class=“asa_product_box“>
<div>
<div class=“pic_asa_product_box“>
<a href=“{$AmazonUrl}“ target=“_blank“><img src=“{$MediumImageUrl}“ width=“{$MediumImageWidth}“ height=“{$MediumImageHeight}“ /></a>
</div>
<div class=“text_asa_product_box“>
<p style=“padding-bottom: 5px; margin-bottom: 0;“><a href=“{$AmazonUrl}“ target=“_blank“><span class=“asa_headline“>{$Title}*</p></a></span>
<p style=“padding-bottom: 5px; margin-bottom: 0;“>{$RatingStars} ({$TotalReviews} Kundenrezensionen)</p>
<p style=“padding-bottom: 5px; margin-bottom: 0;“><strong><!–{$TotalOffers}–>Erhältlich ab:</strong> <span style=“color: #238D1A; font-weight: bold;“>{$AmazonPriceFormatted}</span></p>
</div>
<div style=“clear: both;“></div>
</div>
</div>

CSS-Code 1. Variante:

.asa_product_box{
border: 1px solid #E8E8E8;
margin-bottom: 10px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.pic_asa_product_box{
width: 30%;
float: left;
padding: 10px;
text-align: center;
min-height: 150px;
}

.text_asa_product_box{
padding-top: 10px;
line-height: 1.5;
}

3. Sicher geht es noch einfacher

Ich bin kein Coder oder Designer, doch ich bin mir ziemlich sicher, dass das oben beschriebene auch noch einfacher umzusetzen geht. Ein paar CSS-Grundkenntnisse habe ich durch ausprobieren und „abgucken“ mir selbst beigebracht. Für mich und meine Bedürfnisse reicht dies aber vollkommen aus.

Weitere Inhalte erstellt

Natürlich dürfen gerade am Anfang neue Inhalte nicht fehlen. So habe ich 6 neue Artikel für meine Nischenseite handkreissaege-tests.de erstellt.

Ein großer Vorteil beim selber schreiben ist, dass man gerade durch das Recherchieren und Schreiben immer wieder auf neue Themen stößt, die deutlich tiefer in das Thema eindringen, als z.B. „Handkreissäge kaufen – Was beachten?“ Aber natürlich bedeuten neue Inhalte auch mehr rankende Seiten, mehr Besucher, mehr Einnahmen, …

Die nackten Zahlen

Hier noch die wöchentlichen Zahlen der Besucher, Arbeitszeit, Ausgaben und Einnahmen. Diese beziehen sich auf die Woche. Die Zahl in Klammern auf die gesamte Zeit:

  • Besucher (über Google): 20 Sitzungen (53 Sitzungen)
  • Arbeitszeit: 8 Stunden (26 Stunden)
  • Ausgaben: 0,00 € (59,74 €)
  • Einnahmen: 0,00 € (0,00 €)

Bei den Einnahmen hat sich leider noch nichts getan. Aber das wäre auch noch etwas früh für meine Vorgehensweise. Erste Besucher kommen zwar über Google, aber das sind dafür einfach noch zu wenige. Mit steigenden Rankings (dazu nächste Woche mehr) wird das aber besser.

Das habe ich nicht geschafft

Vor 2 Wochen hatte ich 2 Videos aufgenommen. Dieses „Rohmaterial“ wollte ich in der letzten Woche bearbeiten (kleiner Vorspann mit Logo, Titel hinzufügen, etc.), bei YouTube hochladen und auf meiner Seite einbinden.

Das habe ich allerdings nicht geschafft. Ich versuche es diese Woche.

So geht es weiter

In dieser Woche stehen natürlich wieder ein paar neue Inhalte an, der ein oder andere Backlink und die Bearbeitung sowie das Einbinden der Videos.

Da ich diese Woche allerdings mit meinen anderen Projekten viel zu tun habe, weiß ich noch nicht, ob ich das alles schaffe. Ich gebe mir aber Mühe. :-)

36 Gedanken zu „4. Woche: WP Plugin AmazonSimpleAdmin, weitere Inhalte, Video nicht geschafft

  1. Hallo Burkhard,
    dein Know-How zu Tauchsägen hätte ich letztes Jahr gebrauchen können.
    Du hast eine wirklich klasse Seite aufgebaut.
    Fast so gut wie meine ;-)
    Im Ernst, das ist die bisher beste Seite der NSC.
    Bin mal gespannt, wie sich Deine Seite entwickelt.
    Grüße
    Roby

    1. Danke für dein Kompliment! Das hört man natürlich gerne. Ob es die beste ist, wage ich zwar zu bezweifeln, aber ich gebe mir schon Mühe bei der Inhalts-Erstellung – das stimmt. :-)
      Ich werde mit Sicherheit auch nach der NSC weiter über den Stand der Dinge meiner Seite berichten.

  2. Hey Burkhard,

    ich arbeite auch viel mit dem AmazonSimleAdmin und war immer auf der Suche nach genau dieser Erklärung! Schön, dass Du sogar noch Deinen Code präsentierst, einfacher wird es dann nicht mehr ;)

    Darüber hinaus wirkt das Projekt gut strukturiert und auch optisch einwandfrei.

    Wenn Du aber doch schon eine „persönliche Geschichte“ wieso trittst Du dann nicht auf der Seite als Person und mit der Geschichte (gerade selber am ausbauen und du brauchtest eine neue Säge) auf? Würde die Authentizität aus meiner Sicht noch erhöhen ;)

    Viel Erfolg mit dem Projekt

  3. Hallo Burkhard,
    danke für deine wertvollen tipps. Ich wollte das Amazonsimpleadmin Plugin ausprobieren und Produktboxen erstellen, wie in deinem Beispiel 2. Habe nach deiner Anleitung ein neues Template erstellt und den css code in mein child theme kopiert. Hat leider nicht geklappt. Was mache ich falsch?

    1. Hallo Max,
      puh, das ist per Ferndiagnose immer nicht so einfach zu sagen.
      Was genau funktioniert nicht (um das Problem ein wenig einzugrenzen)?

      Viele Grüße
      Burkhard

      1. Hallo Burkhard,
        danke für deine Antwort. Also nachdem ich den Code kopiert hatte sah das Ergebnis auf meiner Seite ganz anders aus. Woran es genau lag hab ich so auf Anhieb nicht begriffen. Habe mich anschließend tagelang intensiv mit dem Plugin und dem ganzen drumherum beschäftigt und bin mit dem Ergebnis inzwischen ganz zufrieden. Konnte die Boxen in Kombination mit Tablepress erstellen. Schau mal .

        Viele Grüße

        1. Das sieht doch sehr gut aus!
          Das Einzige ist, dass die Boxen durch die Verwendung von TablePress nicht responsive sind. Aber das würde mich jetzt nicht unbedingt stören…
          Viele Grüße und weiterhin gutes Gelingen!

          1. Danke Dir!
            Du hast natürlich recht mit dem responsive. Wie könnte ich es besser machen?

            Gruß Max

          2. Puh, da gibt es jetzt wieder viele Wege.
            Wenn du es ohne TP machst, geht es recht einfach. Du kannst dich gern an meiner Seite orientieren (per CSS).
            Mit TP geht es allerdings auch, aber da müsste ich mich erst reinarbeiten…

            Viele Grüße
            Bukhard

  4. Hi Burkhard,

    vielen Dank für die ausführliche Erläuterung. Dank dir hab ich mich mal an das Thema Templates beim SimpleAdmin gewagt und es ist tatsächlich nicht sonderlich schwierig.

    Ciao
    Martin

  5. Als erstes einmal danke dafür das du dein Wissen mit uns teilst. Ich habe ein Problem mit dem css. Die Box wird verzerrt dargestellt und die meisten Daten sind nicht sichtbar. Ist es wirklich egal wo ich in der style.css die Daten einfüge?
    Vielen Dank für deine Mühen im vorraus

    1. Hey Alex,
      mhh, hast du mal ein Live-Beispiel, wo die Box nicht korrekt dargestellt wird?
      Eigentlich ist es egal, wo du den Code in der css einfügst.
      Viele Grüße
      Burkhard

  6. Habe es mit Tablepress nun gemacht. Kann ich eigentlich auch nur den Preis in meine Tabelle einfügen? also mit asa_price oder so?

    Vielen Dank für deine Mühen Burkhardt. Hatte erst vor kurzem dein Interview gelesen bei SIN

  7. Hi Burkhard,

    über dich bin ich erst zu dem tollen Plugin gekommen. Danke dafür ;-).
    Jetzt wollte ich dich aber noch fragen, wie du denn die Produktbeschreibung z.B. in deine Bestsellerliste integriert hast? Wenn ich den Platzhalter {$ProductDescription} benutze, steht leider nie die Produktbeschreibung da, die auf der Amazonseite zu sehen ist. Nimmst du einen anderen Platzhalter?

    Freu mich auf deine Antwort.
    Viele Grüße, Stefan

    1. Hallo Stefan,

      bei den Bestsellern verwende ich nicht das ASA-Plugin sondern ein anderes, was jedoch leider nicht mehr öffentlich zum Download bereit steht. Tut mir leid, ich kann dir da aber nicht weiterhelfen. Wie gesagt, ich bin kein Coder…

      Viele Grüße und vielleicht bekommst du es ja mit ein wenig rumprobieren hin…
      Burkhard

  8. Hallo!
    vorab Vielen Dank für deine tolle Erklärung wie man das plugin aufhübscht. Bei mir funtkioniert dies aber nicht so richtig.. es wird das Produktbild nicht angezeit und wenn man auf den link klickt wird eine 404 Fehlermeldung angezeigt! Was könnte der Fehler sein? sollte man deinen Code noch weiter abändern?

    1. Hallo Alexander,

      so per „Ferndiagnose“ kann ich dir leider nicht helfen. Lass mir mal die URL deiner Seite zukommen, dann kann ich es mir mal „live“ anschauen. Danke dir und viele Grüße, Burkhard

  9. Hallo,
    dein neues Test Template hast du dann auch in dem Ordner /deine-domain.de/wp-content/plugins/amazonsimpleadmin/tpl/built-in oder wo?
    Wollte das mal testweise so ausprobieren wie du, ehe ich ein eigenes CSS anpasse. Habe das Template im Filemanager meines Hosters erstellt, aber irgendwie sieht die Darstellung von[ Asa test] aus wie die normale darstellung [asa], nur dass er auf einmal das Bild nicht mehr darstellen kann.

    1. Hallo Sebastian,

      nein, das Template habe ich hier: /deine-domain.de/wp-content/themes/dein-childtheme/asa/, da es bei einem Update des ASA-Plugins überschrieben würde. Lege also einfach in deinem Child-Theme Ordner einen Neuen an, nenne diesen „asa“ und lege dein individuelles Template dort ab. Dann kannst du auch in Ruhe das Plugin updaten, ohne dass es etwas kaputt geht.
      Wenn du Fragen hast, lass sie mich wissen.

      Viele Grüße
      Burkhatrd

      1. Danke für die Antwort.
        Irgendwie kriege ich es nicht hin. Das Template funktioniert, aber irgendwie scheint der CSS Code nicht zu greifen, jedenfalls sieht alles unformatiert aus und der Titel wird nicht gekürzt usw. Dabei habe ich deinen Teil in die Style.css des Themes kopiert. Aber da ich die Website nur mit einem Freund betreibe aus Freude am Programmieren Lernen sind meine Kompetenzen auch einfach zu beschränkt.
        So sieht es aus. http://www.schaukel-test.de/test-6/

        1. Hallo Sebastian,

          sorry für meine späte Antwort.
          Jetzt scheint es zu funktionieren, oder?
          Hast du die Templates von Lukas? Sieht gut aus.

          Viele Grüße
          Burkhard

  10. Hallo Burkhard,

    Echt total klasse wie du das ASA-Plugin optisch aufgebsserst hast.

    Ich verwende es ebenfalls seit einiger Zeit, die Optik gefällt mir dazu aber ebfalls nicht besonders.

    Könntest du dazu nochmal mir nochmal den Codeschnipsel für das Beispiel 1 zur Verfügung stellen? – ich bin leider auch kein programmierer und hatte mich bis eben damit abgefunden, dass es optisch so bleibt… Dann kam dein Beitrag! 😄

  11. Ich suche den codeschnipsel für dein beispiel 1.

    Der code aus dem text ist doch nir für das beispiel 2 (mit dem kaufen button) – oder sehe ich das nur nicht richtig..

    1. Ja, du hast Recht David. Das wusste ich schon gar nicht mehr. :-)

      Ich habe oben im Artikel ein Update eingebaut. Dort findest du den Code für die 1. Variante.
      Schau mal, ob es funktioniert. Ansonsten hack einfach nochmal nach.

      Viele Grüße
      Burkhard

  12. Klasse Beitrag! Ich habe jetzt auch mal meine Produktboxen von ASA angepasst (mit dem Codes von dreimarkfuffzig.de). Man kann auch super selbst ein bisschen an der CSS Datei rumspielen ohne viel Ahnung von CSS zu haben :)
    Ohne den Artikel von dir hätte ich das nie in Angriff genommen.
    Vielen Dank für die ganzen Infos :)
    LG
    Lukas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *