thuis-Hoe een bestand te openen-Een eenvoudig thema maken voor WordPress. Handmatig en met behulp van programma's verschillende WordPress-thema's maken
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):
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:
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.
Pagina Titel
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):
De volgende klassen worden gebruikt om afbeeldingen met bijschriften uit te lijnen (kan worden gekopieerd van het standaardthema, later indien nodig gecorrigeerd):
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
Mijn blog
Blogbeschrijving
Thuis
Over
Portefeuille
Koppelingen
Contact
Ga nu naar de map met het standaardthema, open header.php en kopieer de tags vanaf daar , ,
, En
en daarmee vervangen we de overeenkomstige regels in onze header.php.
Dan alle tags
gelegen id = "navigatie"(lijst met pagina's bovenaan de blog) vervangen door een WordPress-functie
Als resultaat krijgen we:
" 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
voor zijbalk.php en sla het op in onze themamap. Nu vervangen we in de resulterende code alles tussen de tags
zijbalken aanroepen, krijgen we de volgende code:
Op deze manier noemen we 2 zijbalken. Als je keek Zijbalk.php standaardthema, hebben we gemerkt dat er veel meer code is. Feit is dat er eenvoudigweg een extra voorwaarde is geschreven, die standaard het archief en de categorieën weergeeft als de beheerder geen enkele widget aan de zijbalk heeft gekoppeld. Wij zullen deze aandoening niet voorschrijven.
Om onze zijbalken te laten werken, moeten ze geregistreerd zijn. Om dit te doen, maakt u een bestand in de themamap functies.php en daarin schrijven we:
Het enige dat overblijft is het zoekformulier verbinden. Dit kan gedaan worden vanuit het beheerderspaneel door een widget toe te voegen aan een van de zijbalken, of je kunt deze oproepen zijbalk.php, en dat is wat we zullen doen. Helemaal aan het begin voegen we toe:
...............................................
Stap 4 - Voettekst.php We keren terug naar het index.html-bestand en knippen er alles uit
Volgens onze sjabloon moeten we hier de nieuwste blogberichten (Recente berichten) en de laatste opmerkingen (Recente reacties) weergeven. We tonen de nieuwste inzendingen in een hoeveelheid van 5 stuks - showposts=5. Binnenin vervangen we alles
:
" rel="bladwijzer" title=" ">
We zullen de laatste opmerkingen weergeven met behulp van de plug-in simple_recent_comments.php, deze downloaden en in onze themamap plaatsen. Nu moeten we het op de juiste plaats aanroepen (we vervangen de inhoud van het blok
):
recent commentaar", ""); } ?>
Stap 5 - Index.php Alles wat er nog in zit index.html opslaan als index.php naar de map met ons thema en verbind vervolgens de oproep koptekst, zijbalk en voettekst:
okt13
Voorbeeldblogbericht
Nieuws3 opmerkingen
Dit is een zeer pijnlijke ervaring in het vulputaat, wat een gevolg is van de aanranding, waardoor een feugiat nulla vergemakkelijkt wordt door eros en accumsan en een groot aantal dignissim die een blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lees verder...
Vorige inzendingenVolgende inzendingen
Stap 6 - Blogposts weergeven op de Index.php-pagina
De volgende afbeelding toont het principe van het weergeven van blogposts. Eerst controleert het of er berichten in de database staan; als dat niet het geval is, wordt 'Niet gevonden' weergegeven. Als dat zo is, wordt het in een lus uitgevoerd terwijl
.
Open onze index.php en vervang de statische tekst ertussen
..
functies (tags) wordpresspost datum, titel, categorie, opmerkingen, volgende en vorige. Op basis van de bovenstaande figuur krijgen we:
">
Niets gevonden
Nu zou het thema al beschikbaar moeten zijn via het beheerderspaneel in de lijst met thema's. U kunt het activeren en zien wat er is gebeurd.
We gebruikten Wordpress-tags:
the_time("M"), the_time("j") - respectievelijk maand en dag van de output de_permalink()- geeft de permanente link van het bericht weer the_title_attribute()- titel van het huidige item. de titel()- bericht- of paginatitel de_categorie(", ")- een link naar de categorie of categorieën waartoe de inzending behoort commentaren_popup_link - zal een commentaarlink weergeven in een pop-upvenster als comments_popup_script() wordt gebruikt, anders een gewone commentaarlink weergeven. de inhoud- geeft de inhoud van het huidige item weer. Als de tag wordt gebruiktdan wordt het bericht alleen getoond tot(alleen op de hoofdpagina, de vermeldingen worden volledig op de pagina weergegeven). volgende_posts_link- link naar eerdere berichten. vorige_posts_link - link naar de volgende berichten.
Stap 7 – Single.php We zullen dit bestand maken op basis van het bestand dat we zojuist hebben voltooid. index.php, een beetje veranderen:
"
Pagina's:", "na" => "
", "volgende_of_nummer" => "nummer")); ?>
Niets gevonden
wp_link_pagina's- Geeft links op een pagina weer in een bericht dat uit meerdere pagina's bestaat (bij gebruik van). opmerkingen_sjabloon()- Inclusief een sjabloonbestand opmerkingen.php uit de huidige themamap previous_post_link(" %link"), next_post_link("%link")- toont de kopteksten van het vorige en volgende item
Stap 8 - pagina.php Deze stap is eenvoudiger dan de vorige. Bestand single.php opslaan als pagina.php. Weghalen van pagina.php datumuitvoer, opmerkingen, volgende/vorige:
"
Pagina's:", "na" => "
", "volgende_of_nummer" => "nummer")); ?>
Niets gevonden
We kunnen hier eindigen. We hebben de hoofdthemabestanden verzameld. Je hebt waarschijnlijk gemerkt dat het standaardthema meer bestanden bevat. Bijvoorbeeld archief.php, het is niet verplicht. Als we echter de widget “Archieven” of “Kalender” in de zijbalk aansluiten en op datum naar een archief gaan, worden de vermeldingen voor de geselecteerde datum weergegeven op de indexpagina, dus het is heel goed mogelijk om zonder te doen archief.php :)
De laatste. Soms is het nodig/nuttig om de headers van alle berichten op een pagina weer te geven. Hiervoor gebruiken we de wordpress-tag query_post:
/* Sjabloonnaam: Archieven */ ?>
" title="!}">
|
query_posts("showposts=-1");- toont alle vermeldingen. Laten we dit opslaan in een bestand archief.php. Let op de opmerkingen aan het begin van de code Sjabloonnaam: Archieven, het is hier vereist (later zul je begrijpen waarom)
Ga naar het beheerderspaneel en maak een nieuwe pagina aan. We geven alleen de titel aan en geven de sjabloon aan in de "Attributen" Archief, sla de pagina op. En nu zullen we op deze pagina alle records weergeven volgens de sjabloon archief.php, die we zojuist hierboven hebben beschreven:
Dat is alles voor vandaag. Bedankt voor uw aandacht.
P.S. Het samengestelde thema is getest op WordPress 2.8.5. Het eindresultaat kan worden gedownload. Probeer op dezelfde manier je eigen thema te creëren, ik weet zeker dat het je zal lukken!
Groeten. Dit artikel beantwoordt de vraag hoe je een unieke sjabloon voor WordPress kunt maken, mooi en anders. Je zult moeten proberen je hersenen een beetje te belasten.
Hoe u een unieke sjabloon voor WordPress maakt - laten we aan de slag gaan
Hieronder vindt u een lijst met stappen voor het maken van een unieke WordPress-sjabloon met uw eigen handen en gratis.
Afbeeldingen wijzigen.
Wijzig de sjabloonnaam.
Breng kleine wijzigingen aan in stijlen.
Laten we beginnen met het analyseren van elk punt in de juiste volgorde.
Afbeeldingen wijzigen
Ik zal naar het eenvoudigste punt kijken met behulp van het twintig-elf-sjabloon als voorbeeld. We vervangen stockfoto's door onze eigen geconverteerde afbeeldingen. Het is noodzakelijk om de koptekst, voettekst, achtergrond en andere kleine te wijzigen.
Maar ik kan geen specifieke oplossing bedenken, mijn sjabloon heeft een minimum aan afbeeldingen (en de bestaande zijn enorm). Over het algemeen moet u de meeste afbeeldingen vervangen door uw eigen afbeeldingen. Laten we eens kijken naar de twee elementen die zijn vervangen:
De eerste is via het beheerderspaneel zelf.
De tweede is via code.
Als je het principe begrijpt, dan heb ik veel respect voor jou.
Via het administratieve paneel zelf
Moderne thema's hebben een goede functie van instellingen via WordPress zelf, waarom zouden we deze niet gebruiken? Ga naar het administratieve paneel van de blog, uiterlijk en configureer.
Als het thema voor mensen is gemaakt, zijn de algemene ontwerpinstellingen hier en behandelen we de details hieronder. In het gedeelte over het voorbeeld van Twenty Eleven.
Algemene themakleuren. Instellingen voor basiselementen (koppen, bijschriften, etc.).
Koptekstafbeelding, dat wil zeggen in de koptekst.
Achtergrond afbeelding. Het is niet bij alle thema's aanwezig; het kan worden aangepast met een afbeelding of alleen met kleur.
In dit stadium is dit wat ik kreeg. Laten we verder gaan.
Afbeeldingen handmatig wijzigen
Stel dat u niet tevreden bent met de afbeelding van een bepaald element in de sjabloon en dat u deze wilt wijzigen. Wat moeten we doen? We komen er wel achter. Ik zal bijvoorbeeld de uitvoer maken van een foto van het aantal commentatoren.
Het systeem is van toepassing op alle onderwerpen.
Klik met de rechtermuisknop op het element en zoek de uitvoer ervan in de code met behulp van de tool “code bekijken”.
Het element zelf, klik er met de rechtermuisknop op.
Selecteer de optie “code bekijken”.
Dit is de HTML-uitvoercode zelf, we besteden er geen aandacht aan.
Dit is het dierbare adres waar u heen moet met een vervanger. Het bestand dat je zoekt is bubble.png, dat zich in de map afbeeldingen in het thema zelf bevindt.
Dat wil zeggen dat u hetzelfde bestand met dezelfde naam moet maken en het moet vervangen. Ik hoop dat je weet hoe je bestandsbeheerders zoals FileZilla moet gebruiken. Ik wilde een foto maken waarop het aantal reacties met een ster en een omtrek wordt weergegeven. Ik heb hem gemaakt in Photoshop en opgeslagen als afbeelding met de naamballon en de extensie png.
Klaar, ik opende Filezilla en ging naar het actieve elfentwintig onderwerp in de map afbeeldingen (die we hierboven herkenden). en sleep eenvoudigweg de nieuwe afbeelding naar de map, met vervanging. Alle details staan in de schermafbeelding.
Als alles goed is gedaan, wordt de nieuwe foto op de site weergegeven, hier is een momentopname.
Zoals u begrijpt, kunt u met deze methode elke afbeelding wijzigen als er geen instellingen in het beheerderspaneel zijn.
De sjabloonnaam wijzigen
Je kunt alleen op gratis thema’s wisselen, dit is belangrijk.
Er zijn twee punten die gedaan moeten worden:
De titel in het style.css-bestand herwerken
Wijzig de naam van de themamap.
De namen herwerken in style.css
Ga hiervoor naar de editor ( doet me denken aan de uiterlijkeditor), en zoek style.css.
Op het scherm zien we de inscriptie, hier moet alles worden veranderd. Elk style.css-bestand bevat helemaal aan het begin sjablooninformatie. Het moet worden gewijzigd in ten minste deze regels.
Jij vult jouw gegevens in, neem de mijne niet mee, want wij maken het template uniek. Wijzig op zijn minst de naam, auteur en website.
We zijn er achter gekomen, laten we verder gaan met het volgende punt.
Wijzig de naam van de themamap
Wij doen het via een bestandsbeheerder, ik gebruik Filezilla. In de vorige paragraaf hebben we de naam van het onderwerp in de regel gewijzigd:
Themanaam: moi-sjabloon
Een originele naam nodig twintig elf veranderen naar een nieuwe, in mijn geval, moi-sjabloon. Ga naar de FileZilla-map thema's, en zoek de oorspronkelijke naam Twentyeleven.
En we veranderen het in een nieuwe.
Als alles correct is gedaan, zal het werken. Het thema voor zoekmachines zal niet langer standaard zijn, maar uniek.
Kleine wijzigingen aan stijlen
Ik kan geen enkele oplossing bedenken voor het maken van een unieke sjabloon voor WordPress, je hoeft alleen maar puur visueel naar de sjabloon te kijken en te zien wat je niet leuk vindt. Ik kijk naar de zijbalk.
Echt, niet echt? Ik wil het lettertype van de kop groter maken, omdat ze klein zijn en opgaan in de achtergrond. We zien alle stappen in de onderstaande afbeelding.
Selecteer het element dat we willen bewerken. Klik met de rechtermuisknop.
Klik op “code bekijken”.
De hele stijl van deze titel.
De stijlnaam die u zoekt.
Open het style.css-bestand. We zoeken de naam van de stijl met behulp van de toetsencombinatie CNTRL + F.
Ik wil het lettertype groter maken, er een ononderbroken lijn onder maken, de kleur en dikte van de tekst veranderen. Om dit te doen, wijzig of voeg ik de volgende parameters toe.
We wijzigen of voegen dienovereenkomstig parameters toe aan de stijl. Het zou zo moeten uitpakken.
Alle wijzigingen verschijnen direct op de website.
Mijn taak is nu niet om lay-out aan te leren, dit zal veel tijd en artikelen kosten, maar om het principe te laten zien van hoe je een sjabloon uniek kunt maken.
Dus met alle andere elementen, breng het tot in de perfectie. Ik laat zien wat er gebeurde in het kader van dit artikel.
Dit artikel beantwoordde de vraag hoe je een unieke WordPress-sjabloon kunt maken. En het standaardthema kan uw eigen thema worden genoemd.
Als u vragen heeft, kunt u deze achterlaten in de reacties. Succes.