Share
De-a lungul acestei serii începând cu șase părți, vom folosi caracteristicile avansate ale WordPress pentru a crea propriul portofoliu și blog, completând o pagină cu opțiuni, mai multe stiluri și suport pentru noile funcții WordPress 2.7. Astăzi vom lega totul împreună.
În ultima parte a WordPress Week, creăm un widget personalizat de bază înainte de a termina prin dare inovație un pic de chirurgie plastica cu o schema de culori alternativa.
Există încă mai multe elemente de text pe care nu le-am încadrat încă și, prin urmare, nu arată bine, cum ar fi subtitrările imaginilor, blockquote, pre, cod și adresa.
Adăugați următoarele la style.css:
p.wp-caption-text font-size: 0.8cm; font-style: italic; blocare font-size: 0.9em; margine: 15px 0 15px 15px; padding: 0 15px; pre font-family: "Courier New", curier, monospace; font-size: 0.9cm; margine: 10px 0 20px 0; code background-color: #efefef; culoare: # 000; font-family: "Courier New", curier, monospace; dimensiune font: 1em; margine: 0 3px; umplutura: 0 3px; adresa font-size: 0.9em; font-familie: Georgia, "Times New Roman", Times, serif; Înălțimea liniei: 1,5cm; margin-bottom: 15px;
Și asta în deepblue.css:
p.wp-caption-text culoare: # 555; blocare border-left: 2px solid # e3e8ed;
Vom face un widget (de mai jos) care va afișa ultimele cinci postări de blog - cu prima imagine atasată pentru ca postarea să fie redimensionată și folosită ca imagine de previzualizare.
Acesta este conceput pentru a fi utilizat pe zona widget-ului paginii principale.
Widget-ul este, în esență, un loop custom WordPress numit de la o funcție care o transformă într-un widget.
În interiorul / Inc / folder crea un fișier numit bloglist-widget.php și porniți-l cu următoarele:
Din blog
Întreaga bucla este înfășurată într-o nouă funcție recentblogposts () (poți să-i numești orice vrei). Pe următoarele două linii vom înregistra două obiecte ca fiind "globale" - aceasta ne permite să accesăm baza de date WordPress ($ wpdb) și post ($ postare) în interiorul widget-ului. În continuare, includem var.php fişier.
Următor →:
O buclă personalizată obișnuită, cu excluderea categoriei de portofoliu, limitată la cinci posturi și caller_get_posts = 1 este un nou parametru în WP 2.7, care stabilește buclă pentru a ignora posturile vechi "Stickied".
Acum devine interesant:
Accentsconagua
postări. "WHERE post_parent = '". $ post-> ID. "'AND post_type =' atașament 'ORDER BY' post_date 'ASC LIMIT 0,1"; $ post_attachments = $ wpdb-> get_results ("$ queryattach"); dacă ($ post_attachments) $ image = $ post_attachments [0] -> guid; ?> Codul de mai sus caută baza de date pentru a prelua URL-ul primei imagini atasate pentru postarea curentă și o plasează în interior $ image. Rețineți că imaginea trebuie să fie attatched și nu sunt legate de altundeva.
Vedeți un alt post pe care l-am scris utilizând acest cod pe blogul ThemeForest: "Image Resizing with WordPress".
; ?>/inc/thumb.php? src =<?php echo $image; ?>& w = 50 & h = 50 )
Dacă a fost găsită o imagine atasată, este analizată prin scriptul TimThumb că are o dimensiune de 50x50 pixeli. Titlul postului și data sunt apoi afișate la fel.
Bucla și funcția sunt apoi închise:
Apoi, widgetul este compatibil cu șablonul prin împachetarea acestuia în $ before_widget și $ after_widget etichetele definite în șablon:
În cele din urmă, register_sidebar_widget () funcția este utilizată pentru a înregistra widgetul în tabloul de bord. "Mesajele recente din blog" vor fi numele widgetului folosit în interiorul tabloului de bord.
Interior functions.php adăugați următoarele pentru a include noul widget în șablon:
includeți (TEMPLATEPATH. "/inc/bloglist-widget.php");
În tabloul de bord, deschideți Aspect -> Widgeturi și plasați "Mesajele recente din blog" (pentru a nu fi confundat cu WordPress-default 'Posturi recente') widget în zona "Pagina de start":
Stilul este destul de simplu. Imaginea este flotată în lateral, iar dimensiunea și greutatea textului sunt modificate. Adăugați acest lucru la style.css:
ul.bloglist margine: 0; ul.bloglist li clar: ambele; dimensiune font: 1em; linia-înălțime: 1.3; listă: nu există; margin-bottom: 17px; overflow: ascuns; ul.bloglist li img frontieră: nici unul; plutește la stânga; margin-dreapta: 7px; ul.bloglist li .posttitle, ul.bloglist li .postdate afișare: bloc; font-size: 0.9cm; ul.bloglist li .posttitle font-greutate: bold; margin-top: 2px; ul.bloglist li .postdate font-size: 0.8; font-style: italic; font-weight: normal; ul.bloglist a: link, ul.bloglist a: vizitat display: block; padding: 2px; overflow: ascuns; ul.bloglist a: hover, ul.bloglist a: activ, ul.bloglist li: focalizare text-decoration: none;
Și adăugați o anumită culoare la legături atunci când vă plimbați deepblue.css:
ul.bloglist li: link, ul.bloglist li a: vizitat culoare: # 333; ul.bloglist a: hover, ul.bloglist a: activ, ul.bloglist li: focalizare background-color: # e3e8ed;
Asta e! După cum ați învățat, creați un foarte elementul de bază este la fel de ușor ca înfășurarea unei bucla obișnuită în interiorul unei funcții widget. :)
Aș vrea să încep prin a-mi cere scuze că trebuie să stricăm ultima parte a seriei în rezolvarea problemelor din Internet Explorer; dar este un browser care se folosește destul de mult și este datoria noastră să ne acomodăm pentru acei oameni răi care o folosesc.
Ne vom ocupa mai întâi de IE7 și apoi de problemele IE6 după aceea.
În interiorul / Inc / folder crea un nou folder numit / Css / și în interiorul său, două fișiere: ie.css și ie6.css. Aceste două fișiere vor fi incluse în antet într-o declarație condițională IE. Adăugați următoarele direct înainte ca fișierele javascript ale jQuery să fie incluse în secțiune din header.php:
Aceste Declarații condiționale IE asigură că ie.css fișierul este inclus numai în versiunile Internet Explorer mai mici decât IE8; și ie6.css este de asemenea utilizat în versiuni mai mici decât IE7.
Prima problemă este în secțiunea de comentarii, în care IE7 nu pare să se ocupe de dimensiunile fontului în același mod ca și alte browsere, și făcând fiecare comentariu cu filet să devină mai mic decât comentariul părinte:
Adăugați următoarele în ie.css pentru a seta dimensiunea fontului în comentarii în pixeli (spre deosebire de faptul că em este folosit în foaia de stil principală):
.comentează citează, .commentlist span font-size: 14px; plutește la stânga; padding-right: 4px; . commentlist p font-size: 13px; linia-înălțime: 16px; .commentmetadata font-size: 13px; linia-înălțime: 14px; .commentlist .reply font-size: 13px;
O altă problemă: formularul de căutare și anteturile din bara laterală au decis că preferă o notă de text de 15px:
Doar abandonați următoarele pentru al forța:
#sidebar ul li * text-indent: -15px; #sidebar ul li ul * text-indent: 0;
Acum, la problemele IE6. Primul și cel mai evident este că fundalul bara de navigație nu funcționează, deoarece este un PNG transparent:
Există mai multe remedii IE6 PNG disponibile, voi folosi DD_belatedPNG. Salvați fișierul .js în / Inc / pliant.
Direct sub celelalte declarații condiționale ale IE din header.php adăuga: (asigurați-vă că modificați numele fișierului .js dacă numele dvs. nu este denumit DD_belatedPNG_0.0.7a-min.js)
Interior DD_belatedPNG.fix () trecem două dispute. Acestea sunt pur și simplu selectorii CSS ai elementelor pentru a aplica fixarea PNG la.
Adauga la ie6.css pentru a rezolva câteva probleme cu zona de widgeturi a paginii de pornire și am terminat:
.extras display: inline; ul.bloglist a: hover, ul.bloglist a: activ, ul.bloglist li a: focalizare background: none; cursor: pointer; text-decorare: subliniere; ul.bloglist li lățime: 300px; ul.twitter li.twitter-item float: left; lățime: 260px;
Toate eforturile noastre de a separa stilurile de culori de restul CSS-ului nostru a fost pentru a facilita crearea de scheme alternative de culori selectabile din pagina de opțiuni. În această secțiune finală a seriei, inovație se duce sub cuțitul cu redspace sistem:
În interiorul / stiluri / , faceți un nou dosar numit / Redspace / și în interior, copiați în search.png și bullet.gif fișiere din /albastru inchis/ pliant.
Faceți și o copie a textului deepblue.css la fel de redspace.css.
Salvați următoarele trei imagini în / Redspace / dosar ca bg.jpg, trans.png și transred.png respectiv:
Acum este la fel de simplu ca să schimbați codurile culorilor albastre cu cele roșii redspace.css:
/ * Inovație stil roșu - redspace.css * / corp background: url ("redspace / bg.jpg") repet-x # 140a05 0 sus; culoare: # 333; a: link, a: vizitat culoare: # 941919; #head h1 culoare: #fff; #head h3 culoare: # c4acaa; #nav background: url ("redspace / trans.png") repetați; frontieră: 1px solid # 5b2022; #nav ul li: link, #nav ul li a: vizitat culoare: # b99e94; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: vizitat background: url ("redspace / transred.png") repeta; culoare: # cdb9b2; #nav ul a: hover, #nav ul li a: activ, #nav ul li a: focalizare culoare: # cdb9b2; #content background-color: # f9f9f3; frontieră: 1px solid # 5b2022; frontieră: nici una; .work a: link img, .work a: vizitat img border: 5px solid # f2e9ea; .work a: hover img ,. a lucra a: img activ, .work a: focus img border: 5px solid # 8d4846; .work a: link, .work a: vizitat culoare: # 333; ul.twitter li.twitter-element fundal-culoare: # f6f5ed; frontieră: 1px solid # eae9de; .flickr a: link img, .flickr a: vizitat img border: 3px solid # f2e9ea; .flickr a: hover img, .flickr a: img activ, .flick a: focalizare img border: 3px solid # 8d4846; .blogpost, .worksearch border-bottom: 1px solid # e8e3c8; h2 a: link, h2 a: vizitat culoare: # 333; ul.meta li frontieră-stânga: 1px solid # e3e8ed; #sidebar ul li # formularul de căutare #s background: url ("redspace / search.png") nu-repeta dreapta # f6f6ec; frontieră: 1px solid # E8E3C8; #sidebar ul li # formularul de căutare #s: focus border: 1px solid # dad4b6; #sidebar ul li ul culoare-fundal: # f6f6ec; frontieră: 1px solid # E8E3C8; #sidebar ul li li lista-stil: url ("redspace / bullet.gif"); #sidebar ul li: link, #sidebar ul li a: vizitat culoare: # 333; p.footer culoare: # 554740; p.footer a: link, p.footer a: vizitat culoare: # 554740; frontieră-jos: 1px întreruptă; p.footer a: hover border-bottom: 1px solid; text-decoration: nici unul; / * Lista de comentarii * / .commentlist li .avatar border: 2px solid # f2e9ea; .commentlist citează: link, .commentlist cite a: vizitat culoare: # 333; .commentlist .commentmetadata a: link: primul-copil, .commentlist .commentmetadata a: vizitat: primul-copil culoare: # 333; .thread-alt culoare-fundal: # F6F6EC; .întâmpină-chiar background-color: # F9F9F3; .depth-1 frontieră: 1px solid # E8E3C8; .even, .alt frontieră-stânga: 1px solid # E8E3C8; intrare, textarea background-color: # F6F6EC; frontieră: 1px solid # E8E3C8; intrare: focus, textarea: focalizare border: 1px solid # dad4b6; p.wp-caption-text culoare: # 555; blocare border-left: 2px solid # e3e8ed; ul.bloglist li: link, ul.bloglist li a: vizitat culoare: # 333; ul.bloglist a: hover, ul.bloglist a: activ, ul.bloglist li a: focalizare background-color: # f2e9ea; Din tabloul de bord, deschideți pagina Opțiuni de inovare și selectați redspace.css din opțiunea "Schema de culori" - pagina a scanat deja / stiluri / folder și a afișat fișierele .css acolo.
Aplicați lovitura și am terminat!
De-a lungul acestei serii ați învățat o serie de abilități necesare pentru a alimenta tot felul de site-uri cu sistemul WordPress! Majoritatea fișierelor Innovation pot fi refolosite pe noile dvs. proiecte pentru a vă ajuta să accelerați procesul de dezvoltare.
Descărcați fișierele sursă din această parte și există o schemă de culoare suplimentară (mai elementară) disponibilă - SoftLight:
Aveți nevoie de ajutor cu Inovarea? Doriți să împărtășiți noile dvs. scheme de culori? Accesați danharper.me/innovation/ și faceți clic pe link-ul Forums.
Vă mulțumim că ați citit și chiar sper că ați găsit această serie utilă!
- Dan
Dragostea WordPress? Nevoie de mai mult? Am compilat o rapidă completare a unor resurse WordPress favorite.
Pe parcursul cărții veți crea trei teme WordPress, un blog, un portofoliu și un site general cu meniuri și submeniuri. Fiecare temă demonstrează diferite aspecte ale temei WordPress.
Citeste mai mult
Tu ai întrebat și am răspuns! Datorită cererii ridicate, lansăm o serie nouă de videoclipuri care se vor difuza pe ecranele "Scufundare în PHP". Sperăm că aceste două serii, văzute în spate, vă vor transforma într-un designer de dinamită PHP / WordPress.
Vizitați seria
Dezvoltarea temelor, codul este o documentație clară și bine scrisă. Venind de la creatorii de WordPress, nu puteți merge prost în conformitate cu instrucțiunile sale.
Vizitați Codex
O serie de seriale video pe Proiectare pentru WordPress. Este o serie de trei părți care acoperă descărcarea și instalarea WordPress pe un server până la o temă completă.
Vizitați seria
Resursa dvs. vizuală pentru toate lucrurile WordPress.
Viziteaza site-ul
O să vă arăt cum să creați o temă wordpress de la zero în aceste 3 părți ale seriei tutorial. Eu voi acoperi de la Structurare, proiectare în Photoshop, feliere, codificare în css bazate pe css pe deplin, și în cele din urmă wordpress implementare.
Vizitați seria
Evident, dar dacă aveți nevoie de o lectură WordPress în plus, uitați-vă la tutorialele anterioare!
Viziteaza site-ul
Lucrul minunat despre WordPress este că nu limitează modul în care este afișat conținutul, ci oferă un "cadru" de moduri de a face acest lucru. Chiar mai bine, este posibil să modificați afișarea în funcție de conținut.
Vizitați Tutorialul
Flexibilitatea oferită de motorul WordPress este fenomenală - posibilitatea de a publica ceva de la un blog de bază la un forum, de la o prezentare web la un site corporate CMS! Aici vom arunca o privire la unele dintre cele mai bune moduri în care WordPress a fost folosit până acum.
Vizitați articolul
Ne aruncăm o privire asupra modului în care o temă populară WordPress premium beneficiază de avantajele funcțiilor avansate ale WordPress pentru a crea un șablon care împinge cu adevărat ceea ce WordPress este capabil să!
Vizitați articolul
WordPress este bine cunoscut pentru colecția sa uimitoare de plugin-uri gratuite. Există unul pentru aproape orice nevoie de care vă puteți gândi, de la copierea de rezervă a instalării dvs. WordPress la întrebarea pentru o ceașcă de cafea sau combaterea spam-ului.
Vizitați articolul
Acest tutorial va descrie implementarea unui plugin Wordpress începând de la zero. Pluginul se va conecta la o bază de date externă OSCommerce și va afișa produse aleatoare pe site-ul dvs. Wordpress. De asemenea, implementează o pagină de configurare pentru panoul de administrare Wordpress.
Vizitați Tutorialul
"WordPress Hacks" acoperă lumea din jurul WordPress, incluzând cele mai recente hack-uri WordPress, știri, sfaturi, trucuri, și cum să-i ale software-ului popular de blogging open source.
Viziteaza site-ul
Un blog nou pentru a posta răspunsuri la întrebările WordPress și rețete rapide dar foarte utile despre platforma mea de blogging preferată.
Viziteaza site-ul
Primul pas spre succes este acela de a realiza că orice problemă aveți, altcineva trebuie să o aibă înainte. O căutare simplă de la Google vă va oferi o soluție pentru majoritatea loviturilor de pe drumul pe care îl întâlniți atunci când vă dezvoltați pentru WordPress.
Viziteaza site-ul
