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.
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 eintragenwenn 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 hochladendie URL des PDF kopierenfolgenden 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 {
- .sub-menu {
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>