WordPress Nybörjare till Master, Del 1

I hela denna sexdelade nybörjare till mästarserien använder vi avancerade funktioner i WordPress för att skapa vår egen portfölj och blogg, komplett med en options sida, flera stilar och stöd för de nya WordPress 2.7-funktionerna.

På dag ett hanterar vi förberedelserna och admin-sektionerna genom att skapa vår Options-sida.

Finns även i serien:

WordPress: Nybörjare till Master, Del 1
WordPress: Nybörjare till Master, Del 2
WordPress: Nybörjare till Master, Del 3
WordPress: Nybörjare till Master, Del 4
WordPress: Nybörjare till Master, Del 5
WordPress: Nybörjare till Master, Del 6

Översikt

I slutet av den här serien kommer vi att ha skapat Innovation - en premiumkvalitets WordPress-mall som är perfekt för att visa en portfölj och värd en blogg, komplett med följande funktioner:

Alternativ sida för hantering av mallens avancerade karaktär utan att behöva redigera några filer manuellt.
3 inbyggda färgscheman - med enkel växling mellan dem.
Sidans mallar för hemsida och portfölj, med en widget-färdig sidfot och sidfält.
Kompatibilitet med WordPress 2.5+.
Trådad & paged kommentarer stöd för WordPress 2.7.
En anpassad widget för att visa dina senaste inlägg, med en förhandsgranskningsbild, på din hemsida.

Temat kommer att innehålla tre stilar inbyggda, DeepBlue, RedSpace och SoftLight, men du kommer enkelt att lägga till egna färgscheman:

Planen för varje dag:

Förberedelse & Admin Alternativ sida.
Hemsida layout. Skapa en anpassad WordPress-loop. Använda widgetområden. sidfot.
Blogginlägg loop. Sidebar. Enkel blogglayout.
Portfolio sida. Avskiljande "enkel" sidor beroende på kategori. Enkelportfölj sida.
Kommentarer layout. Arkiv. Sök.
Ansiktslyft - alternativet "RedSpace" alternativt färgschema. Skapa en anpassad widget.

Vilken tidigare erfarenhet behöver jag?
Erfarenhet av xHTML & CSS är ett måste (eftersom jag inte kommer att gå över mycket av den här koden i detalj).
Det skulle också vara mycket användbart att ha en viss grundläggande förståelse för PHP (som att använda variabler, arrays, villkorliga uttalanden och "foreach" och "while" loopar. Kolla in Jeffreys utmärkta "Dykning till PHP" -screenshot-serie.

Att ha lite kunskap om WordPress (även om du bara vet din väg runt Dashboard!) Skulle definitivt förbättra din upplevelse. Kolla in Drews "WordPress for Designers" screencast-serie.

Hoppa till ett avsnitt

Komma igång
- Förbereder filer
- Kategorier och sidor
- Gör WordPress en CMS
Alternativsida
- Kategorier Drop-down
- Sidor nedrullning
- Stylesheet Drop-down
- Alternativ Array
- Alternativ Back-end
Hämtar alternativen
Sammanfattning

Komma igång

Idag kommer vi att hantera kärnbackend-kod som resten av temat kommer att lita på. Du behöver först en nyinstallation av WordPress, helst den senaste versionen (2,7 vid skrivtid); dock mallen kommer att fungera med vilken version som helst över 2,5. Inuti / Wp-innehåll / teman / mapp, skapa nya mappar och filer med följande struktur:

/innovation/
- / stilar /
  - /djupblå/
  - deepblue.css
- functions.php
- index.php
- page.php
- page-home.php
- page-portfolio.php
- style.css
- var.php

functions.php kommer att innehålla kod för vår options sida och widgets bland annat.
index.php används för att visa senaste inlägg.
page.php kommer mallen att användas för de flesta enskilda sidor.
page-home.php kommer att vara vår frontpage mall.
page-portfolio.php kommer att bli vår portföljsida.
var.php kommer att användas för att hämta våra alternativ från databasen.
style.css kommer att innehålla det mesta av vår styling.
/styles/deepblue.css kommer att innehålla styling för vårt första färgschema.

Det här är inte alla de filer vi behöver. Vi ska skapa de andra när vi går vidare så att du kan förstå vad var och en är för.

Förbereder filer

De två sida- filer är anpassade sidmallar, så att vi kan lägga innehåll på olika sätt på sidor som tilldelats dessa mallar. För WordPress att känna igen dem, inuti page-home.php Skriv följande:

På samma sätt, inuti page-portfolio.php stiga på:

Mallnamnet är namnet som används av WordPress när du väljer en sidmall. get_header (); är en WordPress-funktion för att ladda header.php fil (som vi kommer att skapa senare).

Och lägg till följande till page.php. Vi behöver inte ge den här filen ett mallnamn, eftersom det är standardmallen.

Vi måste också tilldela vissa detaljer som namn, beskrivning och författare för vårt tema. Detta görs i ett kommentarblock högst upp på style.css:

 / * Tema Namn: Innovation Theme URI: http://www.danharper.me/innovation Beskrivning: En avancerad portfölj och blogg tema byggt av Dan Harper som en del av en tutorial serie för NETTUTS.com Version: 1.0 Författare: Dan Harper Författare URI: http://www.danharper.me * /

Kategorier och sidor

För att spara tid senare skapar vi relevanta kategorier och sidor som vi behöver nu. Aktivera temat (i ditt WordPress dashboard) (det kommer att använda det namn vi definierade i CSS tidigare) - oroa dig inte om att temat är tomt, vi flyttar till det senare.

Skapa nu tre nya sidor. En som heter "Hem" och den andra "Portfolio". Välj sidmallet för var och en av dem som "Hemsida" respektive "Portfölj". Namn den sista sidan "Blogg" och använd standardmallen.

Skapa även en ny kategori med namnet "Portfolio". Det här är vad vi ska använda för att posta portföljen i.

Gör WordPress en CMS

Gå till Inställningar -> Läsning från din Dashboard. För "Front Page Display" ställer du framsidan på "Home" -sidan du skapade och inläggssidan till "Blog":

Alternativsida

Det här kommer förmodligen att verka lite bakåt, men vi ska skapa en options sida för vårt tema innan vi gör något arbete på själva fronten. Detta beror på att hela temat beror på alternativen på sidan, och det vore inte meningsfullt att göra de andra delarna först.

För de som inte vet är alternativsidan en extra sida i WordPress Dashboard, vi lägger till som innehåller ett antal alternativ för vårt tema. Dessa är:

Färgschema
Portfölj kategori
Blog-sida
Google Analytics-kod

Inuti functions.php börja med följande. De $ THEME variabel definierar namnet på det tema som ska användas för sidans titel i instrumentpanelen (Innovation). Och $ kortnamn används för att göra våra alternativ unika - om du ändrar det måste du ändra flera instanser i hela koden (så ändra inte det))).

  Kategorier Drop-Down
 Nästa kommer vi att skapa koden som får alla kategorier för oss att använda i rullgardinsmenyn "Portfolio":
  / * Hämta kategorier i en rullgardinslista * / $ categories_list = get_categories ('hide_empty = 0 & orderby = namn'); $ getcat = array (); foreach ($ categories_list as $ acategory) $ getcat [$ acategory-> cat_ID] = $ acategory-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Välj en kategori:");
 Denna kod använder WordPress ' get_categories (); funktion för att hämta en lista över alla kategorinamn och använda a för varje(); loop för att lägga till varje namn och ID i en array som heter $ getcat för användning senare i koden. Slutligen använder vi array_unshift för att infoga "Välj en kategori:" överst i matrisen.
 Sidor Drop-Down
 Nästa är ett annat liknande rullgardinsalternativ som väljer ett sidnamn. Koden för detta är mycket lik den föregående:
  / * Hämta sidor i en rullgardinslista * / $ pages_list = get_pages (); $ getpag = array (); foreach ($ pages_list as $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Välj en sida:");
 Precis som att få kategorierna använder vi WordPress " get_pages (); funktion för att få en lista över alla sidnamn, och resultatet placeras i $ getpag array för användning senare.
 Stylesheet Drop-Down
 Det finns också ett rullgardinsalternativ för att välja ett stylesheet. Denna kod är lite mer komplicerad:
  / * Hämta stilark i en rullgardinslista * / $ styles = array (); om is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. "/ styles /")) while (($ style = readdir ($ open_dirs))! == false) (stristr ($ style, ".css")! == false) $ styles [] = $ style;  $ style_dropdown = array_unshift ($ styles, "Välj ett färgschema:");
 Ovanstående kod använder PHP opendir (); funktion, följt av ReadDir (); att öppna vår / stilar / mapp och få en lista över alla filer där inne.
 Vi använder sedan stristr (); för att begränsa listan till endast .css filer (för att stoppa mapparna från utmatning också), och resultaten skickas in i $ stilar array.
 Alternativ Array
 Alla våra alternativ kommer att lagras i sina egna arrangemang så att vi kan massprocessera dem senare i koden:
  / * Alternativen * / $ options = array (array ("namn" => "Allmänt", "typ" => "titel"), array ("type" => "öppet"), array > "Färgschema", "desc" => "Vilket färgschema skulle du vilja?", "Id" => $ kortnamn. "_ Colourscheme", "type" => "select", "std" => "Välj en färgschema: "," options "=> $ styles), array (" name "=>" Portfolio Category "," desc "=>" Välj kategorin portföljen poster läggs i. "," id "=> $ korts namn. "_ portfolio_cat", "type" => "select", "std" => "Välj en kategori:", "options" => $ getcat), array ("name" => "Blogg sida" "=>" Välj den sida som används som blogg (inlägg) sida. "," Id "=> $ smeknamn." _ Bloggsida "," typ "=>" välj "," std "=>" Välj en sida: , "options" => $ getpag), array ("namn" => "Google Analytics", "desc" => "Sätt in din Google Analytics (eller annan) kod här.", "id" => $ shortname. " _analytics_code "," type "=>" textarea "), array (" typ "=>" stäng "));
 Varje array är ett alternativ och innehåller namn, desc, id och typ parametrar. ID är mycket viktigt, och det är vad vi ska använda för att referera till alternativet senare i koden. Till exempel, för att få Portfolio Category, skulle vi kolla $ ts_portfolio_cat (ts är det smeknamn vi refererade längst upp i dokumentet.)
 Alternativ Back-end
 Följande kod gör att vår options sida visas i instrumentpanelen (den är under "Design" i WordPress 2.6 eller under) och sparar alternativen i databasen.
  
  funktion mytheme_add_admin () global $ themename, $ shortname, $ options; $ _GET ['page'] == basename (__ FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ alternativ som $ värde) update_option ($ value ['id' ], $ _REQUEST [$ värde ['id']]);  foreach ($ alternativ som $ värde) if (isset ($ _REQUEST [$ värde ['id']])) update_option ($ värde ['id'], $ _REQUEST [$ värde ['id']]) ;  annat delete_option ($ värde ['id']);  header ("Plats: temes.php? page = functions.php & saved = true"); dö;  annars om ('reset' == $ _REQUEST ['action']) foreach ($ alternativ som $ värde) delete_option ($ value ['id']);  header ("Plats: temes.php? page = functions.php & reset = true"); dö;  om (! function_exists ('wp_list_comments')) add_theme_page ($ themename. "Alternativ", $ themename, "edit_themes", basnamn (__ FILE__), 'mytheme_admin');  annat add_menu_page ($ themename. "Alternativ", $ themename, "edit_themes", basnamn (__ FILE__), 'mytheme_admin');  funktion mytheme_admin () global $ themename, $ shortname, $ options; om ($ _REQUEST ['saved']) echo ''$ THEME.' Inställningar Sparade.
'; om ($ _REQUEST ['reset']) echo ''$ THEME.' inställningarna återställs.
'; ?>  
  inställningar
 
 Vi kommer inte att gå igenom koden eftersom det skulle ta den här handledningen off-track för mycket. Bara kopiera och klistra in det och tänka på det som en del magisk kod från WordPress-gudarna som gör ditt temaarbete.
 Denna nästa kod kontrollerar alla våra alternativ för deras typ attribut och utformar dem i en tabell. Så alternativ med "typ" => "välj" skulle utmatas som en rullgardinsruta, eller "typ" => "textarea" skulle producera som textarea.
    

    
  
 
   "/>          <?php if ( get_settings( $value['id'] ) != "")  echo stripslashes(get_settings( $value['id'] ));  else  echo $value['std'];  ?>                      />            
      
 
  Slutligen, i slutet av filen, sätt in:
  kräver (TEMPLATEPATH. "/var.php");
 Vi fordra() vår var.php fil som innehåller kod för att hämta våra alternativ.
Observera att vi måste använda TEMPLATEPATH i fordra() eller inkludera() taggar så att det bläddrar till vår temakatalog, och inte i WordPress-katalogen.
 Hämtar dessa alternativ
 Nu finns alternativen i instrumentpanelen, vi måste kunna använda dem i vårt tema. Sätt in följande kod i var.php:
  get_var ("SELECT term_id FROM $ wpdb-> terms". "Var namnet =" $ ts_portfolio_cat ""); / * Hämta blog-id från namnet * / $ ts_blogpage = $ wpdb-> get_var ("VÄLJ" ID "FRÅN $ wpdb-> inlägg". "VAR post_title =" $ ts_blogpage "OCH post_type =" sida "LIMIT 1" ); ?>
 Den första delen av koden hämtar alla våra alternativ från databasen. Men vi har ett problem: våra alternativ för kategori och sida skickar tillbaka namnet på kategorin eller sidan - men vi föredrar ID eftersom det är lättare att använda i WordPress-funktionerna.
 Nästa två delar av koden gör exakt det. Vi kör en SQL-fråga för att få rätt ID. Dessa alternativ lagras nu i $ ts_portfolio_cat och $ ts_blogpage variabler.
 Nu har vi administrationssidan klar, loggar in på din Dashboard och ställer in lämpliga inställningar för vart och ett av alternativen. Välja deepblue.css för färgschemat för nu.
  
 Sammanfattning
 Det avslutar dag 1 i WordPress-veckan. I morgon kommer vi att skapa vår hemsida layout, göra en anpassad "WordPress Loop" och hantering widget områden.
 Del 2 - Loops och Widgets.



		
			
	   
	




Koda