Bilder verschwinden beim Visuellen Editor

Der Editor filtert einige Benutzereingaben: Aus (in reinem HTML bedeutungslosen) Zeilenumbrüchen werden Absätze, aus normalen Anführungszeichen werden typoraphische Anführungszeichen und aus WordPress wird automattisch WordPress.

Ich müsste ein wenig recherchieren, ob diese unschöne Ersetzung beim Aufruf des visuellen Editors durch WordPress oder TinyMCE erfolgt, aber Tatsache ist, dass die Eingabe so nicht vorgesehen ist. Code-Snippets werden üblicherweise mit Shortcodes eingefügt (was zugegeben etwas zuviel des Guten wäre, wenn es um eine einzige Stelle geht) oder du gibst <div>-Tags mit CSS-Klassen ein, die dann über ein Custom Style Sheet formatiert werden. Gibst du z.B.

<div class="one">
  <div class="two">Hello</div>
</div>

im Texteditor ein und wechselst dann zwischen visuellem und Text-Modus, bleibt der Code erhalten. Im Custom Style Sheet kannst du dann die Formatierung unterbringen.

.one {
  float:right;
  width:450px;
  height:330px;
  margin-left:20px;
  background-image: url(http://testweb.urlaub-hiddentrup.de/wp-content/uploads/2016/05/hermann1.jpg);
  background-repeat:no-repeat;
  background-position:top right;
}

Noch sauberer wäre es vermutlich, einfach die Bilder einzufügen und mit einer CSS-Klasse zu versehen. Um die Bilder übereinander zu legen, braucht es keine Verschachtelung.

Wenn du grundsätzlich vor hast, HTML im Editor einzugeben, solltest du dir eines der Plugins zum Stichwort „RAW HTML“ anschauen.

CSS ist zwar hier nicht unser Thema, aber ganz kurz skizziert könntest du einen Bilderstapel so realisieren: https://jsfiddle.net/0gwta3um/

Das CSS würde ich wie gesagt in ein Custom Style Sheet packen (z.B. mit Simple Custom CSS), die Bilddateien ganz normal in einen Beitrag einfügen und mit CSS-Klassen versehen.