Infobox ein WP Plugin für Benutzer und Suchmaschine

WP Infobox ein WP Plugin für Artikel Übersichten
WP Infobox ein WP Plugin für Artikel Übersichten

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
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

WP Infobox zum HTML wechseln
WP Infobox zum HTML wechseln

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. ;-)

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
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 und ich auch ;-) Und wenn ich Zeit habe, gibts das hier auch bald.

4

4 Beiträge zu “Infobox ein WP Plugin für Benutzer und Suchmaschine

  1. Kommentar Autor
    Jonas Nordström
    Kommentar

    You’re welcome! And thank YOU for testing it, for suggesting improvements (keep ‚em coming :) ) and I really liked this post, at least the parts I understood …

  2. Kommentar Autor
    Monika
    Kommentar

    Hi Jonas You are welcome too!

    The conclusion of this article: Your plugin is usability and search engine friendly- this said Google, Yoast and I ;)

    And I know if you would like to have the attention of the blogger community it is necssary to say a plugin is search engine friendly – if it is usability too -is this nice ;)

    kindly regards

  3. Kommentar Autor
    Manu
    Kommentar

    Das hört sich sehr gut an und das Tutorial zur Bedienung ist sehr gut.

    Aber ich hätte ein Problem mit der Position der InfoBox.

    Ich nutze h3 bis h6 für das Postintro. Wo setzt sich dann die Infobox hin und was ist mit dem Textpreview in der Blogübersicht?

  4. Kommentar Autor
    Monika
    Kommentar

    Hi Manu
    da du die css Angaben ja selbst designen kannst,kannst Du das PostIntro einfach auch woanders hinschieben.

    Versuchs einfach mal wo es sich bei dir hinschiebt- dann ist eine Lösung leichter gefunden so sie nötig ist.