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:

Einen Artikel in Tabellenkalkulation erfassen
PDF hochladen und Datei-URL in Tabelle kopieren
Bilder hochladen und ID-Nummern in Tabelle notieren
Tabelle als ".csv" speichern
tabelle8.pl (bzw. tabellewb.pl) tabellenname.csv starten
die entstandene Datei "tabellenname-web.csv" mit "tablepress" hochladen (alte Tabelle ersetzen).
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 „&“ 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

Google Sites

Report abuse