Die Photoswipe Bildergalerie mit Vor- Zurück-, Play- und Galerie-Schließen Button.

1. Photoswipe downloaden und Galeriebilder vorbereiten

Auf der Webseite photoswipe.com von Codecomputerlove kannst du dir den Code für die kostenlose Galerie (MIT-license) herunterladen. Auf der Webseite findest du auch verschiedene Live-Demos von Photoswipe.

Im Ordner »examples« findest du verschiedene Beispiele der Galerie, z.B. default, jQuery oder jQuery-mobile. In der readme-Textdatei unter »Getting Started« kannst du genau nachlesen, welches Beispiel als Vorlage für deine Verwendung am besten geeignet ist. Ich habe mich für das jQuery-Beispiel entschieden, um die Galerie z.B. auch im Internet Explorer nutzen zu können.

Die Galeriebilder werden in zwei Varianten benötigt. Einmal in der vollen Größe und ein zweites mal als Thumbnails (Größe 150x150px). Die Thumbnails speicherst du dir in einem Ordner namens »thumb« und die großen Bilder in einem Ordner namens »full« ab.

2. Die JavaScript-Dateien einbinden

Jetzt musst du alle benötigten Scripte für Photoswipe innerhalb des head-tags (bei WordPress in header.php Datei) einbinden.

Du benötigst die Dateien klass.min.js und code.photoswipe.jquery-2.0.3.min.js (beide findest du in Download-Ordner von Photoswipe). Am besten speicherst du diese Dateien in einem eigenen Ordner namens »js« ab.

Innerhalb des head-tags fügst du jetzt folgenden Code ein:

<script type="text/javascript" src="deinPfad/js/klass.min.js"></script>
<script type="text/javascript" src="deinPfad/js/code.photoswipe.jquery-2.0.3.min.js"></script>

»deinPfad« ersetzt du dabei jeweils mit dem Pfad zu deinem Dateien-Ordner. Wenn du WordPress verwendest kannst du am besten < ?php echo get_template_directory_uri(); ?> einsetzen, also:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/klass.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/code.photoswipe.jquery-2.0.3.min.js"></script>

Jetzt musst du darunter noch folgenden Code integrieren, um das Script für deine Bildergalerie nutzen zu können:

<script type="text/javascript">
//jQuery version
$(document).ready(function(){

	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: true});

});
</script>

Weitere Konfiguartions-Möglichkeiten wie z.B. fadeinSpeed, autostartSlideshow oder allowUserZoom findest du in der Dokumentation auf der Photoswipe-Seite.

Falls du jQuery nicht bereits aufrufst, kannst du die Google Library API nutzen und jQuery von dort aufrufen (jQuery muss aber unbedingt vor den Scripts für Photoswipe geladen werden):

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=1.6.2'></script>

3. CSS einbinden

Im nächsten Schritt musst du noch die benötigte CSS-Datei photoswipe.css (im Photoswipe Download-Ordner vorbereitet) für Photoswipe innerhalb des head-tags einbinden (am besten direkt unterhalb deines Hauptstylesheets).

<link href="deinPfad/photoswipe.css" type="text/css" rel="stylesheet" />

Um alle für Photoswipe benötigten Images in einem »images«-Ordner aufgeräumt unterbringen zu können, musst du in der photoswipe.css Datei noch bei allen background-Images den Ordner images/ hinzufügen, also z.B.:

background: url(images/loader.gif) no-repeat center center;

Für das Styling der Galerie in der Standard-Ansicht musst du außerdem noch die folgenden Styles hinzufügen:

/* Gallery styling */
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { list-style: none !important; float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }

Diese zusätzlichen Styles kannst du z.B. ganz unten in der photoswipe.css Datei ergänzen oder auch direkt in dein Haupt-Stylesheet einbinden.

4. Alle benötigten Images einbinden

Als letzten Schritt für die Integration von Photoswipe musst du jetzt nur noch alle benötigten Images in deinen »images«-Ordner einfügen. Du benötigst die im Photoswipe-Ordner zur Verfügung gestellten Images loader.gif, icons.png und icons@2x.png sowie deine in Schritt 1 vorbereiteten Bilderordner »full« und »thumb«.

5. Der HTML-Code für die Galerie

Jetzt kannst du, z.B. in einem Artikel deines Blogs den HTML-Code für eine Bildergalerie einfügen. Hast du deine Bilder in der Reihenfolge 001.jpg, 002.jpg, 003.jpg usw. benannt (die Bilder in der vollen Größe werden übrigens gleich benannt wie die Thumbnails) lautet der HTML-Code:

<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

Über das alt-Attribut kannst du außerdem noch Titel für deine Bilder in der Galerie bestimmen. Wenn du deine Galerie jetzt im Desktop-Browser anschaust, öffnet sich die Photoswipe-Galerie beim Anklicken eines der Thumbnail-Vorschaubilder.

Die Photoswipe-Bildergalerie in einem WordPress-Artikel integriert (Desktop-Broswer Ansicht).

Photoswipe ist responsive, so dass die Galeriebilder auch für ein kleines Smartphone-Screen angepasst sind.

Auf einem Touchscreen kannst du die Galeriebilder jetzt bequem mit Hilfe der Swipe-Funktion anschauen.

Die Swipe-Funktion für Touchscreens.

Hast du Fragen, Optimierungsvorschläge oder Probleme bei der Integration von Photoswipe? Über dein Feedback freue ich mich sehr!

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch im Album »WordPress Tutorials« auf unserer Vimeo-Seite.

Hilfreiche Code-Schnipsel aus dem Video

Code der header.php Datei (für Webseiten-Logo, Hauptmenü und Headerbild):

<header id="branding" role="banner">
	<nav id="mainnav" class="clearfix">
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- end mainnav -->

	<hgroup id="site-title">
		<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php bloginfo( 'template_directory' ); ?>/images/custom-logo.png" alt="<?php bloginfo('name'); ?>" /></a>
	</hgroup><!-- end site-title -->

	<?php if ( get_header_image() ) : ?>
		<img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /><!-- end headerimage -->
	<?php endif; ?>
</header><!-- end branding -->

Der Code für die Integration der Design/Kopfzeile Option in der functions.php (hier in einer vereinfachten Version nach Vorlage des originalen Codes im TwentyTen-Theme, das Standardbild »ginko.jpg« befindet sich im Ordner images/headers):

// Your changeable header business starts here
	define( 'HEADER_TEXTCOLOR', '' );
	// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
	define( 'HEADER_IMAGE', '%s/images/headers/ginko.jpg' );

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to yoko_header_image_width and yoko_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yoko_header_image_width', 1102 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yoko_header_image_height', 350 ) );

	// Don't support text inside the header image.
	define( 'NO_HEADER_TEXT', true );

	// Add a way for the custom header to be styled in the admin panel that controls
	// custom headers. See yoko_admin_header_style(), below.
	add_custom_image_header( '', 'yoko_admin_header_style' );

	// ... and thus ends the changeable header business.

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
			'ginko' => array(
			'url' => '%s/images/headers/ginko.jpg',
			'thumbnail_url' => '%s/images/headers/ginko-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Ginko', 'yoko' )
			)
	) );
}
endif;

if ( ! function_exists( 'yoko_admin_header_style' ) ) :

/**
 * Styles the header image displayed on the Appearance > Header admin panel.
 * Referenced via add_custom_image_header() in yoko_setup().
 */
function yoko_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
	border-bottom: 1px solid #000;
	border-top: 4px solid #000;
}
/* If NO_HEADER_TEXT is false, you would style the text with these selectors:
	#headimg #name { }
	#headimg #desc { }
*/
</style>
<?php
}
endif;

Ich hoffe auch dieser Teil meines WordPress Video-Tutorials kann dir wieder bei der Umsetzung eigener WordPress-Themes weiterhelfen. Wenn du Fragen oder Anregungen zum Video hast, schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Link-Tipps zum Video

• Die kostenlosen Google Webfonts zum Importieren ins Theme. Den @import Link findest du bei jeder Schrift unter »Use this font« / »Advanced techniques«.
• Auf der Webseite HTML5 Doctor gibt es ein umfangreiches Glossar aller HTML5-Elemente.
• Weitere Infos zur WordPress-Funktion wp nav menu findest du im WordPress Codex.
• Infos im WordPress Codex zur individuellen Menü-Funktion.

Code-Schnipsel aus dem Video

Im HTML5 header-tag werden wird das Hauptmenü sowie der Seitentitel und Untertitel des Themes eingeschlossen.

<header id="branding" role="banner">
	<nav id="mainnav" class="clearfix">
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- end mainnav -->

	<hgroup id="site-title">
		<h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup><!-- end site-title -->

</header><!-- end branding -->

Der Headerbereich im Stylesheet inklusive Dropdown-Menü:

/* Header
--------------------------------------------- */
#site-title {
	padding: 21px 0 15px;
}
#site-title h1 {
	margin: 0 10px 0 0;
	font-size: 2.1em;
	line-height:1.2;
	font-weight: bold;
	text-transform:uppercase;
	display: block;
	float: left;
}
#site-title h1 a:hover {
	text-decoration:none;
}
#site-title h2 {
	font:italic .9em 'Droid Serif',  Times, serif;
	color: #777;
	margin: 17px 0 0 0;
}
header#branding img.headerimage {
	width: 100%;
	height: auto;
	margin-top: 12px;
}
header#branding img.attachment-headerimage.wp-post-image {
	width: 100%;
	height: auto;
}
hgroup#site-title img {
	max-width: 100%;
}

/* Navigations
--------------------------------------------- */
/* --- Main Nav --- */
#branding #mainnav {
	margin: 30px 0 0;
	max-width: 70%;
	float:right;
}
#branding #mainnav ul li {
	float: left;
	list-style: none;
	position: relative;
}
#branding #mainnav ul li a {
	margin:0;
	padding:9px 14px;
	display: block;
	font-size: .8em;
	text-transform: uppercase;
}
#branding #mainnav ul li:first-child {
	margin: 0px;
}
#branding #mainnav ul li a:hover {
	background:#F0F0F0;
	color: #999;
	text-decoration: none;
}
#branding #mainnav ul ul {
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#branding #mainnav ul ul ul {
	left: 100%;
	top: 0;
}
#branding #mainnav ul ul a {
	background: #F9F9F9;
	padding: 9px 14px;
	width: 11em;
	height: auto;
	text-transform: none;
}
#branding #mainnav li:hover > a,
#branding #mainnav ul ul :hover > a {
	background: #F0F0F0;
}
#branding #mainnav ul ul a:hover {
	background: #F0F0F0;
}
#branding #mainnav ul li:hover > ul {
	display: block;
}

Das bisherige Stylesheet des Themes kannst du dir hier auch noch einmal komplett herunterladen.

Ich hoffe auch dieser Teil des Tutorials, kann dir wieder bei der Entwicklung deines eigenen WordPress-Themes weiterhelfen. Bei Fragen und weiteren Tipps zum Video schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Link-Tipps zum Video

• Hier kannst du dir die XML-Datei der Testdaten des WordPress Theme Unit Tests herunterladen.
• Das WordPress Importer Plugin im WordPress Plugin Directory.
• Infos zum Importieren von Inhalten im WordPress Codex.

Hast du Fragen, weitere Tipps oder Anmerkungen zum Importieren der WordPress-Theme Testdaten? Oder hast du bereits eigene Erfahrungen mit dem Theme Unit Test gesammelt? Über dein Feedback, Tipps und Fragen freue ich mich sehr!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Hilfreiche Link-Tipps

• ausführliche Infos zur Verwendung von CSS3 Media Queries bei W3C.org
• hilfreicher Artikel zum Viewport meta-tag von David B. Calhoun
• die Eigenschaften des Viewport meta-tags in einer übersichtlichen Tabelle in der Safari Developer Library

Codeschnipsel aus dem Video

Die CSS3 Media Queries können entweder über einen Link-tag unterhalb des Links zum style.css Hauptstylesheet innerhalb des head-tags eingefügt werden:

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="small.css" />

oder im style.css Hauptstylesheet unterhalb der CSS-Eigenschaften des Hauptlayouts über @media:

@media screen and (max-width : 1024px) {
hier CSS-Eigenschaften einfügen
}

Außerdem muss noch in der header.php Datei innerhalb des head-tags (möglichst ganz oben) der Viewport meta-tag eingefügt werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Wenn man dem Nutzer die Zoom-Option in einem mobilen Browsern weiterhin ermöglichen möchte nutzt man:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Wenn du weitere Fragen oder Ergänzungen zum Tutorial hast, schreibe mir doch einfach einen Kommentar. Ich freue mich auf deine Nachricht!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Bisher bearbeitete Theme-Dateien

• style.css
• header.php
• index.php
• sidebar.php
• footer.php

Die Theme-Dateien downloaden

Damit du dir noch einmal in Ruhe anschauen kannst, wie ich die Theme-Dateien des Toolbox-Blank Themes bisher bearbeitet habe, hier die die Theme-Dateien des 4. Tutorial-Teils zum downloaden:

• Download
  Theme-Dateien, WP-Tut Teil 4

Ich hoffe dir hilft auch dieses Tutorials bei der Entwicklung deiner eigenen WordPress-Themes weiter. Über dein Feedback und deine Fragen freue ich mich sehr!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Link-Tipps aus dem Tutorial

• Infos zur genutzten gettext Übersetzungs-Technik im WordPress-Codex.
• Deutschsprachige Dokumentation des Codestyling Localization-Plugins zur WordPress Theme- und Plugin-Übersetzung.
• Artikel: »WordPress-Theme Übersetzung mit dem Codestyling Localization Plugin« auf Elmstudio.

Codeschnipsel

Benötigter Codeschnipsel in der functions.php Datei zur Theme-Übersetzung:

/**
 * Make theme available for translation
 * Translations can be filed in the /languages/ directory
 */
load_theme_textdomain( 'deinThemeName', TEMPLATEPATH . '/languages' );

$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable( $locale_file ) )
	require_once( $locale_file );

Ich hoffe, dass dir hat auch dieser Teil des Tutorials wieder bei der Umsetzung deines eigenen WordPress-Themes weiterhilft. Wenn du Fragen, Amerkungen oder weitere Tippy zum Screencast hast, schreibe mir doch einen Kommentar. Ich freue mich auf dein Feedback!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Link-Tipps aus dem Tutorial

• CSS-Style Informationen: http://codex.wordpress.org/Theme_Development
• Eric Meyer’s CSS Reset: http://meyerweb.com/eric/tools/css/reset/
• Artikel über CSS Resets: Tipps und Tricks zum CSS-Reset

Codeschnipsel

Code in functions.php für die WordPress-Funktion individueller Hintergrund:

// This theme allows users to set a custom background
	add_custom_background();

Code in functions.php für die Aktivierung der WordPress Artikelbild-Funktion (thumbnail):

// This theme uses post thumbnails
	add_theme_support( 'post-thumbnails' );

Ich hoffe auch dieser Teil meines Video-Tutorials kann dir bei der Entwicklung eigener WordPress-Themes weiterhelfen. Wenn du Fragen, Anregungen oder weitere Tipps zum Thema hast, schreibe mir doch einfach einen Kommentar. Ich freue mich über dein Feedback!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 1: WordPress lokal installieren

Du kannst dir das Video-Tutorial übrigens auch direkt auf der Vimeo-Webseite anschauen. Hier findest du auch noch weitere Videos von uns.

Link-Tipps aus dem Video:

• XAMPP herunterladen: http://www.apachefriends.org/de/xampp.html
• MAMP (für Mac) herunterladen: http://www.mamp.info/de/index.html
• Video-Tutorial: XAMPP downloaden und WordPress lokal installieren
• die deutsche WordPress-Version herunterladen: http://wordpress-deutschland.org/
• WordPress Installations-Anleitung: http://wordpress-deutschland.org/installation/
• für die erste Installtion benötigter Link:
  http://localhost/wordpress/wp-admin/install.php
• kostenloser Text-Editor Notepad++: http://notepad-plus-plus.org/

Ich hoffe mein kleines Video-Tutorial kann dir bei der Arbeit mit WordPress und der Erstellung eigener Themes weiterhelfen. Im nächsten Teil der Serie werde ich das Blank-Theme »Toolbox« installieren und zeigen, wie du die Arbeit an einem eigenen, individuellen WordPress-Theme vorbereitest. Über dein Feedback und deine Fragen zum Tutorial freue ich mich sehr!

Weitere Teile des WordPress Video-Tutorials

• WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
• WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
• WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
• WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
• WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
• WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme

Für den Umzug musst du neben den Daten der WordPress-Installation und des Themes auch alle Datenbank-Einträge übertragen. Da man diesen Exportieren/Importieren-Prozess ja nicht so oft durchführt, habe ich eine kleine Anleitung verfasst, in der ich Schritt für Schritt beschreibe, was für die WordPress-Übertragung von einem lokalen Server auf die Live-Domain nötig ist.

1. Alle Daten via FTP hochladen

Als erstes musst du mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Filezilla) alle Daten der lokalen WordPress-Installation auf deinen Online-Server hochladen. Dabei ist es wichtig, dass du den richtigen, für deine Domain angelegten Pfad nutzt.

2. Die wp-config.php bearbeiten

Jetzt kannst du dir die wp-config.php (diese befindet sich im Hauptverzeichnis der WordPress-Dateien) auf deinem Computer kopieren. Hier musst du die Angaben deiner Domain und deiner Datenbank aktualisieren.

Die Einträge Datenbankname (define DB_NAME in Zeile 18), Datenbank-Benutzername (define DB_USER), Datenbank-Passwort (define DB_PASSWORD) und in manchen Fällen auch die MySQL-Serveradresse (define DB_HOST) müssen geändert werden.

Die Änderungen in der wp-config.php Datei.

Es ist also wichtig, dass du dir für deine Online-WordPress Installation bereits eine neue Datenbank mit Passwort angelegt hast. Hast du alle Einträge aktualisiert, kannst du die wp-config.php Datei über FTP neu hochladen.

3. Die Datenbank exportieren

Nachdem deine WordPress-Daten online sind, musst du im nächsten Schritt die Einträge der Datenbank exportieren. Ist die Datenbank nicht ungewöhnlich groß, kannst du das Programm PHPMyAdmin für den Export/Import nutzen. Dazu öffnest du über das Menü deines lokalen Servers, das Programm PHPMyAdmin.

So kannst du PHPMyAdmin mit dem Programm XAMPP öffnen.

PHPMyAdmin öffnet sich in deinem Standard-Browser und du kannst die Datenbank der lokalen WordPress-Installation auswählen. Hast du die Datenbank angewählt, klickst du in der oberen Optionsleiste auf den Button »Exportieren«.

Wichtig ist, dass du alle Tabellen deine Datenbank beim Exportieren mit überträgst. Deshalb musst du darauf achten, dass du unter »Exportieren«, »Alle Auswählen« anklickst und soalle Tabellen grau markierst.

Dann machst du beim Punkt »Struktur« noch ein Häkchen bei »Füge DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT hinzu«.

Jetzt machst du noch ein Häkchen bei »Speichern«. Dann kannst du den Button OK klicken, um die Datenbank zu exportieren. Wenn du möchtest, kannst du auch eine komprimierte Version (z.B. zip oder G-ZIP) zum Export wählen.

Deine Datenbank ist jetzt im Format datenbankname.sql auf deinem Computer gespeichert.

4. Die Datenbank-Datei anpassen

Jetzt musst du deine Datenbank noch anpassen, damit auch deine richtige URL eingetragen ist. Um alle Einträge mit der URL des lokalen Servers (z.B. http://localhost/blog/) mit der URL deiner Domain zu ersetzen, nutzt du am besten einen Texteditor (z.B. den kostenlosen Notepad++) und die Suchen/Ersetzen-Funktion.

Wenn du deine .sql Datei im Texteditor geöffnet hast, wählst du also die Suchen/Ersetzen-Funktion und trägst hier die URL des lokalen Servers unter »Suchen nach« und die URL deiner richtigen Domain unter »Erstetzen durch« ein.

Die Suchen und Ersetzen-Funktion im Notepad-Texteditor.

Diese aktualisierte Datenbank-Datei kannst du jetzt im nächsten Schritt in deine neu angelegte Datenbank importieren.

5. Die Datenbank importieren

Hierfür öffnest du wieder das PHPMyAdmin-Programm, diesmal allerdings über den Zugang deines Online-Servers. Meist findest du den Zugang über das Kunden-Menü deines Hostinganbieters. Wähle deine bereits angelegte, neue Datenbank aus und klicke auf den Importieren-Button.

Jetzt wählst du die eben bearbeitete .sql Datenbank-Datei aus. Nachdem Datenbank-Import sollte jetzt genau die gleiche Anzahl an Tabellen in deiner Datenbank sein, wie zuvor in der Datenbank der lokalen Server-Installation.

Vorausgesetzt alle Übertragungen haben korrekt geklappt, kannst du jetzt bereits deine WordPress-Seite online auf deiner Domain aufrufen. Außerdem kannst du dich wie gewohnt mit dem gleichen Benutzernamen und Passwort wie auf der lokalen WordPress-Installation über deinedomain.de/wp-login.php in deinem WP-Adminbereich anmelden.

Wichtig ist, dass du in deinem WordPress-Theme Dateien keine direkte URLs eingetragen hast, sondern immer die WordPress-Funktion:

<?php bloginfo('url'); ?>

(Mehr Infos zur Funktion bloginfo im WordPress-Codex).

So ist dein Theme flexibel und kann für die unterschiedlichsten WordPress-Webseiten genutzt werden, ohne dass eine Änderung im Code nötig wird.

Ich hoffe, dass diese kleine Anleitung eine hilfreiche Unterstützung für die WordPress-Übertragung von einem lokalen Server auf die Live-Domain ist. Falls du Fragen, weitere Tipps oder Anmerkungen zum Tutorial hast, freue ich mich sehr auf deine Nachricht!