WordPress hÀngt sich auf im Wartungsmodus

Problem
Wie im vorherigem Beitrag ein eher seltenes Problem. Wenn ein Plugin nicht aktualisiert wird oder aus anderen GrĂŒnden der Wartungsmodus sich nicht selbst ausschaltet.

Lösung
Mit FTP auf das Wurzelverzeichnis von der WordPress-Installation gehen und die versteckte Datei, erkennbar am fĂŒhrenden Punkt, .maintenance löschen. Nicht vergessen sich die versteckten Dateien anzeigen lassen, meist im MenĂŒ „Ansicht“ des FTP-Programms zu finden.

WordPress manuell aktualisieren

Problem
Das automatische Update wird von wp-admin/update-core.php verwaltet.
Trotzdem kommt auch ein solch mehrfach geprĂŒftes und gefixtes CMS mal ins Stolpern.
Die Fehlermeldungen können sein

  • Die Datei konnte nicht kopiert werden.

Lösung
Hier nun ein die Lösung um in jedem Fall ein aktuelles WordPress auf seinem Webspace zu nutzen.

  1. Wenn noch möglich, ein Backup der Inhalte und der Datenbank vornehmen, auch wenn es sich im Nachhinein als ĂŒberflĂŒssig herausstellt.
  2. Download der deutschen Version von WordPress ĂŒber https://de.wordpress.org/txt-download/.
  3. Entpacken der Zip-Datei, es wird ein Verzeichnis „wordpress“ erstellt.
  4. Aus diesem dekomprimiertem Verzeichnis das Unterverzeichnis wp-content löschen.
  5. Mit dem FTP auf den bisherigen Webspace zugreifen und außer
    • dem Verzeichnis wp-content und
    • den Dateien .htaccess und wp-config.php

    die gesamte WordPress-Installation löschen.

  6. Nun die neuen Verzeichnisse und Dateien aus dem dekomprimiertem Verzeichnis auf den Webspace hochladen.

WordPress missachtet W3C-Standards


Inhaltsverzeichnis

  1. Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor „a“
  2. Die Normung von HTML5 und CSS3 sind große Erleichterungen
  3. WordPress und die Ehrlichkeit
  4. Noch Open Source Software oder doch nicht mehr zu empfehlen
  5. Beispiel der Deklarationen „outline“ und „border“

Immer wieder werden von „WordPress“ bewĂ€hrte Standards missachtet. Hier im Theme „Twenty Sixteen“ von WordPress.org.


Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor „a“

Das CSS, Cascading Style Sheets, gibt dem Inhalt das Aussehen. Diese Trennung ist vom W3C, World Wide Web Consortium, auch genauso gewollt. Das CSS gibt es mittlerweile in der 3. Version und deckt fĂŒr die meisten Webdesigner auch gefĂŒhlte 99% der gewĂŒnschten Funktionen ab.


Die Normung von HTML5 und CSS3 sind große Erleichterungen

Wird ein Link gesetzt, so wird dieser sofort ohne weitere Layout-Einstellungen in der Farbe Blau und mit Unterstrich dargestellt. Außerdem bekommt der Mauszeiger die Form des Pointers zugewiesen. Das sind die 3 Standards die in jedem HTML-Dokument fĂŒr Hyperlinks schon vordefiniert sind. Der Unterstrich wird dabei von der Deklaration „text-decoration“ mit dem Wert „underline“ dargestellt.
Dieser Standard soll gewĂ€hrleisten, das nachfolgende Arbeiten an der Webseite und seinem CSS, ohne weiteren Aufwand und von jedem anderem Bearbeiter fortgesetzt werden können. Denn das schlussendliche Werk, fĂŒr das ein Webdesigner bezahlt wird, gehört dem Kunden.


WordPress und die Ehrlichkeit

Jetzt das Aber, aber warum versuchen Webdesigner diese Standards mit nicht konformen WinkelzĂŒgen auszuhebeln? Das bleibt wohl deren Geheimnis. Das es getan wird, das ist zweifellos Tatsache. Doch das es bei den empfohlenen und von der eigenen Plattform verbreitete Themes von WordPress sind, das ist Ă€rgerlich und widerspricht auch dem Gedanken von Open Source Software, nĂ€mlich der Nichtdiskriminierung, und dem wichtigstem Designprinzip, dem KISS-Prinzip.

In verschieden Themes, die von WordPress vertrieben werden, sind mir solche nicht standardkonformen Deklarationen von Elementen vorgekommen und sie Ă€rgern mich so sehr das ich nun einen Beitrag zum WordPress Standart-Theme „Twenty Sixteen“ schreibe. Denn hier wird der Unterstrich von Links erstellt mit „box-shadow: 0 1px 0 0 currentColor;“.

Versucht nun jemand diesen Unterstrich zu Ă€ndern oder zu entfernen wird er nicht fĂŒndig mit der Suche nach „text-decoration“. Bei einem anderem Theme von WordPress wird der Unterstrich mit „border-bottom“ erstellt, das zu dem selbem Ärger beim Webdesigner fĂŒhrt.


Noch Open Source Software oder doch nicht mehr zu empfehlen

Jetzt stellt sich mir die Frage, sind diese Themes denn dann ĂŒberhaupt noch Open Source Software und wenn nicht, dann sind diese auch nicht mehr zu empfehlen!

Beispiele
standardkonformer Hyperlink der W3C-Empfehlung
Hyperlink mit „border-bottom“
Hyperlink mit „box-shadow“
Es sind keine Unterschiede zu erkennen, genau das ist die fatale Situation, vor dem der Webdesigner steht. Zudem sind in dem Theme „Twenty Sixteen“ 6(sechs) CSS-Dateien mit 53kB, das entspricht etwa 9000 Wörter, da ist die Suche nach der entsprechenden Deklarationen schon sehr schwer.


Beispiel der Deklarationen „outline“ und „border“

Hier liegt kein Fehler vor, nur scheint „outline“ doch sehr redundant zu sein. Die Deklaration „outline“ ist ohne sie zu kennen nicht gleich von „border“ zu unterscheiden. Der Unterschied liegt darin, „border“ legt sich zuerst um den Inhalt und „outline“ beinhaltet „border“ und den Content. Aber einzeln gesetzt, ist „outline“ nicht von „border“ zu unterscheiden.

Hyperlink mit „border“
Hyperlink mit „outline“
Hyperlink mit blauer gepunkteter Linie fĂŒr „outline“ und roter Linie fĂŒr „border“

Einzelne Wörter in allen BeitrĂ€gen mit CSS ohne „class“ und „span“ formartieren

Oft besteht der Wunsch einzelne Wörter im Layout zu charakterisieren oder zu kennzeichnen. Bisher werden dafĂŒr die Optionen mit „class“, „span“, „div“ oder anderen Elementen genutzt.

Ich habe mir eine Methode erstellt wie dies auch ohne diese Element funktioniert, da zum Beispiel der Standard-Texteditor in WordPress solche Elemente nicht anzeigt.
einzelne-woerter-css3


Beispiele
1. Beispiel
Nutzen sie fĂŒr folgende Eingaben das Terminal.

... Eingaben das <em><strong>Terminal</strong></em>.

2. Beispiel
Nutzen sie fĂŒr Befehl fĂŒr die SystemĂŒbersicht inxi -Fxz.

... SystemĂŒbersicht <code>inxi -Fxz</code>.

Das dazugehörige CSS:
em strong { color:#c00; }
code { color: #00c; }

Telefonnummer direkt zum anwÀhlen

Die Internetnutzung durch Smartphones verlangt VerÀnderungen des Webdesigns um weiterhin oder anders Benutzerfreundlich zu sein oder zu verbessern.

Inhaltsverzeichnis

  1. Beispiel
  2. Symbole
  3. Verweise

Hier am Beispiel einer sofort anwÀhlbaren Telefonnummer direkt aus der Webseite heraus.
Mobil: 0172 – 3062373

Der entsprechende Code ist:

Mobil: <a href="tel:+491723062373">0172 - 3062373</a>

Symbole
Mit verschiedenen UTF-Symbolen ist das ganze auch noch individueller anzupassen.

AusfĂŒhrung Code
đŸ“± &#128241;
✆ &#9990;
☎ &#9742;
🖁 &#128385;
đŸ•œ &#128381;
📮 &#128244;

Das letzte Symbol wÀre geeignet um Ruhepausen in Kliniken, KindertagesstÀtten, Seniorenheime anzuzeigen oder andere sensible Orte zu kennzeichnen.


Verweise
http://unicode-table.com/de/search/?q=Phone
UTF8 mit Google suchen

SVG in WordPress einbinden

Diese Anleitung gilt auch fĂŒr andere Web-CMS.

Warum sind SVG-Dateien, also skalierbare Grafiken so interessant?
Weil diese schneller im Internet transportiert werden und sich somit die Webseite schneller öffnend. Außerdem entlastet es die Datenbank.

Vorsicht, nur selbst erstellte SVG-Dateien hochladen, den SVG-Dateien werden bewusst gesperrt um ausfĂŒhrbaren Code, der in SVG-Dateien versteckt werden kann, keinen Zugang zur Webseite und somit auch zu den Webseiten-Besuchern zu gewĂ€hren.

Hier am Beispiel des Farbrades mit 256 Farben.
Colorwheel-small

150 kB die Original-SVG-Datei
 65 kB als komprimierte PNG-Datei
 17 kB als optimierte JPEG-Datei
 20 kB als SVGZ-Datei, verlustfrei komprimierte SVG-Datei

Nun sieht es so aus, das JPEG die kleinste Datei ist und nicht die verlustfreie komprimierte SVGZ-Datei, aber JPEG hat die schlechteste QualitĂ€t und SVG ist das Original. Gerade fĂŒr Zeichnungen und Logos sind Artefakte wie in JPEG-Dateien keine Option!
Bei JPEG-Dateien besteht noch das Problem die Original-Datei aufzuheben, zusĂ€tzlich zur eingesetzten Datei mit den speziellen Abmessungen fĂŒr die jeweilige Webseite.


Um SVG-Dateien und auch komprimierte SVGZ-Dateien in WordPress zu nutzen, werden zwei Arbeitschritte benötigt.

1. muss dem Apache-Server mitgeteilt werden das diese Dateiformate, die zu Recht als gefÀhrlich eingestuft werden, zulÀssig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird WordPress dieselbe Mittelung gemacht ĂŒber das aktivierte Theme.

/wordpress-webseite/wp-content/benutztes-theme/
functions.php

/* MIME-Type svg und svgz zulassen */
    function custom_mtypes( $uwd ){
        $uwd['svg'] = 'image/svg+xml';
        $uwd['svgz'] = 'image/svg+xml';
        return $uwd;
    }
    add_filter( 'upload_mimes', 'custom_mtypes' );

3. Im Header der Seite muss ein eventuelles „no-svg“ gelöscht oder auskommentiert werden.

WordPress WooComerce – Zu wenig PHP-Speicher

Problem:
Wenn Sie mehrere Artikel in WooCommerce einstellen und eine umfangreiche Konfiguration haben, kann schnell das vorgegeben Limit von 40MB ausgereizt sein.

Lösung:
In der eigenen WordPress-Installation können Sie mit Hilfe von FTP die Einstellungen optimieren.

1. Hier eine Bildschirmaufnahme [Screenshot] des Problems.
Auf der Bearbeitungsseite [Backend] sehen Sie beispielsweise unter WooCommerce, dann Systemstatus, unter dem Eintrag WordPress PHP-Memory Limit, die standardmĂ€ĂŸig eingestellten 40 MB.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-01


2. Sie Auf Ihren Server mit einem FTP-Programm Ihrer Wahl, wie FileZilla, einlogen und
im Verzeichnis wp-includes die Datei defaults-constants.php zum Bearbeiten öffnen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-02


3. Setzen Sie diese Werte ein um einen Engpass im Speichermanagement auszugleichen:
Zuerst den 1. Wert WP_MEMORY_LIMIT auf 96M setzen.
Nun 2. Wert WP_MEMORY_LIMIT auf 128M setzen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-03


4. Falls wider Erwarten doch keine Änderung sofort sichtbar ist, kann
im WordPress-Wurzelverzeichnis die Datei wp-config.php zum Bearbeiten geöffnet werden.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-04


5. Folgenden Eintrag können Sie hier unter den ersten großen Kommentar setzen:
define( 'WP_MEMORY_LIMIT', '96M' );
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-05

Nun sollte Ihr Onlineshop fĂŒr 1.000 Artikel und mehrere Bestellungen am Tag gerĂŒstet sein.

seriöse Webseite

Was eine seriöse Webseite ist, kann ich nur von meinen Standpunkt erklÀren und mit meiner Erfahrung seit 1996.

Hier eine Priorisierung

Technik der Webseite
1. zu aller erst soll die Webseite sich schnell öffnen
2. nur verbreitete und OpenSource-Technologien verwenden
3. aktuelle Versionen nutzen, wie HTML5, CSS3, PHP ab 5.4, MySQL ab 5.x
4. responsives Verhalten der Webseite
5. ein modernes CMS fĂŒr Erweiterbarkeit und Bedienbarkeit
6. Bildformate in der Reihenfolge PNG, JPG und GIF
7. Videoformate in der Reihenfolge OGV, WebM und MP4
8. Hohe Sicherheit fĂŒr die Besucher mit weitestgehendem Verzicht auf Javascript

Erste Seite der Webseite, auch Frontpage, Homepage oder Mainpage
1. soll sie sofort zum Thema kommen
2. Zielgruppe direkt ansprechen
3. kein großes Bild, siehe 1. bei Technik der Webseite
4. die Webseite muss auf einem Smartphone lesbar sein
5. Navigation muss sichtbar sein
6. Impressum muss erreichbar sein
7. keine Fremdwerbung

Inhalt der Webseite
1. eigene Bilder, gerne auch groß
2. Farben des Logos und dem Inhalt der Webseite angepasst
3. aktuelle Inhalte mit mindestens ein Beitrag jeden Monat
4. Fakten
5. Navigation des Verstehens, also auch Kategorien und Schlagwörter
6. AufzÀhlungen oder Tabellen statt SchachtelsÀtze
7. Downloads fĂŒr Dokumente nur in PDF-Format anbieten

Was nicht auf eine seriöse Webseite gehört
1. Flash
2. Klammern
3. AbkĂŒrzungen
4. Bindestriche, wenn nicht vorgegeben
5. mehrfachen Superlative
6. FĂŒllwörter
7. Werbephrasen

Webdesign – Trennung von Content und Layout

Tatsache ist, die strikte Trennung vom „Text“-Inhalt und „Schön“-Aussehen, ist die Grundlage jedes Webdesigns und der ISO-Standard, sowie W3C-Standard, fĂŒr die Sprachen HTML, CSS, SVG und XHTML. Außerdem ist barrierefreies Web eine Forderung aller Behinderten-Organisationen, anderer Benachteiligten und zum Teil schon als Gesetz verabschiedet.


Problem:
Webdesignern wird die Arbeit oft mit untaugliches Material erschwert.
‱ Mail hat keine Anhang, sonden die Bilder werden zum Quelltext der Mail per „Drag and Drop“ hinzugefĂŒgt und nicht als separate Dateien, das vollkommenste Desaster
‱ Texte werden in Bilder integriert
‱ Photoshop*-Dateien, Word-Dateien, Excel-Dateien
‱ keine Rohdaten
Kein Webbrowser beinhaltet Photoshop, Word, Excel und so weiter, sondern nur Webtechniken!
Es werden in jedem Fall Rohdaten als Originalbild und Text oder CSV-Datei benötigt mit den Endungen *.txt und *.csv. Nein, Word ist kein Text-Editor, sondern eine proprietÀre Textverarbeitung.

Wie wirkt sich das aus?
Ein Photoshop-Bild ist Super fĂŒr Flyer, Plakete und Ă€hnliche Printmedien, dort kann der Content nur Schaden am Ersteller-Computer oder dem Computer des Verarbeitenden anrichten. Aber um Bilder durch das Internet zu schleusen ist eine gewaltige Internet-Technik zu bedienen, da die Bilder von Photoshop sehr groß sind und unnötige Sachen transportieren, macht es die Sache noch schwerer und könnte bei Computer-Sabotage sogar rechtliche Konsequenzen nach sich ziehen. Außerdem wird der zu lesende Content unleserlich.

Ergebnis:
Riesige Datenmengen, riesiges Defizit beim Vermitteln von Content, Bilder mit schlechtester QualitĂ€t und nach 2 Sekunden weißem Bildschirm ist der User schon fort auf der Konkurenz-Website. Ein rießiger Schaden fĂŒr alle.
Schranke


Im Einzelenen
1. Wie groß sind die Bilder
2. Darstellungsfehler


1. Wie groß sind Bilder
a) GrĂ¶ĂŸe bei Übertragung von der Website auf den Computer, also den Desktop
Das angezeigte Bild mit Schranke, unbearbeitet als Screenshot in der GrĂ¶ĂŸe 510×403 Pixel aufgenommen ergibt:
‱ 1.201.750 Bytes – Photoshop-Dateiformat, ohne HSV, ohne Adope-Zusatz-Content
‱ 616.326 – Gimp-Dateiformat
‱ 429.348 – PNG-Format
‱ 81.828 – JPG-Format
Schranke-Datei

b) GrĂ¶ĂŸe der ĂŒbertragenen Datei im Arbeitsspeicher
Jetzt die tatsĂ€chliche GrĂ¶ĂŸe im Arbeitsspeicher (RAM):
510x403x24RGB = 4.932.720 Bytes

FĂŒr direkt von Photoshop erstellte Dateien gilt im RAM:
510x403x48CMYK = 9.865.440 Bytes + unbekannter Content von Adobe.
Der mir unbekannte Content macht mir am meisten Sorgen, da er möglicherweise unerwĂŒnschten Content noch nachladen könnte, Adobe ist eine USA-Firma.

2. Darstellungsfehler
Gerade die Trennung von Content und Layout kann die geforderte barrierefreie Darstellung ermöglichen.
‱ Suchmaschinen die den Inhalt lesen, können keinen Text aus einem Bild auslesen
‱ textbasierte Browser sehen auch nichts
‱ was ist mit RSS und so weiter
‱ Blinde die mit mit ihrer Darstellungstechnik arbeiten, fĂŒhlen ebenfalls nichts
‱ die Tastenkombination „Strg++“ kann in allen Webbrowsern die Schrift mit ihren Vektoren klar und grĂ¶ĂŸer darstellen. Bei Text im Bild verschwimmt dieser, siehe meinen Beitrag http://ro-kom.de/mediendesign/.
‱ eigene Desktop-Einstellungen, wie zum Beispiel Kontrast, werden torpediert.

Ergebnis:
Derzeitige Gesetze und weltweit anerkannte Industrie-Normen werden missachtet und der User wird mit dem vom Photoshop-Macher erstelltem Kunstwerk terrorisiert, da dem User die Kontrolle ĂŒber den Content verloren geht.


Lösung:
Respekt vor dem Webmaster und dazu lernen, so bekommt die gewĂŒnschte Website ein rechtskonformes Aussehen und ein Top-Ranking bei den Suchmaschinen.
Eine weitere Lösung ist Gimp, da diese Programm OpenSourceSoftware ist und somit saubere Dateien erstellt ohne MĂŒll-Content.


*Photoshop ist eine Marke von Adobe, Kalifornien und eine proprietĂ€re Software mit 58% Schwarzkopien, das heißt jeder 2. Anwender ist kriminell!
Quellen:
https://de.wikipedia.org/wiki/Photoshop
http://www.photoshoplady.com/infographics/photoshop-evolution.html

Waipoua – Beitrag oben halten

Problem:
Ein Fehler im WordPress-Theme „Waipoua“ der sehr lĂ€stig ist, die Funktion „Beitrag auf Startseite halten“, frĂŒher „Artikel oben halten“, wird ignoriert.

Lösung:
Das ZĂ€hlen fĂ€ngt immer bei Null an! Die Datei „index.php“ muss an folgender Stelle editiert werden:

query_posts( $query_string . ‚&ignore_sticky_posts=1
zu
query_posts( $query_string . ‚&ignore_sticky_posts=0‚.