Share
Wordpress, ca sistem de management al conținutului, este adesea folosit pentru crearea de site-uri de portofoliu. Odată cu evoluția designului și a funcționalităților interfeței cu utilizatorul, a apărut o nouă tendință: afișarea elementelor de portofoliu în diferite machete. Acest tutorial detaliază procesul de creare a unei secțiuni dedicate de portofoliu în WordPress 'backend și folosind jQuery și CSS3 pentru a afișa portofoliul într-un mod clasic.
În acest tutorial, vom folosi extensiv caracteristicile puternice ale WordPress, cum ar fi postările personalizate, taxonomiile personalizate, și vom scrie și o funcție pentru a prelua propriile extrase personalizate.
Primul pas în crearea site-ului nostru de portofoliu este de a instala Wordpress. Aceasta este o sarcină simplă și, chiar mai bine, cele mai multe gazde web acolo oferă un program de instalare cu un clic. Cu toate acestea, dacă sunteți nou la acest lucru, aici este un ghid minunat pentru a vă ajuta cu instalarea.
Odată ce instalarea sa finalizat, ar trebui să creăm în continuare tema personalizată, care va afișa portofoliul nostru. Există diferite metode pentru crearea de teme personalizate. Unii preferă să creeze un nou șablon alb alb, în timp ce alții aleg să creeze teme copil ale noului șablon TwentyTen. Pentru acest tutorial, vom folosi tema lui Starker, de Elliot Jay Stocks. Este o temă complet goală, fără stil; este o bază excelentă pentru a ne construi tema. Editați styles.css fișier și modificați numele temei la care se face referire în partea de sus. Pentru a instala tema, pur și simplu lipiți dosarul tematic dinwp-content> teme pliant. Odată ce tema este instalată, o puteți activa accesând tematică pagină.
Portofoliul nostru nu va conține multe date. Un site de portofoliu de bază conține imagini ale proiectelor, unele etichete pentru identificarea proiectelor și o scurtă descriere a fiecăruia. Tema cu mai multe layout-uri va funcționa astfel încât utilizatorul să poată selecta între o rețea și un aspect al listei. La fel ca multe site-uri web cu mai multe layout-uri disponibile, nu vom încărca o pagină diferită atunci când utilizatorul face clic pe vizualizarea listei sau pe vizualizarea grilei. În schimb, vom folosi AJAX pentru încărcarea asincronă în noul vizualizator. Acesta este proiectul de bază al modului în care situl nostru de portofoliu va apărea în modul rețea:
Odată ce utilizatorul dă clic pe controlul vizualizării listei, aspectul întreg va trece fără probleme la o listă de vizualizare care va conține titlul proiectului, etichetele asociate acestuia și o scurtă descriere.
Pentru portofoliul nostru, trebuie să înregistrăm un tip de post personalizat, numit "proiect". Putem personaliza fiecare aspect al unui post WordPress. De exemplu, putem schimba etichetele implicate, selectând diferite funcții pentru post, cum ar fi comentarii, miniaturi, fragmente etc..
Pentru a implementa un post personalizat, modificați functions.php fișier situat în cadrul temă pliant. Acesta conține o mulțime de cod predefinit, tema goală Starkers oferă câteva funcționalități ale șablonului implicit TwentyTen. Nu fiți speriați sau confuzi; puteți adăuga următorul cod în partea de jos sau de sus a paginii functions.php fişier.
Nu lăsați niciun spațiu gol la capătul
functions.phpfişier.
Am prins funcția personalizată la inițializare (init) în modul următor:
Accentsconagua
/ * --- Crearea tipului de post personalizat pentru proiect - * / add_action ('init', 'project_custom_init'); Acest project_custom_init metoda va fi utilizată pentru a înregistra tipul postului personalizat în baza de date WordPress.
Puteți afla mai multe despre metoda implicată în înregistrarea unui tip de post personalizat aici.
register_post_type metoda necesită un nume pentru postul personalizat și un set de argumente care definesc caracteristicile postului personalizat. În primul rând, trebuie să definim etichetele pentru postul personalizat. Aceste etichete vor fi folosite pentru postarea personalizată din adminul WordPress.
/ * - Custom Post Init Begin - * / funcția project_custom_init () $ labels = array ('name' => _x ',' add_new '=> _x (' Add New ',' project '),' add_new_item '=> __ (' Proiectul '),' new_item '=> __ (' Proiect nou '),' view_item '=> __ ( "Nu au fost găsite proiecte"), "not_found_in_trash" => __ ("Nu s-au găsit proiecte în coșul de gunoi"), "parent_item_colon" => "," meniu_menu "=>" Proiect "); Odată ce am definit etichetele, trebuie să definim setul de argumente pentru tipul de post personalizat. Matricea de etichete definită mai devreme va fi și un argument. Odată ce argumentele sunt definite, înregistrăm tipul de post personalizat ca "proiect".
$ args = array ('etichete' => etichete $, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rescrie '=> true,' capability_type '=>' post ',' has_archive '=> true,' hierarchical '=> false,' menu_position '=> null, "autor", "miniatură", "extras", "comentarii")); // Următorul este primul pas în care înregistrăm postul. register_post_type ( 'proiect', $ args); / * - Închiderea inițială a mesajelor personalizate - * / De asemenea, putem să adăugăm opțional mesaje personalizate pentru tipul de post personalizat. Aceste mesaje vor fi afișate în tabloul de bord WordPress când editați sau actualizăm postarea personalizată. Putem face acest lucru prin crearea unui filtru pentru mesajele actualizate după cum urmează:
// Adăugați filtru pentru a vă asigura că textul Proiect sau proiect este afișat atunci când un utilizator actualizează o carte add_filter ('post_updated_messages', 'project_updated_messages'); funcția project_updated_messages ($ messages) global $ post, $ post_ID; $ messages ['project'] = array (0 => ", // Nefolosit. , 2 => __ ('Câmp personalizat actualizat.'), 3 => __ ('Câmp obligatoriu șters'). revizuirea * / 5 => isset ($ _GET ['revision'])? sprintf (__ (' false, 6 => sprintf (__ ('proiect publicat, vezi proiect'), esc_url (get_permalink ($ post_ID))), 7 => __ ($ Post_ID)))), 9 => sprintf (__ ('Proiectul este programat pentru: % 1 $ s. Previzualizare proiect "), // translatori: Publicați formatul datei casetei, consultați http://php.net/date data_i18n (__ ('Mj, Y @ G: i'), strtotime ($ post-> post_date) esc_url ('preview', 'true', get_permalink ($ post_ID))))), 10 => sprintf (__ ('Project draft updated'. returneaza $ mesaje; Apoi trebuie să definim o taxonomie personalizată pentru etichetele care vor fi utilizate cu fiecare dintre elementele de portofoliu. Puteți afla mai multe despre metoda taxonomiei registrului aici.
// Initializeaza noile etichete de taxonomie $ labels = array ('name' => _x ('Tags', 'taxonomy general name'), 'singular_name' => = "__ (" Parent Tag ")," parent_item_colon "=> __ (" Parent Tag: ") 'edit_item' => __ ('Editare etichete'), 'update_item' => __ (' Nume' ), ); // taxonomie particularizată pentru etichetele proiectului register_taxonomy ('tag', array ('project'), array ('hierarchical' => false, 'labels' => etichete $, 'show_ui' => true, 'query_var' => true , 'rescrie' => array ('slug' => 'tag'),)); Reveniți la tabloul de bord WordPress și deschideți setările media din setări tab. Aici trebuie să setați dimensiunea implicită pentru miniaturile imaginii de portofoliu. Veți observa, de asemenea, în bara laterală că tipul postului personalizat "Proiect" a fost înregistrat cu succes, împreună cu taxonomia personalizată, "etichete". Putem înregistra dimensiunea implicită a imaginii utilizând set_post_thumbnail dar voi demonstra un alt mod de a realiza acest lucru. Puteți afla mai multe despre cum să setați programatic dimensiunile miniaturilor postate aici.
Creați câteva elemente de portofoliu demo, accesând proiecte și faceți clic pe adăuga nou. Ne cerem un titlu pentru proiect, conținutul și o miniatură. Putem vedea că a apărut și o secțiune de etichete și confirmă că taxonomia personalizată a fost înregistrată cu succes. Adăugați și unele etichete pentru elementele de portofoliu.
Pentru a crea tema, vom crea mai întâi un șablon static HTML / CSS3 pentru site. Aceasta separă cele două sarcini de a face aspectul site-ului să fie compatibil cu designul și de a prelua conținutul din baza de date. Codarea directă a temei poate fi uneori confuză pentru începători uneori - în special, dacă în temă există o mulțime de conținut. Creați trei dosare numite
"css", "images" și, respectiv, "js". Structura generală pentru zona principală de conținut va fi asemănătoare:
Grilă Listă
Vezi detalii
Titlul proiectului
Etichete, eticheteDescrierea / extrasul proiectului
Modelarea șablonului depinde de dvs. Puteți experimenta diferite culori și imagini pentru a vă satisface nevoile. Dar pentru acest șablon vom crea o temă de grunge întunecată și vom folosi oarecum distractiv CSS3 pentru a obține acele efecte subtile de hover și transparență. Decuparea graficului în imagini este mai degrabă. Ca atare, nu voi trece detaliile aici.
corp fundal: # 5a5a5a url ('images / bg.jpg') nu-repeta centru de sus; înălțime: 100%; a text-decoration: none; culoare: # C2FC48; a: hover culoare: #fff; . clar clar: ambele; # page-wrap lățime: 960px; poziție: relativă; margine: 0 auto 40px; #header height: 111px; umplutură: 0 10px 0 50px; #header h1 float: left; #header h1 a font-family: Georgia, Arial, Helvetica, sans-serif; font-size: 48px; poziție: relativă; text-decoration: nici unul; text-shadow: 2px 2px 1px # 000000; top: 64px; lățime: auto; z-index: 1000; -moz-tranziție: toate 0,3s ușurință-în-out; -webkit-transition: toate 0.3s ușurință în-out; -o-tranziție: toate 0,3s ușurință-în-out; tranziție: toate 0,3s ușurință în afară; #header h1 a: hover culoare: # f4f6f0; ul # social float: dreapta; top: 95px; Poziția: relativă; ul # social li float: stânga; margin-dreapta: 10px; afișare: inline; ul # social li a lățime: 16px; înălțime: 16px; afișare: bloc; imaginea de fundal: url ('images / layout-icons.png'); text-indent: -99999px; ul # socială a.feed background-position: -16px 32px; ul # socială a.facebook background-position: 0 32px; ul # socială a.twitter background-position: 0 16px; Stilul de bază pentru containerul principal și comenzile de aspect sunt următoarele
/ * - Stiluri de conținut principal Începeți aici - * / # principal-conținut padding: 50px 50px 28px 50px; fundal-culoare: # 000; border-bottom: 1px # 696969 solid; border-left: 1px # 696969 solid; frontieră-dreapta: 1px # 696969 solid; / * Fallback pentru browserele web care nu acceptă RGBa * / background: rgb (0, 0, 0); / * RGBa cu 0.3 opacitate * / fundal: rgba (0, 0, 0, 0.3); font-familie: Helvetica, Arial, sans-serif; font-size: 12px; Culoare: # C7C7C7; linia-înălțime: 16px; # principal-conținut a: hover culoare: #fff; # layout-controls margin-bottom: 15px; # layout-controls Span width: 20px; înălțime: 26px; afișare: bloc; imaginea de fundal: url ('images / layout-icons.png'); -moz-tranziție: toate 0,3s ușurință-în-out; -webkit-transition: toate 0.3s ușurință în-out; -o-tranziție: toate 0,3s ușurință-în-out; tranziție: toate 0,3s ușurință în afară; text-indent: -99999px; # layout-controls a width: 20px; înălțime: 26px; afișare: bloc; plutește la stânga; imaginea de fundal: url ('images / layout-icons.png'); margin-dreapta: 10px; afișare: inline; # layout-controls spațierea a.grid background-position: left 0; # layout-controls a.grid background-position: left -26px; # layout-controls spațierea a.list background-position: right 0; # layout-controls a.list background-position: right -26px; # layout-controls a: Spațierea cu hover opacity: 0; / * alte browsere * / filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate = 0); / * aceasta funcționează în IE6, IE7 și IE8 * / Următoarele sunt stilurile generale pentru lista de proiecte. Mai târziu, vom face un stil specific pentru fiecare mod de aspect al rețelei și un mod de structură a listei, în funcție de clasa curentă a listei folio.
/ * ------------- Stilurile generale Folio pornesc aici --------------- * / ul # folio li a -moz-transition: all 0.3 cu ușurință în afară; -webkit-transition: toate 0.3s ușurință în-out; -o-tranziție: toate 0,3s ușurință-în-out; tranziție: toate 0,3s ușurință în afară; ul # folio li / * Fallback pentru browserele web care nu acceptă RGBa * / background: rgb (0, 0, 0); / * RGBa cu 0.3 opacitate * / fundal: rgba (0, 0, 0, 0.3); padding: 20px; frontieră: 1px # 4c4c4c solid; margin-bottom: 22px; -moz-tranziție: toate 0,3s ușurință-în-out; -webkit-transition: toate 0.3s ușurință în-out; -o-tranziție: toate 0,3s ușurință-în-out; tranziție: toate 0,3s ușurință în afară; ul # folio li: hover / * Fallback pentru browserele web care nu acceptă RGBa * / background: rgb (0, 0, 0); / * RGBa cu 0,3 opacitate * / fundal: rgba (0, 0, 0, 0,1); ul # folio li .image text-aliniere: centru; ul # folio li .image span lățime: 158px; înălțime: 116px; afișare: bloc; overflow: ascuns; fundal-culoare: #fff; margin-bottom: 10px; ul # folio li .image span o width: 158px; înălțime: 116px; afișare: bloc; ul # folio li .image un font-weight: bold;
De asemenea, rețineți că nu folosim metoda generală de opacitate de obținere a transparenței utilizând CSS3. Utilizarea metodei de opacitate afectează, de asemenea, copiii din containerul părinte pe care se aplică opacitatea. În schimb, folosim metoda RGBa de adăugare a culorilor de fundal în container și folosirea valorii alfa pentru a controla transparența containerului.
Puteți citi mai multe despre proprietatea RGBa în acest articol minunat.
Acest lucru nu afectează transparența elementelor pentru copii. De asemenea, trebuie să creăm cod CSS specific IE pentru a susține transparența alfa.
În structura HTML, veți observa că există o clasă dată în lista de portofolii.
Practic, clasa "grid" este utilizată pentru afișarea listei într-o vizualizare de rețea, iar clasa "list" este utilizată pentru a afișa lista într-o vizualizare de listă. În modul rețea, tot conținutul suplimentar este ascuns de utilizator, iar în modul listă, tot conținutul este vizibil pentru utilizator. Avem două seturi separate de stil pentru fiecare mod. Stilurile pentru modul de rețea sunt următoarele:
/ * ------------------ Aspectul grilei pornește aici ------------------- * / ul # folio.grid li lățime: 158px; înălțime: 130px; plutește la stânga; margin-dreapta: 19px; afișare: inline; ul # folio.grid fi.content display: none; ul # folio.grid fi.image span a width: 158px; înălțime: 116px; afișare: bloc; ul # folio.grid li. dreapta margin-right: 0;
Modurile de listare sunt următoarele. În orice moment, este activă numai una dintre stilurile de rețea sau listă.
/ * ------------------ Aranjare listă pornire aici ------------------- * / ul # folio.list li display: bloc; ul # folio.list li .image, ul # folio li.details.image lățime: 158px; înălțime: 130px; plutește la stânga; ul # folio.list li .content float: left; umplutura: 0 10px 0 40px; lățime: 598px; ul # folio.list li .content h2, ul # folio li.details.content h2 font-size: 24px; culoare: # C2FC48; margin-bottom: 6px; font-familie: Georgia, Arial, Helvetica, sans-serif; ul # folio.list li .content span.tags, ul # folio li.details .content span.tags culoare: #fff; font-size: 11px; font-style: italic; margin-bottom: 10px; afișare: bloc;
Următoarea va folosi jQuery UI pentru a schimba clasa listei folio cu privire la butonul de aspect care a făcut clic de utilizator. Detectăm evenimentul de clic al butoanelor de control al aspectului, preluarea clasei curente și a noii clase care urmează să fie activată și apoi folosirea adăuga și elimina pentru a schimba clasele. De asemenea, avem un set de parametri care definesc viteza evenimentelor care au loc.
var animateSpeed = 500; jQuery ("# layout-controls a") .Click (funcția () var folio = jQuery ('folio'), curClass = folio.attr '); folio.fadeOut (animateSpeed, functie () folio .removeClass (curClass, animateSpeed); .addClass (newClass, animateSpeed);)) fadeIn (animateSpeed); Acum, că am finalizat versiunea statică a site-ului, îl putem integra în tema WordPress în câteva minute. Tot ce trebuie să facem este să țâșniți prin posturile folosind a wp_query obiect cu o interogare pentru tipul de post personalizat. Apoi, plasăm conținutul în poziția respectivă în șablon.
header.php În primul rând, trebuie să modificăm header.php șablon și include fișierele JavaScript personalizate. În acest tutorial, vom include jQuery folosind versiunea CDN a Google. Vom renunța la jQuery furnizat de WordPress și vom înregistra versiunea de jQuery a Google CDN. Inserați fragmentul de mai jos în secțiunea dvs. functions.php fişier.
Mută css, js și imagini foldere - pe care le-ați creat anterior pentru șablonul static - în dosarul tematic WordPress. Introduceți fișierul personalizat al jQuery UI și fișierul script principal în antet. Asigurați-vă că este introdus sub wp_head metodă.
Acum, puteți crea un alt șablon în temă - de exemplu, Pagina-home.php - sau puteți modifica index.php deja prezente în dosarul tematic. Dacă alegeți metoda anterioară, atunci:
setări fila. 
Șablonul va conține mai întâi antetul, pe care îl puteți apela folosind get_header () metoda, apoi conținutul principal, pe care îl veți codifica în cadrul șablonului propriu-zis. În cele din urmă, subsolul, pe care îl puteți include, prin get_footer () metodă.
Următorul cod demonstrează modul în care puteți crea o interogare particularizată utilizând wp_query obiect.
"proiect", "posts_per_page" => -1)); $ count = 0; ?>
Folosim o variabilă, numara pentru a număra numărul de articole din listă. Avem nevoie de acest lucru pentru că vom păstra doar patru elemente în fiecare rând și vom atribui un "extrema dreaptă"la fiecare element din lista a patra. ''extrema dreaptă"clasa elimină orice margine dreapta la elementele listei. Alternativ, am putea folosi, în fișierul nostru CSS li: nth-child (4n) selector.
Următorul cod va arăta modul în care vom putea trece prin postări și vom introduce conținutul, după cum este necesar.
În interiorul buclei, inserăm conținutul în modul WordPress normal, folosind $ bucla wp_query obiect, desigur. Următorul cod arată modul în care putem prelua miniatura postului de proiect și inserați-o în șablon. Observați cum se utilizează $ count variabilă pentru a introduce "extrema dreaptă'pe fiecare element din lista a patra.
Acum vine secțiunea de conținut în care trebuie să inserăm titlul, etichetele, descrierea scurtă și să preluăm extrasul pentru post cu o metodă extras particularizată. Introducerea titlului este destul de ușoară, la fel ca și etichetele. Rețineți că am creat anterior o taxonomie personalizată după numele etichetelor.
„>
'nume', 'comanda' => 'ASC', 'fields' => 'names'); echo implode (wp_get_object_terms ($ post-> ID, 'tag', $ args), ','); ?>
Veți observa că nu folosim generalul the_excerpt () , oferită de WordPress. În schimb, definim metoda noastră particulară prin adăugarea unor filtre. Metoda generală a extrasului returnează o lungime mai mare a fragmentului decât ne cerem. Prin urmare, versiunea personalizată. De asemenea, modificăm "Continuați citirea? "adăugat la sfârșitul extrasului implicit și înlocuindu-l cu" Citiți mai mult ". Fragmentul următor ne servește scopul. Această metodă extras particulară vine la îndemână pentru o mulțime de situații.
Citeste mai mult„; funcția folio_excerpt ($ length_callback = ", $ more_callback =") global $ post; dacă (funcția_există ($ length_callback)) add_filter ('excerpt_length', $ length_callback); dacă (funcția_există ($ more_callback)) add_filter ('excerpt_more', $ more_callback); $ output = get_the_excerpt (); $ output = apply_filters ('wptexturize', $ output); $ output = apply_filters ('convert_chars', $ output); $ output = ''$ De ieșire.'
„; echo $ output; ?> Metoda de creare a unui portofoliu multi-layout este destul de simplă și utilizează trucuri de bază CSS și jQuery pentru a obține rezultatul. Chiar mai bine, aceste tehnici pot fi aplicate la o varietate de proiecte. Alte tehnici din acest tutorial, cum ar fi tipuri personalizate de posturi, taxonomii personalizate și adăugarea de filtre la metoda extras, pot fi utilizate în diverse alte moduri inovatoare, precum și!
