Archiv der Kategorie: Webdesign

WordPress: index.html vor index.php schalten

Wer vor seinen WordPress-Blog eine statische Einstiegsseite (z.B. mit einem zentrierten Logo) schalten möchte, kann dies mit einer eigens erstellten index.html Seite machen. Ein FTP-Zugang und ein paar Kniffe sind jedoch notwendig.

Download vorgefertigte Lösung

Anbei ein Download mit allen notwendigen Dokumenten, die du so grundsätzlich 1:1 für deine Seite benutzen kannst (Links in der index.html-Datei müssen natürlich angepasst werden):
[wpdm_file id=24]

Zum Selbermachen/Anleitung

index.html Datei

Öffne einen Texteditor (nicht Word! Sondern z.B. den „Editor“ von Windows [Start -> Suche -> „Editor“]) und erstelle die von dir gewünschte Einstiegsseite.
Nachfolgend ein Beispiel für eine solche Einstiegsseite mit zentrierten Logo, welches flexibel auf unterschiedliche Bildschirmgrössen (PC, Tablet, Smartphone) reagiert (responsiv).

[wpdm_file id=23]

Du kannst diese Datei einfach in deinem Editor öffnen, die Links, Hintergrundfarbe etc. anpassen und das Ganze unter index.html abspeichern.

Start-Logo

Wenn du deine eben erstelle html-Datei nun im Explorer/Mozilla/etc. öffnest , wirst du feststellen, dass sie gar kein Logo enthält. Dieses kannst du selbst erstellen und als „start-logo.png“ abspeichern. Logo und index.html müssen auf der gleichen Ebene liegen, also im gleichen Ordner (das kannst du ändern, indem du die index.html Datei anpasst). Anbei ein Dummy-Logo zum Download (Rechtsklick, Grafik/Bild speichern unter…) und Test:

start-logo

.htaccess Datei

Du kannst nun dein Start-Logo und die index.html-Datei direkt in deinen WordPress-Ordner hochladen (mittels FTP). Die Dateien müssen im Hauptordner zu liegen kommen, also dort, wo sich auch die index.php Datei befindet.
Nun wirst du feststellen, dass nur noch die index.html-Datei aufgerufen wird! So kann das natürlich nicht bleiben…
Erstelle nun wieder mit dem Editor eine .htaccess Datei mit folgendem Inhalt:

DirectoryIndex index.html index.php

Action php /cgi-php52/php
AddHandler php52 .php

ServerSignature Off
# BEGIN WordPress
<ifmodule mod_rewrite.c="">
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>

# END WordPress

Speichere das Dokument unter „.htaccess“ (Punkt nicht vergessen!) ab und lade es ebenfalls in deinen WordPress-Hauptordner.

Disable canonical redirects

Noch immer wird nur die index.html Datei aufgerufen. Hier liegt nun das Problem bei WordPress (siehe dazu die WordPress Plugin Seite). Erstelle nun wiederum mit deinem Editor eine Datei mit folgendem Inhalt:

<!--?php
/*
Plugin Name: Disable Canonical URL Redirection
Description: Disables the "Canonical URL Redirect" features of WordPress 2.3 and above.
Version: 1.0
Author: Mark Jaquith
Author URI: http://markjaquith.com/
*/

remove_filter('template_redirect', 'redirect_canonical');

?-->

Speichere diese unter „disable-canonical-redirects.php“ ab und lade sie in dein WordPress PLUGIN-Verzeichnis (wp-content/plugins) hoch. Gehe in den Admin-Bereich deiner WordPress-Seite und aktiviere das von Dir erstellte Plugin.

Permalinks

Nun wirst du feststellen, dass du jetzt zwar von deiner Startseite (index.html) auf deinen Blog gelangen kannst. Wenn Du aber im Blog auf Blog-interne Links klickst, gelangst du wieder zurück auf deine Startseite.

Gehe nun in den Admin-Bereich unter „Einstellungen/Permalinks“ und wähle dort „Benutzerdefinierte Struktur“. Dort musst Du nun
/index.php/%postname%
einfügen (%postname% kann auch durch andere Tags ersetzt werden).

Das war’s!

WordPress: Statische Einzelbilder pro Seite und Bildwechsler (slideshow) im Header

Lange habe ich nach einer Lösung für folgendes Problem gesucht:

Wie füge ich einen Bildwechsler (image rotator, slideshow) im Header-Bereich einer Website ein und habe aber gleichzeitig die Möglichkeit, für einzelne Seiten ein spezifisches Bild festzulegen, also den Bildwechsler zu umgehen?

Nachdem ich erfolglos mehrere WordPress-Plugins testete und feststellen musste, dass mir keines eine solche Komplettlösung bietet, bastelte ich mir selbst was zusammen. Ich versuchte zwei funktionierende Plugins mit ein paar Zeilen php-code (der zwar offenbar funktioniert, unter Umständen aber nicht ganz sauber ist, da ich von php nicht wirklich eine Ahnung habe) zu verbinden…

Und so funktioniert’s:

  • Standard Theme TwentyTen (resp. ein child-theme anlegen),
  • Plugin wp_cycle,
  • Plugin Dynamic Headers
  • und folgender Code in der Datei header.php (einfügen im [body]):

<div style="position: relative;  z-index: 3; height: 400px; width: 940px; overflow:hidden; ">
         <?php if (is_page(7) or is_page(9) or is_page(19) or is_page(89) or is_page(106) or is_page(213) or is_page(215)){
              if(function_exists('show_media_header')){ show_media_header(); }
              ;}

           else{
              wp_cycle();}
           ?>

</div>

Merke:

  • Alle eingefügten BILDER müssen GLEICH HOCH UND GLEICH BREIT (hier: 400×940) sein.
  • Korrekterweise müssten alle style Elemente in der style.css sein. Der Übersicht halber sind sie hier aber gleich mit drin…
  • Plugin Dynamic Headers: Für jede Seite, die ein statisches Bild haben soll, ist oben bei „is_page(ID_der_Seite)“ die ID anzugeben.
  • WP_Cycle wird als Standard für alle Seiten genommen, denen kein statisches Bild zugewiesen wurde.
  • Achtung: In der wp-cycle.php (zu finden im Plugin-Ordner) muss evtl. noch am style etwas angepasst werden (code ist ganz am Ende der Datei).