5 lutego 2017 | o pracyo wszystkim

Jak dodać archiwum przeczytanych książek?

1

Może kiedyś udało Wam się zabłądzić w sekcję Menu „Książki”, gdzie kryją się odnośniki do zbiorów przeczytanych w każdym roku książek. Dwa razy już dostałam pytanie: jak to jest zrobione. Więc wreszcie mam chwilę, żeby to wszystko spisać. Tak. Kategoria dev.

Na start

Książki stanowią u mnie osobny typ wpisu, nazwany dość logicznie – Książki. Nie są one hierarchiczne i wszystkie ustawienia oraz uprawnienia dziedziczą z typowych postów. Podpięte mam do tego dwie taksonomie: tagi oraz gatunki (które są nowym rodzajem taksonomii, stworzonym na potrzeby książek).

Z archaizmów, wciąż mam w książkach pole tekstowe, bo w pierwszej wersji planowałam za każdym razem pisać choć parę słów o danej książce – szybko mi się odechciało i nigdy się nawet nie doczekało prawidłowego wyświetlania.

Do obsługi dodatkowych informacji o książkach używam Advanced Custom Fields – zanim odkryłam ten plugin, wykorzystywałam ręcznie dodawane pola w sekcji „Własne pola”, którą można uruchomić klikając w Opcje Ekranu w prawym górnym rogu. Tutorial rozpiszę z użyciem obu tych rozwiązań.

Strona z książkami ma u mnie osobny szablon plus wykorzystuje Własne Pola, a konkretnie jedno, w które wpisuję rok, z którego książki mają znaleźć się na podstronie. Na upartego mogłabym pobierać to z daty publikacji strony, ale wpadłam na to dopiero w tej chwili.

0. Start!

W katalogu wp-content/plugins dodajcie plik books.php.

1. Dodanie typu wpisów

Dla bezpieczeństwa i zachowania zdrowia psychicznego, co tylko się da zamkniemy w pluginie. Dlaczego? Żebyście nie musieli przekopiowywać tego za każdym razem, gdy stwierdzicie, że trzeba zmienić motyw.

Nadal trzeba będzie dodać obsługę strony z tym, jednak to już krok mniej do wykonania.

Powyższy kod rejestruje nam typ wpisów Książki. Powinien się on pojawić w panelu, zaraz pod Wpisami. Domyślnie, przy dodawaniu nowych elementów, będziemy mogli dodać tytuł, wybrać tag, gatunek (zarejestrowany w dolnych dwunastu linijkach), dodać okładkę. Dla bezpieczeństwa dodaję zawsze również obsługę wersji.

2. Dodanie dodatkowych pól

Najprościej (naprawdę) jest z wykorzystaniem wtyczki Advanced Custom Fields. Znajdziecie ją w repozytorium WordPressa, a już bezpłatna wersja pozwala tworzyć cuda.

Ten kod wrzućcie sobie do naszego pliku books.php, na koniec. Teraz, przy dodawaniu książek, w prawej kolumnie pojawi się cała sekcja z dodatkowymi informacjami o książce.

Liczba stron, ISBN, Pierwsze wydanie, Tytuł (bo wpisy u siebie nazywam #1. Tytuł), Autor, Ocena, Rok wydania.

ISBN to indywidualny numer każdego wydania i wpisuję go tu na użytek widgetu Ads4Books.

Ocena u mnie jest trochę brzydko rozwiązana – mam tam miejsce na pięć znaczków, a powyżej pola znajduje się „legenda” z trzema kwadracikami oznaczającymi znaki nieobsługiwane przez font. Pierwszy to pełna gwiazdka, drugi to pół gwiazdki, a trzeci pusta gwiazdka, żeby razem zawsze było pięć. Później na poziomie wyświetlania ustawiam, że w tym miejscu fontem jest FontAwesome, który przetwarza mi to właśnie na gwiazdki. Jeśli nie chce Wam się z tym bawić, możecie tam po prostu wpisać 5/10, czy 9/10 – zawsze zmieścicie się w limicie pięciu znaków.


Jeśli z jakichś powodów nie chcecie skorzystać z ACF, możecie zarejestrować pola meta rób po prostu wpisywać je na dole w sekcji „Własne pola”. Po dodaniu pojawią się one już na wybieralnej liście, więc z każdym kolejnym razem będzie łatwiej.

W rejestrowanie samemu pól (tak, żeby były zawsze widoczne) naprawdę nie chcecie się bawić, to są setki linijek kodu i nie ma chyba bardziej wkurzającej rzeczy w całym WordPressie.

3. Dodanie szablonu strony

Teraz musicie stworzyć nowy plik w katalogu szablonu, którego używacie. Wiem, że można to dodać jakoś przez wtyczkę, ale jeszcze tego nie robiłam i też nie do końca jest to rozwiązaniem idealnym.

Otwórzcie sobie w edytorze plik page.php, jeśli go nie macie to index.php. Skopiujcie treść i dodajcie do nowego pliku bookpage.php lub jakkolwiek inaczej, byle by nie kolidowało z innym plikiem i od razu sugerowało, co znajdziecie w środku.

Na samym początku waszego nowego pliku dodajcie to:

Poniżej powinniście mieć pełny szablon strony, z wywołaniem nagłówka, stopki i odpowiednią strukturą pomiędzy. Poszukajcie tam linijki, gdzie znajdzie się funkcja get_content();. W następnej linijce będziemy robić nasze czary.

Zbudowaliśmy „query” po książkach dodanych w tym roku, w którym dodana została nasza strona. Jeśli chcecie, żeby wyświetlała inny rok, wystarczy zmienić go w edycji strony (pierwsza sekcja z prawej „Opublikuj” lub na ekranie szybkiej edycji). Powinno to być znacznie bardziej przejrzyste, niż pełne query, które ja przekazuję sobie jako parametr w sekcji Własne pola.

W strukturze HTML mamy element z ID bookshelf i na 99% będzie on unikatowy w każdym motywie, którego możecie używać. Potrzebujemy teraz utworzyć w katalogu motywu plik book.php, który będzie odpowiadał za wyświetlanie pojedynczej książki na liście.

Oczywiście to, że musicie dodać stronę Przeczytane w 2017 i wybrać odpowiedni szablon jest logiczne?

4. Wyświetlenie książek na liście

W tej części „sky is the limit„. Pomyślcie, chcecie mieć taką listę jak ja? Z okładkami, na które się najeżdża i dopiero później widać dodatkowe informacje? Czy może zwykłą listę z tytułem i oceną? Może z paroma danymi. Może po prostu same okładki? Morze możliwości.

Całość kodu zazwyczaj opakowuję w <article class="book"></article>. Wygląda to moim zdaniem zgrabniej w kodzie, po prostu. Dodaję klasę, żeby w CSS-ie wiedzieć później z czym mam do czynienia.

Tak aktualnie wygląda mój kod. Nie wyświetlam tam wszystkich informacji, tylko tytuł, autora, liczbę stron, ocenę, gatunek oraz datę przeczytania, która u mnie jest zgodna z datą publikacji elementu na stronie (jeśli dodaję później, po prostu sobie edytuję tę datę).

Tutaj macie mój styl do książek.

Numerki z prawej strony są generowane w CSSie (elementy się liczą i same dodają). Tytuły są dość małe, ale jak widzicie, tak po prostu musiało być. Po najechaniu okładka się rozmywa, a ciemne tło podsuwa się do góry odsłaniając pozostałe informacje. Tu oczywiście przykład na żywo.

Szerokość pojedynczej książki ustawiona jest na sztywno na 250 pikseli. Jest to raczej optymalny rozmiar, bo czasem ciężko znaleźć okładki wystarczająco duże, a przy typowym laptopie na szerokość mieści się 5-6 książek, 3-4 powinny zmieścić się na większości szablonów, które zostawiają sporo miejsca z prawej i lewej strony, a główna kolumna ma około tysiąca pikseli. Brzmi chyba całkiem sensownie?

Na telefonach też to dobrze wygląda, nawet bez dodatkowego kodu dla wersji mobilnych. Na tabletach to 2-3 kolumny, jedna na telefonie.

Jeśli chcecie w ocenach mieć gwiazdki, musicie jeszcze do swojego CSS-a załączyć font-awesome.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Jeśli taki wygląd Wam pasuje, świetnie.
Jeśli nie, wtedy trzeba trochę głębiej pomyśleć.

Kod HTML i CSS możecie sobie zmodyfikować, jeśli macie ochotę możecie się odezwać po więcej gotowców – z moich poprzednich szablonów. Przez cztery lata korzystania z tego rozwiązania trochę się już tego nazbierało.

Lista gotowa. Kolejne kroki są totalnie dodatkowe i pozwalają na wyświetlanie konkretnej książki pod wpisem (albo nad). Przydaje się to bardzo przy recenzjach, szczególnie jeśli korzystacie z Ads4books.

5. Podpięcie dodanej książki do opublikowanego wpisu

Bez ACF wystarczy dodać sobie na dole we Własnych Polach wpisu ustawić np. pole o nazwie books, z ID danej książki. Skąd weźmiecie ID? Przejdźcie w panelu do zakładki książki, kliknijcie przycisk „Edytuj” a następnie sprawdźcie adres, który pokazał się w przeglądarce, na przykład: wp-admin/post.php?post=5372&action=edit. 5372 to właśnie ID, w tym przypadku tekstu, który właśnie czytacie.

W ACF dodajecie pole typu Relacja i Zwracany format na ID wpisu. Ograniczcie sobie do jednego, wtedy będzie to dokładnie taka sama wartość jak w przypadku Własnego Pola ustawionego powyżej.

Poniższy kod wklejcie w dogodnym miejscu gdzieś w okolicach the_content. Może być nad tekstem, może być pod. Przymierzcie sobie, gdzie będzie najlepiej leżał.

HTML-a jest tu sporo, wiem. Wyświetlamy okładkę, parę podstawowych informacji o książce (autor, rok wydania, ocenę, liczbę stron, gatunek i datę przeczytania), a oprócz tego przygotowane jest też miejsce na wyświetlenie wklejki z Ads4Books (jeśli Was nie interesuje, po prostu usuwacie linijki od 33 do 42 włącznie).

CSS jest tu banalnie prosty, wyświetlamy w końcu tylko jedną książkę.

6. Integracja z ads4books

Przypuszczamy, że chcecie zrobić tę integrację z BuyBoxem, bo czemu nie. W panelu na ich stronie tworzycie sobie widget, zaznaczacie programy partnerskie, oznaczacie, że chodzi o książki i wybieracie interesujące Was zakładki. Gdy macie to gotowe, dostaniecie kod do wklejenia na stronie. Zerknijcie na kod tam zawarty, gdzieś po http://www.a4b-tracking.com/pl/buybox/ powinien się pojawić parocyfrowy numer, ID waszego boksa. Wpiszcie go ręcznie w miejscu, które zaznaczyłam w kodzie wyżej. ISBN pobiera się z informacji o Waszych książkach i możecie ich tam wprowadzić dowolną liczbę, pamiętajcie tylko o oddzieleniu ich przecinkami.

I już. Jeśli wpiszecie w tekście ID książki, wyświetli Wam się sekcja z nią i szczegółami. U mnie aktualnie jest raczej minimalistycznie, bo jest tylko BuyBox i okładka z tytułem, jednak wcześniej było tego dużo więcej.

Uff.

Mam nadzieję, że o niczym nie zapomniałam.

 


jeśli tekst Ci się spodobał, udostępnij go albo kliknij w serduszko na dole (obok ikonki komentarzy) – będę wiedziała, co Wam się podoba!

. . . .
10
1

E-mail?

Jeśli chcesz dostawać powiadomienie mailem o każdym nowym wpisie, podaj swój adres poniżej.

Komentarze: 10

  • raistand

    Zastanawiam się czy się za to zabrać. W końcu jakaś lista/spis by się przydała.

    • No właśnie ;) ale może poczekaj, przygotuję tę wersję z shortcodem, mniej opcji customizacji, ale trochę łatwiej z wdrożeniem.

      • raistand

        Może się za to zabiorę. Zastanawiam się tylko czy dam radę zrobić widok listy taki jak chcę ale to juz się okaże.

  • Serce bije mi szybciej, gdy widzę u Ciebie wpisy z kategorii dev <3

    • Haha :D no muszę się wreszcie z tym rozkręcić.
      Myślisz, że to jest sensownie wytłumaczone? Bo ja nigdy dobra w tym nie byłam :x

  • A integracja z upolujebooka? ;)

    • A ja się nie integruję z upolujebooka ;D ale na pewno też się da.
      Nie wiedziałam, że tam jest jakiś program partnerski w ogóle.

      • Marcin Ci w tym na pewno pomoże jeżeli będziesz chciała :)

      • Nie chcę :D wątpię, żeby kod był wyzwaniem w połączeniu z tym, a już ten buybox mi wystarczy (jedno konto, a mam na nim też reflinki do notatników, gier czy filmów).