Word­Press ma­nu­ell ak­tua­li­sie­ren

Es ist mir schon mehr­mals vor­ge­kom­men, dass ich “Word­Press” hän­disch up­daten muss­te. Bei­spiels­wei­se wenn ich meh­re­re Up­dates über­sprun­gen habe.

Hier eine Lö­sung für En­thu­si­as­ten. Vor­kennt­nis­se von Da­tei­ver­wal­tung, klei­nes PHP-Wis­sen und ver­ant­wor­tungs­vol­les Han­deln soll­ten aus­rei­chend sein für die­sen Lö­sungs­an­satz.

Wie im­mer, erst Back­up er­stel­len, dann Han­deln.

In­halts­ver­zeich­nis

Word­Press ma­nu­ell ak­tua­li­sie­ren wei­ter­le­sen

Word­Press miss­ach­tet W3C-Stan­dards


In­halts­ver­zeich­nis

  1. Heu­te am Bei­spiel des Un­ter­strich von Hy­per­links, auch Se­lek­tor “a”
  2. Die Nor­mung von HTML5 und CSS3 sind gro­ße Er­leich­te­run­gen
  3. Word­Press und die Ehr­lich­keit
  4. Noch Open Source Soft­ware oder doch nicht mehr zu emp­feh­len
  5. Bei­spiel der De­kla­ra­tio­nen “out­line” und “bor­der”

Im­mer wie­der wer­den von “Word­Press” be­währ­te Stan­dards miss­ach­tet. Hier im The­me “Twen­ty Six­te­en” von WordPress.org.


Heu­te am Bei­spiel des Un­ter­strich von Hy­per­links, auch Se­lek­tor “a”

Das CSS, Cas­ca­ding Style She­ets, gibt dem In­halt das Aus­se­hen. Die­se Tren­nung ist vom W3C, World Wide Web Con­sor­ti­um, auch ge­nau­so ge­wollt. Das CSS gibt es mitt­ler­wei­le in der 3. Ver­si­on und deckt für die meis­ten Web­de­si­gner auch ge­fühl­te 99% der ge­wünsch­ten Funk­tio­nen ab.


Die Nor­mung von HTML5 und CSS3 sind gro­ße Er­leich­te­run­gen

Wird ein Link ge­setzt, so wird die­ser so­fort ohne wei­te­re Lay­out-Ein­stel­lun­gen in der Far­be Blau und mit Un­ter­strich dar­ge­stellt. Au­ßer­dem be­kommt der Maus­zei­ger die Form des Poin­ters zu­ge­wie­sen. Das sind die 3 Stan­dards die in je­dem HTML-Do­ku­ment für Hy­per­links schon vor­de­fi­niert sind. Der Un­ter­strich wird da­bei von der De­kla­ra­ti­on “text-de­co­ra­ti­on” mit dem Wert “un­der­line” dar­ge­stellt.
Die­ser Stan­dard soll ge­währ­leis­ten, das nach­fol­gen­de Ar­bei­ten an der Web­sei­te und sei­nem CSS, ohne wei­te­ren Auf­wand und von je­dem an­de­rem Be­ar­bei­ter fort­ge­setzt wer­den kön­nen. Denn das schluss­end­li­che Werk, für das ein Web­de­si­gner be­zahlt wird, ge­hört dem Kun­den.


Word­Press und die Ehr­lich­keit

Jetzt das Aber, aber war­um ver­su­chen Web­de­si­gner die­se Stan­dards mit nicht kon­for­men Win­kel­zü­gen aus­zu­he­beln? Das bleibt wohl de­ren Ge­heim­nis. Das es ge­tan wird, das ist zwei­fel­los Tat­sa­che. Doch das es bei den emp­foh­le­nen und von der ei­ge­nen Platt­form ver­brei­te­te The­mes von Word­Press sind, das ist är­ger­lich und wi­der­spricht auch dem Ge­dan­ken von Open Source Soft­ware, näm­lich der Nicht­dis­kri­mi­nie­rung, und dem wich­tigs­tem De­sign­prin­zip, dem KISS-Prin­zip.

In ver­schie­den The­mes, die von Word­Press ver­trie­ben wer­den, sind mir sol­che nicht stan­dard­kon­for­men De­kla­ra­tio­nen von Ele­men­ten vor­ge­kom­men und sie är­gern mich so sehr das ich nun ei­nen Bei­trag zum Word­Press Stan­dart-The­me “Twen­ty Six­te­en” schrei­be. Denn hier wird der Un­ter­strich von Links er­stellt mit “box-shadow: 0 1px 0 0 cur­rent­Co­lor;”.

Ver­sucht nun je­mand die­sen Un­ter­strich zu än­dern oder zu ent­fer­nen wird er nicht fün­dig mit der Su­che nach “text-de­co­ra­ti­on”. Bei ei­nem an­de­rem The­me von Word­Press wird der Un­ter­strich mit “bor­der-bot­tom” er­stellt, das zu dem sel­bem Är­ger beim Web­de­si­gner führt.


Noch Open Source Soft­ware oder doch nicht mehr zu emp­feh­len

Jetzt stellt sich mir die Fra­ge, sind die­se The­mes denn dann über­haupt noch Open Source Soft­ware und wenn nicht, dann sind die­se auch nicht mehr zu emp­feh­len!

Bei­spie­le
stan­dard­kon­for­mer Hy­per­link der W3C-Emp­feh­lung
Hy­per­link mit “bor­der-bot­tom“
Hy­per­link mit “box-shadow“
Es sind kei­ne Un­ter­schie­de zu er­ken­nen, ge­nau das ist die fa­ta­le Si­tua­ti­on, vor dem der Web­de­si­gner steht. Zu­dem sind in dem The­me “Twen­ty Six­te­en” 6(sechs) CSS-Da­tei­en mit 53kB, das ent­spricht etwa 9000 Wör­ter, da ist die Su­che nach der ent­spre­chen­den De­kla­ra­tio­nen schon sehr schwer.


Bei­spiel der De­kla­ra­tio­nen “out­line” und “bor­der”

Hier liegt kein Feh­ler vor, nur scheint “out­line” doch sehr red­un­dant zu sein. Die De­kla­ra­ti­on “out­line” ist ohne sie zu ken­nen nicht gleich von “bor­der” zu un­ter­schei­den. Der Un­ter­schied liegt dar­in, “bor­der” legt sich zu­erst um den In­halt und “out­line” be­inhal­tet “bor­der” und den Con­tent. Aber ein­zeln ge­setzt, ist “out­line” nicht von “bor­der” zu un­ter­schei­den.

Hy­per­link mit “bor­der“
Hy­per­link mit “out­line“
Hy­per­link mit blau­er ge­punk­te­ter Li­nie für “out­line” und ro­ter Li­nie für “bor­der”

Stan­dard-Hy­per­link mit text-decoration: underline;

Hy­per­link mit border-bottom: 1px solid #3A78E0;

Hy­per­link mit box-shadow: 0 1px 0 #3A78E0;

out­line : 0;

Ein­zel­ne Wör­ter in al­len Bei­trä­gen mit CSS ohne “class” und “span” form­ar­tie­ren

Oft be­steht der Wunsch ein­zel­ne Wör­ter im Lay­out zu cha­rak­te­ri­sie­ren oder zu kenn­zeich­nen. Bis­her wer­den da­für die Op­tio­nen mit “class”, “span”, “div” oder an­de­ren Ele­men­ten ge­nutzt.

Ich habe mir eine Me­tho­de er­stellt wie dies auch ohne die­se Ele­ment funk­tio­niert, da zum Bei­spiel der Stan­dard-Text­edi­tor in Word­Press sol­che Ele­men­te nicht an­zeigt.
einzelne-woerter-css3


Bei­spie­le
1. Bei­spiel
Nut­zen sie für fol­gen­de Ein­ga­ben das Ter­mi­nal.

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

2. Bei­spiel
Nut­zen sie für Be­fehl für die Sys­tem­über­sicht inxi -Fxz.

... Systemübersicht <code>inxi -Fxz</code>.

Das da­zu­ge­hö­ri­ge CSS:
em strong { color:#c00; }
code { co­lor: #00c; }

Te­le­fon­num­mer di­rekt zum an­wäh­len

Die In­ter­net­nut­zung durch Smart­pho­nes ver­langt Ver­än­de­run­gen des Web­de­signs um wei­ter­hin oder an­ders Be­nut­zer­freund­lich zu sein oder zu ver­bes­sern.

In­halts­ver­zeich­nis

  1. Bei­spiel
  2. Sym­bo­le
  3. Ver­wei­se

Hier am Bei­spiel ei­ner so­fort an­wähl­ba­ren Te­le­fon­num­mer di­rekt aus der Web­sei­te heraus.
Mo­bil: 0172 — 3062373

Der ent­spre­chen­de Code ist:

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

Sym­bo­le
Mit ver­schie­de­nen UTF-Sym­bo­len ist das gan­ze auch noch in­di­vi­du­el­ler an­zu­pas­sen.
Aus­füh­rung Code
📱 &#128241;
&#9990;
&#9742;
🖁 &#128385;
🕽 &#128381;
📴 &#128244;

Das letz­te Sym­bol wäre ge­eig­net um Ru­he­pau­sen in Kli­ni­ken, Kin­der­ta­ges­stät­ten, Se­nio­ren­hei­me an­zu­zei­gen oder an­de­re sen­si­ble Orte zu kenn­zeich­nen.


Ver­wei­se
http://unicode-table.com/de/search/?q=Phone
UTF8 mit Goog­le su­chen

SVG in Word­Press ein­bin­den

Die­se An­lei­tung gilt auch für an­de­re Web-CMS.

War­um sind SVG-Da­tei­en, also ska­lier­ba­re Gra­fi­ken so in­ter­es­sant?
Weil die­se schnel­ler im In­ter­net trans­por­tiert wer­den und sich so­mit die Web­sei­te schnel­ler öff­nend. Au­ßer­dem ent­las­tet es die Da­ten­bank.

Vor­sicht, nur selbst er­stell­te SVG-Da­tei­en hoch­la­den, den SVG-Da­tei­en wer­den be­wusst ge­sperrt um aus­führ­ba­ren Code, der in SVG-Da­tei­en ver­steckt wer­den kann, kei­nen Zu­gang zur Web­sei­te und so­mit auch zu den Web­sei­ten-Be­su­chern zu ge­wäh­ren.

Hier am Bei­spiel des Farb­ra­des mit 256 Far­ben.
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 kleins­te Da­tei ist und nicht die ver­lust­freie kom­pri­mier­te SVGZ-Da­tei, aber JPEG hat die schlech­tes­te Qua­li­tät und SVG ist das Ori­gi­nal. Ge­ra­de für Zeich­nun­gen und Lo­gos sind Ar­te­fak­te wie in JPEG-Da­tei­en kei­ne Op­ti­on!
Bei JPEG-Da­tei­en be­steht noch das Pro­blem die Ori­gi­nal-Da­tei auf­zu­he­ben, zu­sätz­lich zur ein­ge­setz­ten Da­tei mit den spe­zi­el­len Ab­mes­sun­gen für die je­wei­li­ge Web­sei­te.


Um SVG-Da­tei­en und auch kom­pri­mier­te SVGZ-Da­tei­en in Word­Press zu nut­zen, wer­den zwei Ar­beitschrit­te be­nö­tigt.

1. muss dem Apa­che-Ser­ver mit­ge­teilt wer­den das die­se Da­tei­for­ma­te, die zu Recht als ge­fähr­lich ein­ge­stuft wer­den, zu­läs­sig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird Word­Press die­sel­be Mit­te­lung ge­macht über das ak­ti­vier­te The­me.

/word­press-web­sei­te/wp-con­ten­t/­be­nutz­tes-the­me/
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 Hea­der der Sei­te muss ein even­tu­el­les “no-svg” ge­löscht oder aus­kom­men­tiert wer­den.

Word­Press Woo­Co­merce — Zu we­nig PHP-Spei­cher

Pro­blem:
Wenn Sie meh­re­re Ar­ti­kel in Woo­Com­mer­ce ein­stel­len und eine um­fang­rei­che Kon­fi­gu­ra­ti­on ha­ben, kann schnell das vor­ge­ge­ben Li­mit von 40MB aus­ge­reizt sein.

Lö­sung:
In der ei­ge­nen Word­Press-In­stal­la­ti­on kön­nen Sie mit Hil­fe von FTP die Ein­stel­lun­gen op­ti­mie­ren.

1. Hier eine Bild­schirm­auf­nah­me [Screen­shot] des Pro­blems.
Auf der Be­ar­bei­tungs­sei­te [Ba­ckend] se­hen Sie bei­spiels­wei­se un­ter Woo­Com­mer­ce, dann Sys­tem­sta­tus, un­ter dem Ein­trag Word­Press PHP-Me­mo­ry Li­mit, die stan­dard­mä­ßig ein­ge­stell­ten 40 MB.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-01


2. Sie Auf Ih­ren Ser­ver mit ei­nem FTP-Pro­gramm Ih­rer Wahl, wie Fi­le­Zil­la, ein­lo­gen und
im Ver­zeich­nis wp-in­clu­des die Da­tei defaults-constants.php zum Be­ar­bei­ten öff­nen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-02
3. Set­zen Sie die­se Wer­te ein um ei­nen Eng­pass im Spei­cher­ma­nage­ment aus­zu­glei­chen:
Zu­erst den 1. Wert WP_MEMORY_LIMIT auf 96M set­zen.
Nun 2. Wert WP_MEMORY_LIMIT auf 128M set­zen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-03
4. Falls wi­der Er­war­ten doch kei­ne Än­de­rung so­fort sicht­bar ist, kann
im Word­Press-Wur­zel­ver­zeich­nis die Da­tei wp-config.php zum Be­ar­bei­ten ge­öff­net wer­den.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-04
5. Fol­gen­den Ein­trag kön­nen Sie hier un­ter den ers­ten gro­ßen Kom­men­tar set­zen:
define( 'WP_MEMORY_LIMIT', '96M' );
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-05

Nun soll­te Ihr On­line­shop für 1.000 Ar­ti­kel und meh­re­re Be­stel­lun­gen am Tag ge­rüs­tet sein.

se­riö­se Web­sei­te

Was eine se­riö­se Web­sei­te ist, kann ich nur von mei­nen Stand­punkt er­klä­ren und mit mei­ner Er­fah­rung seit 1996.

Hier eine Prio­ri­sie­rung

Tech­nik der Web­sei­te
1. zu al­ler erst soll die Web­sei­te sich schnell öff­nen
2. nur ver­brei­te­te und Open­So­ur­ce-Tech­no­lo­gi­en ver­wen­den
3. ak­tu­el­le Ver­sio­nen nut­zen, wie HTML5, CSS3, PHP ab 5.4, MyS­QL ab 5.x
4. re­spon­si­ves Ver­hal­ten der Web­sei­te
5. ein mo­der­nes CMS für Er­wei­ter­bar­keit und Be­dien­bar­keit
6. Bild­for­ma­te in der Rei­hen­fol­ge PNG, JPG und GIF
7. Vi­deo­for­ma­te in der Rei­hen­fol­ge OGV, WebM und MP4
8. Hohe Si­cher­heit für die Be­su­cher mit wei­test­ge­hen­dem Ver­zicht auf Ja­va­script

Ers­te Sei­te der Web­sei­te, auch Front­pa­ge, Home­page oder Main­page
1. soll sie so­fort zum The­ma kom­men
2. Ziel­grup­pe di­rekt an­spre­chen
3. kein gro­ßes Bild, sie­he 1. bei Tech­nik der Web­sei­te
4. die Web­sei­te muss auf ei­nem Smart­pho­ne les­bar sein
5. Na­vi­ga­ti­on muss sicht­bar sein
6. Im­pres­sum muss er­reich­bar sein
7. kei­ne Fremd­wer­bung

In­halt der Web­sei­te
1. ei­ge­ne Bil­der, ger­ne auch groß
2. Far­ben des Lo­gos und dem In­halt der Web­sei­te an­ge­passt
3. ak­tu­el­le In­hal­te mit min­des­tens ein Bei­trag je­den Mo­nat
4. Fak­ten
5. Na­vi­ga­ti­on des Ver­ste­hens, also auch Ka­te­go­ri­en und Schlag­wör­ter
6. Auf­zäh­lun­gen oder Ta­bel­len statt Schach­tel­sät­ze
7. Down­loads für Do­ku­men­te nur in PDF-For­mat an­bie­ten

Was nicht auf eine se­riö­se Web­sei­te ge­hört
1. Flash
2. Klam­mern
3. Ab­kür­zun­gen
4. Bin­de­stri­che, wenn nicht vor­ge­ge­ben
5. mehr­fa­chen Su­per­la­ti­ve
6. Füll­wör­ter
7. Wer­be­phra­sen