Logo in Theme integrieren ohne Header Option des Themes

    Hallo,

    ich möchte gerne ein Logo in der Header (über das Headerbild) Integrieren. Da Twenty Eleven keine Header Option für ein Logo an diesem Ort hat, möchte ich gerne wissen, wie ich das Logo per HTML, CSS integriere? Ich bin totaler Anfänger also müsste ich wissen, an welchem Ort welche Befehle integriert werden müssen (header.php, style.css). Eine Child-Theme habe ich schon per Plugin erstellt.

    Vielen Dank.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Vielen Dank Edi. Finde es Klasse dass du mir den Tipp gegeben hast und dass es ein Plugin dafür gibt. Nur weiß ich noch nicht was statt den Fragezeichen in den Code eingeben muss <?php show_easylogo(); ?> und wo in der header.php? Ich denke mal irgendwo muss ich den link des Logos notieren.

    Füg das Logo dann lieber direkt in die header.php ein.

    <img src="URL DES BILDES">

    Das ist alles wenn die Größe vom Bild passt. Kommt an die gleiche Stelle wie <?php show_easylogo(); ?>. Wo ist das? Dort wo das Logo definiert ist. Das hängt vom Theme ab. Da bräuchten wir den Code der header.php.

    Hier ist der Code Mellies:

    <?php
    /**
    * Header template for the theme
    *
    * Displays all of the <head> section and everything up till <div id="main">.
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */
    ?><!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 6) & !(IE 7) & !(IE 8)]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php
    // Print the <title> tag based on what is being viewed.
    global $page, $paged;

    wp_title( '|', true, 'right' );

    // Add the blog name.
    bloginfo( 'name' );

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";

    // Add a page number if necessary:
    if ( ( $paged >= 2 || $page >= 2 ) && ! is_404() )
    echo esc_html( ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) ) );

    ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri() . "/style.css"; ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php
    /*
    * We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    */
    if ( is_singular() && get_option( 'thread_comments' ) )
    wp_enqueue_script( 'comment-reply' );

    /*
    * Always have wp_head() just before the closing </head>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to <head> such
    * as styles, scripts, and meta tags.
    */
    wp_head();
    ?>
    </head>

    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    <header id="branding" role="banner">
    <hgroup>
    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>

    <?php
    // Check to see if the header image has been removed
    $header_image = get_header_image();
    if ( $header_image ) :
    // Compatibility with versions of WordPress prior to 3.4.
    if ( function_exists( 'get_custom_header' ) ) {
    /*
    * We need to figure out what the minimum width should be for our featured image.
    * This result would be the suggested width if the theme were to implement flexible widths.
    */
    $header_image_width = get_theme_support( 'custom-header', 'width' );
    } else {
    $header_image_width = HEADER_IMAGE_WIDTH;
    }
    ?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <?php
    /*
    * The header image.
    * Check if this is a post or page, if it has a thumbnail, and if it's a big one
    */
    if ( is_singular() && has_post_thumbnail( $post->ID ) &&
    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
    $image[1] >= $header_image_width ) :
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    else :
    // Compatibility with versions of WordPress prior to 3.4.
    if ( function_exists( 'get_custom_header' ) ) {
    $header_image_width = get_custom_header()->width;
    $header_image_height = get_custom_header()->height;
    } else {
    $header_image_width = HEADER_IMAGE_WIDTH;
    $header_image_height = HEADER_IMAGE_HEIGHT;
    }
    ?>
    <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
    <?php endif; // end check for featured image or standard header ?>
    </a>
    <?php endif; // end check for removed header image ?>

    <?php
    // Has the text been hidden?
    if ( 'blank' == get_header_textcolor() ) :
    ?>
    <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
    <?php get_search_form(); ?>
    </div>
    <?php
    else :
    ?>
    <?php get_search_form(); ?>
    <?php endif; ?>

    <nav id="access" role="navigation">
    <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    <?php if ( ! is_singular() ) : ?>
    <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    <?php endif; ?>
    <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #access -->
    </header><!-- #branding -->


    <div id="main">

    Zitat von Rooocket

    Nur weiß ich noch nicht was statt den Fragezeichen in den Code eingeben muss <?php show_easylogo(); ?> und wo in der header.php?


    Wie die beiden Plugins eingebaut werden können, wird auf den jeweiligen Seiten beschrieben. Einfach so das Template zu ergänzen, geht zwar auch, die Frage bleibt aber, ob dann das Logo auf verschiedenen Geräten richtig angezeigt wird.

    Was die Fragezeigchen betrifft, handelt es sich dabei um Teile des Tags am Anfang und am Ende eines PHP-Skripts.

    Bevor Du am Code des Templates herumbastelst, empfiehlt es sich, sich etwas mit den Grundlagen von PHP und CSS zu beschäftigen. Es gibt dazu zahlreiche gute Tutorials. ;-)

    Zitat von Rooocket

    (…) ein Logo in der Header (über das Headerbild) Integrieren.
    (…)
    wie ich das Logo per HTML, CSS integriere?
    (…)
    Eine Child-Theme habe ich schon per Plugin erstellt. (…)

    Nur um lediglich ein Logo in den Header einzubauen, extra ein Child-Theme anzulegen, ist nicht unbedingt nötig, da helfen auch solche Plugins wie dieses weiter

    https://de.wordpress.org/plugins/header-footer/

    Möchte man nun den Code für das Logo nicht selbst verfassen, könnte man das dieses Plugin mit dem von [COLOR=#008080]Edi[/COLOR] schon genannten

    https://de.wordpress.org/plugins/easylogo/

    kombinieren, im Prinzip sollte das so funktionieren, habe allerdings selbst noch nicht beide in Kombination getestet.

    Vielen Dank. Mittlerweile habe ich mich etwas eingelesen in das Thema CSS und HTML. Ich habe jetzt versucht das Logo einzupflegen. Doch ich hahe die falsche Zeile erwischt. Wollte es eigentlich in h1 einpflegen, habe es jetzt hier drinnen:
    </head>

    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    <header id="branding" role="banner">
    [COLOR=#ff0000]<img src="http://profiwalk-events.de/wp-content/upl…16/06/logo1.jpg" class="logo" alt="Profiwalk" width="257" hight="95">[/COLOR]
    <hgroup>
    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>

    <?php

    Mein Problem ist jetzt, dass ich es raus löschen möchte und beim Aktualisieren WordPress immer eine PHP Datei erstellen will und die Zeile nicht löscht!!!!

    Problem von oben besteht immer noch teilweise. Das Logo habe ich raus löschen können aber ich kann auch plötzlich wieder nichts neues speichern. Es kommt immer das Fenster mit dem php File.

    Hallo Edi, siehe Beitrag vomn gestern 13.25 Uhr. Danach hat es komischer Weise geklappt, irgendwann. Wollte dann den Image Code in die h1 einfügen, um zu testen, ob so das Logo in der Website passt. Es kam aber dann wieder dieses Fenster mit der Speicherung einer php Datei und übernommen wurde nichts.

    Hallo SuMu, also ich kenn mich jetzt bsichen aus mit html, css aber ich habe keine Ahnung wie der Code des Logos in h1 reingehört bei deinem Link. Ich weiß, es ist nervig aber magst du es mir auf deutsch kurz zeigen oder erklären. Evtl. zeigst mir einfach nur die Stelle an der mein Logo-Code rein gehört?! Ist das Logo dann auch Responsive?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden