Logo in Theme integrieren ohne Header Option des Themes

Rooocket · 28. Juni 2016

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.

SuMu · 28. Juni 2016

http://forum.wpde.org/design/89385-logo-einfuegen-twenty-eleven.html
https://www.youtube.com/watch?v=JvtqZ-yE5P4
http://www.transformationpowertools.com/wordpress/logo-and-site-title-twenty-eleven

Edi · 28. Juni 2016

Du kannst selbstverständlich selbst den Code anpassen oder ein Plugin als Hilfe dafür verwenden.

Beispielsweise Jetpack

https://jetpack.com/support/site-logo/

oder Easy Logo

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

SuMu · 28. Juni 2016

Jetpack würde ich lassen.
http://www.transformationpowertools.com/wordpress/logo-and-site-title-twenty-eleven

Rooocket · 28. Juni 2016

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.

Mellies · 28. Juni 2016

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.

Rooocket · 28. Juni 2016

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>




<html <?php language_attributes(); ?>>

<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' ); ?>" />

<?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>
</header>

<div id="main">

Edi · 28. Juni 2016

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?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

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.

Rooocket · 29. Juni 2016

Vielen Dank Edi. Bin schon dabei mir Kenntnisse in html und css anzueignen

SuMu · 29. Juni 2016

nerv, bin noch im Spam ...
noch ein Versuch: http://www.transformationpowertools.com/wordpress/logo-and-site-title-twenty-eleven

SuMu · 29. Juni 2016

Lande ständig im Spm, seit gestern.
Letzer Versuch: http://goo.gl/RX6kBs

Tubedesigner · 29. Juni 2016

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. (…)
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

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 Edi schon genannten

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

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

Rooocket · 29. Juni 2016

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">
<img src="http://profiwalk-events.de/wp-content/uploads/2016/06/logo1.jpg" class="logo" alt="Profiwalk" width="257" hight="95">
<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!!!!

Rooocket · 29. Juni 2016

Hat sich erledigt!

Rooocket · 29. Juni 2016

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.

Edi · 29. Juni 2016

Wie oder wo hast Du das denn eingefügt beziehungsweise gelöscht?

Rooocket · 30. Juni 2016

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.

SuMu · 30. Juni 2016

Einfach meinen Link oben anklicken #11, da wird es mit Code Beispielen genau auf dein Theme erklärt, einfacher geht es wirklich nicht.

Rooocket · 30. Juni 2016

Danke SuMu!!

Rooocket · 30. Juni 2016

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?

WPDE.org

Logo in Theme integrieren ohne Header Option des Themes

Rooocket Well-Known Member

SuMu Well-Known Member

Edi Well-Known Member

SuMu Well-Known Member

Rooocket Well-Known Member

Mellies New Member

Rooocket Well-Known Member

Edi Well-Known Member

Rooocket Well-Known Member

SuMu Well-Known Member

SuMu Well-Known Member

Tubedesigner Well-Known Member

Rooocket Well-Known Member

Rooocket Well-Known Member

Rooocket Well-Known Member

Edi Well-Known Member

Rooocket Well-Known Member

SuMu Well-Known Member

Rooocket Well-Known Member

Rooocket Well-Known Member

Nützliche Suchen

Logo in Theme integrieren ohne Header Option des Themes

Rooocket Well-Known Member

SuMu Well-Known Member

Edi Well-Known Member

SuMu Well-Known Member

Rooocket Well-Known Member

Mellies New Member

Rooocket Well-Known Member

Edi Well-Known Member

Rooocket Well-Known Member

SuMu Well-Known Member

SuMu Well-Known Member

Tubedesigner Well-Known Member

Rooocket Well-Known Member

Rooocket Well-Known Member

Rooocket Well-Known Member

Edi Well-Known Member

Rooocket Well-Known Member

SuMu Well-Known Member

Rooocket Well-Known Member

Rooocket Well-Known Member