Accentsconagua

WordPress Beginner tot Master, deel 1

Code
Share

Gedurende deze zesdelige beginners-tot-meester-reeks zullen we de geavanceerde functies van WordPress gebruiken om ons eigen portfolio en blog te maken, compleet met een optiespagina, meerdere stijlen en ondersteuning voor de nieuwe WordPress 2.7-functies.

Op de eerste dag hanteren we de gedeelten Voorbereiding en Beheer door onze pagina Opties te maken.

Ook verkrijgbaar in deze serie:

  1. WordPress: Beginner tot Master, deel 1
  2. WordPress: Beginner tot Master, deel 2
  3. WordPress: van beginner tot meester, deel 3
  4. WordPress: Beginner tot Master, deel 4
  5. WordPress: Beginner tot Master, deel 5
  6. WordPress: van beginner tot meester, deel 6

Overzicht

Tegen het einde van deze serie zullen we hebben gemaakt Innovatie - een premium WordPress-sjabloon, perfect voor het presenteren van een portfolio en het hosten van een blog; compleet met de volgende functies:

  • Pagina Opties om het geavanceerde karakter van de sjabloon aan te pakken, zonder dat u bestanden handmatig hoeft te bewerken.
  • 3 ingebouwde kleurenschema's - met eenvoudig wisselen tussen deze.
  • Sjablonen voor Homepage en Portfolio-pagina's, met een widget-footer en zijbalk die klaar is voor gebruik.
  • Compatibiliteit met WordPress 2.5+.
  • Geneste en opgeroepen commentaren ondersteunen voor WordPress 2.7.
  • Een aangepaste widget voor het weergeven van uw laatste berichten, met een voorbeeldafbeelding, op uw startpagina.

Het thema wordt geleverd met drie ingebouwde stijlen, DeepBlue, RedSpace en SoftLight, maar u kunt eenvoudig uw eigen kleurenschema's toevoegen:




Het plan voor elke dag:

  1. Voorbereiding & Beheeroptiespagina.
  2. Homepage indeling. Een aangepaste WordPress-lus maken. Widgetgebieden gebruiken. footer.
  3. Blog posts loop. Sidebar. Enkele blog-indeling.
  4. Portfoliopagina. Afzonderlijke pagina's scheiden van categorie. Enkele portfoliopagina.
  5. Opmerkingen lay-out. Archieven. Zoeken.
  6. Face-lift - het alternatieve kleurenschema 'RedSpace'. Een aangepaste widget maken.

Welke eerdere ervaring heb ik nodig?
Ervaring met xHTML & CSS is een must (ik zal niet veel van deze code in detail bespreken).
Het zou ook erg handig zijn om wat basiskennis van PHP te hebben (zoals het gebruik van variabelen, arrays, voorwaardelijke statements en 'foreach' en 'while' loops. Bekijk Jeffrey's uitstekende "Diving into PHP" screencast-serie.

Kennis hebben van WordPress (zelfs als je gewoon je weg op het Dashboard weet!) Zou je ervaring zeker verbeteren. Bekijk de screencastseries van "WordPress for Designers" van Drew.

Spring naar een sectie

  • Ermee beginnen
  •   - Bestanden voorbereiden
  •   - Categorieën & pagina's
  •   - Maak WordPress een CMS
  • Optiespagina
  •   - Categorieën Drop-down
  •   - Pagina's vervolgkeuzemenu
  •   - Stylesheet Drop-down
  •   - De opties-array
  •   - Opties Back-end
  • De opties ophalen
  • Samenvatting

Ermee beginnen

Vandaag zullen we omgaan met de back-end-kerncode waar de rest van het thema op zal vertrouwen. U hebt eerst een nieuwe installatie van WordPress nodig, bij voorkeur de nieuwste versie (2,7 op het moment van schrijven); de sjabloon werkt echter met elke versie boven 2,5. Binnen in de / Wp-content / themes / map, maak nieuwe mappen en bestanden met de volgende structuur:

  • /innovatie/
    • / Stijlen /
      • /Diepblauw/
      • deepblue.css
    • functions.php
    • index.php
    • page.php
    • page-home.php
    • page-portfolio.php
    • style.css
    • var.php

functions.php zal onder meer code bevatten voor onze optiepagina en widgets.
index.php wordt gebruikt voor het weergeven van de nieuwste berichten.
page.php wordt de sjabloon gebruikt voor de meeste afzonderlijke pagina's.
page-home.php wordt onze voorpagina-sjabloon.
page-portfolio.php wordt onze portfolio-pagina.
var.php wordt gebruikt om onze opties uit de database op te halen.
style.css bevat het grootste deel van onze styling.
/styles/deepblue.css bevat de styling voor ons eerste kleurenschema.

Dit zijn niet alle bestanden die we nodig zullen hebben. We zullen de anderen maken terwijl we verder gaan, zodat je kunt begrijpen waarvoor ze zijn bedoeld.

Bestanden voorbereiden

De twee pagina- bestanden zijn aangepaste paginasjablonen, zodat we de inhoud anders kunnen leggen op pagina's waaraan deze sjablonen zijn toegewezen. Voor WordPress om ze te herkennen, binnen page-home.php Vul het volgende in:

Evenzo binnen page-portfolio.php in te voeren:

De sjabloonnaam is de naam die WordPress gebruikt bij het selecteren van een paginasjabloon. get_header (); is een WordPress-functie om het te laden header.php bestand (dat we later zullen maken).

En voeg het volgende toe aan page.php. We hoeven dit bestand geen sjabloonnaam te geven, omdat dit de standaardsjabloon is.

We moeten ook een aantal details zoals naam, beschrijving en auteur toewijzen aan ons thema. Dit wordt gedaan in een opmerkingenblok bovenaan style.css:

 / * Theme Name: Innovation Theme URI: http://www.danharper.me/innovation Beschrijving: Een geavanceerd portfolio & blogthema, gebouwd door Dan Harper als onderdeel van een tutorialserie voor NETTUTS.com Versie: 1.0 Auteur: Dan Harper Author URI: http://www.danharper.me * /

Categorieën & pagina's

Om later tijd te besparen, zullen we de relevante categorieën en pagina's maken die we nu nodig hebben. Activeer in je WordPress-dashboard het thema (het zal de naam gebruiken die we eerder in de CSS hebben gedefinieerd) - maak je geen zorgen dat het thema leeg is, we komen daar later op terug.


Maak nu drie nieuwe Pages. Eén met de naam 'Home' en de andere 'Portfolio'. Selecteer de paginasjabloon voor elk van hen respectievelijk als 'Homepage' en 'Portfolio'. Noem de laatste pagina 'Blog' en gebruik de standaardpaginasjabloon.


Maak ook een nieuwe categorie met de naam 'Portfolio'. Dit is wat we zullen gebruiken om portfolio-items in te posten.


Maak WordPress een CMS

Ga vanuit je dashboard naar Instellingen -> Lezen. Voor 'Voorpagina-weergave' stelt u de voorpagina in op de 'Home'-pagina die u hebt gemaakt en de Posts-pagina op' Blog ':


Optiespagina

Dit lijkt waarschijnlijk een beetje achterlijk, maar we gaan een optiespagina maken voor ons thema voordat we aan de daadwerkelijke front-end werken. Dit komt omdat het hele thema afhangt van de opties op de pagina, en het zou niet logisch zijn om die andere delen eerst te doen.

Voor degenen die niet weten, is de optiepagina een extra pagina in het WordPress Dashboard dat we toevoegen en dat een aantal opties bevat voor ons thema. Dit zijn:

  • Kleuren schema
  • Portfolio Categorie
  • Blogpagina
  • Google Analytics-code

Binnen functions.php begin met het volgende. De $ THEMENAME variabele definieert de naam van het thema dat zal worden gebruikt voor de titel van de pagina in het Dashboard (innovatie). En $ shortname wordt gebruikt om onze opties uniek te maken - als u dit wijzigt, moet u verschillende instanties in de hele code wijzigen (dus niet wijzigen;)).

  
Categorieën Drop-Down
 
Vervolgens maken we de code die alle categorieën krijgt die we kunnen gebruiken in de vervolgkeuzelijst 'Portfolio':
 
 / * Krijg categorieën in een drop-down lijst * / $ categories_list = get_categories ('hide_empty = 0 & orderby = name'); $ getcat = array (); foreach ($ categories_list als $ acategory) $ getcat [$ acategory-> cat_ID] = $ acategory-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Kies een categorie:");
 
Deze code gebruikt WordPress ' get_categories (); functie om een ​​lijst met alle categorienamen op te halen en a te gebruiken foreach (); loop om elke naam en ID toe te voegen aan een array met de naam $ getcat voor later gebruik in de code. Eindelijk gebruiken we array_unshift om "Kies een categorie:" bovenaan de array in te voegen.
 
Pagina's drop-down
 
Volgende is nog een vergelijkbare vervolgkeuzelijst die een paginanaam selecteert. De code hiervoor is vergelijkbaar met de vorige:
 
 / * Haal pagina's op in een vervolgkeuzelijst * / $ pages_list = get_pages (); $ getpag = array (); foreach ($ pages_list as $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Selecteer een pagina:");
 
Net als bij het ophalen van de categorieën, gebruiken we WordPress ' get_pages (); functie om een ​​lijst van alle paginanamen te krijgen, en het resultaat wordt in de $ getpag array voor later gebruik.
 
Drop-down van stylesheet
 
Er is ook een vervolgkeuzemenu om een ​​stylesheet te selecteren. Deze code is iets gecompliceerder:
 
 / * Stijlpagina's ophalen in een vervolgkeuzelijst * / $ styles = array (); if (is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. "/ styles /")) while (($ style = readdir ($ open_dirs))! == false) if (stristr ($ style, ".css")! == false) $ styles [] = $ style;  $ style_dropdown = array_unshift ($ styles, "Kies een kleurenschema:");
 
De bovenstaande code maakt gebruik van de PHP opendir (); functie, gevolgd door readdir (); om onze te openen / Stijlen / map en een lijst met alle bestanden daarin.
 
We gebruiken dan stristr (); om de lijst te beperken tot alleen de .css bestanden (om te voorkomen dat de mappen ook worden uitgevoerd) en de resultaten worden doorgegeven aan de $ stijlen rangschikking.
 
De opties-array
 
Al onze opties worden opgeslagen in hun eigen arrays, zodat we ze later in de code massaal kunnen verwerken:
 
 / * De opties * / $ options = array (array ("name" => "General", "type" => "title"), array ("type" => "open"), array ("name" = > "Kleurenschema", "desc" => "Welk kleurenschema wilt u?", "Id" => $ korte naam. "_ Kleurenschema", "type" => "selecteer", "std" => "Kies een kleurenschema: "," options "=> $ styles), array (" name "=>" Portfolio Category "," desc "=>" Selecteer de categorie portfolio-items worden geboekt. "," id "=> $ shortname. "_ portfolio_cat", "type" => "select", "std" => "Kies een categorie:", "options" => $ getcat), array ("name" => "Blogpagina", "desc "=>" Selecteer de pagina die wordt gebruikt als blog (berichten). "," Id "=> $ korte naam." _ Blogpagina "," type "=>" selecteer "," std "=>" Selecteer een pagina: " , "options" => $ getpag), array ("name" => "Google Analytics", "desc" => "Voeg hier je Google Analytics (of andere) code in.", "id" => $ shortname. " _analytics_code "," type "=>" textarea "), array (" type "=>" close "));
 
Elke array is één optie en bevat naam, desc, ID kaart en type parameters. De ID is erg belangrijk, en is wat we zullen gebruiken om later in de code naar de optie te verwijzen. Als u bijvoorbeeld de Portfolio-categorie wilt ophalen, controleren we de $ ts_portfolio_cat (ts is de korte naam waarnaar we verwezen hebben bovenaan het document.)
 
Opties Back-end
 
Met de volgende code verschijnt onze opties-pagina in het Dashboard (het is onder "Ontwerp" in WordPress 2.6 of lager) en slaat de opties op in de database.
  
 
 function mytheme_add_admin () global $ themename, $ shortname, $ options; if ($ _GET ['page'] == basename (__ FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ options as $ value) update_option ($ value ['id') ], $ _REQUEST [$ waarde ['id']]);  foreach ($ options as $ value) if (isset ($ _REQUEST [$ value ['id']])) update_option ($ value ['id'], $ _REQUEST [$ value ['id']]) ;  else delete_option ($ value ['id']);  header ("Locatie: themes.php? page = functions.php & saved = true"); dood gaan;  else if ('reset' == $ _REQUEST ['action']) foreach ($ options as $ value) delete_option ($ value ['id']);  header ("Locatie: themes.php? page = functions.php & reset = true"); dood gaan;  if (! function_exists ('wp_list_comments')) add_theme_page ($ themename. "Options", $ themename, 'edit_themes', basename (__ FILE__), 'mytheme_admin');  else add_menu_page ($ themename. "Options", $ themename, 'edit_themes', basename (__ FILE__), 'mytheme_admin');  function mytheme_admin () global $ themename, $ shortname, $ options; if ($ _REQUEST ['saved']) echo '
'$ Themename.' instellingen opgeslagen.
'; if ($ _REQUEST ['reset']) echo '
'$ Themename.' instellingen reset.
'; ?> 
 
 
 instellingen
 
 
We gaan de code niet doorlopen omdat het deze tutorial te veel van het goede spoor zou halen. Kopieer het en plak het en beschouw het als een magische code van de WordPress Gods die je thema laat werken.
 
Deze volgende code controleert al onze opties op hun type attribuut en plaatst ze in een tabel. Dus opties met "type" => "selecteer" wordt uitgevoerd als een vervolgkeuzelijst, of "type" => "textarea" zou uitvoeren als een tekstgebied.
 
  
 

 
 
  
 		 
 
   "/>                                />         
   
  
 
   
 
  
Eindelijk, aan het einde van het bestand, voeg je in:
 
 vereisen (TEMPLATEPATH. "/var.php");
 
Wij vereisen() onze var.php bestand dat code bevat voor het ophalen van onze opties.
Merk op dat we moeten gebruiken TemplatePath in vereisen() of include () tags zodat deze naar onze themadirectory bladert en niet naar de hoofdmap van de WordPress-map.
 
Deze opties ophalen
 
Nu staan ​​die opties in het Dashboard, we moeten ze in ons thema kunnen gebruiken. Voeg de volgende code in var.php:
 
 get_var ("SELECT term_id FROM $ wpdb-> terms". "WHERE name =" $ ts_portfolio_cat ""); / * Haal de ID van de Blog-pagina op met de naam * / $ ts_blogpage = $ wpdb-> get_var ("SELECT 'ID' FROM $ wpdb-> posts". "WHERE post_title =" $ ts_blogpage "AND post_type =" page "LIMIT 1" ); ?>
 
Het eerste deel van de code haalt al onze opties uit de database. We hebben echter een probleem: onze Categorie & pagina-opties sturen de naam van de categorie of pagina terug - maar we geven de voorkeur aan de ID omdat deze gemakkelijker te gebruiken is in WordPress-functies.
 
De volgende twee delen van de code doen precies dat. We voeren een SQL-query uit om de juiste ID te krijgen. Deze opties zijn nu opgeslagen in de $ ts_portfolio_cat en $ ts_blogpage variabelen.
 
Nu hebben we de admin-kant klaar, inloggen op uw Dashboard en de juiste instellingen voor elk van de opties instellen. Kiezen deepblue.css voor het kleurenschema voor nu.
  
 
Samenvatting
 
Dat concludeert Dag 1 van WordPress Week. Morgen maken we onze startpagina-indeling, maken we een aangepaste 'WordPress Loop' en behandelen widget-gebieden.
 
Deel 2 - Loops en widgets.





	
	
			
	   
	







Code
×