WordPressdesign: Header & Navigation

The following two tabs change content below.

• Bio
• Neueste Artikel

Sascha Kaufmann

Neueste Artikel von Sascha Kaufmann (alle ansehen)

• Gefunden bei YouTube: Assassins Creed Valhalla Review | Was taugt der neue Teil? | #ACValhalla #LikeAViking - 11. November 2020
• Gefunden bei YouTube: DreamDasher | sponsored by indieboost - 11. November 2020
• Gefunden bei YouTube: Assassin’s Creed Valhalla Cosplay part 1 | Teil 1 der Eivor Weste - 11. November 2020

Nochmal zur Info, dies soll keine genaue Programmier Anleitung für WordPress Themes sein sondern nur die Besonderheiten auflisten die mir bei der Programmierung des Themes aufgefallen sind. Ansonsten gibt es schon genug Anleitungen wenn man Google bemüht. (siehe auch Quellen im ersten Beitrag der Serie).

So nach dem wir uns die Tutorials durchgesehen haben und schon ein wenig rumgespielt haben schauen wir uns mal an was wir bisher geleistet haben…

Wie man vielleicht merkt habe ich bisher nur nach dem Vorgaben von http://bueltge.de/ gearbeitet, aber das wird sich nun wohl ändern, weil das Tutorial dort leider nicht fertiggestellt wurde und wenn ich mich nicht verlesen habe Fehler enthält. Aber wenn ihr es soweit schon geschafft habt dann bin ich ja froh. Aber ich wollte euch ja Besonderheiten vorstellen. Also kommt als erstes mal der Banner.

Die auf bueltge.de vorgestellten Lösungen mit

<?php include (TEMPLATEPATH . '/example.php'); ?>
<?php include (ABSPATH . 'wp-content/themes/default/example.php'); ?>

Wollten bei mir beider nicht funktionieren, ist ja auch irgendwie klar, da wird der Absolute Pfad vom Webserver angegeben, für Includes sicherlich gut, aber ansonsten nicht zu gebrauchen. Also habe ich mich diesen Trick bedient:

<center>
  <a href="<?php bloginfo('url'); ?>/">
    <img src="<?php bloginfo('url'); ?>/wp-content/themes/randompeople/img/banner.jpg">
  </a>
</center>

Bei Bildern ist das ja kein Problem diese mit dem kompletten URL einzubinden…

Als nächstes kommen wir zur Navigation, die hatte mir früher Sorgen gemacht… Aber bei einem meiner Projekte musste ich so eine Navigation schon mal machen, deswegen wusste ich wie das ablaufen muss. Da ich aber das alte Design noch teilweise übernehmen wollte hab ich einfach die Zeile kopiert und leicht abgeändert. So hab ich das ganze dann mal notiert:

<ul class="menu">
        <li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home','k2_domain'); ?></a></li>
        <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
        <?php wp_register('<li class="admintab">','</li>'); ?>
</ul>

/* Navigation */
    ul.menu {
        left: 20px;
        width: 90%;
    }
    ul.menu li {
        display: inline;
    }
    ul.menu, ul.menu li a {
        padding: 5px 15px 6px;
        text-decoration: none;
    }
    ul.menu li a {
        font: 1em Verdana, Helvetica, Arial, Sans-Serif;
        color: white;
        background: #FFA82C;
    }
    ul.menu li a:hover {
        background: #FFCD3A;
        color: #eee !important;
        text-decoration: none;
    }
    ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
        color: #333 !important;
        background: #FF4924;
        text-decoration: none;
    }
    .admintab {
        padding: 50px !important;
    }

So dann mal schauen was wir die nächsten Tage so schaffen 😉