Du bist hier: Blog» WordPress Theme» Tipps und Tricks» Wanted-WordPress Steckbrief

Wanted-WordPress Steckbrief

Eine Schulklasse sucht einen Steckbrief. So erfand ich einen Quicktag dafür. Wanted-WordPress Steckbrief.

El-Q sucht nach einem Steckbrief . Wenn geht ganz einfach für die Benutzer. Ich kam auf die Idee eines Quicktags für WordPress.

edit am 3.11. Thomas hätte noch gern ein Bild dazu, also habe ich ergänzt. Ganz unten im Artikel.

Gebraucht wird dazu die quicktags.js von WordPress. ==>wp-includes/js/quicktags.js.
Original vorher unbedingt sichern! Nach den Änderungen notieren, dass da Änderungen drin sind!

Den Quicktag für WordPress erstellte ich nach einem Muster von El-O, doch ist dies jederzeit änderbar.

Bevor ich erkläre wie es geht hier gleich ein Muster, damit Du Dir ein Bild machen kannst, worum es geht.

(Muster) Steckbrief von Texto ;-)

über..
Name:
Texto
Spitzname:
mts
Wohnort:
Internet
Geboren:
27.09.XXXX
Sternzeichen:
Waage
Grösse:
160cm
über mich:
Kaffeetrinkerin.
Interessen…
Hobbies:
Lesen
Musikstil:
Jazz
Lieblingsband/Sänger/in:
Habe ich nicht
Lieblingsfilm:
Ooooops

Zum Quicktag, den ich “Wanted” nannte.

Öffne die quicktag.js mit einem Editor Deiner Wahl. Bedenke, ich kann nicht garantieren, ob Copy and Paste funktioniert.

Du suchst nach:

edButtons[edButtons.length]

Dort findest Du mit ein bisschen lesen die anderen Quicktags und unter oder über so einem fügst Du folgendes ein:

edButtons[edButtons.length] =
new edButton('ed_wanted'  // zB. ed_wanted
,'wanted'  // zB. wanted
,''
,''
,'a'
); // special case spezialfall

Suche nach:

function edShowButton(button, i) {

dort fügst Du nach:

else if (button.id == 'ed_link') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}

folgendes ein:

else if (button.id == 'ed_wanted') {
 document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertWanted(edCanvas, ' + i + ');" value="' + button.display + '" />');
}

Es ist unschwer zu erkennen, dass ich obige ed_link Zeile einfach kopierte und nur den Namen des Buttons änderte ;)

Jetzt scrollst Du bis ganz nach unten in dieser Datei und ganz am Ende fügst Du dies ein:

function edInsertWanted(myField) {
	var myValue = '\n\n<dl class="steck"><dt class="steck00">über..</dt><dd class="steck01">Name:</dd><dd class="steck02">' + prompt('Dein Name:', '');
	if (myValue) {
		myValue = ''
				+ myValue
				+ '</dd><dd class="steck01">Spitzname:</dd><dd class="steck02">' + prompt('Dein Spitzname/Deine Spitznamen:', '')
				+ '</dd><dd class="steck01">Wohnort:</dd><dd class="steck02">' + prompt('Dein Wohnort:', '')
		        + '</dd><dd class="steck01">Geboren:</dd><dd class="steck02">' + prompt('Geboren am:', '')
				+ '</dd><dd class="steck01">Sternzeichen:</dd><dd class="steck02">' + prompt('Dein Sternzeichen:', '')
				+ '</dd><dd class="steck01">Grösse:</dd><dd class="steck02">' + prompt('Deine Groesse:', '')
    			+ '</dd><dd class="steck01">über mich:</dd><dd class="steck02">' + prompt('Ueber Dich:', '')
    			+ '</dd><dt class="steck00">Interessen...</dt><dd class="steck01">Hobbies:</dd><dd class="steck02">' + prompt('Deine Hobbies:', '')
				+ '</dd><dd class="steck01">Musikstil:</dd><dd class="steck02">' + prompt('Dein bevorzugter Musikstil:', '')
				+ '</dd><dd class="steck01">Lieblingsband/S&#228;nger/in:</dd><dd class="steck02">' + prompt('Deine Lieblingsband/Saenger/in:', '')
				+ '</dd><dd class="steck01">Lieblingsfilm:</dd><dd class="steck02">' + prompt('Deine Lieblingsfilm:', '')
				+ '</dd></dl>\n\n'
				;
		edInsertContent(myField, myValue);
	}
}

Steckbrief mit Bild 

function edInsertWanted(myField) {
	var myValue = '\n\n<dl class="steck"><dt class="steck00">über..</dt><dd class="steck01">Name:</dd><dd class="steck02">' + prompt('Dein Name:', '');
	if (myValue) {
		myValue = ''
				+ myValue
				+'</dd><dd class="steckbild"><img src="' + prompt('Trage die URL des Bildes ein', 'http://')
				+'" alt=" ' + prompt('Kurze Beschreibung des Bildes', '')
		        + '" height="' + prompt('Gib die Hoehe des Bildes an:zB 200px', '')
				+ '" width="' + prompt('Gib die Breite des Bildes an:zB:400px', '')
				+ '" /></dd><dd class="steck01">Spitzname:</dd><dd class="steck02">' + prompt('Dein Spitzname/Deine Spitznamen:', '')
				+ '</dd><dd class="steck01">Wohnort:</dd><dd class="steck02">' + prompt('Dein Wohnort:', '')
		        + '</dd><dd class="steck01">Geboren:</dd><dd class="steck02">' + prompt('Geboren am:', '')
				+ '</dd><dd class="steck01">Sternzeichen:</dd><dd class="steck02">' + prompt('Dein Sternzeichen:', '')
				+ '</dd><dd class="steck01">Grösse:</dd><dd class="steck02">' + prompt('Deine Groesse:', '')
    			+ '</dd><dd class="steck01">über mich:</dd><dd class="steck02">' + prompt('Ueber Dich:', '')
    			+ '</dd><dt class="steck00">Interessen...</dt><dd class="steck01">Hobbies:</dd><dd class="steck02">' + prompt('Deine Hobbies:', '')
				+ '</dd><dd class="steck01">Musikstil:</dd><dd class="steck02">' + prompt('Dein bevorzugter Musikstil:', '')
				+ '</dd><dd class="steck01">Lieblingsband/S&#228;nger/in:</dd><dd class="steck02">' + prompt('Deine Lieblingsband/Saenger/in:', '')
				+ '<br /></dd><dd class="steck01">Lieblingsfilm:</dd><dd class="steck02">' + prompt('Deine Lieblingsfilm:', '')
				+ '</dd></dl>\n\n'
				;
		edInsertContent(myField, myValue);
	}
}

Für das Bild habe ich die class

dd.steckbild

verwendet.

Fertig. Speichern. Hochladen nach wp-includes/js/

Gestalten kannst Du das ganze in der style.css Deines Themes zum Beispiel so:

 
dl.steck {border-left:2px solid #000080;}
dt.steck00{font-weight:bold;margin:0;line-height:1.2em;}
dd.steck01{padding:2px 2px 2px 1.2em;margin:0;line-height:1.2em;}
dd.steck02{padding:2px 2px 2px 4.5em;margin:0;line-height:1.2em;color:#000;background-color:inherit;}

Mag sein, dass man hier auch Plugin draus machen kann, doch ich habe meine quicktags.js bereits so aufgemotzt, dass ich die sowieso nicht mehr hergebe ;) . Und es erscheint mir eindeutig einfacher, auch wenn ich mir bei Updates diese Quicktags.js immer sichern muss.

andere Quicktags Benutzer und deren Erkenntnisse:

Perun und Goatix . Bueltge hat ein Plugin, um einfache Quicktags, einfach zu ergänzen.

Bei Fragen einfach fragen, vor Umänderungen immer die Originaldatei sichern!

ich mag aber so einen Steckbrief lieber El-Q in einem der Kommentare als Link wiederfinden ;) und von Dir Thomas ein tolles Rezept lesen…
follow me on twitter monikatsRSS Abonnieren

ebenfalls interessante Artikel

03.11.06 Tipps und Tricks, · Gelesen: 51554 · heute: 6

6 Kommentare zu: "Wanted-WordPress Steckbrief"

  1. tolles teil. vielen dank.

    würde das gerne für eine rezeptdarstellung wählen. dazu brauche ich aber ein feld, in dem ein bild eingefügt werden kann. wie könnte ich das dann lösen ?

    Thomas03.11.06 09:59 | # |

  2. HI Thomas
    hat ein bisschen gedauert, weil ich heut viel zu tun hatte.

    Aber ich habe das Bild ergänzt.

    So siehst Du, wie leicht man hier was ergänzen oder weglassen kann, denn ich denke mir, wenn Du die Bilder immer gleich in der richtigen Größe hochlädst, kannst Du die Angaben width und height bei den Bildern gleich fix angeben. Doch der IE braucht diese Angaben.

    lg

    texto03.11.06 22:37 | # |

  3. Ich bin schwer beeindruckt!
    Danke für diese super Anleitung & für den Aufwand…
    Ich bin sicher, dass viele diese noch benutzen werden.

    El-Q04.11.06 20:32 | # |

  4. wenn das ganze jetzt vielleicht noch in ein formular übertragen werden könnte (damit ich Rezepte nach Einreichung nur noch freischalten müsste), wäre das sicher die optimale lösung für mich. Werde es auf jeden fall mal im Hinterkopf behalten.

    thomas19.11.06 22:59 | # |

  5. Ich versuche auch gerade den Steckbrief anzupassen. Ich möchte, dass die Antwort gleich neben der Frage erscheint und nicht darunter. Wie kriege ich das hin?

    Name: Martin

    und nicht

    Name:
    Martin

    Martin15.02.07 11:00 | # |

  6. Hi Martin
    das einfachste ist, Du nimmst dann beim “Martin” das dd class steck02 raus,

    Beispiel:

    <dd class="steck01">Spitzname: ' + prompt('Dein Spitzname/Deine Spitznamen:', '')

    lg

    texto15.02.07 11:30 | # |

  • Name and Mail are required.