Úvod do anatómie témy WordPress

  1. 1. Výukový program WordPress: Ako vytvoriť tému WordPress z HTML (1. časť)
  2. 2. Výučba WordPress: Ako vytvoriť tému WordPress z HTML (2. časť)
  3. 3. Aktuálne čítanie: Úvod do anatómie témy WordPress

Pred chvíľou sme vám predstavili koncepciu vytvorenia témy WordPress z HTML. Výukový program sme rozdelili na dve časti a dnes sme všetci o vytvorení týchto dvoch výukových programov, takže neváhajte považovať tento príspevok za tretí príspevok v poštovej sérii. Mojím cieľom je rozobrať tému WordPress, aby ste získali jasný obraz o tom, ako funguje (téma).


Tento príspevok predpokladá, že máte pracovné znalosti HTML a CSS. Budem pokračovať a vyhlasujem, že znalosti HTML a CSS sú predpokladom pri navrhovaní tém WordPress. Ešte jedna vec, tento príspevok zostane bez veľkých slov a zložitých konceptov – bude ľahké porozumieť, takže buďte pripravení baviť sa a učiť sa.

Malý HTML základný náter

Každá webová stránka HTML je rozdelená do rôznych častí pomocou

tag. Napríklad môžete rozbiť telo () vášho webu do niekoľkých sekcií, ako je navigácia, hlavička, hlavný obsah, bočný panel a päta.

Keď budete mať svoju webovú stránku v sekciách, môžete si sekcie objednať (alebo usporiadať) pomocou CSS. Tento proces je známy ako styling a vyžaduje si pridanie ďalších prvkov štýlu, ako sú farba, veľkosť, hranice, špeciálne efekty atď. Takáto je sila CSS, ktorá – mimochodom – pre kaskádové šablóny štýlov chýba. Keď dáte súbory HTMl a CSS dokopy a hodíte niekoľko obrázkov, skončíte s úplnou webovou stránkou.

Veci sa pri témach WordPress príliš nelíšia. Ako sme videli v časti 1 témy „Ako vytvoriť tému WordPress z HTML“, témy WordPress sa rozdelia do rôznych súborov. Ak v tejto chvíli nemôžete nájsť nejakú podobnosť, dovoľte mi to vysvetliť.

Statické webové stránky HTML sa pomocou rozdelia na časti (čo sme predtým nazvali sekciami)

značiek (alebo tabuliek, ak ste naozaj stará škola). Na druhej strane, témy WordPress sú rozdelené do rôznych súborov php, ktoré sa potom dajú dohromady pomocou značiek šablón.

Preto namiesto toho, aby všetky prvky tela (hlavička, hlavný obsah, bočný panel, päta atď.) Žili v jednom súbore (ako je to v prípade statického HTML), každý z prvkov tela (v témach WordPress) žije v samostatných súboroch..

Takže hlavička bude žiť v hlavičke header.php, bočný panel nájde domov v bočnom paneli.php, hlavný obsah bude žiť v index.php alebo single.php (ak ide o príspevok) alebo page.php (ak ide o stránku) ). Päta sekcie bude žiť v footer.php a tak ďalej.

Sledujete? Pozrite sa na obrázok nižšie:

html-wordpress = štruktúra

Z vyššie uvedenej ilustrácie, , a sa nazývajú značky šablón. Ich úlohou je načítať header.php, sidebar.php a footer.php v tomto poradí z adresára tém a zobraziť obsah v indexe.php, čím dokončíte webovú stránku..

Nedovoľte, aby .php Ak vás rozšírenie vydesí, obsah v súboroch php je iba kód HTML, ktorý poznáte. Váš header.php môže napríklad obsahovať typickú navigáciu v zozname HTML. Podobne môžete do footer.php, sidebar.php a index.php vložiť typický kód HTML.

Môžete tiež umiestniť loop.php fungovať vo vašom index.php (alebo kdekoľvek, kde sa vám páči) a zobraziť vaše príspevky v blogu, ale mal by som spomaliť a vrátiť sa k anatómii tém WordPress. V časti 2 som spomenul niečo o slučke o tom, ako vytvoriť tému WordPress z HTML. a budeme o tom hovoriť (slučka) a ďalšie funkcie v budúcnosti.

Pohybujúce sa na…

Základná téma WordPress pozostáva z najmenej štyroch súborov šablóny, a to:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Pozrime sa, čo s nimi súvisí kúzelný súbory:

Súbor šablóny Index.php

Toto je hlavný súbor, bez ktorého nemáte pracovnú tému WordPress. Je to prvý (alebo predvolený) súbor, ktorý sa načíta, keď navštívite webovú stránku WordPress. Považujte to za ekvivalent index.html.

Typický index.php v témach WordPress bude vyzerať takto:





Môžete pridať slučku medzi a na zobrazenie blogových príspevkov na domovskej stránke (index.php), ako je uvedené nižšie:




Súbor šablóny Header.php

Tieto súbory šablóny obsahujú váš hlavičkový kód, navigačný kód a kód hlavy HTML. V podstate header.php ukladá všetko, čo chcete zobraziť, na začiatok svojej webovej stránky. Viete, veci ako názov vášho webu a podobné veci.

Môžete tiež vytvoriť odkaz na svoju šablónu so štýlmi CSS v hlavičke header.php. Tu je základný príklad header.php:





<?php wp_title( '|', true, 'right' ); ?>







Toto je časť hlavičky. Sem vložte svoje logo a ďalšie podrobnosti.

Súbor šablóny Sidebar.php

Sidebar.php obsahuje všetko, čo sa musí zobraziť na vašom bočnom paneli. Bočný panel obsahuje ďalšie ponuky, widgety, kategórie, ikony sociálnych médií, vlastný obsah, HTML kód, ako sú reklamy atď.

Sidebar.php môže obsahovať čisté značky HTML alebo volania funkcií php v závislosti od vašich potrieb. Základný sidebar.php by tak mohol vyzerať takto:

Footer.php Súbor šablóny

Čo si myslíte, že ide do footer.php? Tu môžete uviesť svoje informácie o autorských právach, ďalšie ponuky, odkazy, ikony sociálnych médií – čokoľvek chcete! Chceli by ste vidieť, ako vyzerá základný footer.php? Tu:

Sem vložte obsah päty vrátane volaní funkcií php (na získanie rôznych súborov šablón, napr. Search.php), ak je to potrebné.

Všimnite si a zatváranie značiek v footer.php? Dokážete uhádnuť, prečo musia byť zahrnuté do súboru footer.php? Podobne môžete hádať, prečo a otváracie značky sú zahrnuté v hlavičke header.php? Dajte nám vedieť svoje odhady v sekcii komentárov na konci tohto príspevku ��

Štyri súbory šablón, ktoré sme práve prebrali vyššie, tvoria veľmi základnú tému WordPress. Existuje mnoho ďalších súborov šablón; existuje súbor šablón pre každý prvok, ktorý vidíte na téme WordPress, či už ide o komentáre, výsledky vyhľadávania a 404 chybové stránky, aby som spomenul niekoľko.

Ak chcete úplne porozumieť anatómii témy WordPress, musíte sa oboznámiť s rôznymi súbormi šablón. Môžete prehliadať všetky použiteľné dlaždice šablón na WordPress.

Potom máme značky šablón, ktoré používa WordPress na načítanie súborov šablón z adresára témy. Môžete sa dozvedieť viac o šablóny značiek a úlohu, ktorú zohrávajú pri WordPress.

zhrnutie

Téma WordPress pozostáva z nasledujúcich anatomických prvkov:

  • Súbory šablón ako index.php, header.php, search.php, category.php atď
  • Značky šablón, napr , atď
  • CSS
  • Obrázky a iné mediálne súbory
  • Súbory JavaScript

A tu je ilustrácia, ktorá sumarizuje anatómiu témy WordPress:

Chcete pokračovať v učení? Pokladňa podrobné sprievodca témou anatómie v kóde WordPress.

záver

Každá téma WordPress, ktorú vidíte na webe, používa rovnakú anatomickú štruktúru (dokonca aj našu obľúbenú tému Total WordPress Theme), ktorú si môžete prispôsobiť podľa svojich potrieb. Akonáhle zabalíte hlavu okolo základov vývoja témy WordPress, neexistuje žiadny limit na to, čo môžete robiť s / na témy WordPress..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map