Spam ver­hin­dern mit „Con­tact Form 7“

Wer un­ter Word­Press ein Kon­takt­for­mu­lar ein­rich­ten möch­te, hat mög­li­cher­wei­se schon von „Con­tact Form 7“ den Na­men ge­le­sen. Es ist eins der meist­ge­nutz­ten Kon­takt­for­mu­lar-Plugins. Sein gro­ßer Vor­teil liegt dar­in, be­son­ders an­pas­sungs­fä­hig zu sein.

Heu­te nun ein Bei­trag dar­über, wie man ohne frem­de Scrip­te an­de­rer Web­dienst­an­bie­ter und ohne Goo­g­les „re­CAP­T­CHA“ das For­mu­lar ge­gen Spam si­chern kann.

In­halts­ver­zeich­nis

Spam ver­hin­dern mit „Con­tact Form 7“ wei­ter­le­sen

Word­Press hängt sich auf im War­tungs­mo­dus

Pro­blem
Wie im vor­he­ri­gem Bei­trag ein eher sel­te­nes Pro­blem. Wenn ein Plugin nicht ak­tua­li­siert wird oder aus an­de­ren Grün­den der War­tungs­mo­dus sich nicht selbst aus­schal­tet.

Lö­sung
Mit FTP auf das Wur­zel­ver­zeich­nis von der Word­Press-In­stal­la­ti­on ge­hen und die ver­steck­te Da­tei, er­kenn­bar am füh­ren­den Punkt, .main­ten­an­ce lö­schen. Nicht ver­ges­sen sich die ver­steck­ten Da­tei­en an­zei­gen las­sen, meist im Menü “An­sicht” des FTP-Pro­gramms zu fin­den.

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;

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.