WordPress Începător la Maestru, Partea 1

De-a lungul seriei începător-to-master de șase părți, vom folosi funcțiile avansate ale WordPress pentru a crea propriul portofoliu și blog, complet cu o pagină de opțiuni, mai multe stiluri și suport pentru noile caracteristici WordPress 2.7.

În prima zi, gestionăm secțiunile de pregătire și administrare, prin crearea paginii Opțiuni.

Disponibile și în această serie:

WordPress: Începător la Maestru, Partea 1
WordPress: Începător la Maestru, Partea a 2-a
WordPress: Începător la Maestru, Partea 3
WordPress: Începător la Maestru, Partea a 4-a
WordPress: Începător la Maestru, Partea 5
WordPress: Începător la Maestru, Partea 6

Prezentare generală

Până la sfârșitul acestei serii, am creat inovație - un WordPress de calitate superioară, perfect pentru prezentarea unui portofoliu și găzduirea unui blog; complet cu următoarele caracteristici:

Pagina cu opțiuni pentru a gestiona natura avansată a șablonului, fără a fi necesară editarea manuală a oricăror fișiere.
3 scheme integrate de culori - cu comutare ușoară între ele.
Șabloane de pagini de pornire și de portofoliu, cu un subsol gata pentru widget și bara laterală.
Compatibilitatea cu WordPress 2.5+.
Suportul pentru comentarii și pagini este WordPress 2.7.
Un widget personalizat pentru afișarea celor mai recente postări, cu o imagine de previzualizare, pe pagina dvs. de pornire.

Tema va veni cu trei stiluri încorporate, DeepBlue, RedSpace și SoftLight, dar veți putea adăuga cu ușurință propriile scheme de culori:

Planul pentru fiecare zi:

Pregătirea și gestionarea opțiunilor.
Pagina de start. Crearea unei buclă personalizată WordPress. Utilizarea zonelor widget. Subsol.
Postări în blog. Bara laterală. Un aspect al blogului.
Pagina de portofoliu. Separarea paginilor "unice" în funcție de categorie. Pagina de portofoliu unică.
Planul de comentarii. Arhive. Căutare.
Liftingul feței - schema de culoare alternativă "RedSpace". Crearea unui widget personalizat.

Ce experiență anterioară am nevoie?
Experiența cu xHTML și CSS este o necesitate (pentru că nu voi trece mai mult din acest cod în detaliu).
De asemenea, ar fi foarte util să avem o înțelegere de bază despre PHP (cum ar fi utilizarea variabilelor, a matricelor, a instrucțiunilor condiționale și a buclelor "foreach" și "while". Check out Jeffrey excelent "Diving în PHP" serie de screencast.

Având o anumită cunoaștere a WordPress (chiar dacă vă cunoașteți drumul în jurul tabloului de bord!), Vă veți îmbunătăți experiența. Consultați seria de emisiuni "WordPress for Designers" a lui Drew.

Salt la o secțiune

Noțiuni de bază
- Pregătirea fișierelor
- Categorii și pagini
- Faceți WordPress un CMS
Opțiuni
- Categorii Drop-down
- Pagini derulante
- Ștergere foaie de foaie
- Opțiunea Array
- Opțiuni Back-end
Preluarea opțiunilor
rezumat

Noțiuni de bază

Astăzi vom gestiona codul de back-end de bază pe care se bazează restul temei. Veți avea nevoie mai întâi de o instalare proaspătă de WordPress, de preferință cea mai recentă versiune (2.7 la momentul scrisului); cu toate acestea, șablonul va funcționa cu orice versiune peste 2.5. În interiorul / Wp-content / teme / , creați dosare noi și fișiere cu următoarea structură:

/ Inovare /
- / stiluri /
  - /albastru inchis/
  - deepblue.css
- functions.php
- index.php
- page.php
- Pagina-home.php
- Pagina-portfolio.php
- style.css
- var.php

functions.php va conține cod pentru pagina de opțiuni și widget-uri, printre altele.
index.php este utilizat pentru afișarea ultimelor postări.
page.php șablonul utilizat pentru majoritatea paginilor unice.
Pagina-home.php va fi șablonul de prima pagină.
Pagina-portfolio.php va fi pagina noastră de portofoliu.
var.php va fi folosit pentru a prelua opțiunile noastre din baza de date.
style.css va conține cea mai mare parte a stilului nostru.
/styles/deepblue.css va conține stilul pentru prima noastră schemă de culori.

Acestea nu sunt toate fișierele de care avem nevoie. Vom crea ceilalți pe măsură ce vom merge, astfel încât să înțelegeți ce este pentru fiecare.

Pregătirea fișierelor

Cei doi pagină- fișierele sunt șabloane de pagini personalizate, astfel încât să putem stabili conținut diferit în paginile atribuite acestor șabloane. Pentru ca WordPress să le recunoască, înăuntru Pagina-home.php introduceți următoarele:

În mod similar, în interior Pagina-portfolio.php introduce:

Numele de șablon este numele utilizat de WordPress atunci când selectați un șablon de pagină. get_header (); este o funcție WordPress pentru a încărca header.php fișier (pe care îl vom crea ulterior).

Și adăugați următoarele la page.php. Nu este necesar să dăm acestui fișier un nume de șablon, deoarece este șablonul implicit.

De asemenea, trebuie să alocăm câteva detalii cum ar fi numele, descrierea și autorul temei noastre. Acest lucru se face într-un bloc de comentarii în partea de sus a style.css:

 / * Tema Nume: URI tematica inovatiei: http://www.danharper.me/innovation Descriere: Un portofoliu avansat si tema blog construita de Dan Harper ca parte a unei serii tutorial pentru NETTUTS.com Versiune: 1.0 Autor: Dan Harper Autor URI: http://www.danharper.me * /

Categorii și pagini

Pentru a economisi timp mai târziu, vom crea categoriile și paginile relevante de care avem nevoie acum. În tabloul de bord WordPress, activați tema (va folosi numele pe care l-am definit anterior în CSS) - nu vă faceți griji că tema este goală, ne mutăm la acel moment mai târziu.

Acum creați trei noi Pagini. Unul numit "Acasă", iar celălalt "Portofoliu". Selectați șablonul de pagină pentru fiecare dintre acestea ca "Pagina de pornire" și respectiv "Portofoliul". Denumiți pagina finală "Blog" și utilizați șablonul de pagină implicit.

Creați de asemenea o nouă categorie numită "Portofoliu". Aceasta este ceea ce vom folosi pentru a posta elemente de portofoliu în.

Faceți WordPress un CMS

Din Tabloul de bord, accesați Setări -> Citire. Pentru setarea paginii Pagina de afișare a paginii frontale în pagina "Pagina de pornire" pe care ați creat-o și pagina Postări la "Blog":

Opțiuni

Acest lucru probabil va părea un pic înapoi, dar vom crea o pagină de opțiuni pentru tema noastră înainte de a face orice lucru pe front-end real. Acest lucru se datorează faptului că întreaga temă depinde de opțiunile de pe pagină și nu ar avea sens să facem mai întâi celelalte părți.

Pentru cei care nu știu, pagina de opțiuni este o pagină suplimentară în tabloul de bord WordPress pe care îl adăugăm, care conține o serie de opțiuni pentru tema noastră. Acestea sunt:

Schema de culori
Categoria de portofoliu
Pagina blogului
Codul Google Analytics

Interior functions.php începeți cu următoarele. $ THEMENAME variabila definește numele temei care va fi utilizată pentru titlul paginii în Tabloul de bord (Inovare). Și $ SHORTNAME este folosit pentru a face opțiunile noastre unice - dacă schimbați acest lucru, va trebui să schimbați mai multe instanțe în întregul cod (deci nu schimbați-l;)).

  Categorii Drop-Down
 Apoi vom crea codul care primește toate categoriile pe care le putem folosi în opțiunea drop-down "Portofoliu":
  / * Obțineți categorii într-o listă derulantă * / $ categories_list = get_categories ('hide_empty = 0 & orderby = name'); $ getcat = array (); foreach ($ categories_list ca $ acategory) $ getcat [$ acasă-> cat_ID] = $ acapare-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Alegeți o categorie:");
 Acest cod utilizează WordPress " get_categories (); pentru a obține o listă cu toate numele de categorii și pentru a utiliza o pentru fiecare(); pentru a adăuga fiecare nume și ID într-un șir denumit $ getcat pentru utilizare ulterioară în cod. În cele din urmă, vom folosi array_unshift pentru a insera "Alegeți o categorie:" în partea de sus a matricei.
 Drop-down de pagini
 Înainte este o altă opțiune drop-down similară care selectează un nume de pagină. Codul pentru acest lucru este foarte similar cu cel precedent:
  / * Obțineți pagini într-o listă derulantă * / $ pages_list = get_pages (); $ getpag = array (); ($ pages_list ca $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Selectați o pagină:");
 Ca sa primim categoriile, folosim WordPress ' get_pages (); pentru a obține o listă a tuturor numelor de pagini, iar rezultatul este plasat în $ getpag matrice pentru utilizare ulterioară.
 Schimbarea stilului de foaie
 Există, de asemenea, o opțiune drop-down pentru selectarea unei foi de stil. Acest cod este un pic mai complicat:
  / * Obțineți foile de stil într-o listă drop-down * / $ styles = array (); dacă is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. (stristr ($ stil, ".css")! == false) $ stiluri [] = $ stil;  $ style_dropdown = array_unshift (stiluri $, "Alegeți o schemă de culori:");
 Codul de mai sus utilizează PHP opendir (); funcție, urmată de readdir (); pentru a ne deschide / stiluri / folder și obțineți o listă cu toate fișierele de acolo.
 Apoi vom folosi stristr (); pentru a limita lista numai la .css fișiere (pentru a opri ca fișierele să fie expediate deopotrivă), iar rezultatele sunt transmise în stiluri de $ mulțime.
 Opțiunea Array
 Toate opțiunile noastre vor fi stocate în propriile lor rețele astfel încât să le putem procesa în masă mai târziu în cod:
  / * Opțiunile * / $ opțiuni = array (array ("nume" => "general", "type" => "title" > "Schema de culori", "desc" => "Ce schemă de culori ați dori?", "Id" => $ shortname. schema de culori: "," opțiuni "=> stiluri $), array (" name "=>" Categoria de portofoliu "," desc "=> short_name "; _ portofoliu_cat", "tip" => "selectați", "std" => "alegeți o categorie:", "opțiuni" => $ getcat); "=>" Selectați pagina folosită ca pagină de blog (postări) "," id "=> shortname." _ Blogpage "," type "=> , "options" => $ getpag), array ("name" => "Google Analytics", "desc" => "Introduceți codul dvs. Google Analytics (sau altul) aici". _analytics_code "," type "=>" textarea "), array (" type "=>" close "));
 Fiecare matrice este o opțiune și conține Nume, desc, id și tip parametrii. Codul de identificare este foarte important și este ceea ce vom folosi pentru a face referire la opțiunea ulterioară din cod. De exemplu, pentru a obține categoria de portofoliu, vom verifica $ ts_portfolio_cat (ts este numele scurt pe care l-am referit în partea de sus a documentului.)
 Opțiuni Back-end
 Următorul cod face ca pagina noastră de opțiuni să apară în tabloul de bord (este sub "Design" în WordPress 2.6 sau mai jos) și salvează opțiunile în baza de date.
  
  funcția mytheme_add_admin () global $ numele, numele scurt, opțiunile $; dacă $ _GET ['page'] == numele bazei de date (__FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ options as $ value) update_option ], $ _REQUEST [$ valoare ['id']]);  foreach ($ opțiuni ca valoare $) if (isset ($ _REQUEST [$ value ['id']])) update_option ($ value ['id'], $ _REQUEST [$ value ['id' ;  altceva delete_option ($ value ['id']);  ("Location: themes.php? page = functions.php & saved = true"); a muri;  altfel dacă ('reset' == $ _REQUEST ['action']) foreach ($ opțiuni ca valoare $) delete_option ($ value ['id']);  header ("Locație: themes.php? page = functions.php & reset = true"); a muri;  dacă ! function_exists ('wp_list_comments')) add_theme_page ($ nume_model "Opțiuni", $ numele_name, "edit_themes", numele de bază (__FILE__), "mytheme_admin");  altceva add_menu_page ($ numele_modului "Opțiuni", $ numele_name, "ediția_themuri", numele de bază (__FILE__), "mytheme_admin");  funcția mytheme_admin () global $ numele de familie, $ shortname, $ options; dacă ($ _REQUEST ['salvat']) echo ''$ THEMENAME.' Setari Salvate.
„; dacă ($ _REQUEST ['reset']) echo ''$ THEMENAME.' resetarea setărilor.
„; ?>  
  setări
 
 Nu vom trece prin cod, deoarece ar face prea mult acest tutorial off-track. Doar copiați-l și lipiți-l și gândiți-vă la el ca la un cod magic de la Zeii WordPress care face ca tema dvs. să funcționeze.
 Acest cod următor verifică fiecare dintre opțiunile noastre tip atribut și le modelează într-o masă. Deci, opțiunile cu "tip" => "selectați" ar ieși ca o casetă drop-down sau "tip" => "textarea" ar ieși ca o textare.
    

    
  
 
   "/>                                />            
      
 
  În final, la sfârșitul dosarului, introduceți:
  cer (TEMPLATEPATH. "/var.php");
 Noi require () al nostru var.php fișier care va conține codul pentru preluarea opțiunilor noastre.
Rețineți că trebuie să folosim templatePath în require () sau include() astfel încât să navigheze în directorul tematic și nu în directorul WordPress rădăcină.
 Preluarea acestor opțiuni
 Acum, aceste opțiuni sunt în Tabloul de bord, trebuie să le putem folosi în tema noastră. Introduceți următorul cod în var.php:
  get_var ("SELECT termen_id din $ wpdb-> termeni". "WHERE nume =" $ ts_portfolio_cat ""); / * Obțineți ID-ul paginii de blog de la numele * / $ ts_blogpage = $ wpdb-> get_var ("SELECT 'ID' FROM $ wpdb-> posts") "WHERE post_title =" $ ts_blogpage "AND post_type = ); ?>
 Prima secțiune a codului preia toate opțiunile din baza de date. Cu toate acestea, avem o problemă: opțiunile pentru Categoria și pagina trimite înapoi numele categoriei sau paginii - dar preferăm ID-ul deoarece este mai ușor de utilizat în funcțiile WordPress.
 Următoarele două părți ale codului fac exact asta. Executăm o interogare SQL pentru a obține ID-ul corespunzător. Aceste opțiuni sunt acum stocate în $ ts_portfolio_cat și $ ts_blogpage variabile.
 Acum avem partea de administrare terminată, conectați-vă la Tabloul de bord și setați setările corespunzătoare pentru fiecare dintre opțiuni. Alege deepblue.css pentru schema de culori pentru moment.
  
 rezumat
 Asta incheie Ziua 1 a WordPress Week. Mâine, vom crea aspectul paginii noastre de pornire, făcând o zonă personalizată "WordPress Loop" și handeling widget-uri.
 Partea a 2-a - Loops și Widgets.



		
			
	   
	




Cod