Cum se afișează o listă de autoruri cu avataruri în WordPress Contributors

Cum se afișează o listă de autoruri cu avataruri în WordPress Contributors / Tutoriale

În timp ce lucram pe site-ul unui client, am realizat că funcția încorporată pentru înscrierea autorilor nu era suficientă. V-am arătat cum să afișați toți autorii de pe site-ul dvs., dar această metodă a fost bună numai dacă doriți să afișați o listă simplă în bara laterală. Dacă doriți să creați o pagină cu contribuitori mai bogată în conținut și folositoare, atunci această funcție este inutilă.

În acest articol vă vom arăta cum puteți crea o pagină de contribuitori care va afișa o listă de autori cu avatare sau userphoto și orice alte informații care vă plac. Acest tutorial este un nivel intermediar tutorial.

Primul lucru pe care trebuie să-l faceți este să creați o pagină personalizată utilizând acest șablon.

Apoi va trebui să deschideți functions.php fișier în dosarul temelor și adăugați următorul cod:

 contribuiți la funcții () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename de la $ wpdb-> utilizatori ORDER BY display_name"); foreach (autorii $ ca autor $) echo "
  • "echo" ID; echo ";" echo "; echo" ID; echo ";" echo "; echo ""; "echo" "; echo" ";"
  • ";

    Prin adăugarea acestei funcții, îi spuneți WordPress să creeze o funcție care va afișa numele autorului și avatarul autorului. Aveți posibilitatea să modificați setarea plugin-ului avatar la userphoto modificând pur și simplu următoarea linie:

    echo get_avatar ($ autor-> ID);

    și înlocuind-o cu:

    echo userphoto ($ autor-> ID);

    Puteți adăuga mai multe funcții acestei funcții, cum ar fi afișarea URL-ului autorului și a altor informații din profil, urmând structura utilizată.

    De asemenea, trebuie să adăugați următoarele linii în fișierul CSS:

     #authorlist li clar: stânga; plutește la stânga; margine: 0 0 5px 0;  #authorlist img.photo lățime: 40px; înălțime: 40px; plutește la stânga;  #authorlist div.authname margine: 20px 0 0 10px; plutește la stânga;  

    După ce ați terminat adăugarea funcției, acum va trebui să o apelați în șablonul de pagină. Deschideți fișierul contributors.php sau orice numeți fișierul. Urmați același șablon de pagină ca pagina dvs..php și în buclă, adăugați această funcție în loc să afișați conținutul:

      Acest lucru vă va oferi o pagină cu contribuitori mai bogată în conținut. Acest truc este excelent pentru blogurile Multi-Author.

      Iată un exemplu de modul în care am folosit-o:

      Dacă doriți să aveți o pagină de contribuitori cu informații cum ar fi afișate în exemplul de mai sus, va trebui să faceți câteva modificări ale funcției inițiale. Avem un exemplu de cod care vă va oferi exact tot ce este afișat în imaginea de mai sus.

      contribuiți la funcții () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename de la $ wpdb-> utilizatori WHERE display_name 'admin' ORDER BY display_name"); foreach (autorii $ ca autor $) echo "
    • "echo" ID); echo "/ echo"; echo "; echo" ID "); echo "/ \"> "; the_author_meta ('display_name', $ autor-> ID); echo" "; echo"
      "ecou" Website: ID); echo "/ \" target = "_ blank"> "; the_author_meta ('user_url', $ author-> ID)
      "echo" Twitter: ID); echo "\" target = "_ blank"> "; the_author_meta (" twitter ", $ author-> ID)
      "echo" ID); "echo" "; echo" "; echo" "echo" "; echo" ";"
    • ";

      Acest cod folosește pluginul Photo User. Câmpul Twitter este afișat folosind trucul pe care l-am menționat în articolul Cum se afișează Twitter și Facebook pe pagina de profil a autorului.

      De exemplu, CSS ar arăta astfel:

      #authorlist ul stil-list: nici unul; lățime: 600px; marja: 0; umplutura: 0;  #authorlist li margine: 0 0 5px 0; listă: nu există; înălțime: 90px; umplutura: 15px 0 15px 0; frontieră-fund: 1px solid #ececec;  #authorlist img.photo lățime: 80px; înălțime: 80px; plutește la stânga; marcă: 0 15px 0 0; padding: 3px; frontieră: 1px solid #ececec;  #authorlist div.authname margine: 20px 0 0 10px; 

      Dacă doriți, puteți afișa mai multe informații utilizând codul avansat ca ghid.

      Sursa acestei funcții