Share
Blogurile cu mai mulți autori devin din ce în ce mai populare și cu un motiv bun. Crearea unui conținut obișnuit și angajat poate fi adesea o provocare pentru un blogger individual. Cu mai mulți autori poate fi mult mai ușor și vă permite de asemenea să acoperiți o gamă mai largă de subiecte care trag de la cunoștințele mai multor persoane. Pe site-uri precum Wptuts + puteți citi articole dintr-o echipă masivă de scriitori și bloggeri, cu toții avem propriul stil de scriere și personalități. La fel ca și Wptuts +, pe cele mai multe site-uri cu mai mulți autori, veți găsi o cutie de informare mică despre autor pe undeva pe pagină. Astăzi vă voi arăta cum puteți crea unul pentru site-ul dvs. propriu.
WordPress este o serie de blog-uri și platforme de conținut multi-autorizate. Toate instrumentele de care avem nevoie sunt construite, trebuie doar să știm cum să le folosim.
Ascuns în bara de administrare WordPress (când sunteți conectat), toți utilizatorii au acces la linkul "Editați profilul meu". Vă duce la pagina unde ați setat modul în care numele dvs. este afișat pe site, unde vă schimbați parola și adresa de e-mail. Este, de asemenea, locul unde puteți introduce informații de contact foarte utile, moderne și actuale, cum ar fi AIM, Yahoo IM și detaliile Google Talk (/ sarcasm). Știu, pentru că fac același lucru, întotdeauna ați ignorat majoritatea. Dacă nu folosiți aceste câmpuri, atunci de ce să le completați? Caseta noastră de autor va folosi aceste câmpuri și le vom face puțin mai utile!
Este foarte ușor pentru noi să eliminăm metodele de contact pe care nu le dorim să le folosim și să le înlocuim cu ceva mai puțin curent. Deci, mai întâi trebuie să deschideți tema functions.php (sau lipiți-l într-un plugin dacă preferați) și să mergem la lucru.
Accentsconagua
funcția wptuts_contact_methods ($ contactmethods) // Eliminați ceea ce nu dorim să dezactivați ($ contactmethods ['aim']); dezactivat ($ contactmethods ['yim']); dezactivat ($ contactmethods ['jabber']); // Adăugați câteva utile $ contactmethods ['twitter'] = 'Utilizator Twitter'; $ contactmethods ['facebook'] = 'Adresa profilului Facebook'; $ contactmethods ['linkedin'] = 'Adresa URL a profilului public LinkedIn'; $ contactmethods ['googleplus'] = 'Adresa URL a profilului Google+'; returnați metode de contact $; add_filter ('user_contactmethods', 'wptuts_contact_methods'); Primul lucru pe care îl facem este să eliminăm câteva câmpuri destul de inutile, apoi să adăugăm pur și simplu câmpurile suplimentare pe care le dorim. Prima parte trebuie să fie unică pentru textul pe care îl puteți introduce oricum doriți, deoarece acesta va fi afișat lângă câmpul de pe pagina de profil.
Dacă vă revizuiți pagina de profil de editare, ar trebui să vedeți că câmpurile dvs. suplimentare au apărut, iar cele inutile au dispărut.
Acum, avem undeva unde putem stoca informațiile suplimentare pe care le putem trece la lucrul cu datele și cum le putem arăta în partea din față a site-ului nostru.
Așadar, dorim să arătăm o imagine a autorului nostru, o mică descriere / bio și câteva linkuri către site-urile de social media.
WordPress se ocupă de picsul profilului de utilizator folosind Gravatar. Vrem să folosim funcția WordPress get_avatar () acest lucru preia Gravatar pentru ID-ul de utilizator sau adresa de e-mail specificată.
Puteți specifica dimensiunea imaginii și, de asemenea, ce să faceți dacă utilizatorul nu are un Gravatar. Parametrul final vă permite să setați textul alternativ pentru avatar. Pentru moment, vom folosi următorul cod:
Aceasta trage în Gravatar la 70px x 70px și folosește ID-ul utilizatorului pentru postul curent.
De asemenea, dorim să extragem câteva din informațiile de bază ale profilului de utilizator, cum ar fi numele și descrierea afișate de utilizator. Să aruncăm o privire la un exemplu de bază.
„> →',' tuts_plus '), get_the_author ()); ?>
Codul de mai sus oferă un punct de plecare frumos. Deschide-ți single.php (Folosesc Twenty Twelve pentru scopurile acestui articol) și inserați codul de mai sus în interiorul bucla, dar deasupra șablonului de comentarii. (Linia 25 dacă folosiți și Twenty Twelve.) Acum, hai să trecem prin ceea ce facem.
Am vorbit deja despre get_avatar () dar în continuare vă veți vedea get_the_author () funcţie. Aceasta returnează pur și simplu autorul postului. În exemplul nostru, tipărim numele autorului în partea de sus a casetei autorului. Acesta va afișa oricare ar fi selectat utilizatorul drept "afișat în mod public ca". Ați putea folosi pur și simplu:
Cu toate acestea, prefer să scap de toate rezultatele mele și să permit opțiunea pentru traducători.
Apoi vedem get_the_author_meta (). Vom folosi acest lucru destul de puțin. Această funcție returnează datele meta date dorite pentru utilizatorul dat. Dacă îl folosim într-o buclă, nu este necesar să specificăm ID-ul utilizatorului, dar poate fi folosit în afara buclăi prin transmiterea ID-ului utilizatorului. Folosind această funcție puteți obține o serie de informații, în exemplul de mai sus îl folosim pentru a extrage descrierea care este caseta de biografie pe care o puteți completa pe pagina de profil a utilizatorului. Ca și numele autorului, eu scap de ieșire pentru a vă asigura că autorii noștri nu au ascuns nimic!
În cele din urmă, avem un link în partea de jos, care face legătura către pagina noastră de autor. Noi folosim get_author_posts_url () pentru a ne da adresa URL. WordPress creează automat pagini de autor pentru toți utilizatorii site-ului care au publicat mesaje.
Să adăugăm câteva CSS și să vedem cum arată:
.media, .bd overflow: hidden; - fluxul superior: vizibil; zoom: 1; .media img, .media .img float: left; margin-dreapta: 10px; .media img display: bloc; .media .imgExt float: right; margin-stânga: 10px; .profile margin-top: 10px; padding: 20px 10px; frontieră: solid subțire # c6c6c6; -webkit-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0.75); box-shadow: 7px 7px 5px rgba (50, 50, 50, 0.75); .profile-links padding: 5px 0;
Deci avem o cutie de bază, dar cum rămâne cu toate câmpurile suplimentare pe care le-am adăugat? Putem folosi get_the_author_meta () pentru a recupera acele câmpuri personalizate la fel cum am făcut cu descrierea. Să trecem prin exemplul următor împreună, înlocuindu-ne pentru "profilul-link-urile" anterioare div:
„> →',' tuts_plus '), get_the_author ()); ?>
- „>
- „>
- „>
- „>
Am creat o listă neordonată și fiecare element de listă va fi câmpurile suplimentare pe care le-am adăugat la începutul articolului. În primul rând, facem un control brut pentru a ne asigura că există o valoare introdusă pentru fiecare dintre ele, deoarece nu vrem să apară link-uri care să nu facă nimic. Apoi creăm un link pe baza informațiilor introduse în profilul utilizatorului. Așa cum puteți vedea din exemplul pe care îl formăm link-ul folosind același lucru get_the_author_meta () funcția, totuși, în funcție de ceea ce emitem, folosim o funcție de validare diferită. Pentru link-ul Twitter, intrucat intrăm doar un nume de utilizator și adăugăm că la link-ul nostru lipim orice HTML din acesta folosind wp_kses () pentru ceilalți, pe măsură ce intrăm în URL-urile complete de profil în pagina noastră de profil pe care o folosim esc_url () pentru a vă asigura că acestea sunt URL-uri corect formate. V-am arătat două moduri diferite de a face acest lucru, astfel încât să puteți vedea cât de flexibil poate fi.
Adăugând un pic mai mult CSS, putem să-l stilim și aproape că am terminat!
.legăturile sociale padding: 5px; afișare: inline; listă: nu există; text-indent: -9999px; plutește la stânga; . legăturile sociale li a background-position: 0 0; background-repeat: nu-repeta; lățime: 16px; înălțime: 16px; afișare: bloc; .twitter-link fundal: url (images / twitter.png) no-repeat; .facebook-link fundal: url (images / facebook.png) no-repeat; .link-link fundal: url (images / linkedin.png) no-repeat; .google-link background: url (imagini / google-plus.png) nr-repeta;
CSS-ul pe care-l folosesc pentru scopuri demonstrative, numai tu poți face bine ceea ce-ți place cu stilul tău!
Acum avem caseta noastră de bază, putem adăuga tot felul de caracteristici suplimentare. Vom crea o cartelă de profil LinkedIn dinamic atunci când plasați cursorul peste pictograma LinkedIn.
În primul rând, trebuie să creăm anumite funcții. Trebuie să cuprindem biblioteca JavaScript LinkedIn pe postările din blog și pe paginile autorului (mai multe despre aceasta mai târziu!).
funcția wptuts_linkedin_js () if (is_single () || is_author ()): wp_enqueue_script ('linkedin', '//platform.linkedin.com/in.js', null, null, true); endif; add_action ('wp_enqueue_scripts', 'wptuts_linkedin_js'); Adăugați codul de mai sus la tema dvs. functions.php oriunde ați adăugat codul pentru a schimba metodele de contact. Acest lucru ne va asigura că acum avem încărcat JavaScript, dar numai în paginile unde este necesar.
În continuare vom crea o funcție mică pentru a efectua funcția de hover pe baza autorului la care ne uităm:
funcția wptuts_linkedin ($ autor) $ authorinfo = get_user_meta (autor $); $ linkedin = $ authorinfo ['linkedin'] [0]; dacă (isset ($ linkedin)):?>Primul lucru pe care trebuie să-l observați este că de fapt trebuie să transmitem un parametru acestei funcții când o numim. Vrem să transmitem ID-ul de utilizator al autorului pe care vrem să îl creăm. În esență, ceea ce facem este să folosim meta datele utilizatorului
get_user_meta ()apoi scoatem URL-ul nostru LinkedIn pe care l-am creat în prima jumătate a articolului. Apoi pur și simplu adăugați acea variabilă în JavaScript-ul nostru LinkedIn, astfel încât acesta să returneze cartea corectă de hover. Iată cele actualizate single.php extrage:„> →',' tuts_plus '), get_the_author ()); ?>
- „>
- „>
- „>
După cum puteți vedea, numim funcția noastră LinkedIn folosind
wptuts_linkedin (get_the_author_meta ('ID'))aceasta trece prin ID-ul de utilizator al autorului corect pentru a fi utilizat în funcția noastră. O pereche de trucuri CSS simple pentru a face să apară corect:.linkedin-link text-indent: 0 important;După cum puteți vedea acum, avem cartea noastră de autor cu o carte frumoasă de hover pentru profilul nostru LinkedIn!
Autor autor
Este adesea plăcut să arătați această casetă de autor în partea de sus a paginii de arhivă a unui autor. Douăsprezece doisprezece fac deja o parte din munca noastră pentru noi author.php. Deci, putem adăuga ceea ce am învățat mai sus pentru a adăuga informațiile noastre suplimentare.
- „>
- „>
- „>
Concluzie
Așa că o avem. Acum știți cum să modificați metodele dvs. de contact, cum să trageți informații diferite de la un profil de utilizator și să le afișați pe postările lor de pe blog. Există atât de multe lucruri pe care le puteți face în funcție de ceea ce doriți să obțineți. Încercați să adăugați un link către site-ul web al utilizatorului, să afișați cele mai recente Tweets, să trageți un istoric al comitetelor de la GitHub; opțiunile sunt nesfârșite. Toate codurile finale pot fi găsite mai jos.
Vector Social Media Icons de IconDock.com & Double-J Design
URL: http://icondock.com/free/vector-social-media-icons
