Een eenvoudig thema maken voor WordPress. Handmatig en met behulp van programma's verschillende WordPress-thema's maken

Deze tutorial laat u zien hoe u een nieuwe paginasjabloon voor WordPress Cherry-sjablonen kunt maken Kader.

    Log in op uw WordPress-beheerderspaneel.

    Menu openen Pagina's -> Nieuwe toevoegen (Pagina's -> Nieuwe toevoegen) en maak een nieuwe pagina met een nieuw paginasjabloon.

    Voer een titel voor de pagina in en sla uw wijzigingen op. In de rechterkolom van het paneel kunt u een van de paginasjablonen selecteren die in uw thema worden gebruikt. U moet een nieuwe paginasjabloon aan deze lijst toevoegen. Al deze sjablonen bevinden zich in een map op uw server. Maar u moet een nieuwe paginasjabloon aan de map toevoegen wp-content/themes/thema#####.

    Maak een nieuw .php-bestand in een editor zoals Dreamweaver of Notepad++ en geef het een naam als: nieuw.php . Voeg de volgende code toe aan dit bestand:

    Sla het bestand op en upload het naar de map wp-content/themes/thema##### naar uw server.

    Ga nu terug naar de pagina die u in uw WordPress-beheerderspaneel heeft gemaakt. In het paneel Paginakenmerken U kunt een nieuw paginasjabloon kiezen met de naam 'Aangepast'.

    Open het new.php-bestand opnieuw en begin met het toevoegen van uw inhoud. Het bestand kan alles bevatten wat u maar wilt, inclusief onveranderlijke inhoud of pagina-indelingselementen die de pagina-inhoud weergeven.

    U kunt code-elementen van andere paginasjablonen uit de map gebruiken wp-content/themes/CherryFramework om een ​​specifieke pagina te maken.

    Laten we eerst een kop- en voettekst toevoegen aan de nieuwe paginasjabloon:

    Als u uw wijzigingen opslaat, kunt u ze op de pagina zien:

    Nu moet u het type inhoud selecteren dat u op deze pagina wilt gebruiken. Stel dat u geen afzonderlijk paginasjabloon heeft voor aangepaste 'Ons team'-berichten. En je vindt het ontwerp van de paginasjabloon Testimonials leuk en je wilt dit ontwerp graag gebruiken voor ‘Ons team’-berichten. Om dit in het menu te doen Ontwerp -> Editor (Uiterlijk -> Editor) u kunt eenvoudig het bestand vinden dat de code voor de paginasjabloon Testimonials bevat. Zijn naam pagina-testi.php.

    Open dit bestand om te bewerken. Kopieer alleen de inhoudscode, aangezien u de kop- en voettekst al heeft toegevoegd (hieronder ziet u een voorbeeld van deze code, uw code kan er anders uitzien):

    " data-motopress-wrapper-file = "pagina-testi.php" data-motopress-wrapper-type = "inhoud">
    " data-motopress-type = "statisch" data-motopress-static-file = "statisch/statische-titel.php">
    " id="inhoud" data-motopress-type="loop" data-motopress-loop-file="loop/loop-testi.php">
    zijbalk" id='zijbalk' data-motopress-type='statische-zijbalk' data-motopress-sidebar-file='zijbar.php'>

    Plak de gekopieerde code in het new.php-bestand. Vervangen Sjabloonnaam: Aangepast op Sjabloonnaam: Team

    En vervangen pagina-testi.php op nieuw.php in deze code.

    Deze code bevat ook een link naar het bestand loop/loop-testi.php. Dit is een ander bestand dat u moet kopiëren en bewerken. Kopieer het bestand loop-testi.php uit map wp-content/themes/CherryFramework/loop en plak het in de map wp-content/themes/thema#####/loop(als uw themamap geen map heeft lus, je zou het moeten maken). Hernoem dit bestand naar bijvoorbeeld lus-nieuw.php en open het om te bewerken. Vervang het woord “testi” op woord "team" in alle regels van het bestand en sla de wijzigingen op. (U kunt de sneltoets Control (Command) + F gebruiken om woorden te vervangen.)

    Wanneer het bestand lus-nieuw.php gemaakt en bewerkt, opent u het bestand opnieuw nieuw.php en vervangen loop/loop-testi.php op loop/loop-nieuw.php in zijn code. Als gevolg hiervan ziet uw code er als volgt uit:

    " data-motopress-wrapper-file = "nieuw.php" data-motopress-wrapper-type = "inhoud">
    " data-motopress-type = "statisch" data-motopress-static-file = "statisch/statische-titel.php">
    " id = "inhoud" data-motopress-type = "loop" data-motopress-loop-file = "loop/loop-new.php">
    zijbalk" id='zijbalk' data-motopress-type='statische-zijbalk' data-motopress-sidebar-file='zijbar.php'>

    Sla uw wijzigingen op en test uw nieuwe pagina. Het zou nu aangepaste ‘Ons team’-berichten moeten bevatten met het ontwerp van de getuigenissenpagina.

Als u vaak in MS Word werkt, zal het opslaan van een document als sjabloon u waarschijnlijk interesseren. Het hebben van een sjabloonbestand met opmaak, velden en andere parameters die u instelt, kan de workflow aanzienlijk vereenvoudigen en versnellen.

Een sjabloon gemaakt in Word wordt opgeslagen in de formaten DOT, DOTX of DOTM. Dit laatste maakt het werken met macro's mogelijk.

Steekproef is een speciaal type document; wanneer het wordt geopend en vervolgens gewijzigd, wordt er een kopie van het bestand gemaakt. Het originele (sjabloon)document blijft ongewijzigd, evenals de locatie op de schijf.

Als voorbeeld van wat een documentsjabloon kan zijn en waarom het überhaupt nodig is, kunt u een businessplan geven. Documenten van dit type worden vrij vaak in Word gemaakt en worden daarom ook vrij vaak gebruikt.

Dus in plaats van de documentstructuur elke keer opnieuw te maken, de juiste lettertypen en ontwerpstijlen te kiezen en de marges in te stellen, kunt u eenvoudigweg een sjabloon met een standaardindeling gebruiken. Mee eens, deze benadering van werken is veel rationeler.

Een document dat als sjabloon is opgeslagen, kan worden geopend en ingevuld met de benodigde gegevens en tekst. Terwijl u het tegelijkertijd opslaat in de DOC- en DOCX-formaten die standaard zijn voor Word, blijft het brondocument (de gemaakte sjabloon) ongewijzigd, zoals hierboven vermeld.

De meeste sjablonen die u mogelijk nodig heeft om met documenten in Word te werken, zijn te vinden op de officiële website (). Bovendien kunt u in het programma uw eigen sjablonen maken en bestaande wijzigen.

Opmerking: Sommige sjablonen zijn al in het programma ingebouwd, maar sommige bevinden zich, hoewel ze in de lijst worden weergegeven, feitelijk op de Office.com-website. Nadat u op een dergelijke sjabloon hebt geklikt, wordt deze onmiddellijk van de site gedownload en beschikbaar voor gebruik.

Creëer uw eigen sjabloon

De eenvoudigste manier om te beginnen met het maken van een sjabloon is met een leeg document, dat u kunt openen door simpelweg Word te starten.

Als u een van de nieuwste versies van MS Word gebruikt, wordt u bij het openen van het programma begroet door een startpagina waarop u al een van de beschikbare sjablonen kunt selecteren. Wat vooral prettig is, is dat ze allemaal handig zijn gesorteerd in thematische categorieën.

Als u echter zelf een sjabloon wilt maken, kiest u voor "Nieuw document". Er wordt een standaarddocument geopend met de standaardinstellingen. Deze parameters kunnen programmatisch zijn (ingesteld door ontwikkelaars) of door u gemaakt (als u eerder bepaalde waarden als standaardwaarden heeft opgeslagen).

Breng met behulp van onze lessen de nodige wijzigingen aan in het document, dat later als sjabloon zal worden gebruikt.

Naast het uitvoeren van de bovenstaande stappen, kunt u ook een watermerk, watermerken of andere afbeeldingen toevoegen als standaardinstellingen voor het document dat als sjabloon moet worden gebruikt. Alles wat u in de toekomst wijzigt, toevoegt en opslaat, zal aanwezig zijn in elk document dat op basis van uw sjabloon wordt gemaakt.

Lessen over het werken met Word:




Nadat u de nodige wijzigingen hebt aangebracht, stelt u de standaardparameters in op de toekomstige sjabloon. Deze moet worden opgeslagen.

1. Klik op de knop "Bestand"(of "MS-Office", als u een oudere versie van Word gebruikt).

3. In het vervolgkeuzemenu "Bestandstype" selecteer het juiste sjabloontype:

  • Word-sjabloon (*.dotx): een regulier sjabloon, compatibel met alle versies van Word ouder dan 2003;
  • Word-sjabloon met macro-ondersteuning (*.dotm): zoals de naam al doet vermoeden, ondersteunt dit type sjabloon het werken met macro's;
  • Sjabloon Word 97 - 2003 (*.dot): compatibel met oudere versies van Word 1997 - 2003.

4. Stel de bestandsnaam in, geef het pad op waar u het wilt opslaan en klik "Redden".

5. Het bestand dat u hebt gemaakt en geconfigureerd, wordt opgeslagen als sjabloon in het door u opgegeven formaat. Nu kunt u het sluiten.

Maak een sjabloon van een bestaand document of een standaardsjabloon

1. Open een leeg MS Word-document, ga naar het tabblad "Bestand" en selecteer "Creëren".

Opmerking: In de nieuwste versies van Word krijgt de gebruiker bij het openen van een leeg document onmiddellijk een lijst met sjabloonlay-outs aangeboden op basis waarvan een toekomstig document kan worden gemaakt. Als u toegang wilt tot alle sjablonen, selecteert u dit bij het openen "Nieuw document" en volg vervolgens de stappen beschreven in punt 1.

2. Selecteer de juiste sjabloon in de sectie “Beschikbare sjablonen”.

Opmerking: In de nieuwste versies van Word hoeft u niets te selecteren; er verschijnt onmiddellijk een lijst met beschikbare sjablonen nadat u op de knop klikt "Creëren", direct boven de sjablonen vindt u een lijst met beschikbare categorieën.

3. Breng de nodige wijzigingen aan in het document met behulp van onze tips en instructies uit het vorige gedeelte van het artikel (Uw eigen sjabloon maken).

Opmerking: Voor verschillende sjablonen: tekststijlen die standaard beschikbaar zijn en op het tabblad worden weergegeven "Thuis" in groep “Stijlen”, kunnen afwijken en merkbaar afwijken van wat u gewend bent in een standaarddocument.

    Advies: Profiteer van de beschikbare stijlen om uw toekomstige sjabloon echt uniek te maken, in tegenstelling tot andere documenten. Doe dit uiteraard alleen als u niet beperkt wordt door de documentvereisten.

4. Nadat u de nodige wijzigingen in het document hebt aangebracht, maakt u alle instellingen die u nodig acht en slaat u het bestand op. Om dit te doen, klikt u op het tabblad "Bestand" en selecteer "Opslaan als".

5. In sectie "Bestandstype" selecteer het juiste sjabloontype.

6. Stel een naam in voor de sjabloon, geef op via "Geleider" ("Beoordeling") pad om het op te slaan, klik op de knop "Redden".

7. De sjabloon die u maakt op basis van de bestaande, wordt samen met eventuele wijzigingen opgeslagen. Dit bestand kan nu worden gesloten.

Bouwstenen aan een sjabloon toevoegen

Bouwstenen zijn de herbruikbare elementen in een document, evenals de documentcomponenten die in een verzameling zijn opgeslagen en op elk moment beschikbaar zijn voor gebruik. Met behulp van sjablonen kunt u bouwstenen opslaan en distribueren.

Met behulp van standaardblokken kunt u dus een rapportsjabloon maken dat begeleidende brieven van twee of meer typen bevat. Tegelijkertijd kunnen andere gebruikers bij het maken van een nieuw rapport op basis van deze sjabloon elk van de beschikbare typen selecteren.

1. Maak, bewaar en sluit de sjabloon die u hebt gemaakt, rekening houdend met alle vereisten. Aan dit bestand worden standaardblokken toegevoegd, die later beschikbaar zullen zijn voor andere gebruikers van de sjabloon die u hebt gemaakt.

2. Open het sjabloondocument waaraan u bouwstenen wilt toevoegen.

3. Creëer de benodigde bouwstenen, die later beschikbaar zullen zijn voor andere gebruikers.

Opmerking: Bij het invoeren van informatie in het dialoogvenster “Een nieuwe bouwsteen creëren” in de rij invoeren "Opslaan in" de naam van de sjabloon waaraan ze moeten worden toegevoegd (dit is het bestand dat u hebt gemaakt, opgeslagen en gesloten volgens de eerste paragraaf van dit gedeelte van het artikel).

Het door u gemaakte sjabloon met daarin de bouwstenen kunt u nu delen met andere gebruikers. De blokken zelf, die ermee zijn opgeslagen, zullen beschikbaar zijn in de opgegeven collecties.

Inhoudsbesturingselementen toevoegen aan een sjabloon

Er zijn situaties waarin u uw sjabloon en de gehele inhoud enige flexibiliteit wilt geven. Een sjabloon kan bijvoorbeeld een vervolgkeuzelijst bevatten die door de auteur is gemaakt. Om de een of andere reden is deze lijst mogelijk niet geschikt voor een andere gebruiker die er toevallig mee werkt.

Als zo'n sjabloon inhoudsbesturingselementen bevat, kan de tweede gebruiker de lijst naar eigen inzicht aanpassen en deze in de sjabloon zelf ongewijzigd laten. Als u inhoudsbesturingselementen aan uw sjabloon wilt toevoegen, moet u het tabblad inschakelen "Ontwikkelaar" in MS Word.

1. Open het menu "Bestand"(of "MS-Office" in eerdere versies van het programma).

2. Open de sectie "Opties" en selecteer daar het item “Pas het lint aan”.

3. In de sectie “Hoofdtabbladen” vink het vakje naast het item aan "Ontwikkelaar". Om het venster te sluiten, klikt u op "OK".

4. Tab "Ontwikkelaar" verschijnt op het Word-configuratiescherm.

Inhoudsbesturingselementen toevoegen

1. Op het tabblad "Ontwikkelaar" klik op de knop “Ontwerpmodus” zich in de groep bevindt “Controles”.

Voeg de benodigde besturingselementen in het document in door ze te selecteren uit de besturingselementen die worden weergegeven in de groep met dezelfde naam:

  • Rijke text;
  • Platte tekst;
  • Tekening;
  • Verzameling bouwstenen;
  • Combinatiebox;
  • Keuzelijst;
  • Datumselectie;
  • Selectievakje;
  • Herhalend gedeelte.

Voeg verklarende tekst toe aan een sjabloon

U kunt het sjabloon gebruiksvriendelijker maken door verklarende tekst aan het document toe te voegen. Indien nodig kan de standaard verklarende tekst altijd worden gewijzigd in het inhoudsbeheer. Volg deze stappen om de standaard verklarende tekst in te stellen voor gebruikers die de sjabloon gaan gebruiken:

1. Schakel in “Ontwerpmodus”(tab "Ontwikkelaar", groep “Controles”).

2. Klik op het inhoudsbesturingselement waar u verklarende tekst wilt toevoegen of wijzigen.

Opmerking: De verklarende tekst wordt standaard in kleine blokken weergegeven. Als “Ontwerpmodus” uitgeschakeld, worden deze blokken niet weergegeven.

3. Wijzig en formatteer de alternatieve tekst.

4. Uitschakelen “Ontwerpmodus” door nogmaals op deze knop op het bedieningspaneel te drukken.

5. Er wordt een verklarende tekst voor het huidige sjabloon opgeslagen.

Dit is waar we eindigen. Uit dit artikel heb je geleerd wat sjablonen in Microsoft Word zijn, hoe je ze kunt maken en bewerken, en wat je er allemaal mee kunt doen. Dit is een erg nuttige functie van het programma, die het werken ermee enorm vereenvoudigt, vooral als niet één, maar meerdere gebruikers, en niet te vergeten grote bedrijven, aan documenten werken.

Een WordPress-sjabloon maken is eenvoudiger dan u misschien denkt. Om dit te doen, hoeft u geen uitgebreide ervaring te hebben met het ontwerpen of programmeren van websites. In dit artikel leiden we u door de basisprincipes van het helemaal opnieuw maken van uw eigen WordPress-thema's.

Waarom zou u überhaupt uw ​​eigen WordPress-sjabloon moeten maken als u de sjablonen kunt gebruiken die beschikbaar zijn in de database? Hier volgen enkele redenen die daartoe aanleiding kunnen geven:

  • U kunt een unieke website of landingspagina krijgen die anders is dan die van uw concurrenten. Gezien de miljoenen blogs die op dit CMS zijn gebouwd, wordt elk standaardontwerp minstens honderd keer gebruikt.
  • Volledige vrijheid van handelen in de ontwikkelingsfase. Je kunt je eigen functionaliteit toevoegen met de werkelementen die je nodig hebt.
  • U kunt voor verschillende delen van de site verschillende ontwerpen gebruiken, wat niet mogelijk is als u een kant-en-klaar sjabloon gebruikt.
  • U kunt verschillende weergaven maken en bezoekers de mogelijkheid bieden om tussen verschillende onderwerpen te wisselen, waardoor de interesse en loyaliteit aan de webbron toeneemt.
  • Het gemak van het werken met WordPress maakt het voor velen toegankelijk (videotutorials op internet zullen helpen). Dit betekent dat het ontwikkelen van een hoofdthema of het zelf maken van een subthema geld bespaart op het inhuren van externe ontwerpers en programmeurs.
  • U kunt profiteren van de mogelijkheid van onderliggende thema's - wanneer er aanpassingen worden gedaan aan het dupliceren van stijlbladen style.css, terwijl het hoofdbestand onaangeroerd blijft. Hiermee kunt u wijzigingen snel ongedaan maken als ze niet succesvol zijn, en ook geen werk verliezen bij het bijwerken van het hoofdthema.

Korte instructies

Natuurlijk kunt u niet volledig leren hoe u met slechts één artikel een paginasjabloon kunt maken. Om te beginnen is het belangrijk om de basis te begrijpen: hoe de eenvoudigste thema's worden gemaakt. Op basis daarvan kunt u al creatief aan de slag en een landingspagina of website maken volgens uw wensen. Nu geven we u een kort spiekbriefje met stapsgewijze instructies - dit zal u helpen begrijpen hoe u een website kunt maken.

Stap één: voorbereidend werk

Voordat u met het werk begint, moet u ervoor zorgen dat u over een teksteditor beschikt (de eenvoudigste is Notepad of Nodepad++, vooral omdat u deze gratis kunt downloaden). De volgende stap is het installeren van de WordPress-engine en de Denwer-suite op uw lokale computer. Denver is een pakket essentiële tools voor programmeurs. Met hun hulp wordt het proces van het ontwikkelen en aanpassen van websites aanzienlijk vergemakkelijkt en versneld. Deze video laat zien hoe je het installeert:

Stap twee: maak een nieuwe themamap

Laten we naar de gewenste map gaan. Meestal gaat het via het volgende pad: . Hier worden alle thema’s opgeslagen – zowel standaard als maatwerk. We gaan erop in en maken een nieuwe map. We noemen het bijvoorbeeld “MijnEersteTheme”.

Ga nu naar een nieuwe map en zorg ervoor dat u twee bestanden toevoegt die zijn gemaakt met Nodepad++ of een andere editor. Dit zijn index.php en style.css. Laat deze documenten voorlopig leeg blijven, dan gaan we ze invullen. Voeg ook de map afbeeldingen toe aan “MyFirstTheme”. waar u afbeeldingen kunt toevoegen om de sjabloon te versieren.

Vervolgens kunt u aan “MyFirstTheme” sjablonen toevoegen voor afzonderlijke delen van de site: zijbalk (sidebar.php), site (header.php), berichten op pagina’s (single.php), opmerkingen (comments.php), enz. A De set extra bestanden is afhankelijk van de structuur die u voor uw webbron plant.

Stap drie: index.php invullen

Het eerste dat u moet doen, is het indexbestand (index.php) invullen. Hier is een voorbeeld van de eenvoudigste code, volgens welke de site vier gebieden zal hebben: koptekst, hoofdtekst, zijbalk en voettekst.












In het bestand kunt u alle elementen registreren die u op uw website wilt zien. Meer informatie over het schrijven van index.php-code om thema's te maken in WordPress vindt u in de video:

Stap vier: vul style.css in

Nu moet je style.css openen, de volgende velden toevoegen en invullen (voer je eigen informatie over de site en de eigenaar in in plaats van ***). De ingevoerde gegevens worden weergegeven in het beheerderspaneel.

/*Themanaam: ***

Thema-URI: http:// ***

Auteur-URI: http:// ***

Beschrijving: ***

Vervolgens is het mogelijk om in dit bestand verschillende gegevens en regels in te voeren die het uiterlijk van de pagina’s bepalen. Bijvoorbeeld:

(de informatie in /**/ is commentaar, geen delen van code)

In dit stadium is het nog te vroeg om strikte stijlparameters in te stellen, maar als u verder met het bestand werkt, kan deze video-tutorial nuttig zijn:

Stap vijf: splits de bestanden

Alle elementen gespecificeerd in index.php moeten in aparte bestanden worden gedupliceerd. In stap één werden in het voorbeeld naast het hoofdgedeelte ook de koptekst, de zijbalk en de voettekst gespecificeerd. Daarom maken we er onze eigen documenten voor in .php-formaat.

Maak bijvoorbeeld een bestand header.php en open index.php. We vinden het overeenkomstige codegedeelte en plakken dit in een nieuw bestand. Het zal zijn:






Pagina Titel



Hetzelfde wordt gedaan voor de overige onderdelen. Dit moet worden gedaan voor eenvoudiger navigatie. Wanneer er veel elementen van de toekomstige site zijn, zullen afzonderlijke bestanden u helpen beter te navigeren om te controleren of wijzigingen aan te brengen.
Om ervoor te zorgen dat het hoofdindexbestand consistent is met de aanvullende bestanden, moet het volgende in index.php onder de blokken voor elk onderdeel worden geschreven:






Hieronder vindt u een lijst met standaardsjabloonbestanden die door WordPress worden gebruikt. U hoeft ze niet te gebruiken of uw eigen secties toe te voegen:

  • Koptekst – de stijl van de koptekst van uw site.
  • Opmerkingen – sjabloon voor het maken van opmerkingen.
  • Home – thema voor de hoofdpagina.
  • Pagina - definieert het thema als u afzonderlijke pagina's op de site maakt
  • Categorie – sjabloon voor het opsplitsen van categorieën
  • Datum – definieert de datum-tijd weergavestijl.
  • Archief – een sjabloon voor een archiefsectie met oud materiaal.
  • Zoeken – een bestand dat parameters specificeert voor zoeken op de site.
  • 404 is een sjabloon voor een pagina die een 404 Not Found-fout meldt.
  • Voettekst – definieert de stijl van de voettekst van uw site.

Wanneer u vervolgens elk element verfijnt, heeft u een visuele video-tutorial nodig. Hier zijn een paar selecties die u kunnen helpen:

Koptekst in header.php:

Inhoud toevoegen:

Stylingopmerkingen:

Voettekst op de site:

Hoe u veilig wijzigingen kunt aanbrengen

Wanneer u wijzigingen moet aanbrengen in websitepagina's, bestaat het risico dat u iets verkeerd schrijft en dit niet kunt terugdraaien. Het kan ook voorkomen dat stylesheet-items verdwijnen wanneer het hoofdthema wordt bijgewerkt.

Om dit te voorkomen, kunt u een onderliggend WordPress-thema (subthema) maken - dit is een duplicaat van het style.css-bestand dat geen invloed heeft op het hoofdbestand (wijzigingen in het ene bestand annuleren updates in het andere niet).

Het maken van een WordPress-kindthema is eenvoudig. U moet een nieuwe map maken in de hoofdmap C:\WebServers\home\localhost\www\NAME_SET_DUR_INSTALL\wp-content\themes. In de nieuwe map maken we ons eigen style.css-bestand met de volgende inhoud:

Themanaam: TOPICNAAM

Sjabloon: MAPNAAM IN KINDTHEMA

Thema-URI: VUL IN

Beschrijving: VUL IN

Auteur-URI: VUL IN

/* importeer de stijlen van het hoofdthema */

@import-URL("../NAAM/stijl.css");

/* Je eigen aanvullende stijlen */

Foo(kleur: rood; )

Nu kunt u in het beheerderspaneel naar “Uiterlijk ›Thema’s” gaan en de onderliggende sjabloon activeren. In de toekomst kunt u in het nieuwe bestand werken. Daarnaast een korte videopresentatie over het onderwerp onderliggende sjablonen:

Houd er rekening mee dat WordPress een aantal klassen genereert die aanwezig moeten zijn in het stijlblad. Bijvoorbeeld lessen aligncenter, alignleft en alignright dienen om afbeeldingen uit te lijnen en elementen te blokkeren, en ze moeten worden opgenomen in uw stylesheet (kan worden gekopieerd van de stylesheet van het standaardthema):


.Tekst in het midden uitlijnen,
div.aligncenter(
weergave: blok;
marge-links: auto;
marge-rechts: auto;
}
.alignleft(
zweven: links;
}
.rechts uitlijnen(
zweven: rechts;
}

De volgende klassen worden gebruikt om afbeeldingen met bijschriften uit te lijnen (kan worden gekopieerd van het standaardthema, later indien nodig gecorrigeerd):


.wp-bijschrift (
rand: 1px effen #ddd;
tekst uitlijnen: centreren;
achtergrondkleur: #f3f3f3;
opvulling bovenaan: 4px;
marge: 10px;
/*optionele parameters die afgeronde hoeken maken in ondersteunde browsers*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
grensradius: 3px;
}
.wp-caption img (
marge: 0;
opvulling: 0;
rand: 0 geen;
}
.wp-caption p.wp-caption-tekst (
lettergrootte: 11px;
lijnhoogte: 17px;
opvulling: 0 4px 5px;
marge: 0;
}

Daarnaast zijn er nog verschillende andere WordPress-klassen die niet in de stylesheet beschreven hoeven te worden, maar omdat... WordPress genereert er pagina's mee en u kunt ze opmaken:


.categorieën(...)
.cat-item /* Deze klasse is toegewezen aan alle categorieën */)
.current-cat (/* huidige categoriestijl */)
.current-cat-parent (/* stijl voor de voorouder(s) van de huidige categorie */)
.children (/* klas voor kind */)
.pagenav (/* paginanavigatie */)
.page_item (/* elk lijstelement */)
.current_page_item (/* deze klasse wordt in de lijst met pagina's toegewezen aan de huidige actieve pagina */)
.current_page_parent (/*klasse voor de bovenliggende pagina in relatie tot de huidige */)
.current_page_ancestor (/* elke pagina van de bovenste niveaus ten opzichte van deze */)
.widget (/* alle widgets zijn in deze klasse verpakt */)

Gebruik tijdens het opmaakproces blokken en stijlen ervoor, zoals gedefinieerd in de schermafbeeldingen aan het begin van het artikel. Dit is niet noodzakelijk, maar wel zeer wenselijk.

Zo zullen we in de toekomst via special een zoekformulier aan de site koppelen. wordpress-tag , waardoor WordPress het volgende formulier zal weergeven:

Daarom houden we hier rekening mee bij het ontwerpen van het thema.

En het laatste dat u aan style.css moet toevoegen, is informatie over uzelf en het gemaakte thema. De informatie wordt aan het begin van het bestand in de opmerkingen geplaatst:

/*
Themanaam: Creëer een unieke themanaam
Thema-URI: http://link-naar-thema-homepage
Beschrijving: Beschrijving van het onderwerp
Auteur: onderwerpauteur
Auteur-URI: http://link-naar-auteur-pagina
Sjabloon: voorouderthemanaam
Tags: thematags - alleen uit de lijst aangeboden door wordpress.org
Versie: versie
Nou, hier is de tekst van de licentie
*/

Vergeet ook niet te doen screenshot.png en plaats het in de map met de sjabloon (in de root). Informatie die op deze manier in het stijlblad wordt geplaatst, wordt weergegeven in het beheerderspaneel in de sectie Beheer van "Thema's".. We testen de ontworpen sjabloon in browsers, als alles in orde is, kun je verder.

Ik zal de code voor de pagina's van de ontworpen sjabloon niet verstrekken, omdat... het is groot genoeg, download het gewoon en dan gaan we ermee aan de slag.

Hoe een wp-thema werkt:

Als je de standaard themamap (wp-content/themes/default) opent, zie je veel PHP-bestanden (themabestanden) en één style.css-bestand. Wanneer we een blog bekijken, bevat WP de themabestanden (index.php<

Op dit punt is de voorbereidende voorbereiding voltooid en kunnen we doorgaan met het maken van een thema op basis van het beschikbare bronmateriaal.

Stap 1:
Maak eerst in de WordPress-themamap (wp-content/themes) een map met de naam van ons thema. Laat maar zo ruseller_lessen. Kopieer vervolgens de bestanden vanuit de standaardthemamap (wp-content/themes/default). opmerkingen.php, zoeken.php En 404.php naar onze themamap. Deze bestanden zijn verantwoordelijk voor opmerkingen en zoekopdrachten op de blog. Dan in ruseller_lessen kopieer het stijlblad stijl.css ons sjabloon, screenshot.png (300x225) en map afbeeldingen.

Nu moeten onze sjabloonbestanden worden “geknipt”, d.w.z. extraheer de voettekst, zijbalk en koptekst in afzonderlijke bestanden. Het diagram toont een vereenvoudigde weergave van het bestand index.php met markeringen volgens welke we het zullen snijden:

Stap 2 - Koptekst.php
Opening index.html en knip alles uit vóór de opmerking, maak een nieuw bestand header.php en plak de knipcode erin, sla deze op in de map van ons thema ruseller_lessen:






index.html






Ga nu naar de map met het standaardthema, open header.php en kopieer de tags vanaf daar , <link>, <h1>, En <div class=description> </b> en daarmee vervangen we de overeenkomstige regels in onze <b>header.php</b>.</p> <p>Dan alle tags <li>gelegen <b>id = "navigatie"</b>(lijst met pagina's bovenaan de blog) vervangen door een WordPress-functie</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>Als resultaat krijgen we:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
" type = "text/css" media = "scherm" />
" />





Stap 3 - Zijbalk.php
Laten we terugkeren naar het index.htm-bestand. Verwijder eerst het volledige zoekformulier en knip er vervolgens alles uit