Wordpress

Good to know

Worum geht es

Artikellisten mit Popups, Bilder-Galerien, PDFs, Videos sollen in Wordpress von Anwendern ohne entsprechende Vorkenntnisse gepflegt werden können.

Lösung: Die Daten werden in den teils schon vorhandenen Excel-Listen gepflegt. Bei Änderungen wird nur die Excel Liste geändert. Ein Programm erzeugt dann aus den Excel Daten eine formatierte Tabelle, die nur noch hochgeladen werden muß.

Praktisch:

  1. Einen Artikel in Tabellenkalkulation erfassen
  2. PDF hochladen und Datei-URL in Tabelle kopieren
  3. Bilder hochladen und ID-Nummern in Tabelle notieren
  4. Tabelle als ".csv" speichern
  5. tabelle8.pl (bzw. tabellewb.pl) tabellenname.csv starten
  6. die entstandene Datei "tabellenname-web.csv" mit "tablepress" hochladen (alte Tabelle ersetzen).
  7. Optional: Zur Verbesserung der SEO "Beiträge" mit ausführlicher Beschreibung erstellen.

Artikelliste

Wird von Programm tabelle8.pl aus Excel-Tabelle generiert. Anwendung: "perl tabelle8.pl Tabellenname.csv". Ergebnis: "Tabellenname-web.csv".

(eine CSV-Datei erscheint als Tabelle, beim Speichern werden die Spalten durch Semikolon getrennt:z.B. "Artikel;Zusatz;Popup;Bilder;Preis;PDF". Deshalb kann man auch jeden Editor verwenden, solange man für jede Spalte ein Semikolon setzt.)

Tabellenkalkulation oder Notepad++ verwenden

  • Vorab
    • Sicherstellen, dass das Programm bei „Speichern unter“ – „.csv-Datei“
      • UTF8 kodiert (sonst fehlen im Web die Umlaute)
      • „;“=Semikolon als Trennzeichen benutzt
      • Text nicht nachträglich mit Anführungszeichen oder etwas anderem umgibt
    • Diese Einstellungen finden sich bei „Speichern unter“ – Dateityp „.csv“ – Einstellungen“ oder ähnlich

WB.Tabelle (Sonderfall) ohne Langtexte nur mit PDF

  • Kategorie | Art.Nr. | Hersteller | Artikel | Preis | Bilder | PDF | Langtext | Video
  • Konvertierung erfolgt mit "tabellewb.pl" das zuerst eine "normale" Tabelle erzeugt und dann automatisch tabelle8.pl startet.
    • Die eigentliche Artikelbezeichung ist immer der Text vor dem ersten Komma in "Artikel" + "Hersteller".
    • Der Artikelzustand (fett) ist immer der Text nach dem letzten Gedankenstrich in Artikel.
    • Die Art.Nr. wird aus "Kategorie"+"Art.Nr" zusammengesetzt und hinten an "Artikel" angehängt.
    • Gibt es ein Video wird es ebenfalls hinten angehängt.
  • Für PDF muss nach dem Hochladen die "Datei-URL" kopiert und in Tabelle eingefügt werden.

Excel-Tabelle.csv (Normalfall)

  • Spalten (es gibt 2 Spalten mehr als in der fertigen Tabelle, da immer die Produktbeschreibung aus Produkt + Popup + PDF zusammengesetzt wird, es sind immer 6 Spalten, wenn 2.,4. oder 5. Spalte nicht genutzt werden: Überschrift leerlassen)
  • Artikel | Zusatz | Langer Artikeltext=Popup | Bilder | Preis | PDF
  • wird eine der fett gedruckten Spaltenüberschriften leer gelassen, entfällt im Web die entsprechende Spalte
  • der Überschriftentext kann beliebig geändert werden z.B. statt „Preis“ „Preis zzgl. 19% Mwst.“ oder auch ganz anders: „Lieferbar“ oder „Glutenfrei“. Wichtig ist, ob da etwas steht oder nicht.

Internettabelle-web.csv - das Ergebnis

  • Bilder | Artikel | Zusatz | Preis |
    • PDFs usw sind jetzt schon in Artikelspalte integriert
  • allgemeine Regeln für Artikelliste:
    • keine Semikolons (außer in Notepad++ als Spaltentrenner)
    • keine Anführungszeichen
    • keine Hochkommata verwenden
    • bei PDF-Dateinamen Groß-/Kleinschreibung beachten , keine Leerzeichen dahinter!

Daten erfassen

    • Vorgegebene Daten wie Artikel/Kurzbeschreibung, Zusatz, Preis ausfüllen
      • in Kurzbeschreibung kann auch eine längere Beschreibung eingetragen werden, dann:
      • einfach Produktbezeichung und Zusatztext durch „<br>“ Komma trennen
    • in WordPress
      • optional:
        • neues Popup im Popupmaker mit detaillierter Beschreibung erstellen,
        • automatisch vergebene Nummer in Tabelle in Spalte Popup eintragen
        • wenn in der Spalte nichts steht, gibt es auch keine detaillierte Beschreibung
        • neuen Beitrag in Wordpress mit detaillierter Beschreibung erstellen,
        • Titel des neuen Beitrags = Artikel (ggf. der Teil vor dem <br>), am Besten kopieren
        • für Seo: Kategorien zuordnen
        • in Tabelle, Spalte Popup: "1" eintragen (Popup kommt nur, wenn da irgendetwas steht, was ist egal)
      • in WordPress Medien mindestens 1 Bild hochladen, für SEO sollte etwas Aussagefähiges in Alt-Text stehen
        • Nummer(n) in Tabelle Spalte Bilder eintragen, z.B.: 107,108,109
        • (wenn man das Bild in wordpress aufruft steht die Nummer in der Adresszeile des Browsers hinter „post“:
        • z.B.:“https://www.irgendwer.de/……….post.php?post=304&action=edit“)
      • optional:
        • PDF hochladen,
        • in PDF-Ordner verschieben,
        • Name in Tabelle eintragen „xyz.pdf“ (!Groß-/Kleinschreibung muss mit Dateiname übereinstimmen!)
    • für nächsten Artikel wiederholen
  • Daten aufbereiten
    • auf Gerät muss (Strawberry) Perl installiert sein.
    • Linux: Terminal oder Windows: „Suchen“-„cmd“
    • in Daten Verzeichnis wechseln
    • z.B.: „perl tabelle8.pl artikel.csv“ eingeben
    • es wird eine Datei artikel-web.csv erzeugt
    • In WordPress-Tablepress Tabelle importieren

---------------------------------------------------------------------------------------------------------------------

Ab hier für Fortgeschrittene

PDF in Artikelbeschreibung Methode 2

    • PDF in WordPress Medien hochladen
    • die URL des PDF kopieren
    • folgenden Text in Artikelbeschreibung kopieren
    • <br><a href=“Hier die URL einsetzen„> <img class=“alignleft wp-image-170 size-full“ src=“http://www.bachmann.www17.webhosting-account.com/wordpress/wp-content/uploads/2018/06/pdf.gif“ alt=“PDF-Button“ width=“32″ height=“32″ /> Prospekt</a>
    • an angebener Stelle (Hier die Url einsetzen) die Url des Prospektes einsetzen (auf die Anführungszeichen achten, hier notwendig!)

You Tube embed

  • Textmodus wählen
  • you tube link einfügen
  • &rel=0 (null) hinten dranhängen
  • falls in „Visuell“ angezeigt oder Vorschau benutzt wird das „&“ (kaufmännisches Und Zeichen) in „&amp;“ umgewandelt, dann ist Link kaputt
  • Lösung: im Textmodus korrigieren
  • https://noorsplugin.com/simple-youtube-embed-plugin/



Kurze PDF/Medien URL

http://example.com/?p=1234 Funktioniert nicht mit diesem Theme aber Yoast SEO bringt das mit

1 – Create an attachment.php file in your WordPress theme folder

2 – Put this code in the file:

<?php wp_redirect(wp_get_attachment_url(), 301); ?>

3 – Upload it and there you are

https://jodyvanv.com/redirect-wordpress-attachment-urls-to-the-file-url/

Klappende Sidebar Menüs

  • Customizer – Zusätzliches CSS (ggf. CSS-Adressen des Themas herausfinden)
  • .menu li:hover >.sub-menu {
    • display: block;
    • }
  • .sub-menu {
    • display: none;
    • }

in Posts Autor/Datum unterdrücken

  • Customizer – Zusätzliches CSS (ggf. CSS-Adressen des Themas herausfinden)

.entry-author-link, .entry-date { display: none; }


Meta Slider für Slideboxes (die mit den Punkten)

Ari Fancy Lightbox in den Einstellungen Dateitypen eingeben z.B. „WordPress gallery“ und PDF

  • <a href=“https://debian.fritz.box/wp-content/uploads/2018/06/Produktdatenblatt_Belcando_Mastercraft_Toppings_DE-1.pdf“>Open PDF doc</a> macht dann PDF in Lightboxauf
  • falls PDF nicht in lightbox, sondern in Fenster geöffnet wird: Leerzeichen am Ende entfernen

TablePress für Tabellen

  • Menüfarbe ändern in tablepress – Einstellungen – zusätzliches CSS
  • .tablepress thead th {
    • background-color: #ffaf11;
    • font-weight: 700;
    • vertical-align: middle;
    • }
  • .tablepress thead .sorting_asc,
    • .tablepress thead .sorting_desc,
    • .tablepress thead .sorting:hover {
    • background-color: #00ff00;
    • }

Popup Maker für die POPUPS (nicht POPup Maker WP)

  • <a href=“#popmake-262″ >Turbo-charge Your Popups Instantly!</a> ist SEO freundliches Popup
  • !!!es muss die automatisch generierte (nicht die selbst vergebene POPUP-Bezeichnung genommen werden!!!

Tool Tips

  • Simple Tool Tips
  • Einstellungen unter Einstellungen Simple Tool Tips
  • Für Tooltip in Menu –
    • Einstellung: Menu Selectors (Advanced): .menu (bei anderen Themes andere Kennung)
    • in Menu-Zahnrad Sichtbarkeit für alles anklicken
    • im Menu: „HTML-Attribut title (optional)“ tooltip Text eingeben
    • im Menu: „CSS-Klassen (optional)“ „tooltips“ eingeben
  • Für Tooltip in Text (simple Tooltip einfügen im Editor Visuell Menü , zusätzliche Formatierung über Span , Farbe besser nicht wie im beispiel, sondern über Einstellungen s.o.:
    • <span style=“background-color:yellow;“>dieser Text löst Tooltip aus </span>
  • Einfache Variante
    • <span style=“background-color:yellow;“ title=“<h2>Für Details klicken<h2>“>Produkt</span>

Produkt<span style=“background-color:yellow;“ title=“<h2>I am hovering over the text<h2>“>Produkt</span>

<span style=“background-color:yellow;“>This triggers the tooltip </span>

Seo

  • im Editor <ins datetime=“2018-06-28T08:02:52+00:00″> einfügen – zeigt google das sachen geändert werden

Änderung Header

a) in themes/THEMENAME/inc/render/structure/header.php

*// SITE BRANDING

*if ( ! function_exists( ‚igthemes_site_branding‘ ) ) {

*//start function

*function igthemes_site_branding() {

*?>

*<*div id="site-branding" class="site-branding" >

* *<*?*php *# wf igthemes_site_title();

*# wf igthemes_site_logo();

*igthemes_main_navigation(); *?*>

*<*/div*>

b) in styles.css

.site-header .header-content.inline .custom-logo-link,

.site-header .header-content.inline .site-title {

float: left;

display: block;

margin-right: 2.35765%;

width: 48.82117%;

/* wf Abstand oberkante dunkler Bereich von oberkante Browser */

padding-top: 24px;

padding-bottom: 24px;

padding-left: 24px; }

.site-header .header-content.inline .custom-logo-link:last-child,

.site-header .header-content.inline .site-title:last-child {

margin-right: 0; }

.site-header .header-content.inline .main-navigation {

float: left;

display: block;

margin-right: 2.35765%;

/* wf width: 48.82117%; */

width: 100%;

margin-right: 0;

padding: 0; }

.site-header .header-content.inline .main-navigation:last-child {

margin-right: 0; }

.site-header .header-content.inline .main-navigation ul {

text-align: left; }

.site-header .header-content.inline .main-navigation ul li:hover > ul,

.site-header .header-content.inline .main-navigation ul li.focus > ul {

left: auto;

right: 0; }

.site-header .header-content.inline .main-navigation ul a {

/* wf beides war 40*/

.site-header .header-content.inline .main-navigation ul a {

/* wf beides war 40*/

padding-top: 4px;

padding-bottom: 4px;

font-weight: bold;

}

Farben

rot #dd3333 grün #77cc6d Bachmann Rot #da1f3e

iframe

<p><iframe src="/wp-content/htdocs/test.html" width="400"></iframe></p>