W tym artykule dowiecie się jak w dość prosty sposób zaprojektować portfolio ze swoimi pracami za pomocą wordpressa. Przyda nam się tutaj znajomość custome fieldsów (inaczej pól użytkownika), o których mowa była w jednym z wcześniejszych artykułów palmiaka.

Nie będę tutaj wnikać w wasze gusta graficzne i narzucać jakiegoś ścisłego układu strony. Zauważyłam jednak, że coraz więcej osób stosuję szablon miniatur na stronie głównej (fragmenty grafik odpowiednio przeskalowane) a na podstronach umieszczane są ich powiększenia (często nieco mniejszych rozmiarów niż oryginał ze względu na bezpieczeństwo własnej pracy w internecie). I na podobnych trendach będziemy się teraz opierać.

Nasza propozycja skóry do tego portfolio wygląda następująco:

Pierwszą rzeczą jaką należy zrobić po zaprojektowaniu grafiki, to kodowanie, którego szczegółowo opisywać się będę, ponieważ były już na ten temat tutoriale.
Podczas tworzenia tej skóry zapoznacie się również z podstawami template tagów, które budują w dużej mierze wordpressowe skóry i które są niezbędne do prawidłowego wyświetlania elementów strony.

Przygotowanie kodu

Pierwszą czynnością jaką zrobimy po zakodowaniu naszego projektu to podzielenie go na części wordpressowej skóry, tj. na header.php (nagłówek strony), footer.php (stopka strony), page.php (wyświetlanie „strony”). single.php (pojedynczy wpis),sidebar.php (zazwyczaj jest to menu umieszczone na boku strony), index.php (zawartość strony głównej – część pomiędzy header, footerem i sidebarem), archive.php (archiwum wpisów z danej kategorii). Są to najważniejsze części jakie wykorzystane będą do stworzenia tego portfolio.

Mój kod strony głównej i zarazem podstrony „portfolio” od strony kodowej wygląda następująco:

Kod dla podstron (szczególnie 'szczegóły dodanych wpisów' z kategorii „portfolio” a także „strony”):

b) Index.php

c) Footer.php

d) Single.php

e) Page.php

f) Archive.php

g) Sidebar.php

W późniejszym etapie zauważycie, że wyżej przedstawione zawartości naszych najważniejszych plików w skórze znacznie się zmienią, po pierwsze przez dodanie w nich Tamplate tagów a po drugie dojdzie kilka niuansów, które wynikają z ogólnego działania WordPressa.

Template Tagi

Są to specyficzne, dla WordPressa, zmienne przypisane do wpisu. Są one o tyle wygodne, że łatwiej jest je zapamiętać niż całą funkcję phpową, są proste i co najważniejsze na oficjalnej stronie WordPress znajdziecie bardzo szczegółową dokumentację i opis każdego z template tagów.
Template Tagi umieszczamy zawsze między lub w znacznikach htmlowych, np
<div class="przyklad"><?php bloginfo('name'); ?></div>

Z jakich template tagów tutaj będziemy korzystać?
<?php bloginfo('name'); ?> - decyduje o wyświetlaniu nazwy naszej strony / bloga postawionego na WP

<?php echo get_option('home'); ?> - wywołuje adres naszego bloga np. docelowy adres domenowy http://agressiva.poprostuja.pl lub "katalogowy" http://palmiak.p5.dot.pl/wordpressik

<?php get_header(); ?> - wyświetla zawartość pliku header.php - bardzo ważny tag, stosowany w rawie każdym pliku skory wordpressowej

<?php get_footer(); ?> - wyświetla zawartość pliku footer.php, j/w


<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
- jest to loop inaczej pętla, która wyświetla wszystkie opublikowane wpisy oraz strony. Umieszczany jest tuz przed divem w którym znajduje się wpis a zamykany jest za tym samym divem za pomocą przykładowo takiego fragmentu kodu łączącego TT z htmlem

<?php the_permalink(); ?> - tag zazwyczaj wrzucany w odnośnik do danego wpisu - powoduje , że po kliknięciu np w tytuł posta na stronie głównej przeniesie nas do jego pełnej wersji.

<?php the_title(); ?> - jak sama nazwa wskazuje wyświetla tytuł posta / strony

<?php the_content("więcej", the_title('', '', false)); ?> - wstawiony w szkielet wpisu wyświetli nam jego treść jaką wpisujemy zawsze w pole edycji w panelu administracyjnym. Słowo "więcej" oznacza, że kiedy skorzystamy z opcji <!-- more -->, przy wpisie pojawi nam się hasło "więcej" , po kliknięciu na które przeniesiemy się do pełnej wersji wpisu.

<?php next_posts_link('« Starsze wpisy') ?> - tag umiejscowiony w htmlu wyświetli nam nawigację między postami. Dzięki temu akurat przejdziemy do starszych wpisów. Ten tag jak i jego odpowiednik <?php previous_posts_link('Nowsze wpisy »') ?> (wyświetlanie nowszych wpisów) działają wtedy kiedy na naszej stronie znajduje się już odpowiednia ilość wpisów, poza tym w panelu administracyjnym (Ustawienia >> Wyświetlanie wpisów) w polu Strony bloga pokazują najwięcej ustawiona jest sensowna liczba wpisów pokazywanych na jednej "stronie". Czyli mając opublikowanych 20 wpisów a na stronach wyświetlanych 5, wtedy nawigacja między stronami z nowszymi i starszymi wpisami zostanie wyświetlona.

<?php comments_template(); ?> - pokazuje zawartość pliku comments.php (czyli szablon komentarzy do wpisów)

Zaproponowana przez nas skóra nie jest wybitnie skomplikowana pod względem template tagów. Sądzę,że każdy powinien dać sobie z tym radę bez najmniejszych problemów.

Skóra do Wordpress z template tagami

Teraz przejdźmy do konkretów, czyli jak wyglądają pliki skóry po wprowadzeniu do nich wyzej wymienionych template tagów:
a) Header.php - pamiętajcie o tym, aby po włączeniu skóry i skonfigurowaniu wordpressa przez panel admina podać poprawne linki w menu górnym.
<?php wp_head(); ?> - ten tag musi zawsze znaleźć się w pliku header.php między znacznikami <head> i </head>. Duża ilość wtyczek z niej korzysta dorzucając swoje elementy w tym miejscu, więc gdybyśmy tego tagu nie wstawili to okazałoby się, że wiele z nich poprawnie nie działa.

b) Footer.php
Tutaj podobnie jak w header.php jest tag, który wykorzystywany jest przez wtyczki do WP i musi znaleźć się kodzie:<?php wp_footer(); ?>
Do wyświetlenia ostatnich komentarzy została wykorzystana wtyczka Latest Comments With Avatars Reloaded, aby pokazać 5 ostatnio skomentowanych wpisów należy podać tag przez nią obsługiwany: <?php latest_comments_avatars(5,0,false); ?>. Polecam ta wtyczkę, jest naprawdę bardzo przydatna.

c) Index.php
W zaprojektowanej przez nas skórze doskonale widać, że na stronie głównej jak i w dziale Portfolio przy obrazkach głównych jest bardzo mało treści, z tego prostego względu, że na portfolio tego typu zaprezentowanie umiejętności graficznych jest ważniejsze niż rozpisywanie się. Dlatego też jeżeli postanowicie skorzystać z naszego produktu lub sami dzięki temu tutorialowi zaprojektujecie coś podobnego to pamiętajcie, aby w treści dość wysoko wstawić <!--more--> z tego względu, aby później uniknąć za długiej prawej kolumny na stronie głównej – najlepiej aby była ona mniej więcej takiej samej wysokości jak obrazek z boku. Dopiero na podstronie, czyli po kliknięciu na „więcej” przejdziemy do części gdzie bardziej szczegółowo będziemy mogli opisać nasze „graficzne dziecko”.

d) Archive.php
Ta część jest w tym przypadku taka sama jak index.php, założenie było takie, że po wybraniu subkategorii w Portfolio pokazują nam się poszczególne wpisy w tych działach w tym samym szablonie. Jeden pod drugim, natomiast szczegóły są dostępne po wybraniu "więcej".

e) Single.php
Single.php stanowi pierwszą podstronę inną od pozostałych, na niej zawarte są szczegóły waszego wpisu, dane o kategorii oraz sidebar z prawej strony, w którym wyświetlane są podkategorie kategorii Portfolio - o tym jak w taki sposób wyświetlić subkategorię, za chwilkę w części poświęconej Sidebarowi.

f) Sidebar.php
Zawartość sidebara jest dość niewielka w porównaniu do innych plików.
Chodzi w nim o to aby wyświetlić wszystkie stworzone przez nas subkategorie kategorii Portfolio. Jak to zrobić?
Krok 1.
Najpierw należy stworzyć nową kategorię wpisów i nazwać ją "Portfolio".
Następnie tworzymy kolejna kategorię, np "Logotypy" i jako kategorię nadrzędną dajemy "Portfolio".

Krok 2.
Teraz należy sprawdzić jakie ID ma kategoria "Portfolio". W tym celu najeżdżamy kursorem myszy na "Portfolio" gdzie tworzyliśmy wszystkie kategorie i z paska statusu odczytujemy numer.

Krok 3.
Wywoływanie subkategorii z kategorii o ID 3:
do tego służy nam niżej wykorzystywany tag <?php wp_list_categories('orderby=id&show_count=1&use_desc_for_title=0&child_of=3&title_li='); ?>. Jezeli skorzystacie z tej skóry lub zrobicie własną podobną to pamiętajcie, aby zmienić w tym fragmencie: child_of=3 liczbę 3 na taką jaką będzie miała wasza kategoria główna wpisów.

g) Page.php
"Strona" na naszym portfolio różni się troszkę od single.php, z tego względu, że nie potrzebuje wyświetlania kategorii, daty publikacji ani komentarzy. Zbudowana jest tylko z tytułu i zawartości - treści. Jest to chyba najprostszy szablon w WordPressie.

h) Comments.php
Najgorszy szablon... Na szczęście jest to kopia skóry default lekko przeze mnie przebudowana i ostylowana. Mimo, że na stronie po komentarzach aż tak wiele nie widać, to jednak ich struktura od srodka jest nieco zakręcona i o wiele dłuższa niż wyżej przedstawionych plików. Aby zobaczyć jak to od środka wygląda polecam ściągnąć przygotowaną skórę i tam zobaczyć wnętrze tego pliku, a od zewnątrz możecie zobaczyć na tej stronce.

Custom fields

Jak zauważyliście po temacie tego artykułu, będziemy na naszej stronie wykorzystywać Custome Fieldsy, czyli inaczej Pola Użytkownika. Znajdzie coś o nich w jednym z wcześniejszych tutoriali autorstwa palmiaka.

Właściwie już w 3 plikach naszej skóry wordpressowej używana była funkcja własnej roboty oraz div, w którym była wywoływana zawartość.
index.php & archive.php:

single.php:

Te template tagi wywołują wrzucane przez usera obrazki przypisywane do poszczególnych wpisów.
Kluczami tych pół użytkownika są "obrazek1" oraz "obrazek2".
W tej wordpressowej skórze z góry ustaliłam, ze obrazek na stronie głównej (obrazek1) oraz na podstronie wpisu (obrazek2) nie będzie szerszy niż 600px, jest to maksymalna szerokość jaką mogą mieć te obrazki.

W jaki sposób to wszystko działa?
Otóż w pliku functions.php została dodana nowa funkcja php:

gdzie:
- nosi nazwę custom_field_image
- zmienna dir określa lokalizację naszych wgrywanych na serwer obrazów.
Pamiętajcie, żeby ją poprawić na własną i niech to będzie katalog indywidualny w katalogu głównym waszego WordPressa.
- zawartość klucza wyświetlana jest już w postaci <img src="adres_obrazka" alt=""/>
Jeżeli klucz nie jest pusty, to wyświetlana jest jego zawartość. Gdyby nie to sprawdzanie, przy niewypełnionym polu użytkownika przywitałyby nas czerwone krzyżyki.
Najważniejsze co musicie tutaj pamiętać, to to, że obrazek1 pokazywany jest na "stronie głównej" wpisu, a po kliknięciu na "więcej", w podstronie pokazywany mamy obrazek2.

W panelu administracyjnym wygląda to tak:

U mnie przykładową zawartością klucza "obrazek1" jest:

oraz "obrazek2"

Dodatki

Dla uatrakcyjnienia wyglądu całości została użyta funkcja fadeTo jQuery. Szczegóły odnośnie tego efektu znajdziecie w tym wpisie.

Podsumowanie

Jak zostało Wam wyżej pokazane WordPress nie tylko sprawdza się jako blog, ale również strona o zupełnie innym charakterze. W prosty i szybki sposób możecie stworzyć stronę o dowolnym wyglądzie, skorzystać z prostych udogodnień - custom fields - dzięki którym nie jesteście wyłącznie zależni od ograniczeń wtyczek. Za pomocą pól użytkownika możecie wstawić jaki tylko chcecie element (oczywiście nie tylko obrazek) w dowolne miejsce i w wygodny sposób możecie edytować je przez dobrze znany panel administracyjny.
Mamy nadzieję, ze nasza porada w tej sprawie znajdzie wasze uznanie i zaczniecie z WordPress korzystać nieco szerzej niż do tej pory.
Jeżeli macie jakieś pytania to pytajcie - my odpowiemy najszybciej jak się da.

Pobieralnia

Download: Vivee Portfolio Theme (zip)
w paczce znajdziecie:
- folder ze skórą, do umieszczenia w katalogu wp-content/themes/
- wtyczkę, dzięki której wyswietlicie ostatnio skomentowane wpisy - neleży ją wgrać do katalogu wp-cintent/plugins/
- plik psd z logo, które możecie podmienic na własne. Po jego zmidyfikowaniu wystarczy zapisać obrazek jako "logo.jpg"

Uwaga: twórcy skóry zwracają się z grzeczną prośbą o nie usuwanie ze stopki paragrafu odnośnie autora Vivee Portfolio Theme!

Nowa wersja Portfolio Theme

W poprzedniej wersji był błąd, który mógł powodować problemy z działaniem panelu administracyjnego.
Zoastał już usuniety i możecie pobrać najnowszą wersję Vivee Portfolio Theme.