Twórcy WordPressa na szczęście po raz kolejny okazali się bardzo sympatyczni i dodanie takiego ficzerka jest naprawdę proste. Można to zrobić na dwa sposoby - albo poprzez functions.php (czyli będzie to działać tylko z tą skórą w której to napiszemy) albo jako plugin (bardziej uniwersalne).

Pierwszy blok

Najpierw musimy napisać kilka linijek dzięki którym stworzymy nasz nowy blok:

Funkcja add_meta_box (więcej info tutaj) odpowiada właśnie za tworzenie takich bloków. Kolejno jako parametry podajemy identyfikator, tytuł bloku, funkcję którą ten blok wykona, pod co podpinamy, umiejscowienie oraz ułożenie. Warto poczytać sobie codex, gdyż są tam dokładnie podane z jakich umiejscowień możemy korzystać etc. W naszym przypadku stworzymy blok, który będzie widoczny tylko pod wpisami (post), będzie miał tytuł "Fajny Tytuł" i wywoła funkcję test_block() (której to jeszcze nie napisalismy).

No to czas ją napisać:

Jak nietrudno zauważyć w obecnej postaci w bloku powinien się pojawić napis "plum" i już. Jednak to jeszcze nie wszystko, żeby to zadziałało - musimy jeszcze blok zainicjalizować. Robimy to następująco:

Teraz gdy spojrzymy w panel pod textarea na treść wpisu powinien pojawić się nasz blok a w nim napis "plum".

Zwiększamy funkcjonalność

Niestety radość z pluma szybko mija i warto by zrobić z tego coś bardziej praktycznego. Np. zrobimy sobie formularz za pomocą którego będzie nam łatwiej dodawać custom fields.

Dzięki temu w skórze pojawi nam się formularz w którym możemy wybrać sobie gatunek muzyki, pogodę i coś tam jeszcze napisać. W obecnej chwili poza wyświetlaniem nic innego nie robi - musimy jeszcze stworzyć funkcję, która wrzuci te zmienne do custom fields oraz poinformować WP, żeby przy każdym zapisie wpisu był łaskaw takową funkcję wywołać.

Najpierw funkcja do zapisu:

Po kolei tworzy lub uaktualnia zawartość kolejnych pól.

A by to wszystkow wywołać poprawiamy to napisaliśmy przy wywoływaniu bloku:

I już. Wszystko powinno działać jak ta lala Teraz Wasza kolej - dopisujcie własne bloki. We wpisach, na stronach, po bokach lub na dole. Róbcie z nimi co chcecie.

Instalacja:

• Za pomocą FTP:
  1. Pobieramy wtyczkę z strony www.wordpress.org/extend/plugins/easing-slider/
  2. Poprzez FTP kopiujemy zawartość archiwum do katalogu wp-content/plugins
  3. W panelu administracyjnym w zakładce Wtyczki aktywujemy nową wtyczkę o nazwie Easing Slider
• Za pomocą automatycznej instalacji
  1. W panelu administracyjnym w zakładce Wtyczki wybieramy z submenu pozycję Dodaj nową
  2. W polu wyszukiwania wtyczek po nazwach wpisujemy Easing Slider, po odnalezieniu jej klikamy na opcję Zainstaluj
  3. Po automatycznym zamieszczeniu wtyczki na serwerze uruchamiamy ją w zakładce Wtyczki.

Po zainstalowaniu wtyczki, pojawi się dodatkowa zakładka w menu WordPressa.

Umieszczanie slidera na stronie:

Slder możemy zamieścić bezpośrednio w skórze, w dowolnie wybranym przez nas miejscu wklejając tą funkcję w kod:

Mamy też możliwość zamieszczenia slidera w pojedynczym wpisie lub stronie statycznej poprzez shortcode:

Dodawanie obrazków:

Nowe obrazki które wyświetlane będą w sliderze dodajemy podobnie jak inne media w WP. Po kliknięciu na Upload Image pojawi się nam znane okienko uloadowania plików z komputera. Wszystkie dodane przez nas obrazki do slidera trzymane są w zakładce Media - tutaj możemy nimi bezproblemowo zarządzać.

Po wgraniu obrazka należy skopiować jego adres bezpośredni:

Następnie skopiowany adres pliku wklejamy w pole Image Path:. W polu Image Link: podajemy adres url strony pod jaką mamy być kierowani po kliknięciu na dany obrazek.

Ustawienia slidera:

• disableShadow - ukrywanie cienia pod sliderem
• shadowStyle - styl cienia
• next/prevButtons - pokazywanie buttona "następny", "poprzedni"
• nextbuttonIcon - zmienia buttona, można podać ścieżkę własnej ikony
• prevbuttonIcon - zmienia buttona, można podać ścieżkę własnej ikony
• Slider "width" - szerokość slidera
• Slider "height" - wysokość slidera
• paddingBottom - padding dolny
• paddingTop - padding górny
• paddingRight - padding prawy
• paddingLeft - padding lewy
• backgroundColour - kolor tła pod obrazkami w sliderze
• startPosition - pierwsza plansza slidera
• transitionSpeed - czas w jakim widoczny jest jeden obrazek przed zmianą na następny
• autoPlay - szybkość zmiany obrazków
• animationStyle - rodzaj animacji / przechodzenia obrazków
• borderWidth - szerokość bordera / obramowania slidera
• borderColour - kolor tego obramowania
• preloadIcon - ikona przed wczytaniem obrazków
• pagination - pokazywanie stronicowania obrazków
• paginationPosition - położenie stronicowania
• paginationIcon (on) - zmienia ikony stronicowania (aktywnej planszy) - należy podać adres obrazka
• paginationIcon (off) - zmienia ikony stronicowania (nieaktywnej planszy) - należy podać adres obrazka

Przykłady:

Na szczęście od wersji 3.0 będę sobie mógł to wyklikać i poprzeciągać. I to bez żadnych wtyczek.

Wygląd i obsługa

Wchodzimy sobie w Wygląd(Apperance)>Menus. Osoby, których skóra nie obsługuje jeszcze tych dynamicznie tworzonych menu przywita komunikat "The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.". Nie martwcie się jednak - w następnym rozdziale to wyelminujemy.

W sekcji 1. mamy wypisane jakie menu już potworzyliśmy, w 2. przyporządkowujemy menu do slotu na takowe, 3. sekcja to klocki z których tworzymy menu, a w 4. wszystko sobie układamy metodą przeciągania.

Dziecinnie proste czyż nie?

Najpierw tworzymy sobie puste menu, a następnie dodajemy kolejne elementy. Jeśli chcemy dodać link do vivee.info to wybieramy sobie Custom links wpisujemy url, etykietkę i klikamy na Add to menu. Jeżeli chcemy je przenieść na inną pozycję po prostu chwytamy i przeciągamy. Z kategoriami i stronami jest nawet prościej bo tylko zaptaszkowujemy co chcemy dodać do menu i po sprawie.

Kiedy już przygotujemy sobie menu, w Theme Locations przypisujemy je do odpowiedniej lokalizacji.

Instalacja

Jako, że już wiemy jakie te menu są fajne, super etc to warto by się nauczyć je uruchamiać.Zacznijmy od sprawdzenia czy w naszej skórze znajduje się plik functions.php, jeżeli go nie ma należy go utworzyć.

W tymże functions.php piszemy:

Czymś takim deklarujemy, że w naszej skórze będą dwa menu - main_menu i sidebar_menu.

Teraz trzeba te menu przypisać gdzieś w skórze. W odpowiednich miejscach dopisujemy:

oraz

Od tej chwili mamy już wszystko naszykowane i możemy w pełni cieszyć z nowej funkcjonalności WP 3.0.

Jak przypisać na stałe menu do slotu

Są sytuacje kiedy byśmy chcieli przypisać dane menu do slotu, tak żeby za pomocą panelu nie dało się tego zmienić.
Jest na to bardzo proste wyjście:

Spowoduje to, że naszym głównym menu zawsze będzie menu o nazwie 'glowne'.

Jak stylować

Funkcja wp_nav_menu generując menu dodaje od siebie troszkę id'ów i klas. Jeżeli wywołamy:

to otrzymamy (tak w zarysie) takie coś:

Poza tym znaczniki otrzymają kilka klas, ale nie interesują one nas zbytnio.

Pierwsze co możemy zmienić to kontener - może być on albo jako div albo jako nav. Jeżeli wpiszemy inną wartość to kontener zniknie. Tak więc w zależności od tego co chcemy otrzymać dopisujemy np. 'container'=>'nav'.

Jeżeli byśmy chcieli nadać kontenerowi jakąś inną klasę czy id wystarczy dopisać 'container_class'=>'nazwa_klasy' lub 'container_id'=>'id_kontenera'. W wersji RC1 container_id jeszcze nie działa (patrząc jednak po tym co jest w repozytorium to kolejna wersja wspiera już wszystko poprawnie).

Możemy też użyć 'menu_class'=>'nazwa_klasy', gdyby ktoś chciał zmienić klasę samego menu (czyli ul).

Kolejne co możemy zmodyfikować to zawartość linków w menu. Wszystko to za pomocą link_before i link_after.

Jeżeli zaś chcemy coś umieścić przed lub za linkiem to używamy before lub after.

Nasze menu ze wszystkimi parametrami wygląda tak:

Podsumowanie

Ciężko jest cokolwiek zarzucić temu rozwiązaniu. Jest to funkcjonlaność, której brakowało, ale sposób w jaki ten brak naprawiono wynagradza tak długie oczekiwanie.

Niebawem kolejne wpisy opisujące nowe funkcje w WordPress 3.0.

Instalacja

Najpierw pobieramy Drupala i polski pakiet językowy ze strony: http://drupal.org/
Rozpakowujemy archiwum do głównego katalogu na serwerze. Moim serwerem będzie localhost.
Wchodzimy na stronę http://localhost/drupal-6.15/
Naszym oczom ukazuje się widok.

Tu mamy wybór czy chcemy korzystać z angielskiej czy innej wersji językowej. Ja wyrażam chęć instalacji innej wersji językowej.
Rozpakowujemy paczkę językową do katalogu z drupalem. Następnie korzystając z linku powrotnego przechodzimy do ekranu wyboru języka i wybieramy język polski.

Następnie pojawia się ekran:

Postępujemy zgodnie z opisem na tej stronie.
Po stworzeniu pliku konfiguracyjnego można dalej instalować drupala. Klikamy na spróbuj ponownie.
Naszym oczom ukazuje się okno konfiguracji bazy danych.

Wybieramy typ, nazwę i użytkownika bazy danych. Możemy tez ustawić zaawansowane opcje dotyczące m.in. hosta bazy danych, portu oraz prefiksu dla tabel. Należy pamiętać aby wybrać istniejącą na serwerze bazę danych. Trwa instalacja drupala…

Konfiguracja

Teraz konfigurujemy witrynę.

Tworzymy konto administratora. Jeśli na serwerze mamy włączony moduł mod_rewrite możemy włączyć tzw. przyjazne URL-e. Wtedy linki typu /?q=node/5 będą zamieniane na /node/5.
Otrzymujemy informację, że instalacja Drupala przebiegła pomyślnie. Możemy teraz odwiedzić stronę i zalogować się jako administrator.

Moduły

Drupala można wzbogacać o nowe funkcje za pomocą tzw. "modułów". Cały system jest złożony z modułów. Niektóre z nich są dostępne od razu po instalacji, a inne trzeba dodatkowo pobrać. Zajmiemy się teraz aktywacją wybranych modułów. W tym celu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/modules i zaznaczamy moduły, których chcemy używać.

Pobierzemy kilka dodatkowych modułów:
http://drupal.org/project/admin_menu
http://drupal.org/project/pathauto
http://drupal.org/project/token
http://drupal.org/project/cck
CCK - służy do wzbogacenia naszej treści o nowe pola, w które uprawnione osoby będą mogły wpisywać dane dodając treść do naszej witryny.
http://drupal.org/project/views
Views - to moduł, który pozwala w praktycznie dowolny sposób generować listy i tabele z elementów taksonomii systemu.

Pobrane moduły należy umieścić w katalogu sites/all/module naszej witryny. Zajmiemy się teraz aktywacją wybranych modułów. W tym celu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/modules i zaznaczamy moduły, których chcemy używać. Jeżeli folder module nie istnieje należy takowy stworzyć. Na powyższej stronie zaznaczamy następuje moduły

• Administration - Administration Menu
• Core - Blog
• Core - Contact
• Core - Path
• Content - Content
• Content - Text
• Other - Pathauto
• Other - Token
• Views - Views
• Views - Views UI

a następnie klikamy zachowaj konfigurację.

Rodzaje zawartości

Wchodzimy na stronę http://localhost/drupal-6.15/admin/content/types. Możemy tu tworzyć, edytować i usuwać różne rodzaje zawartości. Są one umieszczone w tabelce, w której znajduje się nazwa, typ i opis rodzaju zawartości. Domyślnie dysponujemy trzema rodzajami: blog, strona i artykuł. Stworzymy nowy typ – link. Będzie on zawierał url, tytuł i krótki opis. Klikamy na nowy rodzaj zawartości (http://localhost/drupal-6.15/admin/content/types/add). W pole nazwa wpisujemy Link, typ – link (typ może się składać jedynie z małych liter, liczb i znaków podkreślenia) oraz dodajemy krótki opis. Następnie określamy ustawienia formularza dodawania zawartości tak jak na poniższym rysunku.

Pozostaje nam jeszcze określenie cech rodzaju zawartości oraz ustawienia odpowiedzi czyli popularnych komentarzy. Ustawiamy opcję „do publikacji”, a odznaczamy „na stronie głównej” co oznacza brak automatycznej promocji na stronie głównej. W ustawieniach odpowiedzi zaznaczamy opcję „Wyłączony”, co oznacza, że nie będzie można dodawać komentarzy. Po kliknięciu zachowania rodzaju zawartości zostaniemy przekierowani z powrotem do tabelki z rodzajami zawartości. Widnieje już tam nowy dodany przed chwilą rodzaj – link. Kliknijmy na odnośnik „manage fields” dotyczący rodzaju zawartości link. Dodamy teraz nowe pole url.

Po kliknięciu zachowaj można jeszcze ustawić dodatkowe opcje. My pozostawiamy ustawienia domyślne.
Dodamy teraz kilka linków. W tym celu wchodzimy na stronę dodawania zawartości: http://localhost/drupal-6.15/node/add, wybieramy z dostępnych opcji Link i uzupełniamy pola formularza.

Utworzony link możemy zobaczyć pod adresem: http://localhost/drupal-6.15/content/wp .

Widoki i dodawanie zawartości

Views to moduł, który pozwala w praktycznie dowolny sposób generować listy i tabele z elementów taksonomii systemu. Moduł ten jest dość rozbudowany. My stworzymy na początek widok listy linków. Wejdźmy zatem na stronę http://localhost/drupal-6.15/admin/build/views. Następnie klikamy na zakładkę „dodaj”.

Podajemy nazwę widoku (może ona zawierać tylko znaki alfanumeryczne i podkreślenia) np. lista_linkow. Wprowadzamy też krótki opis widoku oraz tag widoku (w naszym przypadku może to być np. linki). Jako typ widoku pozostawiamy zaznaczony segment. Klikamy na przycisk „Następne”. Mamy tu dostęp do określenia formy widoku. Na początek wybieramy z rozwijanego menu po lewej „Strona”, co oznacza że chcemy wypisać nasze linki na pełnej stronie. Z ustawień podstawowych zmieniamy nazwę, tytuł oraz styl rzędu (zmieniamy na segment). Klikamy na przycisk „dodaj podgląd” znajdujący się w lewej części strony (pod listą rozwijaną). Teraz określimy ustawienia strony: ścieżkę i menu. Ustawiamy ścieżkę na „linki” – oznacza to, że strona z linkami będzie widoczna (oczywiście dla naszej obecnej instalacji) pod adresem http://localhost/drupal-6.15/linki. W przypadku ustawień menu wybieramy „zwykły wpis menu”, w pole tytuł wpisujemy „Linki” oraz z listy rozwijanej wybieramy „Odnośniki podstawowe”.

Teraz ograniczymy nasz widok do wyświetlania tylko elementów typu link. W ostatniej kolumnie na stronie edycji klikamy na znak plusa przy napisie „Filtry”. Z długiej listy rozwijanej, która pokaże się poniżej zaznaczamy opcję Segment: Typ i klikamy przycisk „dodaj”. Następnie wybieramy typ segmentu „odnośnik”. Po całej konfiguracji strona powinna wyglądać podobnie do widocznej poniżej.

Na koniec zapisujemy widok klikając na przycisk „Zachowaj”.
Łatwo zauważyć, że w górnej części strony pojawił się pierwszy odnośnik menu „Linki”. Prowadzi on do naszego widoku linków.

Teraz stworzymy stronę główną. Klikamy na link dodaj zawartość i z dostępnych typów wybieramy – Strona.

W pole tytuł wpisujemy tytuł strony np. Strona główna. W pole tekst odnośnika menu wpisujemy np. Główna (jest to tekst widoczny na linku do strony). W polu select pozostawiamy wybraną opcję odnośniki podstawowe. Pozostaje tylko uzupełnić treść i kliknąć przycisk „Zachowaj”. W górnym menu obok „Linki” powinien pojawić są odnośnik „Główna”.

Zbudujemy teraz formularz kontaktowy dla naszej witryny. Wybieramy z menu „Zarządzaj”, a następnie „Formularz kontaktowy” (znajduje się on w boxie Budowa witryny) lub od razu wchodzimy na adres http://localhost/drupal-6.15/admin/build/contact. Klikamy na „Dodaj kategorię”. Pojawia się formularz, który trzeba uzupełnić. W pole kategoria wpisujemy nazwę formularza np. Formularz kontaktowy. Następnie wpisujemy adres lub adresy e-mail, na które formularz ma być wysłany. Na samym dole wybieramy jeszcze z menu rozwijanego „Tak”, aby formularz był domyślnym formularzem kontaktowym na stronie i klikamy „Zachowaj”. Stworzony formularz możemy zobaczyć na stronie http://localhost/drupal-6.15/contact.

Przydałoby się dodać do naszego górnego menu odnośnika prowadzącego do formularza kontaktowego. W tym celu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/menu-customize/primary-links. (Zarządzaj > Budowa witryny > Menu > Odnośniki podstawowe).

Wybieramy „Dodaj element” i uzupełniamy formularz. W pierwsze pole wpisujemy ścieżkę do formularza kontaktowego (tzn. wszystko za http://localhost/drupal-6.15/). Następnie podajemy tekst odnośnika menu. Pozostałe pole pozostawiamy niezmienione.

Dodatkowo można zmienić kolejność odnośników w menu metodą przeciągnij i upuść. Jak widać na poniższej ilustracji przesunęłam odnośnik Kontakt na koniec.

Na pewno zauważyłeś/aś, że po wejściu na naszą drupalową witrynę http://localhost/drupal-6.15/ pojawia się domyślna strona startowa zaczynająca się od słów „I tak powstała nowa drupalowa witryna!”. Czas to zmienić. Chcemy aby domyślnie pojawiała się nasza strona główna. Najpierw przejdźmy na naszą stronę główną klikając odnośnik Główna w menu. Następnie wybieramy Edytuj i patrzymy na pasek adresu. U nas powinien wyglądać następująco: http://localhost/drupal-6.15/node/3/edit. Dla nas najważniejsza jest cyfra 3. Przechodzimy teraz na stronę Zarządzaj > Konfiguracja witryny > Podstawowe dane (bezpośredni link: http://localhost/drupal-6.15/admin/settings/site-information). Na samym dole formularza wpisujemy w pole domyślna strona główna adres: http://localhost/drupal-6.15/node/3 i klikamy przycisk „Zachowaj konfigurację”.

Dodamy teraz kilka blogowych notek. Wchodzimy na „Dodaj zawartość” i wybieramy „Wpis w blogu”. Pojawia się formularz, który trzeba uzupełnić. Podajemy tytuł i treść wpisu, a resztę opcji pozostawiamy bez zmian. Zachęcam jednak do zapoznania się z nimi w wolnej chwili .

W celu dodania odnośnika do blogowych wpisów w górnym menu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/menu-customize/primary-links/add i w formularzu w polu ścieżka wpisujemy blog. Uzupełniamy jeszcze pole „Tekst odnośnika menu” i klikamy „Zachowaj”.

Skórki

Drupal oferuje zmianę domyślnego wyglądu strony. W tym celu wchodzimy na stronę Zarządzaj > Budowa witryny > Skórki. Pojawia się poniższa strona.

Możemy tu określić, które ze skórek powinny być dostępne dla użytkowników, a także, która skórka ma być domyślną. Między innymi na stronie http://drupal.org/project/themes dostępnych jest wiele skórek tworzonych przez użytkowników Drupala. Wejdźmy na powyższą stronę i pobierzmy jakąś skórkę (ja pobrałam skórkę Acquia Slate). Należy pobraną paczkę rozpakować do katalogu themes. Gdy ponownie wejdziemy na stronę http://localhost/drupal-6.15/admin/build/themes będzie już możliwość wyboru nowej skórki.

---
Zapraszam na moje portfolio.

Włączmy to

Nim zaczniemy zabawę musimy aktywować możliwość wyświetlania ikon wpisu (tak brzmi oficjalne tłumaczenie... zupełnie mi nie leży). Żeby to zrobić wchodzimy do wp-content/themes/nasza_skórka i otwieramy plik functions.php (jeżeli go nie ma należy go utworzyć). Tam dopisujemy

Zapisujemy plik i już - ikony wpisu są włączone.

Ale gdzie to jest

Wchodzimy do panelu dodajemy nowy/edytujemy wpis. Trzeba się troszkę rozejrzeć - u mnie box Ikona wpisu pojawił się po prawej stronie na dole. Jeżeli jednak jesteście pewni, że go nie ma wystarczy kliknąć w opcje ekranu i tam zaptaszkować odpowiednie pole:

Stąd już łatwo. Wystarczy wybrać sobie obrazek, jego rozmiar i dodać jako ikonę wpisu.

Poprawiamy skórę

To akurat najprostsza część zabawy. W wybranym miejscu po prostu wywołujemy <?php the_post_thumbnail(); ?>. I tak oto nasz miniaturka powinna pojawić się obok naszego wpisu.

Fajne prawda? Szczerze mówiąc tak sobie. Teraz czas rozpatrzeć kilka ciekawych scenariuszy dzięki którymś ten ficzer będzie się do czegokolwiek nadawał.

Chcę miniaturki tylko do wpisów a nie do stron

Wtedy po prostu zastępujemy

następującym kodem:

Jeżeli byśmy mieli ochotę załączyć miniaturki tylko dla stron do post zastępujemy page

Rozmiary są do bani... chcę inne

Ależ żaden problem. Wystarczy, że w functions.php dopiszesz:

Wtedy miniaturki będą miały rozmiar 75x75px. Ok, co prawda jeżeli oryginalny obrazek nie będzie kwadratowy to obrazek zostanie tak zmniejszony, żeby zachował proporcje oraz mieścił się w tych 75x75. Żeby wyciąć fragment wystarczy zamienieć poprzednika na:

Wtedy na 100% obrazek będzie miał 75x75px.

Osobnym problemem jest oczywiście sytuacja gdy chcemy, żeby nasza miniaturka była przygotowana w dwóch rozmiarach - jednym na stronę główną i drugim na pojedynczą. Oczywiście to też jest do zrobienia.

Najpierw musimy sobie przygotować nowy rozmiar obrazka, żeby WP za każdym razem gdy wgrywa obrazek stworzył też taki jaki chcemy:

Znaczy to tyle, że nasza większa miniaturka będzie miała rozmiar 500x100px, będzie przycięta na siłę oraz będziemy ją potem wywoływać poprzez single_post.

KIedy już mamy nowy rozmiar pozostaje nam umieścić the_post_thumbnail() w odpowiednim miejscu w single.php:

Skóra w której użyłem miniaturek wysypuje się w starszych wersjach WP

Logiczne. Tam w końcu nie było takiej możliwości. Na szczęście jest na to proste rozwiązanie - function_exists() za pomocą której sprawdzimy czy add_theme_support() jest dostępne w naszej wersji.

Najpierw w functions.php:

a następnie w skórze (dodatkowo warto sprawdzić czy wpis ma miniaturkę):

A jak miniaturce nadać jakąć klasę?

Podsumowanie

Jak widać pomimo pewnej upierdliwości, miniaturki nie są aż tak straszne. Pewne prawie jest, że w kolejnych wersjach twórcy ułatwią korzystanie z tej funkcji. Tak naprawdę nawet teraz by wystarczyło napisać dość prostą wtyczkę by znacznie ułatwić cały proces.

The Clam Shell

Gallery

Wall Magazine

Gamezine

NEWSPRESS

Good Theme Lead 2

Marikit

New York

CoolRetro

Blue Rooster

BlueBubble

Bueno

Zeoal

Fotofolio

Furvious

cleanPRESS

Jungleland

KeKo

BrownMag

Art Themes

W poniższym tutorialu zaprezentuje dwie metody jak coś takiego osiągnąć. Obie metody sprowadzają się jednak do identycznego zakończenia, czyli oznaczenia wpisu odpowiednią css'ową klasą, np. "important". W stylu zaś ozdobimy go tak jak chcemy.

Nasz bohater

Nim jednak zaczniemy pisać o konkretach muszę wspomnieć troszkę o funkcji post_class(). Funkcja ta służy do wyświetlania klas związanych z wpisem. Wytestujcie ją umieszczając w loopie i zobaczcie co wypisze. Widać, że w bardzo prosty sposób dzięki niej można rozwiązać kwestię stylowania poszczególnych kategorii etc.

Poza wyświetlaniem klas możemy też zachęcić funkcję do tego, żeby wyświetliła klasę zaproponowaną przez nas. Jezeli chcemy dopisać do jakiegoś elementu klasę 'vivee' wystarczy, że użyjemy post_class('vivee').

Tyle jeśli chodzi o teorię - czas na praktykę.

Użyjmy kategorii

Pierwsze co musimy zrobić to utworzyć kategorię do której będziemy wrzucać ważne wpisy. Nazwijmy ją "ważne wpisy". Czas umieścić post_class() w odpowiednim miejscu.

Jeżeli nasz loop wygląda tak:

to post_class() umieszczamy następująco:

Wpisy, które zostały oznaczone kategorią "ważne wpisy" dostaną klasę category-wazne-wpisy.

Użyjmy pola użytkownika

Jeżeli komuś się nie podobają kategorie może użyć pól użytkownika. Wystarczy stworzyć pole "important" i jako wartość przypisać 1 (jeśli uznamy wpis za wazny).

W tym przypadku tworzymy functions.php i dopisujemy w nim (lub po prostu tylko dopisujemy do tego pliku jezeli już istnieje) funkcję is_important():

O polach użytkownika już pisaliśmy, jednak przypomnę, że za pomocą get_post_meta($post->ID, "important", true) pobieramy wartość pola "important" i przypisujemy do zmiennej. Następnie sprawdzamy czy wartość jest równa 1. Jeśli tak to dopisana jest klasa important.

Żeby to zadziałało zastępujemy zwykłe post_class() za pomocą:

Stylujemy

Kiedy już przy odpowiednich wpisach pojawia się nam klasa category-wazne-wpisy lub important możemy spokojnie zabrać się za stylowanie:

co wpiszecie zamiast "..." jest już tylko zależne od Was. Możecie np. zrobić coś bardzo kontrastowego i na białej stronie wyróżnionym wpisom dać ciemne tło.

Podsumowanie

I tak oto za pomocą niezwykle prostej sztuczki osiągneliśmy bardzo fajny i pożyteczny efekt. Ogólnie rzecz boirąc dopisywanie jakiejś klasy do pewnego typu wpisu jest bardzo użyteczną metodą. Tak też można wróżniać wpisy danego autora.

Nasz pierwszy panel

Pierwszą rzeczą którą robimy to odnajdujemy w naszej skórce plik functions.php (jeśli nie ma to go tworzymy). Czas stworzyć sobie odpowiednią podstronę w zakładce Wygląd.

Żeby to zrobić skorzystamy z funkcji add_submenu_page().

Themes.php to nazwa rodzica, następnie podajemy tytuł strony, nazwę pozycji w menu, od jakiego poziomu uprawnień mozna przeglądać tą podstronę identyfikator strony (przydatny dla innych funkcji czy wtyczek) oraz funkcję która nam wygeneruje zawartość strony.

Pozostaje nam to teraz wywołać za pomocą:

Gdy wejdziemy w panel, w zakładkę Wygląd ujrzymy naszą nową podstronę. Niestety po kliknięciu ujrzymy error 404, ale zaraz się tym zajmiemy.

Czas więc napisać funkcję theme_admin(). Na początku będzie nam wyświetlać napis 'cześć':

Teraz już po kliknięciu w menu ujrzymy naszą podstronę. Po prostu szał

Tekst z boku strony

Panel do czegoś takiego raczej nie będzie zbyt skomplikowany - textarea i button wyślij.

Nasz formularz sobie ładnie wygląda, ale póki co jeszcze nic nie robi. Tekst, który wpiszemy będziemy musieli gdzieś trzymać, najlepszym miejsce do tego jest wordpressowa tablica options. Sprawę ułatwiają twórcy, którzy udostępniają nam funkcje update_option oraz add_option.

Po naciśnięciu guzika wyślij zawartość textarea trafia do tablicy POST. Najlepiej więc jeśli za każdym razem będziemy sprawdzać czy przypadkiem ktoś nie zadeklarował zmiennej $_POST['o_nas'], jeśli tak to za pomocą funkcji update_option() dorzucamy pole w bazie lub zmianamy jego zawartość.

Musimy jeszcze poprawić bug, w postaci zawsze pustego textarea. Żeby to zrobić po prostu wypisujemy zawratość pola 'o_nas' z bazy.

Czas to wyświetlić na stronie. Wystarczy napisać:

lub, jeżeli wolimy mieć większy porządek w kodzie, napisać sobie prostą funkcję:

a w miejscu gdzie chcemy to wyświetlić:

Podsumowanie

Teraz gdy już znacie podstawy tworzenia pozostaje tylko życzyć mi powodzenia w rozbudowywaniu swoich skórek.

Instalacja

1. Pobieramy wtyczkę z oficjalnej strony autora.
2. Rozpakowujemy archiwum (zip) i kopiujemy jego zawartość na serwer do katalogu wp-content/plugins.
3. W panelu administracyjnym w zakładce Wtyczki aktywujemy nowo dodaną wtyczkę.
4. Po aktywacji wtyczki, w lewym menu pojawi się nowa zakładka FlippingBook

Tworzenie pierwszej książki

Dodajemy zdjęcia
Pierwszym krokiem do stworzenia nowej książki jest upload wybranych obrazków do bazy wtyczki.
Sporym udogodnieniem dla organizacji obrazków jest możliwość podziału ich na galerie. Tym sposobem dla każdej osobnej książki można utworzyć osobną galerię i utrzymywać określony porządeczek w dodawanych plikach.

Aby dodać dodać nową galerię należy wybrać przycisk Create New Gallery a następnie podać jej nazwę.
Po utworzeniu galerii należy wybrać opcję Upload images, dzięki wykorzystanym do tego silniku można wgrać wiele plików jednocześnie co znacznie ułatwia upload szczególnie w przypadku sporej ilości obrazków.

Tworzymy książkę
W momencie kiedy zdjęcia są już dodane do galerii możemy przystąpić do tworzenia książki, w tym celu klikamy na Create Book znajdujący się tuż obok nazwy galerii której obrazki posłużą za pojedyncze strony książki.

Ustawienia książki
Teraz zaczyna się cała zabawa.
Otworzy nam się podstrona z masą opcji do wyboru, do ustawienia, do dodania, itp.
Poniżej znajdują się opisane możliwości.

Book name - nazwa książki

Stage Width - maksymalna szerokość jaką zajmować będzie ustawiona we wpisie lub na stronie książka

Stage Height - podobnie jak wyżej, tyczy się wysokości

Width - szerokość samej książki

Height - wysokość książki

Scale Content - skalowanie zawartości (zdjęć / obrazków) książki

Center Content - wyśrodkowanie zawartości książki

Preserve Proportions - czy zachować proporcje

Hardcover - twarda okładka

Hardcover Thickness - grubość twardej okładki

Frame Width - szerokość ramki

Frame Color - kolor ramki

Frame Alpha - przezroczystość ramki

First Page - pierwsza strona, automatyczne otwieranie się książki na określonej stronie

Flip on Click - rozpoczęcie przewijania książki po kliknięciu

Hand Over Corner - określa rodzaj kursora myszy po najechaniu na miejsce zawinięcia okładki

Hand Over Page - określa rodzaj kursora myszy po najechaniu na miejsce zawinięcia strony

Always Opened - książka automatycznie otwarta lub zamknięta

Static Shadow Type - symetryczny cień po środku książki

Static Shadows Depth - moc cienia w środku książki

Rigid Page Speed - szybkość przewijania stron

Flip Sound - podkład dźwiękowy

Upload Sound - dodawanie pliku dźwiękowego

Preloader Type - rodzaj preloadera

Page Back - kolor tła pod książką

Rigid Pages - sztywne strony

Zoom Enabled - włączenie / wyłączenie powiększenia stron

Zoom Image Width - wielkość powiększenia - szerokość

Zoom Image Height - wielkość powiększenia - wysokość

Zoom On Click - powiększenie na kliknięcie

Zoom Hint - podpowiedź przy powiększaniu

Center Book - wycentrowanie książki względem całego obszaru Flasha

Use Custom Cursors - domyślne rodzaje kursorów myszy

Drop Shadow Enabled - cień przy zawijaniu stron

Drop Shadow Hide When Flipping - cień chowa się po przewróceniu strony

Background Color - kolor tła książki

Background Image - obrazek jako tło

Upload Background Image - obrazek jako tło - upload

Background Image Placement - zachowanie obrazka jako tło

Print Enabled - możliwość drukowania

Print Title - tytuł wydruku

Navigation Bar - menu nawigacyjne

Navigation Bar Placement - miejsce ułożenia menu

Download - pobieranie książki

Auto Reduce - auto zmniejszanie

W momencie kiedy wszystkie ustawienia są już dopasowane do potrzeb klikamy na Add Book.

Na liście utworzonych książek pojawi się nowa o wcześniej przypisanym tytule czyli w naszym przypadku "Vivee".

Aby zobaczyć podgląd utworzonej książki korzystamy z buttona Preview

Zarządzanie książką

Do zarządzania stworzonymi książkami mamy 3 opcje.

Jedna z nich jest Add Page, czyli dodawanie nowej strony.
Po kliknięciu na ten button pojawi nam się widok wcześniej dodanych galerii z obrazkami z których to należy wybrać kolejny widok do nowej strony.

Opcja Pages List, która znajduje się pod każdą książką umożliwia wyświetlenie wszystkich stron oraz zmianę ich kolejności za pomocą tzw drag and drop (przeciągnij i upuść), jest to bardzo wygodne i pozwala w szybki i wizualny sposób zmienić kolejność stron.

Page editor jest najbardziej unowocześnioną formą edycji (flash) poszczególnych stron, pozwala na dobranie stylu (kolor i grubość ramki inny dla każdej strony), zmienianie układu stron i ich kolejność.

Dodawanie książek do stron / wpisów

Dodawanie jest bardzo proste, polega na wklejeniu jednej linijki w zawartość wpisu
[book id='podaj_id' /]
W miejscu podaj_id należy wpisać odpowiednie ID przypisane książce którą chcemy wstawić. Znajduje się on przy każdej pozycji w widoku Manage books and pages.

Podstawową funkcjonalnością MobilePress jest zastąpienie Twojej szaty graficznej strony, skórą odpowiednio dostosowaną do przeglądarek w telefonach komórkowych. Jest ona przede wszystkim lekka - w swoim stylu zdefiniowane ma czcionki, kolory, marginy, paddingi, itp.

Instalacja

Pierwszym krokiem instalacji jest pobranie wtyczki,
+ można to uczynic wchodzac na oficjalną stronę wtyczki, gdzie klikniecie w download przeniesie nas na www.wordpress.org/extend/plugins/mobilepress/
+ lub też w Panelu Administracyjnym strony w zakładce Wtyczki wybrać pozycję dodaj nową, wpisując w wyszukiwarkę słowo mobilepress pojawi się ona na liście jako pierwsza. Następnie należy wybrać zainstaluj i podać odpowiednie namairy na ftp, aby system mógł umieścić wtyczkę już w odpowiednim katalogu.
Kiedy wtyczka znajdzie się już w katalogu wp-content/plugins, należy ją aktywować w zakładce Wtyczki (plugins)

Funkcjonalność

Po zainstalowaniu wtyczki, w lewym menu panelu administracyjnego pojawi się nowa pozycja Mobilepress

Zakładka Options (opcje)

Tutaj mamy możliwość podania tytułu i opisu naszego bloga - Blog Title, Blog Description (jeżeli nie chcemy zmieniać defaultowych nazw należy te pola pozostawić puste)
Opcje takie jak Treat iPhone as a web browser?, Treat Windows smartphone as a web browser?, Treat Opera Mini as a web browser? decydują o tym, czy wchodząc na stronę przez przeglądarkę w telefonie komórkowym ma się odpalać wersja mobile. A konkretniej czy ma traktować np Operę mini jak zwykłą przeglądarkę internetową - gdybyśmy zaznaczyli opcję Yes, wtedy w Operze mini widzielibyśmy stronę jaka jest w oryginale, więc jeżeli chcemy aby pod wszystkimi komórkowymi przeglądarkami nasza strona korzystała z możliwości wtyczki MobilePress należy opcje ustawić na No.

Zakładka Themes (skóry)

Jeżeli chodzi o skóry to na standardzie mamy wgrane 2 tematy graficzne. Jeden z nich posiada w swojej funkcjonalności opcje dostosowane dla iPhone'a.
W sieci jak na tą chwilę jest niewiele skór do wyboru dla tej wtyczki, znaleźć je można m.in. na stronie:www.mediafrenzy.co.za/2008/10/mobilepress/

Każda taka skóra składa się z podobnych plików co standardowe theme do WordPressa, jej przetłumaczenie nie sprawia żadnego problemu.
Dla zainteresowanych udostępniam wersję PL theme Default. Pobierz

Jeżeli ktoś będzie chciał zmienić wygląd przypuśćmy skóry Default, może to zrobić edytując CSS, który znajduje się w pliku header.php w sekcji head.

Wtyczka ta jest już aktywna na stronie Vivee.info, więc teraz kiedy "w drodze" będziecie chcieli sprawdzić czy nie ma jakichś nowych wpisów lub komentarzy, spokojnie będziecie mogli skorzystać z wersji mobilnej.

agressiva.poprostuja.pl wersja mobile w akcji: