Wie füge ich ein Logo in die Kopfzeile ein?


9

Ich bin ziemlich neu in der WordPress-Welt (ich komme aus Joomla)

Ich habe einige Schwierigkeiten, ein Logo in diese WordPress-Testseite einzufügen: http://onofri.org/example/

Ich möchte mein Logo in die Kopfzeile der Website einfügen, stattdessen den Text "BEISPIEL".

Wenn ich in das WordPress-Konfigurationsfenster schaue, finde ich nicht, wo ich das Logo hochladen und stattdessen automatisch den "BEISPIEL" -Text in die Kopfzeile einfügen kann (ich weiß nicht, ob dies eine Standard-WordPress-Funktion wie in Joomla ist oder ob es eine ist Funktion, die durch bestimmte Themen verfügbar gemacht werden kann oder wenn ich sie direkt in den Code einfügen muss)

Ich finde es jedoch nicht einmal in meinen Themeneinstellungen.

Was muss ich tun, um mein Logo zu platzieren? Muss ich es direkt in meinen HTML-Code einfügen?

Antworten:


14

Versuchen Sie, den Header-Bereich ein wenig zu ändern, um den Standards zu entsprechen. Hier ist, was Ihr Code gerade ist:

<div id="header-image">
   <img width="1102" height="350" alt="" class="header-image" src="http://onofri.org/example/wp-content/uploads/2013/06/header1.jpg">
</div>

So können Sie die Dinge ändern:

<div id="header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="HERE" height="HERE" />
    </a>
</div>

Es gibt jetzt nur noch 3 Schritte:

  • Anstatt die Standardeinstellungen für das Header-Bild des Themas zu verwenden, können Sie die Themen Ihres Themas header.phpmit dem oben angegebenen Code bearbeiten .
  • Anstatt Bilder aus dem Bereich "Neue Medien hinzufügen" einzufügen , können Sie Bilder über cPanel (Systemsteuerung Ihres Webhosts) in den Unterordner des Themenordners mit dem Namen "Bilder" hochladen .
  • Und anstatt ein großes Bild mit Hintergrund für Ihr Logo zu erstellen, versuchen Sie, in Photoshop (oder einer anderen Grafiksoftware) ein einfaches Logo ohne Hintergrund zu erstellen. Bei Photoshop tun Sie dies einfach: Nachdem Sie das Logo in einer Ebene platziert haben, löschen Sie es einfach die Hintergrundebene und speichern Sie dann das Bild für das Web (Datei> Für das Web speichern ... [ Ctrl+ Alt+ Shift+ S]) und wählen Sie das Format PNG-24 für ein gutes Ergebnis. Speichern Sie es dann unter logo.pngund legen Sie es im Ordner '/ wp-content / theme / simplemarket / images /' ab.

Hoffe du bekommst den Rest. Wenn Sie Fragen haben, können Sie diese hier unter kommentieren.


2

Wenn es eine "Logo" -Funktion gibt, ist diese Teil des Themas. Möglicherweise eine Themenoption oder ein Teil des Theme-Anpassungssystems .

Ich verwende normalerweise einen benutzerdefinierten Header , um dies für kommerzielle Websites zu tun, obwohl ein benutzerdefinierter Header nicht speziell für ein Logo ist. Es ist eine generische "Header Image" -Funktion.

Kurz gesagt, das hängt vom Thema ab. Wenn es sich um ein Thema handelt, das Sie erstellen, können Sie das Thema bearbeiten, um es hinzuzufügen. Siehe die bereits referenzierten Codex-Artikel.


2

Um das Header-Bild zu ändern, gehen Sie zum Admin-Bereich Ihres WordPress. Klicken Sie im Darstellungsmenü auf die Kopfzeile. Dort finden Sie die Option, das Kopfzeilenbild und den Text hochzuladen, die in der Kopfzeile angezeigt werden sollen.

Wenn es nicht angezeigt wird, müssen Sie Ihre Header-Datei bearbeiten und den folgenden Code in Ihren Header einfügen, falls er noch nicht vorhanden ist.

<?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.