Jetzt legen wir noch die fehlenden Files an, damit wir mal ein vernünftiges WP-Theme komplett haben.
Im letzten Teil haben wir ja schon einiges an Files und Verzeichnissen angelegt. Jetzt komplettieren wir das noch.
Files eines Themes
Wir werden vorerst noch folgende Files brauchen (und damit ein voll funktionsfähiges Theme erstellen):
header.php
Gibt den HTML Header, aber eventuell auch den sichtbaren Header aus. Wird aus der index.php mit get_header() Funktion aufgerufen. Ich schiebe die Header Leiste des Designs mit Logo etc. auch noch in die Datei header.php.
footer.php
Gibt den Footer und die schliessenden HTML Tags aus. Wird aus index.php mit get_footer() aufgerufen. Also schiebe ich die letzten Zeilen der index.php in die neu zu erstellende Datei footer.php. In index.php füge ich unten get_footer(); an.
sidebar.php
Gibt den Sidebar aus. Wird mit get_sidebar() aufgerufen. Diesen Aufruf füge ich also dort in die index.php ein, wo jetzt nur „Sidebar“ stand. In die Datei sidebar.php geb ich mal ein wenig Dummytext.
Diese paar Files und ein wenig CSS und man hat ein tolles Theme fertig. Du kannst dir am Artikel das bis dahin entstandene Theme downloaden.
header.php
Hier die header.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="de"> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body role="document"> <div class="container"> <div class="row" id="header"> <? // head logo bereich?> <div class="col-md-12"> <a href="<?php echo get_option('home'); ?>/"> <img src="<?php bloginfo('template_url');?>/images/logo.png" class="logo_image" alt="mein blog"> </a> </div> </div> <? // end head logo bereich ?> |
Die HTML Header kennst du vielleicht, falls nicht übernimm sie einfach mal so. Es werden darin allerlei Daten dynamisch eingefügt, die in den Blogeinstellungen etc. gesetzt werden. Der Aufruf der Funktion wp_head() ist wichtig !!! Hier bekommt WordPress (bzw. Plugins) die Gelegenheit noch was in den header Bereich zu schreiben. Ein Theme ohne wp_head Aufruf ist kein korrektes WordPress Theme !!!
Danach kommt noch der sichtbare Header Teil. Hier erzeugen wir einen hübschen Header in Photoshop. Gemeinsam mit den CSS Änderungen unten sieht das gleich nach mehr aus.
footer.php
Der Footer wird ebenfalls in eine eigene Datei gepackt.
|
1 2 3 4 5 6 7 8 |
<div class="row" id="footer"> <div class="col-md-12">Footer</div> </div> <? // end footer ?> </div> <? // end container ?> </body> </html> |
In der Index bleibt jetzt kaum mehr was übrig, was auch gut ist, weil da ohnehin noch einiges reinkommt.
index.php
|
1 2 3 4 5 6 7 8 |
<?php get_header();?> <div class="row"> <? // hauptbereich?> <div class="col-md-9 col-md-push-3">Beiträge</div> <div class="col-md-3 col-md-pull-9" id="sidebar"><?php get_sidebar();?></div> </div> <? // end hauptbereich ?> <?php get_footer();?> |
sidebar.php
Jetzt erstellen wir noch die sidebar.php. Für die Überschriften der Sidebars setze ich h6 Tags ein, warum kommt später im SEO Teil.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php get_search_form();?> <h6>Kategorien</h6> <ul> <?php wp_list_categories('orderby=name&show_count=1&title_li=' ); ?> </ul> <h6>Menü</h6> <ul> <?php wp_list_pages( 'title_li=' );?> </ul> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : endif; ?> |
get_sidebar kann ein Parameter übergeben werden, und es wird dann dieser Parameter an sidebar gehängt und includiert. get_sidebar(„right“) inlcudiert also sidebar-right.php. Nachzulesen ist das auch im hervorragenden Codex von WordPress. Mit dem du dich an dieser Stelle gleich mal bekannt machen könntest.
style.css
Dann noch ein wenig css um das ganze nach was aussehen zu lassen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/* Theme Name: mein_theme_2 Theme URI: http://deineThemeUrl.com Description: Mein tolles SEO optimales Theme Version: 0.2 Author: DU Author URI: http://www.deineHP.net */ body { background:white; color:#666666; line-height:22px; font-size:16px; text-align:left; } /* ---------------------------- header ------------------------ */ #header { text-align:center; height:188px; background: #445577 url(images/header_background.jpg) no-repeat; } .logo_image {width:55%;} /* ---------------------------- sidebar ------------------------ */ #sidebar { border:1px solid #bbb; padding: 10px; margin:10px 0 10px 0; background: #fff; font-size: 14px; } #sidebar h6 { display: block; -webkit-margin-after: 1.5em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; font-size:115%; background: url(images/bg_blue.png) repeat-x scroll 0 0; padding: 5px; } /* ---------------------------- footer ------------------------ */ #footer {font-size:72%; text-align:center;} |
Sieht ja schon gar nicht schlecht aus. Wir haben also die wesentlichsten Theme Files und ein nettes Design.
Im nächsten Beitrag bringen wir mal die Blogartikel in die mittlere Spalte.
- Info:
- Eigenes WP-Theme – Teil 3 – Files erstellen ist Beitrag Nr. 114
- Autor:
- codingFreak am 29. Mai 2014 um 8:10
- Category:
- Wordpress
- Wordpress Theme
« Eigenes WordPress Theme – Teil 2 – Bootstrap Layout - Eigenes WordPress Theme – Teil 4 – WP-Funktionalität »
