WordPress Theme Blog

Nach einem kurzen Ausflug in die englischsprachige Blog-Welt möchte ich hier auf webdemar.com interessante Artikel zu WordPress Themes, Tipps, Tricks und Hacks veröffentlichen. Google hat mir noch im alten Jahr einen PR 6 geschenkt. Dieser immensen Länge des grünen Balkens (ist der noch irgendwie wichtig?) versuche ich dann in Sachen Qualität gerecht werden

Kostenlose WordPress-Themes

Auch weiterhin werde ich auf webdemar.com schlichte und einfach anzupassende WordPress-Themes veröffentlichen. Bestehende Themes werde ich überarbeiten.

Open-Source Premium WordPress Themes

Geplant habe ich auch die Veröffentlichung von höherwertigen Premium WordPress Themes. Diese werde ich nach WordPress-Philosophie kostenlos zum Herunterladen auf themeshift.com anbieten. Zugang zu einem Support-Forum in drei Sprachen (Deutsch, Englisch, Spanisch) bekommt man dann gegen eine geringe Gebühr.

Personalisierte WordPress-Themes

Für höhere Ansprüche und personalisierte WordPress-Themes, die auf ganz individuelle Anforderungen angepasst werden, stelle ich auf bacuba.com mögliche Lösungen vor.

WordPress-Community

WordPress ist das zentrale Thema dieses Weblogs und meiner täglichen Arbeit. Ich freue mich auf interessante Entwicklungen in der deutschen Community, tolle Projekte, die andere auf die Beine stellen und interessante Diskussionen mit vielen WordPress-Interessierten. So freuet Ihr Euch auch

Fazit

Ich habe mich letztlich für das Aquaticus.Social-Set entschieden. Werde bei der tollen Auswahl auch sicher mal wechseln

The WordPress theme deCoder ist already compatible to WordPress 2.7 with threaded comments and sticky posts. But it is backward compatible to older versions. An important feature is the multi-level dropdown Superfish category menu.

Details

• simple, clean easy customizable layout
• fixed width, 2 columns, right sidebar, widget ready
• multi-level dropdown menu (IE problems?)
• threaded comments with avatars
• sticky posts

Compatible up to

• WordPress 2.7 (backward compatible to 2.5)
• Firefox 2 - 3
• Internet Explorer 7
• Safari
• Opera

Download & Preview

There were some bugs with the comment bubbles and some css stuff to fix (eg. children in lists of sidebar, headings, basic css elements). I also added a Superfish multi-level dropdown menu and made the whole thing compatible to WordPress 2.7 (see details).

Details

• simple, clean easy customizable layout
• fixed width, 2 columns, right sidebar, widget ready
• multi-level dropdown menu (IE problems?)
• threaded comments with avatars
• sticky posts

Compatible up to

• WordPress 2.7 (backwards compatible to 2.5)
• Firefox 2- 3
• Internet Explorer 7
• Safari
• Opera

Download & Preview

Ist Directory Listing bei Dir möglich?

Bei vielen Internet-Providern ist das Directory-Listing bereits unterbunden, jedoch beileibe nicht bei allen. Um zu testen, ob es bei Dir möglich ist, gib beispielsweise folgendes in die Adresszeile des Browsers ein.

http://deine-url.de/wp-content/plugins

Ansicht Directory-Listing

Solltest Du dann eine Auflistung Deiner verwendeten Plugins sehen, würde ich weiterlesen.

Wo ist die Gefahr?

Wenn sich wie in der Abbildung oben auf so einfache Weise einen genauen Überblick über Dateien und in diesem Fall Plugins verschaffen kann, sind gezielte Angriffe auf mögliche Sicherheitslücken in Plugins möglich.

Und davon mal abgesehen hast Du vielleicht auch Dateien auf Deinem Server, die nicht die ganze Welt etwas angehen. Mit dem Directory-Listing kann man mit dem Browser gemütlich durch Deine Dateien stöbern. Schon gewusst?

Wie kann ich das unterbinden?

Die Auflistung von Dateien durch den Browser kann man ganz einfach mit ein paar Zeilen in der .htaccess unterbinden. Öffne dazu die .htaccess in Deinem Root-Verzeichnis und füge folgende Zeilen hinzu:

# Prevents directory listing
Options -Indexes

Unser aller Freund - der Hacker - bekommt dann folgendes Bild geboten.

Directory-Listing unterbunden

Fazit:

Du siehst, mit ein paar einfachen Schritten ist eine große mögliche Sicherheitslücke einer WordPress-Installation geschlossen. Es bedarf keiner fortgeschrittenen Kenntnisse, seine WordPress-Installation Schritt für Schritt sicherer zu machen.

Relevante Links:

• WordPress Security-Tipps

Was soll am Ende dabei herauskommen?

Damit wir wissen, worum es geht, sollten wir uns zunächsts erstmal ein › Beispiel ansehen.

Download jFlow 1.2

Die nötigen Dateien laden wir uns im Gesamtpaket jFlow 1.2 herunter.

Einbinden der Skripte

Zunächst legen wir uns eine neue html-Datei an (z. B. index.html) und binden im Head-Bereich dieser Datei die nötigen Skripte ein.

Als erstes laden wir die jQuery-Library per Google-Api. Ebenfalls könnte man sich aber auch die letzte jQuery-Version herunterladen und diese einbinden.

<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Der zweite Schritt ist das Einbinden des jFlow-Skriptes. In diesem Beispiel liegt die index.html im Root-Verzeichnis und das Skript im Order /js.

<script src="js/jquery.flow.1.2.js" type="text/javascript"></script>

Anlegen des Contents

Wir erzeugen drei div-Container, die nachher geslidet werden sollen. In jedem Slide ist ein Bild (aus dem Ordner /img), eine Überschrift und ein wenig Text enthalten.

Diese drei divs packen wir der Ordnung halber in einen weiteren div mit der ID content-slider. So können wir das Ganze über CSS besser formatieren und positionieren und auch für jFlow ist dies wichtig.

<div id="content-slider">

  <div id="slide1">
    <img src="img/slide1.jpg" alt="slide1" width="425" height="282"/>
    <h1>Slide1</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

  <div id="slide2">
    <img src="img/slide2.jpg" alt="slide2" width="425" height="282"/>
    <h1>Slide2</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

  <div id="slide3">
    <img src="img/slide3.jpg" alt="slide3" width="425" height="282"/>
    <h1>Slide3</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

</div><!-- end content-slider -->

Wir haben also jetzt die Skripte eingebunden und unseren Content angelegt. Als nächstes werden wir jFlow nun beibringen, wo unser Content liegt und wie er geslidet werden soll.

Im Head der Datei machen wir daher folgende Angaben:

<script type="text/javascript">
$(function() {
	$("div#content-slider").jFlow({
	slides: "#slides",
	width: "425px",
	height: "425px"
	});
});
</script>

Bemerkung:
Wir sagen dem Skript hiermit, dass unser Content im Container mit der ID content-slider liegt, dass die Slides innerhalb des Containers slides (müssen wir noch anlegen) liegen und welche Maße dieser haben soll.

In unserer Beispieldatei legen wir also innerhalb des Containers mit der ID content-slider einen weiteren Container slides um unsere Content-divs. Außerdem lege ich innerhalb von div#content-slider noch einen weiteren mit der ID panel an. Dort kommen unsere Steuerelemente (vor, zurück etc.) hinein.

<div id="content-slider">

  <div id="panel">

    <div id="controller">
      <span class="jFlowControl">Slide #1</span> |
      <span class="jFlowControl">Slide #2</span> |
      <span class="jFlowControl">Slide #3</span>
    </div>
    <div id="prev-next">
      <img src="img/prev.png" alt="prev" width="16" height="16" class="jFlowPrev"/>
      <img src="img/next.png" alt="next" width="16" height="16" class="jFlowNext"/>
    </div>

  </div><!-- end panel -->

  <div id="slides">

    <div id="slide1">
      <img src="img/slide1.jpg" alt="slide1" width="425" height="282"/>
      <h1>Slide1</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

    <div id="slide2">
      <img src="img/slide2.jpg" alt="slide2" width="425" height="282"/>
      <h1>Slide2</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

    <div id="slide3">
      <img src="img/slide3.jpg" alt="slide3" width="425" height="282"/>
      <h1>Slide3</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

  </div><!-- end slides -->

</div><!-- end content-slider -->

Bemerkung:
Im Container div#panel haben wir jetzt den controller mit drei Spans, die uns als Links zu den verschiedenen Slides dienen. Achtung! Die Anzahl der Spans muss immer der Anzahl der Sliding-Div (in unserem Beispiel 3) übereinstimmen, sont funktioniert jFlow nicht richtig. Im div prev-next finden wir die Bilder (kann auch Text sein), um vor oder zurück zu sliden. Durch die Klassen jFlowPrev und jFlowNext weiß jFlow, was bei einem Klick darauf zu tun ist.

Ab jetzt funkioniert unser Sliding-Content bereits und wir können uns mit CSS daran austoben. Da dies jeder anders macht und mag, gehe ich auf die Formatierungen nicht im Einzelnen ein.

Download Beispiel › ansehen

Wer mag, kann sich die Beispiele in dem Paket jFlow 1.2 ansehen und anpassen oder sich das Beispiel aus diesem Tutorial herunterladen.

Relevante Links:

• jFlow 1.2 - The Ultra-lightweight Fluid Content Slider for jQuery
• Offizielle Website von jQuery
• Beispiel aus diesem Tutorial

Bisher habe ich für Kontaktformulare in WordPress-Installationen immer den Dagon Design Form Mailer verwendet. Irgendwie hatte ich aber mal Lust, was Neues auszuprobieren und wollte auch eine Ajax-Lösung, die das Formular ohne Neuladen der Seite verschickt und eine Versandbestätigung oder eben eine Fehlermeldung ausgibt.

Das WordPress Plugin Contact Form 7 ist dafür die ideale Lösung. Es erfüllt alle oben genannten Anforderungen und macht insgesamt einen sehr robusten Eindruck.

Ein weiterer Grund, warum ich mich für dieses Plugin entschieden habe, ist die super-einfache Bedienung, die jedoch der Flexibilität und umfangreichen Möglichkeiten der Anpassung keinen Abbruch tut.

HTML-Editor Contact Form 7

Durch einen eigenen HTML-Editor kann man die Konfiguration ganz einfach mithilfe eines Tag-Generators für die verschiedenen Arten der Form-Elemente vornehmen. Folgende Elemente mit den entsprechenden Attributen kann man sich mit dem Generator erstellen und in den Editor kopieren:

• Text-Feld
• E-Mail-Feld
• Textarea
• Dropdown
• Checkboxes
• Radiobuttons
• Acceptance (z. B. für AGB)
• CAPTCHA
• File-Upload
• Submit-Button

Verwaltung der Bestätigungen und Fehlermeldungen

Auch die Bestätigungsnachrichten und Fehlermeldungen kann man bequem auf dieser Seite verwalten und anpassen.

Fazit:

Alles in Allem hat mich dieses Plugin wirklich in seiner wirklich einfach zu bedienenden Komplexität stark beeindruckt und kann es nur jedem empfehlen. Contact Form 7 wurde außerdem in zahlreiche Sprachen (u.a. Deutsch) übersetzt und benötigt kaum arbeitsaufwenige Anpassungen. Lediglich die CSS-Styles sollte man dem eigenen WordPress Theme anpassen.

Relevante Links:

• Plugin Directory Contact Form 7

Leider bin ich etwas spät dran, da ich seit Donnerstag kein Internet hatte und erst heute morgen wieder eine Verbindung hatte Und es ist echt scheiße als Webdesigner oder Web. Ein dickes Undankeschön an dieser Stelle an Telefonica.

Im Vorfeld der Veröffentlichung von WordPress 2.7 habe ich schon einige Artikel zu den Neuerungen veröffentlicht und in Kürze werden weitere folgen:

• Neue Funktion wp_page_menu() in WordPress 2.7
• Sticky Posts in WordPress 2.7