Guten Tag. (:
Wenn man krank ist, dann vertreibt man sich mit sinnlosen Sachen den Tag, damit Er so schnell wie Möglich vergeht, Ich habe heute mal etwas "rumgegoogelt" & gesehen, dass sehr viele Blogger das Problem mit der Caption Funktion von WordPress haben.
Caption-Funktion, was ist das?
Der Begriff Caption heißt übersetzt Beschriftung, in unserem Fall eine Bildbeschriftung.
Mit der Caption-Funktion könnt Ihr Euren eingebundenen Bildern kleine Beschriftungen zuordnen, dies ist zum Beispiel hilfreich, wenn Ihr das Bild kommentieren wollt. Das Beispiel dazu findet Ihr bei meinem Beitrag, Back at home..
Ok. Ich habe es verstanden, wie realisiert man so etwas?
Dafür gibt es im Internet sehr viele Beispiele, hier werde Ich Euch eine vorstellen. Dieses Beispiel ist am weitesten Verbreitet, deswegen werde Ich Euch auch dieses zeigen.
Die Vorgehensweise ist sehr einfach und selbsterklärend.
- Ihr müsst erst einmal gucken, ob in der CSS-Datei (Stylesheet) schon eine Funktion mit dem Namen "wp-caption" definiert ist, falls dies der Fall sein sollte, macht Ihr eine Sicherheitskopie Eurer CSS-Datei. Danach ersetzt Ihr den originalen "wp-caption" Teil mit dem unteren.
Falls Ihr es nicht in Eurer CSS-Datei definiert haben solltet, könnt Ihr den unteren Code einfach hineinkopieren.
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */
- Nun nehmt Ihr ein Bild Eurer Wahl & klickt auf die WordPressfunktion um Bilder hinzuzufügen.
Falls Ihr nicht wisst wo diese Funktion ist, Sie befindet sich neben "Hochladen/Einfügen" im Beitragseditor [
].
- In dem nun erscheinend Fenster ladet Ihr Euer Bild hoch.
- Nachdem Ihr das Bild hinzugefügt habt, werdet Ihr es in Eurem Editor als Vorschau sehen. Nun geht Ihr auf das Bild und klickt das linke Kästchen an [].
- Danach erscheint nochmal ein Fenster, in diesem Fenster tragt Ihr unter "Bildbeschreibung bearbeiten" die "Bildbeschriftung" ein [].
- Jetzt solltet Ihr das gleiche Ergebnis wie bei meinem oben genannten Beispiel erreicht haben.
Soviel zum Allgemeinen einsetzen von den Captions.
Wo liegt nun das Problem?
Wenn Ihr nun versucht, mehrere Captions nebeneinander zu platzieren, werde Ihr spätestens nach dem zweiten Caption erkennen, dass es gewaltige Darstellungsprobleme gibt.
Ich habe versucht das Problem mit ein paar Anpassungen der CSS-Datei zu lösen, jedoch scheitert es immer an ein paar Ecken.
Aha, ok. Wie hast Du es dann gelöst?
An dem Tag, wo Ich den oben genannten Beitrag verfasst habe, hatte Ich auch keine Lust mehr rumzumachen und habe versucht das Problem per HTML zu lösen. Die Lösung ist sehr einfach - Tabellen.
Wenn man eine Tabelle erstellt, dann werden die Captions nebeneinander dargestellt und das mit sehr wenig Arbeit.
Dafür müsst Ihr aber im HTML-Tab arbeiten, da WordPress die Änderungen im Visuellen Editor ignoriert.
So sieht das Ergebnis bei mir aus:
<table border="0" align="center">
<tbody>
<tr>
<td>
[caption id="" align="alignnone" width="132" caption="Flugzeug + tolles Wetter = *-* #1"]<a href="http://www.abload.de/img/dsc00518mmx0.jpg" target="_blank"><img title="Flugzeug + tolles Wetter = *-* #1" src="http://www.abload.de/thumb2/dsc00518mmx0.jpg" alt="" width="132" height="132" /></a>[/caption]</td>
<td><a href="http://www.abload.de/img/dsc005223722.jpg" target="_blank"><img title="Flugzeug + tolles Wetter = *-* #2" src="http://www.abload.de/thumb2/dsc005223722.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00532b7oi.jpg" target="_blank"><img title="Flugzeug + tolles Wetter = *-* #3" src="http://www.abload.de/thumb2/dsc00532b7oi.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://www.abload.de/img/dsc_1184qjl7.jpg" target="_blank"><img title="Für 4€ die Stunde. (;" src="http://www.abload.de/thumb2/dsc_1184qjl7.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc_11777kqs.jpg" target="_blank"><img title="*Keine Worte finden kann*" src="http://www.abload.de/thumb2/dsc_11777kqs.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc_11800vmf.jpg" target="_blank"><img title="Gute Nacht. <3 #1" src="http://www.abload.de/thumb2/dsc_11800vmf.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://www.abload.de/img/dsc00554483l.jpg" target="_blank"><img title="Gute Nacht. <3 #2" src="http://www.abload.de/thumb2/dsc00554483l.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00546m7ja.jpg" target="_blank"><img title="*-* <3 Karamell heißt die Süße." src="http://www.abload.de/thumb2/dsc00546m7ja.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00578vj06.jpg" target="_blank"><img title="Bursaspor - Konyaspor Spiel. Der Rauch kommt übrigens von Zigaretten!" src="http://www.abload.de/thumb2/dsc00578vj06.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://www.abload.de/img/dsc00582djbk.jpg" target="_blank"><img title="Bursaspor - Konyaspor Spiel. #2" src="http://www.abload.de/thumb2/dsc00582djbk.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00602vvk4.jpg" target="_blank"><img title="Bursaspor <3" src="http://www.abload.de/thumb2/dsc00602vvk4.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
Somit wäre das Problem gelöst, in man eine Tabelle mit drei Spalten und vier Zeilen erstellt.
Falls Ihr Fragen haben solltet, könnt Ihr gerne das Kontaktformular benutzen.
Mit freundlichen Grüßen,
~bursali
Bildbeschreibung bearbeiten
