jQuery Mobile Template für WordPress

Christian Böttger 02 Apr 2014 0 Kommentare
8 Stimmen (4.00 von 5.00)

Da ich für meinen Blog auch ein Template benötige, dass für Mobile Geräte optimiert ist, möchte ich gleich die Chance nutzen und euch eine kleine Anleitung dazu geben. Leider ist mein Template noch in Arbeit, aber ich hoffe das ich es schnell online bringen kann. Diese Anleitung dient nur dazu euch eine Vorlage für euer eigenes Template zu schaffen.

 jQuery Mobile Template Struktur:

Um nun ein Template zu erstellen müssen wir erst einmal die Struktur erstellen, d.h. wir müssen die Ordner und die Dateien erstellen die wir für unser jQuery Mobile Template benötigen. Dazu gehen wir mit unseren FTP Clienten auf unseren Webserver und navigieren zu dem Ordner /wp-content/themes und erstellen dort einen neuen Ordner mit dem Namen jquery_theme. In diesen Ordner erstellen wir dann folgende Dateien.

  • header.php
  • footer.php
  • index.php
  • page.php
  • single.php
  • style.css

jQuery Mobile Template Struktur

Jetzt erstellen wir noch Unterordner in unserem jQuery Mobile Template Ordner:

  • css
  • js
  • images

Nun haben wir erst einmal die Grundstruktur für unser jQuery Mobile Template und können wir anfangen unsere Dateien und Ordner mit Codes und Dateien zu füllen.

Bearbeiten der einzelnen Dateien:

Informationen über Theme in WordPress anzeigen:

Um nun Informationen über unser Template in der Worpress Installation zu erhalten müssen wir folgenden Code in die style.css eingeben.

/*
Theme Name: jQuery Mobile Template
Theme URI: Hier die Theme URI eingeben
Description: Using jQuery, HTML5, and basic CSS, this theme will transform the mobile user experience from one that is static to one that is dynamic, animated, and performs like a downloadable mobile application on Android, iOS, Windows Phone, and touchscreen BlackBerry devices.
Author: Name des Autors
Author URI: Autor URI hier eingeben
Version: 1.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: these, tags, are separated, by, commas, and, describe the, theme, functions
*/

jQuery Mobile Template Informationen

 

Nun erstellen wir den Kopf unseres Template:

Den Kopf unseres Template erstellen wir in der Datei header.php und dort geben wir folgenden Code ein.

<!DOCTYPE html>
<html>
  <head>
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery.mobile.icons-1.4.2.min.css" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery_theme.css" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>

  <body>
  <body>
		<div data-role="page" data-theme="a">
			<div data-role="header" data-position="inline" data-theme="a">
				<h1>It Worked!</h1>
			</div>
			<div data-role="content" data-theme="a">

 

Jetzt benötigen wir noch die Icons und zwei CSS Dateien, die Ihr hier runter laden könnt. Aus dieser Datei kopieren wir den Ordner images aus dem Ordner themes in den Ordner CSS in unserem Template, zusätzlich benötigen wir noch die Datei jquery.mobile.icons-1.4.2.min.css und die jquery_theme.css, diese kommt auch in den Ordner CSS.

 

Kurze Beschreibung header.php:

  • data-role=“page“ -> das ist die CSS Klasse für die komplette Seite
  • data-theme=“a“ -> hier wird das Theme zugeordnet in unserem Fall ist es Theme A
  • data-role=“header“ -> dieser DIV Container ist für den Kopf unseres Themes verantwortlich hier kann man das Menü einarbeiten
  • data-role=“content“ -> in diesem DIV Container ist nachher unser Seiteninhalt und unsere Artikel

 

Footer des Templates erstellen:

Den Fuß unseres jQuery Mobile Template erstellen wir in der Datei footer.php, diese enthält diesen Code.

			</div>
		</div>
	</body>
</html>

In dieser Datei steht nicht viel Code. Hier können wir später, wenn wir wollen das Menü für den unteren Bereich unserer Seite eingeben. Da hier nicht viel steht, brauch ich auch nichts weiter beschreiben.

 

Den Inhalt der Seite erstellen:

Den Inhalt unserer Seite erstellen wir in der Haupttemplatedatei, das ist die index.php und diese sieht wie folgt aus.

<?php

get_header(); // Header der Seite einbinden

// Der Loop für Seiten und Artikel
if (have_posts()) :
  while (have_posts()) :  the_post();
    the_content();
  endwhile;
endif;

get_sidebar();  // Die Sidebar einbinden fals vorhanden im Template

get_footer(); // Den Footer der Seite einbinden 

?>

Dies ist eine sehr einfache index.php, aber diese reicht für unser Vorlage des jQuery Mobile Template vollkommen aus. Diese Datei können und müssen wir später dann noch erweitern und anpassen.

 

Template für die Artikel erstellen:

Für unsere Artikel erstellen wir eine eigene Templatedatei, die single.php mit folgenden Inhalt.

<?php get_header(); ?>

<!-- Begin section -->		
<section>		
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>		
  <!-- Begin .postBox -->		
  <article>             
    <!-- Begin Content -->       
    <div class="art_content">        
      <?php the_content(); ?>      
    </div>      
    <!-- End Content -->                                                    		
  </article>		

  <?php endwhile; else: ?>		

  <p>
    <?php _e("Sorry, was du suchst ist nicht hier.", "site5framework"); ?>
  </p>	
  <?php endif; ?>		 			

</section>
<!-- End section -->

<?php get_footer(); ?>

Diese Datei ist wir gesagt für unsere Artikel zuständig und kann von euch angepasst werden.

 

Template für den Inhalt von Seiten:

Für den Inhalt der Seiten ist die page.php verantwortlich. In dieser Datei könnt Ihr dann den Inhalt der Seiten, die Ihr erstellt anpassen und Designs erstellen.

<?php get_header(); ?>

<!-- begin section -->
	<section>
    <!-- Begin .postBox -->
		<article>
      <div class="pagetext">
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

				<?php the_content(); ?>

				<?php endwhile; else: ?>
				<p>Sorry, aber was du suchst ist hier nicht vorhanden.</p>
				<?php endif; ?>
      </div>
		</article>
	 <!-- End .postBox -->
	</section>
<!-- end section -->

<?php get_footer(); ?>

 

Nun passen wir noch die Datei style.css an so das die Standard Designs vorhanden sind.

 

/*
Theme Name: jQuery Mobile Template
Theme URI: Hier die Theme URI eingeben
Description: Using jQuery, HTML5, and basic CSS, this theme will transform the mobile user experience from one that is static to one that is dynamic, animated, and performs like a downloadable mobile application on Android, iOS, Windows Phone, and touchscreen BlackBerry devices.
Author: Name des Autors
Author Autor URI hier eingeben
Version: 1.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: these, tags, are separated, by, commas, and, describe the, theme, functions
*/

/* -------------------------------
BODY STYLES
----------------------------------*/

canvas {
    -ms-touch-action: double-tap-zoom;
}

/*----------------------------------------------------
BASIC HTML ELEMENTS STYLES
------------------------------------------------------*/

article {
  font-size: 12px;
}

a {
	color:#1FA2E1;
	text-decoration:none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
	outline:none;
}

h1 {
	font-size:19px;
	letter-spacing:-1px;
	font-weight:normal;
	line-height:100%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:normal;
}

h1.home {
	color:#1FA2E1;
	font-size:19px;
}

h1 a {
	color:#333;
	text-decoration:none;
}

h1 a:hover {
	color:#1FA2E1;
	text-decoration:none;
}

h2,h3 {
	font-size:17px;
	font-weight:normal;
	font-style:normal;
	letter-spacing:-1px;
	padding:5px 0;
} 

h3{
	font-size:15px;
	font-weight:bold;
}

ul {
	list-style:none;
}

p {
	margin:10px 0;
}

blockquote {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}

Nun haben wir die wichtigsten Komponenten für unser Template zusammen. Wie gesagt, dieser Artikel und die Code Abschnitte sollen euch nur als Vorlage dienen, da es hier den Rahmen sprengen würde euch ein komplettes Theme zu zeigen.

jQuery Mobile Template Vorschau

Artikel drucken

Kommentare (0)