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.
Meine letztendliche Dateistruktur sieht so aus:
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.