Share
Vi har utformat vår webbplats och konverterat den till en statisk HTML-fil i de två föregående handledningarna. Den sista delen av denna serie kommer vi att installera WordPress som ett CMS och konvertera vår HTML-fil till en WordPress-kompatibel mall.
Denna handledning innehåller en skärmdump som är tillgänglig för Tuts + Premium-medlemmar.
Gå över till WordPress.org och hämta den senaste versionen av WordPress.
Unzip arkivet och flytta alla filer i WordPress-mappen till din lokala eller webbserver.
Skapa en tom MySQL-databas och kom ihåg all din inloggningsinformation, du behöver den på ungefär 3 sekunder.
Öppna din webbläsare och gå vidare till mappen som innehåller all din WordPress-fil. Du kommer att bli uppmanad att skapa en konfigurationsfil. Klick Skapa konfigurationsfil
Nu behöver vi ange i vår MySQL databasinformation och köra installationen.
Om allt gick bra med installationen kommer du att presenteras med din nya inloggning. Kopiera ditt nya lösenord och logga in i WordPress-backend. När du har loggat in i backenden kommer du att föreslå att du ändrar ditt lösenord. Gör det här nu!
Nu när vi är inställda med vår nya användare kan vi börja installera WordPress för att användas som ett CMS. Först ska vi aktivera permalinks för att göra våra vägar snygga. Sväva över inställningar och klicka på pilen till höger för att lägga ner några fler alternativ och klicka på permalänkar.
Vi ska använda alternativen för dag och namn, så välj det alternativet och tryck på Spara ändringar.
WordPress ger oss ett dummy-inlägg och en dummy-sida så vi ska ta bort dem och lägga till några sidor som vi behöver.
Hök på inlägg och klicka på pilen för att släppa alternativen. Klicka på Redigera. Om du svävar över Hello World! några fler postalternativ visas, klicka bara på Radera och bekräfta sedan åtgärden.
Obs! Det här steget är inte nödvändigt, jag gillar bara att hålla allt snyggt och städat.
Expandera sidor alternativ och klicka på redigera sedan ta bort Handla om sida.
I sidor Vänster sidofält klicka på Lägg till ny så vi kan lägga till våra sidor.
Fyll i titeln och vad som helst innehåll du vill ha på din sida och sedan en gång du är klar träffad Publicera över på höger sida av sidan.
Om du inte vill att sidan ska vara synlig kan du slå Spara utkast att arbeta på det senare.
Vi vill skapa några barnsider med Prissättning och registrering, så när du kommer till sidorna för det behöver vi ändra ett alternativ på sidredigeringssidan.
I skärmdumpen ovan har jag markerat det alternativ som behöver ändras. Vi vill att billiga plan ska vara en barnsida med priser och inloggning så vi ska berätta för WordPress att priser och inloggning är förälder till Cheap Plan. Detta gör det möjligt för oss att skapa specifik navigering för vårt tema.
När du har skapat alla dina sidor ska din sida redigera av sidor se ut som skärmdumpen nedan.
Allt vi behöver installera för just nu har varit setup, så vi kan nu flytta på konvertera vår HTML-fil till en WordPress-mall.
Öppna upp din redigerare och navigera till din WordPress-rotmapp.
Vi vill navigera till wp-content> teman.
Vi ska ta bort det klassiska temat. Återigen, detta är bara för att hålla alla våra mappar snyggt och städat. Så ta bort klassiska och duplicera standard. Byt namn på standard till wordpress_cms.
Gå in i wordpress_cms-mappen och ta bort rtl.css och bildmappen.
Öppna sedan upp style.css och radera allt utom huvudkommentar sektionen längst upp i filen.
Vi har skapat vår egen style.css fil som lever i någon mapp. Detta style.css filen berättar WordPress lite information om vår mall så även om vi har vår egen style.css fil, vi behöver fortfarande behålla den här.
Redigera style.css fil för att se något liknande koden nedan. Ändra min information så att den passar din information!
/ * Tema Namn: WordPress CMS Tema URI: http://your-site.com Beskrivning: Använda WordPress som ett CMS. NetTuts + Tutorial! Version: 1 Författare: Matt Vickers Författare URI: http://envexlabs.com/ * /
Spara den här filen och gå tillbaka till din webbläsare. Expandera Utseende sidobar och klicka på teman. Du bör se vårt WordPress CMS-tema som ett alternativ. Klick Aktivera för att göra WordPress använda vårt nya tema.
WordPress är nu redo att acceptera vår förkodade webbplats!
Om du navigerar till WordPress-roten i din webbläsare, borde du se den huvudsakliga WordPress-sidan utan några stilar anpassade till den.
Kopiera inc och img mappar och allt innehåll i WordPress_cms.
Vi måste berätta för WordPress att vi vill använda våra stylesheets istället för att de är gamla så öppna header.php
Vi ska ta bort lite onödig kod. Jag har kommenterat de områden du behöver radera så var vänlig och se koden nedan.
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> >/ ">
Du kan också radera från kroppen taggen. Vi borde ha en ganska enkel headerfil nu, så vi kan lägga till våra 2 css-filer i vårt tema.
Längre under titeln taggen kommer vi att använda den normala länktaggen.
Du märker att vi använder en funktion som heter bloginfo (). Den här funktionen används för att fånga information om din aktuella blogg. Vi kan flytta servrar eller byta mappstruktur i framtiden så att vi inte vill lägga in svåra vägar till våra stylesheets så vi överför ett värde av template_url som returnerar sökvägen till vår nuvarande mall. Detta är mycket kraftfullt om du planerar att skapa mall som andra människor kommer att använda eftersom du inte vet hur deras WordPress är inställd.
Om du laddar upp webbplatsen bör du se att några av våra standardstilar från vårt stilark tillämpas på webbplatsen.
Öppna sedan upp footer.php och ta bort allt mellan kommentarerna och wp_footer ().
Också, öppna upp sidebar.php och ta bort allt efter kommentarerna. Vi är nu redo att kopiera över våra HTML-behållare till våra WordPress-filer.
Öppna upp index.html filen från vår tidigare handledning och kopiera allt mellan
taggar. Klistra in den här koden i header.php.För att göra det enklare kan vi ta bort alla taggar och innehåll i varje behållare så att endast behållarens divs lämnas.
Det är här det kan bli lite knepigt. Vi måste spänna denna kod mellan 4 filer. Jag har kommenterat var och en bit måste gå, så fortsätt och kopiera och klistra in varje avsnitt i filen den hör hemma i.
Okej, bara för att försäkra dig om att allt fungerar som det ska, kan dubbelklicka på att varje fil fylls med rätt innehåll. Dina filer ska se ut som exempel nedan.
header.php
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> sidebar.php
footer.php
Om dina sidor ser bra ut, kan vi fortsätta. Om de inte gör det, se till att de ser ut som exemplen ovan.
Om du går tillbaka till din webbläsare och lägger till i slutet av adressen och trycker på enter. Detta borde ta dig till din ca sida.
Vi ska börja med att skapa våra sidhuvud och navigeringselement, så om du inte redan har det öppet öppnar du header.php
Inside header_container måste vi lägga till vår h1 # logo tagg.
Vi använder bloginfo () funktion igen, men den här gången tar vi tag i vår blogg namn.
Om du uppdaterar bör du se vår fantastiska logotyp! Nu måste vi lägga till vår navigering.
Istället för hårdkodning i våra navigationsartiklar, kommer vi att använda en inbyggd WordPress-funktion som heter wp_list_pages (). Detta gör att vi kan styra vilka sidobjekt vi vill visa samt skapa länkar till var och en av dessa sidor.
Vi överför några alternativ till funktionen så att vi kan få WordPress-listan ut på sidorna exakt hur vi vill ha det.
Det första alternativet vi skickar är title_li. Som standard genererar WordPress en titel li som visar sidor. Vi vill inte ha det här, så vi skickar bara ett tomt värde med det.
Det andra alternativet är djupet. Återigen kommer WordPress som standard att göra en lista över varje sida som ingår, detta inkluderar barnsidor. Vi vill inte att detta ska hända, så vi överför det till en variabel av 1 så WordPress visar bara sidor på toppnivå.
Det slutliga värdet ingår. Vi vill inte visa varje sida vi har skapat, vi vill bara visa Om, Prissättning och Registrering och Kontakt. Vi skickar ID: erna till varje sida vi vill visa. ID: n från exemplet kommer inte att matcha ditt sid ID, så se till att du byter dem till dina ID: er
För att få sidans ID navigera till sidan för redigera sidan. När du svävar över länken kan du hitta ID-numret i länken. dvs: wp-admin / page.php? action = redigera & posta = 15
Alla tillgängliga alternativ finns på http://codex.WordPress.org/Template_Tags/wp_list_pages
Om du uppdaterar sidan ska vi ha en snygg navigering.
Vi har tur, vi kan använda den här exakta funktionen för att ta hand om vårt sidofält såväl som vår sidfältnavigering. Vi behöver bara göra några tweaks till alternativen vi skickar det för att passa varje behov.
Öppna sidebar.php och skriv lite kod i vår sidebar_container.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
Vi vill bara visa vår sidovägsnavigering om den aktuella sidan är en barnsida. Vi gör det genom att kontrollera om den aktuella sidan har ett värde som är tilldelat efter_parent. Om sidan inte är ett barn kommer detta värde att vara 0.
Information om både inlägg och sidor är inrymt i $ post variabel. Om du print_r ($ post) kan du se all information om det inlägg som är tillgängligt för dig.
Nu när vi söker efter en förälder måste vi lista alla våra föräldrars barn. För att göra det passerar vi en variabel av child_of och skickar det nuvarande post_parent ID.
Om vårt föräldra ID är 5 talar vi wp_list_pages () att lista ut varje sida som har ett post_parent ID på 5. Det är mycket användbart när det gäller navigering på flera nivåer.
Nästa kommer vi snabbt att sätta ihop vår sidfot och sedan kommer vi att flytta på att visa lite innehåll på våra sidor. Detta kommer att dra hela sidan tillsammans och vi kan börja lägga de sista handen på vår nya WordPress-driven webbplats.
Öppna footer.php och för sista gången lägg till wp_list_pages () fungera.
Copyright Gear'd © 2009
Den här funktionen är exakt densamma som vår navigeringsnavigering men istället för att använda innehåller använder vi utesluter för att ta bort alla aktuella huvudnavigationsobjekt från vår sidfältnavigering.
ID: n från exemplet kommer inte att matcha ditt sid ID, så se till att du byter dem till dina ID: er
En sista mallfil för att finjustera innan vi är färdiga. Öppna post.php och radera allt däremellan get_header () och get_sidebar ().
Det här är där vi ska lägga till vår content_container
När det gäller att visa ditt inlägg och sidinnehåll använder WordPress en speciell funktionsuppsättning som heter The Loop. I ett nötskal tar det ditt innehåll och formaterar det, förbereder det för att visas för slutanvändaren.
Inne i vår innehållsbehållare kommer vi att lägga till ett if-uttalande och en stundslinga.
Först kontrollerar vi om vi har några inlägg, om vi gör det går vi igenom varje inlägg och ställer in olika funktioner som vi kan använda för att visa innehållet.
Inom vårt ögonblick lägger vi till allt vårt återstående innehåll.
post_parent):?>post_parent); ?>
Vi använder några nya funktioner för att visa innehållet på vår sida. Den fina saken om WordPress är många av funktionerna använder vanlig engelska för namngivningskonventionerna.
Vi behövde titeln på sidan så vi använder titeln() för att visa den. Vi kan också ta tag i titeln på någon post eller sida med hjälp av get_the_title ($ post_id) och passerar post-ID eftersom det bara är variabelt.
Vi vill bara visa andra rubriken om vi är på en barnsida, så vi använder if ($ post-> post_parent) igen för att kontrollera om vi är på en barnsida, och om vi är får vi titeln på den föräldern som använder get_the_title ().
Sist men inte minst använder vi innehållet() för att visa innehåll som sidan har.
Vänta, vårt sidofält verkar vara på fel plats på sidan, så ta det get_sidebar () och flytta den under get_header (). Nu kommer vår sidobalk före vårt innehåll.
Tvinga upp lösa slutar
Om du laddar upp roten till din WordPress-installation i din webbläsare bör du hälsas med ett fel som inte hittats.
Detta beror på att standardwebbläsarens huvudsida är en lista över alla dina inlägg. Vi använder inte WordPress för bloggar, så vi måste berätta för WordPress att använda en av våra sidor istället.
Gå tillbaka till din WordPress-backend och ladda upp Läsning sida i inställningar. Det första alternativet är Front Page-skärmar och det valda alternativet ska vara dina senaste inlägg. Vi vill välja en statisk sida och använd nedrullningen för att ändra vår första sida till vilken post du vill ha. För det här exemplet ska jag peka på det på vår Omsida.
Spara ändringarna och ladda om rotsidan till din WordPress-installation. Det bör omdirigera dig till sidan Om.
Nästa sak du märker är att vår navigering inte längre visar ett aktivt tillstånd trots att vi är på rätt sida. Detta beror på att vi på vår statiska sida använde en aktiv klass. wp_list_pages () Tilldelar ett annat värde för aktiva stater, så vi behöver bara lägga till några klasser i våra stylesheets. De 2 klasserna vi ska lägga till är .current_page_item och .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 aGå vidare och använd koden ovan för att lägga till klasserna för både vår toppnavigering och sidnavigering. Uppdatera sidan och du ska ha ett aktivt tillstånd för vilken sida du än befinner dig.
Ytterligare två ändringar och vi kan pakka upp det här.
Vår prissättning och inloggningssida är egentligen bara en titel för barnets sidor, men WordPress behandlar den som sin egen sida. Vi vill omdirigera användaren till sidan Gratis sida när de klickar på Prissättning och registrering.
En av de många fantastiska sakerna om WordPress är det är plugin-kapacitet. Det finns 1000 pluginprogram som är skrivna för WordPress som lägger till oändlig funktionalitet som inte är tillgänglig ute av lådan. Vi ska installera ett omdirigeringsprogram som vi kan använda för att omdirigera användaren.
Pluggen vi ska använda kan hämtas här: http://WordPress.org/extend/plugins/redirect/. Hämta plugin och flytta omdirigeringsmappen till wp-innehåll / plugins.
Nu måste vi aktivera plugin i WordPress-backend så att vi kan använda den. I din backend klicka på plugins och du bör omdirigeras till en sida med alla tillgängliga plugins.
Hitta vår omdirigering plugin och hit Aktivera. Vår plugin är nu aktiverad.
Varje plugin fungerar annorlunda så se till att du läser instruktionerna för varje innan du börjar använda dem. Vår omdirigering plugin använder anpassade fält för att berätta för WordPress vilket inlägg vi vill omdirigera och var. Gå till sidor och klicka på redigera under vår prissättnings- och inloggningssida.
Längre under editor textarea är avsnittet Anpassade fält. Den första inmatningen vi kommer att ge ett värde av omdirigering så WordPress vet att vi vill omdirigera och den andra ingången kommer att vara adressen till vår fria plan sida. När du är klar träffad Lägg till anpassat fält och var säker på att Uppdatera sidan längst upp till höger.
Om du går tillbaka till din webbläsare och klickar på Prissättning och registrering kommer du att dirigeras till sidan Gratis sida.
Sortera alla ut
Vår prissättning och inloggningsnavigering verkar vara lite obefintlig. Vår gratis plan ligger senast när den ska vara högst upp. Vi kan ställa in postordern direkt i den bakade delen, så ladda upp huvudsidans avsnitt och sväng över Gratis Plan och klicka på Snabbredigering.
Fältet vi vill uppdatera är Order. Ändra värdet från 0 till 1 och klicka på Uppdatera sidan. Gör detsamma för billig (order 2) och dyrt (order 3) planerar att uppdatera ordern i enlighet med detta.
Uppdatera vår webbläsare för att se de nya uppdateringarna.
Detta gäller även vår sidhuvud- och sidfältsnavigering, så om du inte gillar den ordning de är i känner du dig fri att ändra dem.
Jag gillar anpassade saker
Anpassade fält är fantastiska. De låter oss ge specifika uppgifter för varje inlägg. Vi kan lägga till bilder i vårt inlägg med Media Uploader, men för det här exemplet kommer vi att använda egna fält för att skicka information till vår page.php-fil.
Öppna din Omsida i WordPress Page Editor.
Vi ska använda Media Uploader för att ladda upp en bild som ska användas för vår rubrik så precis bredvid Ladda upp / in klicka på bildikonen.
Jag ska ladda upp banner.gif som vi tidigare använt, så klicka Välj filer och hitta den på din dator.
När du har laddat upp filen ska du presenteras lite information om din bild. Nära botten av det här modala fönstret bör du se en inmatning med namnet Länkadress och sökvägen till din bild. Vi vill kopiera den här webbadressen. Om den här inmatningen är tom kan du klicka på knappen Filadressen nedanför och den uppdaterar inmatningen.
När du har kopierat den här sökvägen kan vi stänga det här fönstret och gå vidare till avsnittet Anpassade fält. Den första inmatningen vi ska använda är header_image och det andra värdet är sökvägen till vår fil.
Lägg till ditt eget fält genom att trycka på Lägg till anpassat fält och Uppdatera sidan i övre högra hörnet.
Öppna page.php och hitta divad_image div.
Vi vill kontrollera om det finns någon bild som behöver visas och om det finns kommer vi att ta tag i banan och visa bilden.
ID, 'header_image', true); om ($ bild):?>
Först använder vi get_post_meta () att ange sökvägen för vår bild till variabeln $ image.
Det första argumentet vi skickar till get_post_meta () är ID på sidan vi är på. Det andra värdet är namnet på det anpassade fältet som i vårt fall är header_image. Det sista argumentet berättar för WordPress att vi bara vill returnera ett anpassat fält.
Då kontrollerar vi för att se om $ image är tom. Om det inte finns något eget fält med namnet header_image visar vi inte bilden, andra visar vi divide_image div såväl som bilden inuti den.
Vi echo värdet på $ image som bildkälla för att visa vår bild.
Uppdatera din webbläsare och visa Kontakta sida. Du borde inte se några bilder. Om du fyller på Omsidan ska du se vår bild samt den blåa rundade rutan som håller den.
Nu räcker det. Vi har gjort det! Ta en stund att gratulera dig själv för att genomföra hela handledningen och hantera min förhoppningsvis anständiga undervisningsstil.
Vi har knappt skrotat ytan av WordPress men jag har gett dig en solid grund för att börja gå djupare in i WordPress.
Om du vill fortsätta att lära dig vilken typ av funktioner WordPress har att erbjuda, föreslår jag att du tittar på WordPress Codex.
När du stöter på problem eller försöker åstadkomma något som WordPress inte erbjuder ge Internet en snabbsökning. Chansen är att någon har stött på samma problem och 99% av tiden finns det ett plugin för att fixa det!
Återigen tack för att du läste handledningen! Jag hoppas att du har lärt dig mycket och kan nu börja erbjuda dina kunder ett solid CMS för att göra både ditt liv och deras enklare.
Accentsconagua
