WordPress Blank-Theme erstellen

Ein Blank-Theme für WordPress zu haben ist sehr praktisch und verkürzt die Zeit einer Themeerstellung. Dieses Theme sollte so entworfen sein, dass es für neue Themes als Grundlage genutzt werden kann. Wie ich mir ein solches Theme erstellt habe, werde ich hier zeigen.

Vorlage

Mein Blank-Theme basiert auf dem TwentyTwelve Theme von WordPress. Hier sind alle Dateien enthalten, die ein WordPress Theme beinhalten kann, und es werden so ziemlich alle WordPress internen Tags genutzt. Hier muss also eigentlich nur noch ein wenig zusammengestrichen werden, und schon hat man ein Theme, auf dem man seine zukünftigen Eigenentwicklungen aufbauen kann.

Vorgehen

Dateien

Zu aller erst habe ich mich daran gemacht und die für mich überflüssigen Dateien gelöscht.

Die Dateiliste des TwentyTwelve Themes
Die Dateiliste des TwentyTwelve Themes

Meine letztendliche Dateistruktur sieht so aus:
Die Dateistruktur des Blank-Themes
Die Dateistruktur des Blank-Themes

Code anpassen

Den größten Teil des Codes habe ich gelassen, wie er war. Das Ausgabeformat des Datums habe ich in allen Dateien angepasst, außerdem habe ich die functions.php etwas ausgemistet.

style.css

In der style.css kann der größte Teil gelöscht werden, da ein Blank-Theme möglichst wenig an Formatierungen haben sollte. Allerdings sollten — wenn auch noch ohne Inhalt — hier einige Klassen und ids angesprochen werden, die von WordPress generiert werden. Also beispielsweise die Ausrichtung der Bilder mit .alignleft, .aligncenter und .alignright. Und an den Anfang gehört meiner Meinung nach ein Reset für die Standardwerte der Browser, beispielsweise diese von meyerweb.com.
Meine style.css sieht wie folgt aus (ohne den Code für die Metadaten des Themes am Anfang, die leeren Anweisungen am Ende sind wieder für Klassen, die WordPress erzeugt):

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}


/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
h1,h2,h3,h4,h5,h6 {
	clear: both;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.625em;
}

/* Text elements */
p {
	margin-bottom: 1.625em;
}
ul, ol {
	margin: 0 0 1.625em 2.5em;
}
ul {
	list-style: square;
}
ol {
	list-style-type: decimal;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 1.625em;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 1.625em;
}
strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
blockquote {
	font-family: Georgia, "Bitstream Charter", serif;
	font-style: italic;
	font-weight: normal;
	margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
	font-style: normal;
}
blockquote cite {
	color: #666;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
pre {
	background: #f4f4f4;
	font: 13px "Courier 10 Pitch", Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}
code, kbd, samp, var {
	font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn {
	border-bottom: 1px dotted #666;
	cursor: help;
}
address {
	display: block;
	margin: 0 0 1.625em;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub {
	font-size: 10px;
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: smaller;
}

/* Forms */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
textarea {
	background: #fafafa;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
	color: #888;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
textarea:focus {
	color: #373737;
}
textarea {
	padding-left: 3px;
	width: 98%;
}
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number] {
	padding: 3px;
}
input#s {
	background: url(images/search.png) no-repeat 5px 6px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 22px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
}
input#searchsubmit {
	display: none;
}

/* Links */
a {
	color: #1982d1;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	text-decoration: underline;
}
.assistive-text{
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}
.assistive-text:hover,
.assistive-text:active,
.assistive-text:focus {
	background: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000; /* Above WP toolbar */
}
.sticky{
	
}
.wp-caption{
	
}
.wp-caption-text{
	
}
.gallery-caption{
	
}
.bypostauthor {
	
}

Für Übersetzung vorbereiten

Anschließend habe ich in sämtlichen Dateien den Namen twentytwelve durch den Namen meines Themes ersetzt, damit eine Übersetzung möglich wird. Wie ihr eine solche Übersetzung anfertigen könnt, beschreibt Ellen in dem Artikel "WordPress-Theme Übersetzung mit dem Codestyling Localization Plugin" im Elmastudio.

Ergebnis

Es dauert ein wenig, sich alles passend zusammenzusuchen, aber danach hat man — wie ich finde — ein recht gelungenes Blank-Theme, was man nun als Vorlage für neue Themes verwenden kann.

Deine Meinung und Erfahrung

Hast du Erfahrungen mit Blank-Themes? Hast du vielleicht auch schon dein eigens angepasstes, oder nutzt du Vorlagen?
Über Kommentare, ob Anregung, Kritik oder Fragen, würde ich mich sehr freuen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert