Share
Tot nu toe hebben we in deze serie de bouwstenen van Thesis besproken en hoe je de instellingen van je site beheert, maar nu willen we de algemene structuur en het uiterlijk van je website verbeteren, of 'Skin' zoals het in het Thesis Framework wordt genoemd. Om dit te doen, zullen we het grootste deel van onze tijd in de Thesis Skin Editor doorbrengen.
Om te beginnen, hebt u nodig:
Thesis 2.0 komt uit met twee pre-built skins, Thesis Classic en Thesis Blank. Sommige mensen bouwen liever af van Thesis Classic omdat het al een voorraad heeft met verschillende lay-outcombinaties, maar voor degenen die een meer "aangepaste" look willen, kunnen ze kiezen voor Thesis Blank, wat in wezen een volledig lege skin is, zonder aangepaste functies, stijlen, haken, enz.
Ten behoeve van deze tutorial gaan we bouwen vanuit de Thesis Blank-skin die is opgenomen in het Thesis Framework, en een zeer eenvoudige 2-column startpagina maken met een query voor recente berichten en een zijbalk. Zodra u de sjablonen voor het bouwen en het werken met de Thesis Query Box onder de knie hebt, zult u zien hoe gemakkelijk het wordt om meer sjablonen te maken om andere pagina's te ondersteunen die u misschien in de toekomst nodig zult hebben.
Om te bouwen met de lege huid, moeten we deze eerst selecteren. Om de blanco huid te selecteren,
Eenmaal geselecteerd, gaat u naar de Skin Editor zodat we met de ontwikkeling kunnen beginnen. Je kunt er komen door naar Thesis> Skins> Skin Editor te gaan. Wanneer u voor het eerst op de Skin Editor klikt, ziet u dat er een pop-upvenster met uw website verschijnt, samen met het dashboard van de Skin Editor. Dit venster is een "voorbeeld" -scherm van uw website. Je kunt dit scherm tijdens je ontwikkeling verversen om te zien hoe dingen vorm krijgen.
Nu we ons in de Skin Editor bevinden, moeten we vanaf de bovenkant op HTML klikken (het moet standaard naar de HTML-sectie gaan, maar voor het geval, zorg dat je op de juiste plek zit).
In de lege huid moet de bodydoos helemaal leeg zijn. Op deze locatie gaan we onze HTML-structuur bouwen. Laten we beginnen met het bouwen van onze homepage-structuur.
Om elke "container" of "element" op onze pagina te bouwen, gaan we dozen gebruiken. In de Skin Editor ziet u enkele voorgebouwde vakken, evenals een sectie om "Vakken toevoegen" net eronder aan de rechterkant van uw scherm. We zullen dozen toevoegen om onze structuur uit te bouwen.
Thesis wordt geleverd met negen vooraf gebouwde opties om uit te kiezen.
Zij zijn:
Voor de structuur van onze website concentreren we ons vooral op het maken van "Container" -kaders. Onze structuur zal ongeveer zo gaan:
Volg deze stappen om elk vak te maken:
Zodra je de structuur hebt ingedeeld, moeten we ofwel een klasse of een ID toewijzen met elk element van onze structuur.
Het toewijzen van een klasse of id aan een boxelement gebeurt door eenvoudig over de box te bewegen en op het tandwielpictogram te klikken dat verschijnt (vergelijkbaar met het bijwerken van uw site-instellingen). Wanneer op het tandwielpictogram wordt geklikt, wordt u gevraagd een aantal opties in te vullen:
Het is belangrijk om te onthouden in welke klassen je elk element hebt genoemd, omdat je die informatie nodig hebt wanneer we klaar zijn om elk vakje te stijlen.
Hieronder staan de volgende structurele CSS-selectors die worden gebruikt voor de startpagina van deze specifieke skin:
Accentsconagua
#wikkel #houder #header #Pagina Titel (Thesis generated id)#site_tagline (Thesis generated id)# Menu-primair .belangrijkste inhoud .column_1 .column_2 .zijbalk .widget #footer Vervolgens moeten we nog enkele "sjablonen" toevoegen om alles naar behoren te laten werken op onze huid. We moeten nog steeds een paginasjabloon en een bericht met één bericht maken. Omdat we voor elke pagina dezelfde algemene opmaak willen behouden, kunnen we de ingebouwde Thesis-kopieersjabloonfunctie gebruiken om de elementen van de startpagina te kopiëren en toe te passen op onze andere sjablonen.
Ga als volgt te werk om een andere sjabloon voor onze afzonderlijke berichtpagina's te maken:
Dit proces kopieert uw sjablooninformatie naar een nieuwe sjabloon. Vervolgens moeten we onze recente berichten ruilen voor de individuele bericht- / pagina-informatie. Hiertoe gaat u als volgt te werk:
We herhalen hetzelfde proces om onze interne paginasjabloon te maken, maar in plaats van de thuissjabloon te kopiëren, kopiëren we de enkele sjabloon, omdat we alleen dezelfde type inhoud (zoals de titel, inhoud, enzovoort) hoeven op te halen).
Voor archiefpagina's moet je je "post" -inhoud in een WP_Loop-vak plaatsen (deze kan op dezelfde manier worden gemaakt als alle andere vakken kunnen worden gemaakt.) Dit WP_Loop-vak werkt hetzelfde als de lus op de archief- of taxonomiepagina's.)
Tot dusverre hebben we al onze structurele elementen in onze Thesis Skin gecreëerd. Nu moeten we wat stijl toepassen op hen. In het volgende artikel bespreken we hoe u uw skin kunt stylen met behulp van de CSS-sectie voor de Skin Editor om "Packages" te maken voor elk van de CSS-selectors die we eerder hebben toegewezen.
