Până acum, în această serie, ați învățat cum să creați o temă de bază din codul static HTML. Ați făcut următoarele:
Ați pregătit marcajul pentru WordPress
Conversia HTML-ului în PHP și împărțirea fișierului în fișiere șablon
Editat foaia de stil și a încărcat tema în WordPress
A adăugat o buclă la fișierul index
În acest tutorial, veți lucra la header.php fișierul pe care l-ați creat în Partea 2. Veți învăța cum să:
Adăugați metaetichete generate automat în locul celor statice existente în secțiune
Înlocuiți titlul și descrierea site-ului static cu unul pe care tu (sau alți utilizatori ai temei) îl puteți actualiza prin intermediul administratorului WordPress
Adaugă wp_head activați cârligul în fișierul de antet pentru a fi folosit de pluginuri
Ce ai nevoie
Editorul de cod de alegere
Un browser pentru testarea muncii tale
O instalare WordPress, locala sau remote
Dacă lucrați la nivel local, veți avea nevoie de MAMP, WAMP sau LAMP pentru a permite WordPress să ruleze
Dacă lucrați de la distanță, veți avea nevoie de acces FTP la site-ul dvs., plus un cont de administrator în instalarea dvs. WordPress
1. Adăugarea de etichete Meta la fișierul antet
Trebuie să adăugați două metaetichete pe tema: </code> și eticheta <code>charset</code> meta tag.</p> <h3>Actualizați Meta Tagul caracterelor</h3> <p>Găsiți linia care citește:</p> <pre> <meta charset="utf-8" /></pre> <p>Înlocuiți-l cu acesta:</p> <pre> <meta charset="<?php bloginfo( 'charset' ); ?>"/></pre> <p>Aceasta va folosi automat meta-tag-ul de caractere setat prin intermediul <strong>Setări</strong> ecranul de administrare.</p> <h3>Actualizarea mesajului <code><title></code> Etichetă</h3> <p>În prezent, tema are o etichetă statică de titlu adăugată prin intermediul următorului cod în <strong>header.php</strong>:</p> <pre> WordPress Theme Building - Crearea unei tematici WordPress din HTML static</pre> <p>Prin adăugarea unei etichete de titlu generat dinamic, puteți beneficia de funcționalități suplimentare oferite de WordPress pentru acestea, care vă vor oferi beneficii SEO și utilizabilitate.</p> <p>Ștergeți codul de mai sus și înlocuiți-l cu următoarele:</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>Acest cod face câteva lucruri:</p> <ol> <li>Mai întâi folosește <code>wp_title ()</code> șablon pentru a scoate titlul paginii curente, urmat de un separator din partea dreaptă</li> <li>După aceasta, utilizează <code>bloginfo ()</code> șablon cu eticheta <code>'Nume'</code> parametru pentru a afișa numele site-ului în sine</li> <li>Dacă vizitatorul se află pe pagina de pornire (pe care o verifică utilizând etichetele condiționate <code>is_home () || is_front_page ()</code>), aceasta va afișa descrierea site - ului utilizând <code>get_bloginfo ()</code> șablon cu eticheta <code>'Descriere'</code> parametru</li> </ol> <p>Salvați acum fișierul cu antet.</p> <hr> <h2> 2. Adăugarea titlului și a descrierii site-ului generat dinamic</h2> <p>Următorul pas este să înlocuiți titlul și descrierea site-ului static cu unul dinamic.</p> <p>Încă în header.php, găsiți următorul cod:</p> <pre> <div><!-- site name and description --></div> <div> <h1>WordPress Tematica de constructii</h1> <h2>Crearea unei teme WordPress din html static</h2> </div></pre> <p>Înlocuiți-l cu codul de mai jos:</p> <pre> <div><!-- site name and description --></div> <div> </div></pre> <p>Acest cod are următoarele:</p> <ul> <li>Împachetează un link către pagina de pornire din jurul titlului site-ului utilizând <code>ecou home_url ()</code> </li> <li>Afișează titlul site - ului folosind <code>bloginfo ()</code> șablon cu eticheta <code>'Nume'</code> parametru</li> <li>Afișează descrierea site-ului folosind <code>bloginfo ()</code> șablonul de etichetare din nou, de data aceasta cu <code>'Descriere'</code> parametru</li> </ul> <p>Acum veți găsi că puteți modifica titlul și descrierea site-ului dvs. prin <strong>Setări</strong> ecran în admin și se va schimba pe fiecare pagină a site-ului dvs..</p> <p>M-am schimbat pe mine și puteți vedea rezultatele de mai jos. Rețineți că acest lucru se reflectă și în titlu așa cum se arată în partea de sus a ferestrei browserului.</p> <img src="//accentsconagua.com/img/images_15/creating-a-wordpress-theme-from-static-html-setting-up-the-header.jpg"> <hr> <h2> 3. Adăugarea <code>wp_head</code> Acțiune Cârlig la tema ta</h2> <p> <code>wp_head</code> cârlig de acțiune este unul esențial pentru a adăuga la fiecare temă. Se află imediat după închidere <code></head></code> etichetă în <strong>header.php</strong> fișier și este folosit de o mulțime de plugin-uri pentru a cârlig funcționalitatea lor în tema dumneavoastră. Dacă nu îl adăugați, veți descoperi că pluginurile activate pe site-uri folosind tema dvs. ar putea să nu funcționeze.</p> <p> <code>wp_footer</code> cârlig de acțiune este similară și se află în <strong>footer.php</strong> dosar - vom ajunge la partea a 8-a din această serie.</p> <p>Imediat deasupra închiderii <code></head></code> tag, adăugați următorul cod:</p> <pre> <?php wp_head(); ?></pre> <p>Acum salvați fișierul. Sunteți gata!</p> <hr> <h2>rezumat</h2> <p>Ați stabilit câteva elemente esențiale ale dvs. <strong>header.php</strong> fișier, care ar trebui să fie inclus în fiecare temă.</p> <p>În următoarea parte a acestei serii, veți afla cum să adăugați un meniu de navigare în fișierul antet, iar apoi în Partea 7 veți afla cum să adăugați un widget în antetul dvs., astfel încât să puteți adăuga detalii de contact sau orice doriți, în antetul dvs..</p> <hr> <h2>Resurse</h2> <ul> <li>Tagul șablon wp_title () (pagina Codex)</li> <li>Eticheta șablon bloginfo () (pagina Codex)</li> <li> Tag-uri condiționale WordPress (pagina Codex)</li> <li>Ecranul Setări (pagina Codex)</li> <li>Cârligul de acțiune wp_head (pagina Codex)</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">Cod</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">Crearea unei teme WordPress din HTML static Fișierul subsol</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">Crearea unei tematici WordPress din HTML static Lansarea temei tale</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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</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="Căutare...">
<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