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.
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
Lösung
Hier nun ein die Lösung um in jedem Fall ein aktuelles WordPress auf seinem Webspace zu nutzen.
die gesamte WordPress-Installation löschen.
Immer wieder werden von „WordPress“ bewĂ€hrte Standards missachtet. Hier im Theme „Twenty Sixteen“ von WordPress.org.
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.
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.
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.
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.
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“
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.
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; }
Die Internetnutzung durch Smartphones verlangt VerÀnderungen des Webdesigns um weiterhin oder anders Benutzerfreundlich zu sein oder zu verbessern.
Inhaltsverzeichnis
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>
| AusfĂŒhrung | Code |
|---|---|
| đ± | 📱 |
| â | ✆ |
| â | ☎ |
| đ | 🖁 |
| đœ | 🕽 |
| đŽ | 📴 |
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
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.
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.
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.
WP_MEMORY_LIMIT auf 96M setzen.WP_MEMORY_LIMIT auf 128M setzen.
define( 'WP_MEMORY_LIMIT', '96M' );
Nun sollte Ihr Onlineshop fĂŒr 1.000 Artikel und mehrere Bestellungen am Tag gerĂŒstet sein.
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
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.
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
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
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‚.