Share
We hebben onze site ontworpen en omgezet in een statisch HTML-bestand in de vorige twee zelfstudies. In het laatste deel van deze serie zullen we WordPress instellen als een CMS en ons HTML-bestand omzetten naar een WordPress-compatibele sjabloon.
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Ga naar WordPress.org en download de nieuwste versie van WordPress.
Pak het archief uit en verplaats alle bestanden in de WordPress-map naar uw lokale of webserver.
Maak een lege MySQL-database en onthoud al uw aanmeldingsgegevens; u hebt deze binnen ongeveer 3 seconden nodig.
Open uw browser en ga naar de map die al uw WordPress-bestand bevat. U wordt gevraagd om een configuratiebestand te maken. Klik Configuratiebestand maken
Nu moeten we onze MySQL database-informatie invoeren en de installatie uitvoeren.
Als alles goed is gegaan met de installatie, krijgt u uw nieuwe login te zien. Kopieer uw nieuwe wachtwoord en log in op de WordPress-backend. Zodra u zich aanmeldt bij de backend, wordt u voorgesteld om uw wachtwoord te wijzigen. Doe dit nu!
Nu we zijn ingesteld met onze nieuwe gebruiker, kunnen we beginnen met het instellen van WordPress om als CMS te gebruiken. Eerst gaan we permalinks inschakelen om onze paden er goed uit te laten zien. Beweeg over instellingen en klik op de pijl aan de rechterkant om nog een aantal opties neer te zetten en klik op Permalinks.
We gaan de opties Dag en naam gebruiken, dus selecteer die optie en druk op Wijzigingen opslaan.
WordPress geeft ons een dummypost en een dummy-pagina, dus we gaan die verwijderen en pagina's toevoegen die we nodig hebben.
Beweeg de muisaanwijzer berichten en klik op de pijl om de opties neer te zetten. Klik op Bewerk. Als u zweeft over Hello World! er verschijnen nog meer berichtopties, klik gewoon op Verwijder en bevestig de actie.
Opmerking: deze stap is niet nodig, ik wil gewoon alles netjes en opgeruimd houden.
Vouw het Pages opties en klik op bewerken en verwijder vervolgens de Wat betreft pagina.
In de Pages linker zijbalk klik op Voeg nieuw toe dus we kunnen onze pagina's toevoegen.
Vul de titel en de gewenste inhoud op je pagina in en als je klaar bent, sla je Publiceren aan de rechterkant van de pagina.
Als u niet wilt dat de pagina zichtbaar is, kunt u klikken Concept opslaan om er later aan te werken.
We willen een aantal onderliggende pagina's van Pricing & Signup maken, dus wanneer u daar de pagina's voor maakt, moeten we één optie op de pagina-editor-pagina wijzigen.
In de bovenstaande schermafbeelding heb ik de optie gemarkeerd die moet worden gewijzigd. We willen dat Cheap Plan een kinderpagina is van prijzen en abonneren, dus we gaan WordPress vertellen dat prijzen en abonnementen de ouder zijn van Cheap Plan. Op deze manier kunnen we specifieke navigatie voor ons thema maken.
Zodra u al uw pagina's hebt gemaakt, zal uw bewerkingsgedeelte van pagina's er uitzien als de onderstaande schermafbeelding.
Alles wat we nodig hebben om op te zetten, is nu ingesteld, dus we kunnen nu doorgaan met het converteren van ons HTML-bestand naar een WordPress-sjabloon.
Open uw editor en ga naar uw WordPress-hoofdmap.
We willen navigeren naar wp-content> -thema's.
We gaan het klassieke thema verwijderen. Nogmaals, dit is gewoon om al onze mappen netjes en opgeruimd te houden. Dus verwijder klassieke en dubbele standaard. Hernoem standaard in wordpress_cms.
Ga naar de map wordpress_cms en verwijder rtl.css en de map met afbeeldingen.
Open vervolgens style.css en verwijder alles behalve het gedeelte met de belangrijkste opmerkingen boven aan het bestand.
We hebben onze eigen gemaakt style.css bestand dat in een map leeft. Deze style.css bestand vertelt WordPress wat informatie over onze template dus ook al hebben we die van ons zelf style.css bestand, we moeten deze nog houden.
Bewerk de style.css bestand om er ongeveer zo uit te zien als de onderstaande code. Wijzig mijn informatie om aan uw informatie te voldoen!
/ * Theme Name: WordPress CMS Theme URI: http://your-site.com Beschrijving: WordPress gebruiken als een CMS. NetTuts + zelfstudie! Versie: 1 Auteur: Matt Vickers Auteur URI: http://envexlabs.com/ * /
Sla dit bestand op en ga terug naar uw browser. Vouw het Verschijning zijbalk en klik op Thema's. U zou ons WordPress CMS-thema als een optie moeten zien. Klik activeren om van WordPress ons nieuwe thema te maken.
WordPress is nu klaar om onze vooraf gecodeerde site te accepteren!
Als u naar de WordPress-hoofdmap in uw browser navigeert, ziet u de hoofdpagina van WordPress zonder stijlen erop toegepast.
Kopieer de mappen inc en img en alle inhoud naar WordPress_cms.
We moeten WordPress vertellen dat we onze stylesheets willen gebruiken in plaats van oude, dus open header.php
We gaan enkele onnodige code verwijderen. Ik heb opmerkingen gemaakt over de gebieden die u moet verwijderen, dus raadpleeg de onderstaande code.
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> >/ ">
U kunt ook verwijderen van de body-tag. We zouden nu een vrij eenvoudig headerbestand moeten hebben, dus laten we onze 2 css-bestanden toevoegen aan ons thema.
Direct onder de title-tag gaan we de normale link-tag gebruiken.
U zult merken dat we een functie gebruiken genaamd bloginfo (). Deze functie wordt gebruikt om informatie over uw huidige blog te bemachtigen. We kunnen in de toekomst servers verplaatsen of de mappenstructuur wijzigen, dus we willen geen harde paden naar onze stylesheets maken, dus we geven een waarde van template_url die het pad van onze huidige sjabloon retourneert. Dit is zeer krachtig als u van plan bent een sjabloon te maken dat andere mensen zullen gebruiken omdat u niet weet hoe hun WordPress is ingesteld.
Als u de site laadt, zou u moeten zien dat sommige van onze standaardstijlen uit onze stylesheet op de site worden toegepast.
Open vervolgens footer.php en verwijder alles tussen de opmerkingen en wp_footer ().
Open ook sidebar.php en verwijder alles na de reacties. We zijn nu klaar om onze HTML-containers naar onze WordPress-bestanden te kopiëren.
Open de index.html bestand van onze vorige tutorial en kopieer alles tussen de
-tags. Plak deze code in header.php.Om dingen gemakkelijker te maken, kunnen alle tags en inhoud in elk van de containers worden verwijderd, zodat alleen de container-divs overblijven.
Dit is waar het een beetje lastig kan worden. We moeten deze code omspannen tussen 4 bestanden. Ik heb aangegeven waar elk stuk naartoe moet gaan, dus ga je gang en kopieer en plak elke sectie in het bestand waarin het deel is.
Oké, om er zeker van te zijn dat alles naar behoren functioneert, kun je controleren of elk bestand is gevuld met de juiste inhoud. Uw bestanden moeten er uitzien zoals de onderstaande voorbeelden.
header.php
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> sidebar.php
footer.php
Als uw pagina's er goed uitzien, gaan we verder. Als ze dat niet doen, laat ze eruit zien als de bovenstaande voorbeelden.
Als u teruggaat naar uw browser en toevoegt aan het einde van het adres en drukt op enter. Dit zou u naar uw ongeveer pagina moeten brengen.
We gaan beginnen met het maken van onze header- en navigatie-elementen, dus als je het nog niet hebt geopend, open dan header.php
Binnen header_container moeten we onze h1 # logo-tag toevoegen.
We gebruiken de bloginfo () weer functioneren, maar deze keer pakken we de naam van onze blog.
Als je opfrisst, zou je ons geweldige logo moeten zien! Nu moeten we onze navigatie toevoegen.
In plaats van harde codering in onze navigatie-items, gaan we een ingebouwde WordPress-functie gebruiken genaamd wp_list_pages (). Hiermee kunnen we bepalen welke pagina-items we willen weergeven en kunnen we links naar elk van die pagina's maken.
We geven enkele opties door aan de functie, zodat we WordPress de pagina's kunnen laten weergeven zoals we dat willen.
De eerste optie die we verzenden is title_li. Standaard genereert WordPress een titel-li die Pages weergeeft. We willen dit niet, dus we sturen er gewoon een blanco waarde mee.
De tweede optie is diepte. Wederom zal WordPress standaard een lijst weergeven van elke pagina die wordt opgenomen, dit omvat onderliggende pagina's. We willen niet dat dit gebeurt, dus we geven het een variabele van 1 zodat WordPress alleen de bovenste pagina's zal weergeven.
De uiteindelijke waarde is inclusief. We willen niet elke pagina die we hebben gemaakt laten zien, we willen alleen 'Over', 'Prijzen' en 'Aanmelding' en 'Contact' laten zien. We geven de ID's door van elke pagina die we willen weergeven. De ID's in het voorbeeld komen niet overeen met uw pagina-ID's, dus ZORG ERVOOR DAT U HEN VERANDERT NAAR UW ID's
Om de ID van de pagina's te krijgen, navigeert u naar de pagina met bewerkingspagina's. Wanneer u de muisaanwijzer over de paginalink beweegt, kunt u de ID vinden in de link. Dwz: wp-admin / page.php? action = edit & post = 15
Alle beschikbare opties zijn te vinden op http://codex.WordPress.org/Template_Tags/wp_list_pages
Als u de pagina vernieuwt, moeten we een goed uitziende navigatie hebben.
We hebben geluk, we kunnen deze exacte functie gebruiken om te zorgen voor onze zijbalk en onze voettekstnavigatie. We hoeven slechts een paar aanpassingen te doen aan de opties die we verzenden om aan elke behoefte te voldoen.
Doe open sidebar.php en schrijf een beetje code in onze sidebar_container.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
We willen alleen onze navigatieknoppen tonen als de huidige pagina een onderliggende pagina is. We doen dit door te controleren of de huidige pagina een waarde heeft die is toegewezen aan post_parent. Als de pagina geen kind is, is deze waarde 0.
Informatie over zowel berichten als pagina's is ondergebracht in de $ bericht variabel. Als u print_r ($ post) kunt u alle informatie zien over het bericht dat voor u beschikbaar is.
Nu we naar een postouder zoeken, moeten we alle kinderen van onze ouder vermelden. Om dat te doen, geven we een variabele van child_of door en geven we de huidige post_parent ID door.
Als ons ouder-ID 5 is, zeggen we het wp_list_pages () om elke pagina weer te geven die een post_parent ID van 5 heeft. Het is erg handig bij het werken met navigatie op meerdere niveaus.
Vervolgens gaan we snel onze voettekst samenstellen en gaan we verder met het weergeven van inhoud op onze pagina's. Hiermee wordt de hele site samengevoegd en kunnen we de laatste hand leggen aan onze nieuwe WordPress-site.
Doe open footer.php en voeg voor de laatste keer de wp_list_pages () functie.
Copyright Gear'd © 2009
Deze functie is precies hetzelfde als onze kopnavigatie maar in plaats van het gebruik van include gebruiken we uitsluiten om alle huidige hoofdnavigatie-items uit onze voettekstnavigatie te verwijderen.
De ID's in het voorbeeld komen niet overeen met uw pagina-ID's, dus ZORG ERVOOR DAT U HEN VERANDERT NAAR UW ID's
Een laatste sjabloonbestand dat nog moet worden aangepast voordat we klaar zijn. Doe open post.php en verwijder alles daartussenin get_header () en get_sidebar ().
Dit is waar we onze content_container gaan toevoegen
Als het gaat om het weergeven van uw post- en pagina-inhoud, gebruikt WordPress een speciale functieset met de naam The Loop. In een notendop, het neemt uw inhoud en maakt het op, en bereidt het voor om getoond te worden aan de eindgebruiker.
In onze content-container gaan we een if-instructie en een while-lus toevoegen.
Eerst controleren we om te zien of we berichten hebben, als we dat doen doorlopen we elk bericht en stellen we een functie in die we kunnen gebruiken om de inhoud weer te geven.
Binnen onze while-lus gaan we al onze resterende inhoud toevoegen.
post_parent):?>post_parent); ?>
We gebruiken een paar nieuwe functies om de inhoud van onze pagina weer te geven. Het leuke van WordPress is dat veel van de functies gewoon Engels gebruiken voor de naamgevingsconventies.
We hadden de titel van de pagina nodig, dus we gebruiken de titel() om het weer te geven. We kunnen ook de titel van een bericht of pagina bekijken met behulp van get_the_title ($ post_id) en het doorgeven van het bericht ID als het alleen variabel is.
We willen alleen de tweede kop laten zien als we op een onderliggende pagina staan, dus gebruiken we de if ($ post-> post_parent) opnieuw om te controleren of we op een onderliggende pagina staan en als we de titel van die post-ouder gebruiken get_the_title ().
Last but not least, gebruiken we de inhoud() om inhoud weer te geven die de pagina bevat.
Wacht, onze zijbalk lijkt op de verkeerde plek op de pagina te staan, neem dus get_sidebar () en verplaats het eronder get_header (). Nu komt onze zijbalk voor onze inhoud.
Loose Ends binden
Als u de root van uw WordPress-installatie in uw browser laadt, zou u moeten worden begroet met een Not Found-fout.
Dit komt omdat standaard WordPress 'hoofdpagina een lijst is van al je berichten. We gebruiken WordPress niet voor bloggen, dus we moeten WordPress vertellen om een van onze pagina's te gebruiken.
Ga terug naar je WordPress-backend en laad de Lezing pagina in instellingen. De eerste optie is Front Page-weergave en de geselecteerde optie moet Uw laatste berichten zijn. We willen een statische pagina selecteren en de vervolgkeuzelijst gebruiken om onze voorpagina te wijzigen naar het bericht dat u wilt. Voor dit voorbeeld ga ik het naar onze About-pagina verwijzen.
Sla de wijzigingen op en laad de hoofdpagina van onze WordPress-installatie opnieuw. Het moet u doorverwijzen naar de Over-pagina.
Het volgende dat opvalt, is dat onze navigatie niet langer een actieve status weergeeft, ook al staan we op de juiste pagina. Dit komt omdat voor onze statische pagina we een actieve klasse gebruikten. wp_list_pages () kent een andere waarde toe voor actieve staten, dus we moeten gewoon enkele klassen toevoegen aan onze stylesheets. De 2 klassen die we gaan toevoegen zijn .current_page_item en .current_page_parent.
ul.nav li.active a, ul.nav li.current_page_item a, ul.nav li.current_page_parent a #sidebar_container ul li.active a, #sidebar_container ul li.current_page_item aGa je gang en gebruik de bovenstaande code om de klassen toe te voegen aan zowel onze topnavigatie als zijnavigatie. Ververs de pagina en je zou een actieve status moeten hebben voor welke pagina je op dat moment bent.
Nog twee wijzigingen en we kunnen dit inpakken.
Onze prijs- en aanmeldingspagina is eigenlijk alleen maar een titel voor zijn onderliggende pagina's, maar WordPress behandelt het als een eigen pagina. We willen de gebruiker omleiden naar de pagina Gratis plan wanneer ze op Prijzen en aanmelding klikken.
Een van de vele geweldige dingen over WordPress is de plugin-mogelijkheid. Er zijn 1000 plug-ins die zijn geschreven voor WordPress en die eindeloze functionaliteit toevoegen die niet uit de verpakking beschikbaar is. We gaan een redirect-plugin installeren die we kunnen gebruiken om de gebruiker om te leiden.
De plug-in die we gaan gebruiken, kan hier gedownload worden: http://WordPress.org/extend/plugins/redirect/. Download de plug-in en verplaats de omleidingsmap naar wp-content / plug-ins.
Nu moeten we de plug-in activeren in de WordPress-backend zodat we deze kunnen gebruiken. Klik in uw backend op plugins en je zou moeten worden omgeleid naar een pagina met alle beschikbare plug-ins.
Vind onze redirect-plugin en klik op Activeren. Onze plug-in is nu geactiveerd.
Elke plugin werkt anders, dus zorg ervoor dat u de instructies voor elke plug-in leest voordat u ze gaat gebruiken. Onze redirect-plug-in gebruikt aangepaste velden om WordPress te vertellen welk bericht we willen omgeleid en waar. Ga naar Pages en klik op bewerken onder onze pagina Pricing & Signup.
Recht onder de editor textarea is de sectie Custom Fields. De eerste invoer geven we een omleidingswaarde, zodat WordPress weet dat we willen omleiden en de tweede ingang het adres wordt van onze gratis planpagina. Als je klaar bent, sla je Aangepast veld toevoegen en wees zeker van Update-pagina in de rechterbovenhoek.
Als u teruggaat naar uw browser en op Prijzen & aanmelden klikt, wordt u doorgestuurd naar de pagina Gratis plan.
Iedereen uitzoeken
Onze prijsbepaling en inschrijvingnavigatie lijkt een beetje uit de lucht te vallen. Ons gratis plan bevindt zich als laatste als het bovenaan staat. We kunnen de juiste volgorde van de post in de back-up instellen, zodat u uw hoofdpagina's kunt laden en met de muis over het Free Plan kunt gaan en op Quick Edit kunt klikken.
Het veld dat we willen updaten is Order. Wijzig de waarde van 0 in 1 en klik op Update-pagina. Doe hetzelfde voor Goedkope (bestel 2) en Dure (bestel 3) plannen dienovereenkomstig bijwerken van de bestelling.
Vernieuw onze browser om de nieuwe updates te zien.
Dit geldt ook voor onze navigatie met kop- en voettekst, dus als je de volgorde waarin ze zijn niet leuk vindt, kun je ze veranderen.
Ik hou van aangepaste dingen
Aangepaste velden zijn geweldig. Ze laten ons specifieke informatie doorgeven voor elk bericht. We kunnen afbeeldingen aan ons bericht toevoegen met de Media Uploader, maar in dit voorbeeld gaan we aangepaste velden gebruiken om informatie door te geven aan ons pagina.php-bestand.
Open uw About-pagina in de WordPress-pagina-editor.
We gaan de Media Uploader gebruiken om een afbeelding te uploaden die we voor onze header kunnen gebruiken, net naast Upload / invoegen klik op het afbeeldingpictogram.
Ik ga de banner.gif uploaden die we eerder hadden gebruikt, dus klik Selecteer bestand en vind het op uw computer.
Zodra uw bestand is geüpload, krijgt u wat informatie over uw afbeelding te zien. Onderaan dit modale venster zou je een ingang moeten zien met de naam Link-URL en het pad naar je afbeelding. We willen deze URL kopiëren. Als deze invoer leeg is, kunt u op de knop Bestands-URL rechtsonder klikken en wordt de invoer bijgewerkt.
Zodra dit pad is gekopieerd, kunnen we dit venster sluiten en naar het gedeelte Aangepaste velden gaan. De eerste invoer die we gaan gebruiken is header_image en de tweede waarde is het pad naar ons bestand.
Voeg uw aangepast veld toe door op te drukken Aangepast veld toevoegen en Update-pagina in de rechter bovenhoek.
Doe open page.php en zoek de header_image div.
We willen controleren of er een afbeelding is die moet worden getoond en als die er is, pakken we het pad en geven we de afbeelding weer.
ID, 'header_image', true); if ($ afbeelding):?>
Eerst gebruiken we get_post_meta () om het pad van onze afbeelding toe te wijzen aan de variabele image $.
Het eerste argument dat we sturen get_post_meta () is de ID van de pagina waar we op staan. De tweede waarde is de naam van het aangepaste veld, in dit geval header_image. Het laatste argument vertelt WordPress dat we alleen 1 aangepast veld willen retourneren.
Dan controleren we om te zien of image $ is leeg. Als er geen aangepast veld met de naam header_image is, geven we de afbeelding niet weer, in andere gevallen geven we de header_image div weer evenals de afbeelding erin.
We herhalen de waarde van $ afbeelding als de afbeeldingsbron om onze afbeelding weer te geven.
Ververs je browser en bekijk de Contact pagina. Je zou geen afbeeldingen moeten zien. Als u de About-pagina laadt, ziet u onze afbeelding en het blauwe afgeronde vak dat de afbeelding bevat.
Dat is het. We hebben het gedaan! Neem een moment de tijd om jezelf te feliciteren met het maken van de volledige tutorial en het omgaan met mijn hopelijk goede manier van lesgeven.
We hebben het oppervlak van WordPress amper gescrapt maar ik heb je een solide basis gegeven om WordPress dieper in te gaan.
Als u wilt blijven leren welke functies WordPress u te bieden heeft, raad ik u aan de WordPress Codex te bekijken.
Wanneer u problemen tegenkomt of iets probeert te bereiken dat WordPress niet biedt, geef internet dan snel een zoekopdracht. De kans is groot dat iemand hetzelfde probleem tegenkomt en 99% van de tijd is er een plug-in om het probleem te verhelpen!
Nogmaals bedankt voor het lezen van de tutorial! Ik hoop dat je veel hebt geleerd en nu kunt beginnen met het aanbieden van een solide CMS om zowel je leven als dat van hen gemakkelijker te maken.
Accentsconagua
