In dieser Serie haben Sie bisher gelernt, wie Sie ein grundlegendes Thema aus statischem HTML-Code erstellen. Sie haben folgendes getan:
Ihr Markup für WordPress vorbereitet
Konvertieren Sie Ihren HTML-Code in PHP und teilen Sie Ihre Datei in Vorlagendateien auf
Das Stylesheet wurde bearbeitet und das Design in WordPress hochgeladen
Eine Schleife zu Ihrer Indexdatei hinzugefügt
In diesem Tutorial arbeiten Sie an der header.php Datei, die Sie in Teil 2 erstellt haben. Sie lernen, wie Sie:
Fügen Sie automatisch generierte Meta-Tags anstelle der vorhandenen statischen Tags hinzu Sektion
Ersetzen Sie den statischen Site-Titel und die Beschreibung durch einen, den Sie (oder andere Benutzer Ihres Designs) über den WordPress-Administrator aktualisieren können
Ergänzen Sie die wp_head Action-Hook an Ihre Header-Datei zur Verwendung durch Plugins
Was du brauchen wirst
Ihr Code-Editor Ihrer Wahl
Ein Browser zum Testen Ihrer Arbeit
Eine WordPress-Installation, entweder lokal oder remote
Wenn Sie lokal arbeiten, benötigen Sie MAMP, WAMP oder LAMP, damit WordPress ausgeführt werden kann
Wenn Sie remote arbeiten, benötigen Sie einen FTP-Zugang zu Ihrer Site sowie ein Administratorkonto in Ihrer WordPress-Installation
1. Hinzufügen von Meta-Tags zu Ihrer Header-Datei
Sie müssen Ihrem Design zwei Meta-Tags hinzufügen: das </code> tag und die <code>Zeichensatz</code> Meta-Tag.</p> <h3>Aktualisieren des Charset-Meta-Tags</h3> <p>Finden Sie die Zeile, die lautet:</p> <pre> <meta charset="utf-8" /></pre> <p>Ersetzen Sie es mit diesem:</p> <pre> <meta charset="<?php bloginfo( 'charset' ); ?>"/></pre> <p>Dadurch wird automatisch das Metadatum charset verwendet, das über das Symbol festgelegt wurde <strong>die Einstellungen</strong> Admin-Bildschirm.</p> <h3>Aktualisieren der <code><title></code> Etikett</h3> <p>Im Moment verfügt das Design über ein statisches title-Tag, das über den folgenden Code in hinzugefügt wird <strong>header.php</strong>:</p> <pre> Erstellen eines WordPress-Themas - Erstellen eines WordPress-Designs aus statischem HTML</pre> <p>Durch das Hinzufügen eines dynamisch generierten Titel-Tags können Sie zusätzliche Funktionen nutzen, die WordPress für diese bietet, was Ihnen SEO- und Usability-Vorteile bringt.</p> <p>Löschen Sie den obigen Code und ersetzen Sie ihn durch Folgendes:</p> <pre> <?php 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"; ?></pre> <p>Dieser Code bewirkt einige Dinge:</p> <ol> <li>Zuerst benutzt es das <code>wp_title ()</code> Template-Tag zur Ausgabe des Titels der aktuellen Seite, gefolgt von einem Trennzeichen auf der rechten Seite</li> <li>Danach verwendet es die <code>bloginfo ()</code> Template-Tag mit der <code>'Name'</code> Parameter, um den Namen der Site selbst auszugeben</li> <li>Wenn sich der Besucher auf der Startseite befindet (was er mit den bedingten Tags überprüft) <code>is_home () || is_front_page ()</code>) gibt sie die Site-Beschreibung mit der <code>get_bloginfo ()</code> Template-Tag mit der <code>'Beschreibung'</code> Parameter</li> </ol> <p>Speichern Sie jetzt Ihre Headerdatei.</p> <hr> <h2> 2. Hinzufügen eines dynamisch generierten Site-Titels und einer Beschreibung</h2> <p>Im nächsten Schritt ersetzen Sie den statischen Site-Titel und die Beschreibung durch einen dynamischen.</p> <p>Suchen Sie noch in der header.php den folgenden Code:</p> <pre> <div><!-- site name and description --></div> <div> <h1>WordPress Theme Gebäude</h1> <h2>Erstellen eines WordPress-Designs aus statischem HTML</h2> </div></pre> <p>Ersetzen Sie es durch den folgenden Code:</p> <pre> <div><!-- site name and description --></div> <div> </div></pre> <p>Dieser Code bewirkt Folgendes:</p> <ul> <li>Umschließt einen Link zur Homepage um den Site-Titel mit <code>echo home_url ()</code> </li> <li>Zeigt den Site-Titel mithilfe von an <code>bloginfo ()</code> Template-Tag mit der <code>'Name'</code> Parameter</li> <li>Zeigt die Site-Beschreibung mit an <code>bloginfo ()</code> Template-Tag wieder, diesmal mit der <code>'Beschreibung'</code> Parameter</li> </ul> <p>Nun können Sie feststellen, dass Sie den Site-Titel und die Beschreibung über das Symbol ändern können <strong>die Einstellungen</strong> Bildschirm im Admin, und es ändert sich auf jeder Seite Ihrer Website.</p> <p>Ich habe meine geändert und Sie können die Ergebnisse unten sehen. Beachten Sie, dass sich dies auch im Titel widerspiegelt, wie er oben im Browserfenster angezeigt wird.</p> <img src="//accentsconagua.com/img/images_15/creating-a-wordpress-theme-from-static-html-setting-up-the-header.jpg"> <hr> <h2> 3. Hinzufügen der <code>wp_head</code> Aktionshaken an Ihrem Thema</h2> <p>Das <code>wp_head</code> Action Hook ist ein wesentlicher Bestandteil, der zu jedem Thema hinzugefügt werden kann. Es ist kurz nach dem Schließen platziert <code></head></code> Tag in Ihrem <strong>header.php</strong> Datei und sie wird von vielen Plugins verwendet, um ihre Funktionalität in Ihr Design einzufügen. Wenn Sie es nicht hinzufügen, werden Sie feststellen, dass Plugins, die mit Ihrem Design auf Websites aktiviert wurden, möglicherweise nicht funktionieren.</p> <p>Das <code>wp_footer</code> Action Hook ist ähnlich und sitzt im <strong>footer.php</strong> Datei - dazu kommen wir in Teil 8 dieser Serie.</p> <p>Unmittelbar über dem Schluss <code></head></code> Tag, fügen Sie den folgenden Code hinzu:</p> <pre> <?php wp_head(); ?></pre> <p>Speichern Sie jetzt Ihre Datei. Du bist alles erledigt!</p> <hr> <h2>Zusammenfassung</h2> <p>Sie haben einige wesentliche Elemente Ihrer eingerichtet <strong>header.php</strong> Datei, die in jedem Thema enthalten sein sollte.</p> <p>Im nächsten Teil dieser Serie erfahren Sie, wie Sie Ihrer Header-Datei ein Navigationsmenü hinzufügen. In Teil 7 erfahren Sie, wie Sie Ihrem Header ein Widget hinzufügen, damit Sie Kontaktdetails hinzufügen können Sie möchten in Ihre Kopfzeile.</p> <hr> <h2>Ressourcen</h2> <ul> <li>Das Template-Tag wp_title () (Codex-Seite)</li> <li>Das Template-Tag bloginfo () (Codex-Seite)</li> <li> Bedingte WordPress-Tags (Codex-Seite)</li> <li>Der Einstellungsbildschirm (Codex-Seite)</li> <li>Der Action-Hook wp_head (Codex-Seite)</li> </ul>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/creating-a-wordpress-theme-from-static-html-the-footer-file.html">Erstellen eines WordPress-Designs aus statischem HTML Die Fußzeilendatei</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/creating-a-wordpress-theme-from-static-html-the-footer-file.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/creating-a-wordpress-theme-from-static-html-releasing-your-theme.html">Erstellen eines WordPress-Themes aus statischem HTML Freigeben Ihres Designs</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/creating-a-wordpress-theme-from-static-html-releasing-your-theme.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Suche...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua