publikacja: 25 stycznia 2010, autor: , komentarzy 26 https://wpninja.pl/artykuly/wyswietlamy-wszystkich-autorow-naszego-bloga/

Wyświetlamy wszystkich autorów naszego bloga

Wyświetlamy wszystkich autorów naszego bloga

Nie ma to jak zostać zapytanym o to, jak się stworzyło pewną funkcjonalność na stronie z prośbą o wyjaśnienie, człowiek czuje się dumny :). Pytanie brzmiało mniej więcej tak: "Podoba mi się ta strona wyświetlająca członków zespołu. Jak można coś takiego zrobić w WordPressie?"

Najpierw – wtyczka

Potrzebujemy wpierw odpowiedniej wtyczki, która pozwoli nam na wgranie i przypisanie zdjęć do autorów. Nie będziemy tutaj pisać nic własnego, wykorzystamy za to rozwiązanie już gotowe. Wtyczka nazywa się User Photo i jest bajecznie prosta w użyciu. Instalujemy i wgrywamy zdjęcie autora poprzez panel jego profilu, a następnie na chwilę o wtyczce zapominamy, musimy bowiem napisać kod strony.

Szablon strony

Najpierw otwieramy plik page.php. Na samej górze, jeszcze przez funkcją get_header(); wklejamy coś takiego:

<?php
/*
Template Name: Nasi autorzy
*/
?>

Plik zapisujemy pod nazwą nasi-autorzy.php. Tym oto sposobem stworzyliśmy szablon strony, który podepniemy wkrótce pod stronę stworzoną przez panel WordPressa. Czas zająć się właściwym kodem do wyświetlenia autorów.

Wyświetlamy autorów

Zaraz poniżej funkcji the_content(); wyświetlającej zawartość naszej strony, którą to wpisujemy w czasie edycji strony z poziomu panelu administracyjnego WP, wklejamy pierwsze linie kodu:

<ul id='the_team'>
<?php
$wp_znajdz_uzytkownikow = $wpdb->get_results("SELECT * FROM $wpdb->users ORDER BY ID");

Tak oto otworzyliśmy składnię PHP (poprzez tag <?php), oraz stworzyliśmy zapytanie do bazy danych $wp_znajdz_uzytkownikow – wyszuka nam ono w bazie wszystkich użytkowników z odpowiedniej tabeli w bazie danych i uszereguje ich według identyfikatora liczbowego. Zwróćcie proszę uwagę na początkowy fragment <ul id='the_team'> – posłuży on później do dodania stylów CSS.

Jedziemy dalej, czas dla każdego użytkownika coś wyświetlić, musimy więc stworzyć pętlę.

foreach ( $wp_znajdz_uzytkownikow as $uzytkownikid ) {
$user_id       = (int) $uzytkownikid->ID;
$user_login    = stripslashes($uzytkownikid->user_login);
$display_name  = stripslashes($uzytkownikid->display_name);
 
$file = get_option('home') . '/';
$link = $file . '?author=' . $user_id;

Pętla foreach otworzona. W pętli przypisujemy kolejne zmienne, po kolei od pierwszego wiersza.

  1. ID użytkownika.
  2. Jego login.
  3. Jego imię wyświetlane.
  4. Zmienna $file pobiera link naszej strony z ostatnim slashem.
  5. Zmienna $link przypisuje do wcześniejszego linka parametr ?author oraz ID użytkownika, dzięki czemu stworzymy linka do strony tego autora.

Pozostaje nam wyświetlić dane i zamknąć kod.

?><li><?php echo '<a href="' . $link . '" title="' . $display_name . '">';?><?php echo userphoto($user_id, '', '', array(style => 'width:100px;height:100px;'), get_template_directory_uri() . '/default-avatar.gif'); ?><br /><span><?php echo $display_name; ?></span></a></li>
<?php
}
?>
</ul>

Teraz wyjaśniamy. Funkcja userphoto(); to zmienna z naszej wcześniejszej wtyczki, wyświetla ona zdjęcie użytkownika w formacie 100×100 pixeli. Jeśli zdjęcia nie ma, ta sama funkcja za pomocą get_template_directory_uri() . '/default-avatar.gif' pobierze standardowe zdjęcie z folderu naszego szablonu. Dalej, <?php echo $display_name; ?> wyświetli nam nazwę użytkownika poniżej zdjęcia :). Na końcu jeszcze za pomocą nawiasu } zamykamy pętlę foreach i cały kod jest gotowy!

Stylujemy

Teraz tylko dodać style CSS:

#the_team {
margin:0px;
padding:0px;
list-style:none;
}
#the_team li {
display:block;
float:left !important;
padding:4px;
text-align:center;
}
#the_team li:hover {
background:#eee;
}
#the_team li a {
color:#444;
font-family:"Georgia",Times,serif;
font-style:italic;
}
#the_team li a:hover {
text-decoration:none;
}

Oczywiście dodajemy ten kod do naszego pliku style.css – i całość pięknie wygląda :). Teraz już tylko tworzymy w WordPressie nową stronę i przypisujemy jej odpowiedni szablon, a następnie cieszymy się pięknym wykazem naszych autorów.

Dodaj własny komentarz