Texto.de – Mein WordPress Magazin

WP-infobox  

Ich mag sie diese WP Plugins, die wirklich Hilfreiches für Benutzer anbieten und so wie nebenbei auch noch den netten Nebeneffekt haben, dass sie der Suchmaschine auch gefallen. WP-Infobox ist so eines, das beides kann. Erfunden und zur Verfügung gestellt von Jonas Nordström aus Schweden – der neben der Programmiererei auch noch gerne reist. So stehts zumindest in seiner Sidebar: “Jonas is in Landskrona, Sweden and has traveled 17,714 km to 12 locations”- ok das ist jede Menge

Jonas thanks a lot for this great plugin

Was bietet WP-INFOBOX

WP-INFOBOX bietet die Möglichkeit einer Artikel-Inhaltsübersicht in einer kleinen Box, die sich ganz automatisch rechts neben dem Titel, also ganz am Anfang des Artikels setzt. Anschauen kannst Du Dir dies hier auf meiner Seite zumThema Basteln.

Die Mächtigkeit der CustomFields nutzt Jonas hier und den Filter für wp_content.

Wie funktioniert WP INFOBOX

WP-infobox Einstellungen

1. Das Plugin herunterladen.
2. Entpacken.
3. In den Ordner wp_plugins hochladen.
4. Admincenter==>Plugins==>aktivieren.

Nachher unter Admincenter==>Einstellungen==>WP INFOBOX aufrufen und einstellen wieviele Listenpunkte man standardmäßig sehen mag und ob man die Plugin CSS aktivieren mag oder aber die CSSAngaben selbst in die style.css des verwendeten Themes geben mag. Ich erklär weiter unten wie das geht.

WP-INFOBOX verwenden

Du schreibst einfach Deinen Artikel, vermutlich verwendest Du den WYSIWYG Editor. Hast Du Deinen Artikel fertig und zur Übersicht einige Überschriften (hoffentlich) angegeben. Speicherst Du den Artikel erstmal. Sicher ist sicher.

WP-infobox HTML

Danach wechselst Du in die HTML Ansicht.

Suchst Dir die Überschriften wo Du eine Sprungmarke setzen magst und tippst dort folgendes dazu:

Vorher:

<h3>Bügeltechnik</h3>

Nachher:

<h3><a id="buegeltechnik" class="invisible"></a>Bügeltechnik</h3>

WP-infobox ausfüllen

Dann scrollst Du nach unten und holst Dir die Box mit dem Titel *Info-Box*nach oben. Einfach mit der Maus anklicken und nach oben ziehen.

Nun füllst Du dort die Felder aus:

Hier ein Beispiellink zu einer der gesetzten Sprungmarken:

<a href="#buegeltechnik">Bügeltechnik</a>

Jetzt den Artikel nochmals speichern oder veröffentlichen oder aktualisieren-je nachdem was für Dich passt.

WP-INFOBOX Angaben in der style.css Deines Themes:

WP-INFOBOX erzeugt derzeit ein bisschen viel HTML, aber Jonas versprach dies zu ändern.

<div id="wpinfobox">						
  <h2 id="wpinfobox-title">Inhalt</h2>						
  <div>						
    <ul><li>
</li>
</ul></div></div>

Öffne die style.css des von Dir verwendeten Themes und suche Dir dort einen Platz den Du wiederfindest.

Dort tippst Du folgendes hinein-oder Du kopierst nachfolgende Angaben und änderst sie dann nach Deinen Wünschen einfach ab:

 
#wpinfobox {
	float: right;
	width: 180px;
	margin: 0 0 15px 15px;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
#wpinfobox h2#wpinfobox-title {
	background-image: none!important;
	background-color: #eee!important;
	padding: 4px 8px;
	margin: 0;
	font-size: 1em;
}
#wpinfobox div {
	padding: 8px;
	margin: 0;
}
#wpinfobox ul {
	list-style-position: inside;
	padding: 0;
	margin: 0;
}
#wpinfobox ul li {
	font-size: 0.8em;
	list-style-type: disc;
	padding: 2px 0 2px 0;
	background-image: none;
	margin: 2px 8px;
}

So nun fehlt noch die class invisible für den versteckten Anker:

.invisible{position:absolute;left:-5999px;width:12px;font-size:0.1em;height:0.1em;}

Somit dürfte der Link keinen Platz brauchen und unsichtbar sein.

wer sagt, dass dies auch Google mag?

Das sagt Google, das sagt Yoast und ich auch Und wenn ich Zeit habe, gibts das hier auch bald.