Thema anpassen

In WordPress hat man vollen Zugang zum Source-Code eines Themas. Man kann daher über Die Funktion Dashboard -> Design -> Editor so ziemlich alles verändern. Aber das sollte man nicht tun.

Genau so wie PlugIns unterliegen auch Themen einer fallweisen Aktualisierung. Wenn daher ein Update erfolgt, kann es sein, dass diese Änderungen wieder durch eine neue Version überschrieben werden.

In WordPress ist dieser Fall der Anpassung eines Themas bereits geregelt. Man legt nämlich ein so genanntes Child-Thema an, und das geht so:

Man erzeugt einen neuen Ordner mit dem Namen des Child-Theme an. Nehmen wir an, das Thema TwetyFifteen soll verändert werden.

https://panel.clubcomputer.at -> Einloggen

DateiManager -> „Domäne“ -> wwwroot -> (wp ->) -> wp-content -> themes

Hier legt man den Neuen Ordner twentyfifteen-neu an.

NeuesThema

In diesem Ordner legt man zwei Dateien an: style.css und functions.php (Im Bild ist auch noch die Datei Hintergrund1.jpg dazugekommen, die für den geänderten Stil erforderlich ist.)

NeuesThema1

In style.css schreibt man den Kopf der gleichnamigen Datei aus dem ursprünglichen Thema twentyfifteen.

/*
Theme Name: Twenty Fifteen Muth
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: Franz Fiala
Author URI: https://http://mondon-muth.clubcomputer.at//
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Template: twentyfifteen
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

.hentry {
background-color: #dddddd !important;
background-image: url("Hintergrund1.jpg");
color: white;
}

Wichtig ist die markierte Zeile „Template: twentyfifteen“, die sagt, welches Thema die Grundlage für diese Änderungen/Ergänzungen ist.  Nach dem Kopf (markiert durch /*… */) kommen alle Stile, die anders sind als im Original. In diesem Beispiel wurde der Stil mit der Klasse .hentry neu formuliert. Die Hintergrundfarbe wurde von ursprünglich #fff auf #dddddd geändert, die Textfarbe ist jetzt weiß und es gibt ein Hintergrundbild. (Gleichzeitige Angabe von Hintergrundfarbe und Hintergrundbild ist eigentlich zuviel, das Bild setzt sich durch.)

Kleine Schwierigkeit: Bei der css-Datei fehlt rechts neben dem Dateinamen der Bleistift, man kann die Datei daher nicht bearbeiten. Man kann daher entweder die Datei mit Ftp uploaden oder einen Trick anwenden: Man benennt die Datei mit dem Symbol rechts in style.css.txt um, dann kann man die Datei normal bearbeiten. Nach der Einfügung des Textes, benennt man die Datei wieder auf style.css um.

In functions.php schreibt man Folgendes:

<?php
function theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Diese Zeilen sorgen dafür, dass die neue Datei style.css auch korrekt an die bestehende Datei im Ordner twentyfifteen angehängt wird.

Jetzt muss man das Thema nur noch aktivieren. In Dashboard -> Design -> Themes sollte man das neue Thema finden. Anklicken und aktivieren. Fertig.

Die genauere Beschreibung findet sich hier:
http://codex.wordpress.org/Child_Themes

Funktion mail() deaktiviert

Wenn Du als Administrator Deiner WordPress-Seite die folgende Fehlermeldung siehst, dann hast Du bei der Installation etwas übersehen,

mail

Im Allgemeinen kommt diese Fehlermeldung, wenn man sein Passwort vergessen hat und man sich das Passwort zusenden lassen möchte.

Du bist jetzt in einer schwierigen Situation, weil Du Dich ausgesperrt hast und nicht mehr weißt wie das Passwort gelautet hat.

Was hättest Du tun sollen?

Die Installationsanleitung in den PCNEWS lesen oder diesen Beitrag.

Es gibt im Internet einige Hinweise für diesen Fall. Die meisten Hinweise enden aber damit, dass man sich das Passwort mit der Funktion „Passwort zusenden“ wieder bekommt. Aber das funktioniert nicht, weil mail() nicht funktioniert und installieren kann man es auch nicht, weil man ja nicht ins System kann.

Eine andere Gruppe von Hinweisen verweist auf Tools im Internet, mit denen man sich einen Password-Hash generieren lassen kann und diesen Hash trage man dann in die WordPress-Datenbank ein.
Beispiel. Das funktioniert aber bei WordPress nicht, weil in der Datei wp-config.php ein zufälliger Salt-Wert eingetragen ist, der dafür sorgt, dass dasselbe Passwort in verschiedenen WordPress-Installationen verschieden ist.  Man bräuchte daher ein solches Passwort-Tool, in das man vorher seinen Salt-Wert einträgt und danach den Hash-Wert generieren lässt.

Schließlich bleibt folgender Weg: man installiert ein temporäres Hilfs-WordPress in derselben Datenbank und verwendet als „Salt“ jene zufälligen Werte, die in die verschlossene Version eingetragen worden sind. Man muss darauf achten, als Tabellenpräfix etwas anderes als „wp_“ zu verwenden, damit die bestehenden Tabellen nicht überschrieben werden, also etwa „wptemp_“. Beim ersten Aufruf wird man um einen User und um ein Passwort gefragt. Das merkt man sich und schließt die Installation ab.

Man öffnet im WebSitePanel die MySql-Datenbank und findet dort einen Tabellensatz mit dem Präfix „wp_“ und einen weiteren mit „wptemp_“.  In der Tabelle wptemp_users gibt es einen einzigen Record mit dem user_login admin und einem Hash-Wert in user_pass. Diesen Hash-Wert kopiert man und trägt in die Tabelle wp_users beim User admin (oder eben beim sonstigen gewünschten User) ein.

Das wars, jetzt kann man die Tabellen wptemp_* löschen und man hat wieder Zutritt zu seinem WordPress-Web.

 

 

Einführung Vektorgrafik

Vektor-Grafik

Alle Beispieldateien

SVG ist dem HTML ganz ähnlich, nur geht es statt um Text um Bildelemente. Genau wie in HTML kann man auch Bilder einfügen und diese Bilder sind externe Dateien.

Anders als bei HTM kann man aber Bilder einbetten oder mit einem Link verbinden. In den Beispielen sind alle Bilder eingebettet. Der Grund: SVG inkludiert den Speicherort als absoluten Pfad im Kode. Wenn man dann die Beispiele an einen anderen Ort verschiebt, sieht man die Bilder nicht. Das ist ganz ähnlich wie bei einer Html-Datei mit „Broken Links“.

Die Dateien, um die es hier geht, heißen svg (Scalable Vector Graphics). In Windows 8/8.1 ist SVG mit keiner Anwendung verknüpft. In Windows 10 ist SVG mit dem Edge-Explorer verknüpft und kann leider nicht auf einen anderen Browser geändert werden.

Basics

Was ist Vektorgrafik?
https://de.wikipedia.org/wiki/%C3%96sterreich

Flagge
RM -> Bild in neuem Tab öffnen -> zeigt png-Datei
RM -> Link in neuem Tab öffnen -> zeigt svg-Datei
https://de.wikipedia.org/wiki/Datei:Flag_of_Austria.svg

Wie schaut eine SVG-Datei aus?

<?xml version="1.0" encoding="UTF-8"?>
<sdirvg xmlns="http://www.w3.org/2000/svg" width="900" height="600">
<rect fill="#ed2939" width="900" height="600"/>
<rect fill="#fff" y="200" width="900" height="200"/>
</svg>

Wappen
RM Link in neuem Tab öffnen
https://de.wikipedia.org/wiki/Datei:Austria_Bundesadler.svg

Der Wappen-Adler ist komplexer, und er ist mit Inkscape gezeichnet. Es gibt auch eine genaue History und man sieht, der „Adler“ ist in beständiger Entwicklung.

Beispiele für SVG

Ordner: 90 Beispiele

Beispielbilder auf Wikimedia
https://commons.wikimedia.org/wiki/Main_Page

Kamera
https://commons.wikimedia.org/wiki/Main_Page#/media/File:Camera2_mgx.svg
-> more details
https://upload.wikimedia.org/wikipedia/commons/6/66/Camera2_mgx.svg

666 SVG-Bilder
https://commons.wikimedia.org/wiki/Category:SVG

Quelle für Bilder
http://all-free-download.com/free-vector/christmas.html
http://all-free-download.com/free-vector/download/christmas_ball_frame_310545.html
3MB
http://all-free-download.com/free-vector/download/christmas_hats_04_vector_163456.html
5.8 MB

Google Suche  nach  Svg-Bildern

„free svg images owls“ -> Images

liefert eine große Zahl von Bildern, zum Beispiel auch zwei Eulen
Man muss sich anmelden (zum Beispiel mit dem Facebook-Account)
Es stellt sich bald heraus, dass diese Dinge kostenpflichtig sind, auch die beiden Eulen (50 Cent)
http://www.misskatecuttables.com/products/thanksgiving/freebie-of-the-day-thanksgiving-owls.php?&cuid=1fc67300a83adf2f09b8fa8107920231
Aber man bekommt die png-Datei, die ist sogar freigestellt
Und diese Datei kann man problemlos in eine Vektor Grafik umwandeln, kostet nichts.
Und dann ist die Datei beliebig skalierbar. Siehe später.

Inkscape ist ein Vektor Zeichenprogramm

Ordner: 10 Linien Kontur Füllung

Bleistift wählen
Linienzug zeichnen
Kontur und Füllung einstellen
Bild speichern (z1.svg)
Bild exportieren (z1.png)
Bild importieren und vergleichen mit Original (z2.svg)

Verschiedene Objektformen (z3.svg)
Sterne und Polygone (z4.svg, z5.svg)

Bilder anordnen

Ordner: 20 Bilder anordnen

Gitter definieren 1cm
Bilder laden
Bilder an Gitter ausrichten
w1.svg
Bilder verknüpfen oder einbetten -> einbetten
Vergleich der Dateigröße
Vorteil verknüpfen: klein, nur mit den Bildern gemeinsam protabel
Vorteil einbetten: nur eine Datei, portabel
Bilder mit Rahmen trennen
Zwei Rechtecke zeichnen
Rechtecke zu einem Kreuz kombinieren
Keine Kontur, nur Füllung
Beschriftung: Füllen + Kontur
w2.svg

Klonen

Ordner: 40 Schachbrett
Quadrat zeichnen, schwarz einfärben
duplizieren
Weiß einfärben
Gruppe duplizieren
Zeile duplizieren
w1.svg

Quadrat zeichnen, schwarz einfärben
klonen
klonen -> Gekachelte Klone
Verschiebung x, pro Reihe 100%, abwechseln
8 Reihen, 4 Spalten
Man braucht eigentlich nur ein Quadrat, die anderen erzeugt man durch ein Hintergrundquadrat
w2.svg

Vektorisieren

Ordner: 60 Vektorisieren/Eulen

http://www.misskatecuttables.com/products/thanksgiving/freebie-of-the-day-thanksgiving-owls.php?&cuid=1fc67300a83adf2f09b8fa8107920231

Bild markieren
Pfad -> Bitmap nachzeichnen -> Farben -> 1..10..20 (Glätten, Scans stapeln, Hintergrund entfernen)
w4.svg

Overlays

Ordner: 30 Profilbild-FB

jpg Profilbild
png Flagge Frankreich
jpg Black Ribbon
svg Flagge EU (Gruppe mehrerer Objekte)
w1.svg

Profilbild vektorisieren
w2.svg
Alle löschen bis auf eines
black ribon transparent machen
Filter -> Füllung und Transparenz -> Helligkeitsradierer
570, 641, 1
Französische Fahne vektorisieren (Farben -> 3 Farben)
Achtung auf Original (Bild) und Vektor (Objekt)
w3.svg

Weihnachtsbild in Weihnachtskugel

95 Christbaumkugel

Man bekommt eine ZIP-Datei mit den Formaten .ai, .eps und .jpg
Man kann nur .ai verwenden
w1.svg
Bild hereinholen und in den Kreis positionieren
Geht nicht, weil die Sicht durch ein Objekt verstellt wird
w2.svg
Muster -> Gruppierung aufheben, Weißen Kreis entfernen, aha, der war drübergelegt
Gesicht kreisrund ausschneiden und überdie Grafik legen
Kreis auf Gesicht platzieren
Kreis und Gesicht markieren
Objekt -> Ausschneidepfad setzen -> Gesicht wird zugeschnitten
Gesicht in den Vordergrund
Gesicht skalieren und auf Weihnachtsbild setzen
w3.svg

Weihnachtsbild in Weihnachtskugel auf Christbaumkarte

Man muss bedenken, dass die Sternderln und die weiße Kugel nicht ein sondern viele Objekte sind.
Aber diese Objekte liegen übereinander und daher ist es schwierig, einfach nur durch draufklicken sie zu isolieren.

Problem der rote Hintergrund und die Sterne stören, wir wollen nur die Kugel und die Banderln haben.
Christbaumkugel als .ai-Datei laden (Christmas_ball_frame.ai) und als .svg speichern.
Das Bild ist detwa doppelt so groß, weil svg kein Binärformat ist.
Wir müssen das Bild zerlegen, also die Gruppierung aufheben.
Danach befördern wir die Bestandteile in verschiedene Ebenen.
Zuerst ist alles in Ebene1
Wir erstellen eine Ebene Hintergrund unter Ebene 1
Wir erstellen eine Ebene Banderln (weiß) über Ebene 1
Wir benennen Ebene1 um in Sternderln (rot)
Die Ebenen sind also
Banderln (weiß)
Sternderln (rot) <– hier ist alle drinnen
Hintergrund [ganz unten]

Speichern

Alles markieren -> Objekt -> Gruppierung aufheben
Nichts markieren
Tab (markiert das unterste Objekt) das ist in diesem Fall einfach ein Rahmen, dieses Objekt löschen wir einfach.
Nichts markieren
Tab (markiert das unterste Objekt) das ist in diesem Fall der rote Hintergrund.
RM Verschiebe zu Ebene Hintergrund
Ebene Hintergrund sperren

Gruppierung aufheben, Ebene 1 unsichtbar machen
Ein weißes Objekt nach dem anderen in die (unsichtbare) Ebene „Banderln (weiß)“ verschieben. Damit verschwinden sie.

Damit haben wird Objekt in drei Ebenen zerlegt, die wir unabhängig voneinander bearbeiten können.

Ordner 95 Christbaumkugel -> Christmas_ball_frame-layered.svg

Weihnachtskarte mit vielen Gesichtern

Ordner: 99 Weihnachtskarte

Altes PlugIn konnte nicht entfernt werden

Eine Installation, die bis zum ersten Update eines PlugIn problemlos gelaufen ist, brachte folgende Fehlermeldung:

PlugInUpdateFehler

Es ist bemerkenswert, dass alle andere Vorgänge, wie das Schreiben eines neuen Beitrags, problemlos funktioniert haben.

Des Rätsels Lösung war eine Kleinigkeit beim Einrichten der Rechte für diese Installation.

PlugInUpdateFehlerRechte

Die Schreibrechte waren zwar gesetzt aber nicht die Leserechte. Bei der Installation eines PlugIn wird offenbar nach dem Löschen der bestehenden Dateien durch Lesen des Inhalts geprüft, ob diese Dateien auch tatsächlich gelöscht worden sind und genau an dieser Stelle passiert der Fehler. Nach Ankreuzen der Spalte „Read“ war der Fehler behoben und die Updates funktionieren wieder.

Was tun im Fehlerfall? 

Hier ein Tipp aus dem WordPress-Forum:

Die folgenden Zeilen in die Datei wp-config.php einfügen:

// Turn debugging on 
define('WP_DEBUG', true);  

// Tell WordPress to log everything to /wp-content/debug.log 
define('WP_DEBUG_LOG', true);  

// Turn off the display of error messages on your site 
define('WP_DEBUG_DISPLAY', false);  

// For good measure, you can also add the follow code, which will hide errors from being displayed on-screen 
@ini_set('display_errors', 0);  

Jetzt den fehlerhaften Zustand herbeiführen und den Inhalt der Datei /wp-content/debug.log analysieren.

Inline-SVG

Ein SVG-Konstrukt schaut zum Beispiel so aus:

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>

Würde man diesen Kode im WordPress-Editor im Text-Modus einfügen, würde man in der Ausgabe nichts sehen.  Das liegt daran, dass der SVG-Kode in mehreren Zeilen dargestellt wird. Bringt man den Kode in eine lange Zeile, funktioniert die Darstellung. Hier also der Kode:

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" /></svg>

Das ist ein Kreis:

 

 

Links

Grundlegendes

Kurse

Freie Bilder

Viewer und Editoren

Office-Dokumente einbinden

Office-Dokumente exportieren

Die Publikation von Office-Dokumenten erfolgt normalerweise so:

Man speichert das Dokument im Html-Format und inkludiert diesen Kode in eine WordPress-Seite. Den Kopfteil <head>...</head> sowie die Tags <htm></html> und <body></body> entfernt man ebenfalls inklusive eventueller Argumente.

Diese Vorgangsweise hat aber den Nachteil, dass man bei einer Änderung des Office-Dokuments diesen Vorgang wiederholen muss. Immer wieder.

Office-Dokumente einbetten

Wer also Office-Dokumente publizieren will ohne diese als Html zu exportieren, kann die die Online-Versionen von Office nutzen und diese Dokumente einbetten.

So funktioniert das:

  1. Man öffnet den OneDrive (https://onedrive.live.com). (Natürlich muss man ein Microsoft-Konto haben.)
  2. Man öffnet dort (zum Beispiel) Excel Online und erstellt eine Tabelle und speichert sie auf dem OneDrive. Als Beispiel habe ich die Vergleichstabelle der Cloud-Systeme für den Clubabend am 3.11.2015 unter dem Namen „Clubabend Cloudsysteme“ im Ordner Öffentlich/Publikationen gespeichert.
  3. Über FILE -> SHARE -> EMBED holt man sich ein Kodeschnipsel, welches man dann auf der Seite einbettet. In meinem Beispiel schaut das Kodeschnipsel so aus:

<iframe width="450" height="500" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?cid=EA3281BB6CC21929&resid=EA3281BB6CC21929%21360087&authkey=AN8bDcS-9mcMLyw&em=2&wdAllowInteractivity=False&wdHideHeaders=True&wdDownloadButton=True"></iframe>

Im Editor schaltet man von Visuell auf Text um, denn in Visuell würde der Kode verändert werden, und fügt an

Und hier die Einbettung:

Man kann am Kode erkennen, dass der Dateiname bedeutungslos ist, dass also die Einbettung auch dann funktioniert, wenn der Dateiname geändert wird.

Diese Einbettung funktioniert mit OneDrive und Google Drive gleichermaßen. Ein Beispiel für die Einbettung einer Google Tabelle findet man hier: http://fiala.cc/franz/erinnerungen/ich/arsenal/chronik-arsenal/