Vivee - wordpress, webmastering, grafika i fotografia

Część z Was pewnie zauważyła, iż niektóre skóry wordpressowe posiadają własne panele administracyjne za pomocą których można określić pewne parametry strony. W dzisiejszym tutku pokażę Wam jak zrobić drobny panelik do skóry, który troszkę ułatwi nam życie (a na pewno podpowiem Wam jak tworzyc bardziej skomplikowane).

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_option_subpage().

function theme_menu() {
add_submenu_page('themes.php', 'Mój panel', 'Mój panel', 8, 'theme_admin', 'theme_admin');
}

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ą:

add_action('admin_menu', 'theme_menu');

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ść':

function theme_admin() {
echo '

';
echo '

Mój panel

';
echo '

cześć

';
echo '

';
}

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.

function theme_admin() {
echo '

';
echo '

Mój panel

';
echo '

O nas - żeby się z boku strony pokazało

O nas

';
echo ';
echo '

';
}

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.

function theme_admin() {
if( isset($_POST['o_nas'])){
update_option('o_nas', $_POST['o_nas']);
echo '

Opis został zmieniony

';
}
echo '

';
echo '

Mój panel

';
echo '

O nas - żeby się z boku strony pokazało

';
echo '

';
echo '';
echo'';
echo'';
echo'';
echo'';
echo'

O nas	'</span>;</p> <p> <span class="kw1">if</span><span class="br0">(</span>get_option<span class="br0">(</span><span class="st0">'o_nas'</span><span class="br0">)</span><span class="br0">)</span><span class="br0">{</span><br /> <a href="http://www.php.net/echo"><span class="kw3">echo</span></a> get_option<span class="br0">(</span><span class="st0">'o_nas'</span><span class="br0">)</span>;<br /> <span class="br0">}</span></p> <p> <a href="http://www.php.net/echo"><span class="kw3">echo</span></a> <span class="st0">'

O nas

';
echo '

';
echo ''

;
echo '

';
}

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

echo get_option('o_nas'); ?>

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

function show_o_nas() {
if(get_option('o_nas')){
echo '

';
echo '

O nas

';
echo get_option('o_nas');
echo '

';
}
}

a w miejscu gdzie chcemy to wyświetlić:

if(function_exists('show_o_nas')) {
show_o_nas();
}

Podsumowanie

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

FlippingBook WordPress Gallery Plugin

agressiva — Wed, 07 Oct 2009 17:18:24 +0000

Tym razem dla miłośników Wordpressa mamy narzędzie z kategorii "bajery". Jest to wtyczka - FlippingBook WordPress Gallery Plugin, która umożliwia nam stworzenie animacji Flash upodobnionej do książki za pomocą uploadu wybranych przez nas obrazków.
W ostatnim czasie efekt ten stał się bardzo popularny...

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.

Inspiracje od 7rano.com

palmiak — Sat, 03 Oct 2009 21:17:28 +0000

Tym razem drobna dawka inspiracji stworzona dla Vivee przez serwis 7rano.com. Jeżeli Wam się spodoba to postaramy się, żeby prace wybrane przez 7rano cyklicznie gościły na naszych łamach.

Dobre winko
http://www.7rano.com/?p=867

Dhl - niestandardowa przesyłka
http://www.7rano.com/?p=880

Guinness - reklamy
http://www.7rano.com/?p=819

Nowa twarz Nestea
http://www.7rano.com/?p=793

Mydlana myszka
http://www.7rano.com/?p=716

Aptera - samochód od Google
http://www.7rano.com/?p=675

Komiksowy regał na książki
http://www.7rano.com/?p=637

Zegar-magnes na lodówkę
http://www.7rano.com/?p=648

Opakowanie chipsów Wanted
http://www.7rano.com/?p=779

Okładka New Yorker'a
http://www.7rano.com/?p=838

sztuka brudnych szyb
http://www.7rano.com/?p=857

Paryskie centrum sportu
http://www.7rano.com/?p=852

Drewniana słuchawki
http://www.7rano.com/?p=767

Rybka lubi pływać…

palmiak — Thu, 01 Oct 2009 10:20:27 +0000

Lato w pełni, słońce świeci... a rybka lubi pływać. W poniższym artykule zaprezentuję jak wykonać prosty i przejrzysty design o tematyce akwarystycznej. Zapraszam.

Tło

W tym przypadku tło wypełniają zdjęcia z serwisu iStockphoto.com. Zarówno fale jak i ryba odgrywają kluczową rolę na stronie.

Logo

Adres: moje-rybki.pl
font: Aronia StO, Bold, 39 px, Sharp, #03303d.

Następnie zaznaczamy obszar od jednego boku do drugiego, klikamy prawym klawiszem myszy na zaznaczeniu i wybierami Select Inverse. Wciskamy klawisz Delete dwukrotnie i niechciany obszar znika. Do dopełnienia menu dodajemy oczywiście napis. W tym przypadku font: Fontin Sans, regular, 18 px, Sharp. Pozostałą część przycisków tworzymy analogicznie.

Content

Na content składa się prostokąt w kolorze #fffff i ramce #ebebeb, 3px.
"Strona Główna": Arial, Regular, 11 px, None, #000000
"Rybka lubi pływać": Fontin Sans, Regular, 25 px, Sharp, #000000
Tekst przykładowy: Arial, Regular, 11 px, None, #000000

Dział z linkami

ikona z darmowych komponentów internetowych
Napis 'Linki': Fontin Sans, Regular, 16 px, Sharp, #000000
Tło: gradient, #f5f5f5 - #ffffff
akwarium z zasobów iStockphoto.com. Dodatkowo można stworzyć cień akwarium. W tym celu wybieramy Eliptical Marquee Tool, tworzymy owal i wypełniamy go kolorem.

Następnie rozmywamy warstwę: Filter - Blur - Gaussian Blur - 5 px. Przezroczystość warstwy zmieniamy na 20 %.
punktatory, wykonane ołówkiem, 1 px, #000000
Linki: Arial, Regular, 11 px, None, #000000

Stopka

Podpis: Arial, Regular, 11 px, None, #ffffff
Aby wykonać odbicie pola tekstowego tworzymy prostokąt o tej samej szerokośc.

Tworzymy gradient : kolor pola tekstowego: #ffffff wraz z kolorem tła: #027393. Przezroczystość ustawiamy na 15%.

Efekt:

Dziękuję za uwagę.
Sylwia Bartyzel, 2009
www.forfuture.pl
sylwiabartyzel@forfuture.pl

Inspirujące strony www – sierpień 2009

agressiva — Fri, 18 Sep 2009 11:24:25 +0000

Z cyklu "uzupełniamy nasze braki". Tym razem ciekawe graficznie strony, które stały się przez to popularne w sierpniu tego roku.

“Szybki podgląd” za pomocą jQuery

agressiva — Tue, 15 Sep 2009 20:00:58 +0000

Jak już nie raz zdążyliśmy się przekonać JavaScript daje nam ogromne możliwości jeżeli chodzi o poszerzenie funkcjonalności naszych stron www oraz innych narzędzi webowych.
Tym razem chcę Wam pokazać w jaki sposób zastosować bardzo przydatny plugin do szybkich podglądów obrazków oraz opisów w tekście (a także połączenie jednego z drugim).

Na sam początek

Podstawową czynnością jeżeli chodzi o wykorzystywanie skryptów opartych o jQuery jest pobranie samej biblioteki.
A następnie wklejenie do sekcji head kodu wywołującego tą bibliotekę.

src="jquery.js" type="text/javascript"></script>

Dla każdej funkcjonalności z osobna przygotowaliśmy pliki JS o indywidualnych nazwach, w tym celu aby nie myliły się nikomu z ich przeznaczeniem.
preview_img.js - podgląd dla samych obrazków,
preview_text.js - podgląd dla samego tekstu,
preview.js - podgląd dla obrazków na linkach w treści.

src="preview_img.js" type="text/javascript"></script>
src="preview_text.js" type="text/javascript"></script>
src="preview.js" type="text/javascript"></script>

Podgląd zastosowany na obrazkach

Galeria (obrazki bez opisu "title")

W naszym przykładzie kod html wygląda następująco:

href="1.jpg" class="preview">
src="1m.jpg" alt="gallery thumbnail" /></a>

W tym przypadku kiedy chcemy aby podgląd większego zdjęcia był na miniaturce należy koniecznie pamiętać o dodaniu klasy preview dla znacznika a oraz dodaniu w kodzie CSS odpowiednich dla tej klasy wartości:

#preview{
position:absolute;
border:1px solid #ffffff;
background:#d0d0d1;
padding:7px;
display:none;
color:#626262;
font-size:12px;
font-weight:bold;
}

Szczególnie ważnymi pozycjami są position:absolute; oraz display:none; o których nie można zapomnieć.

Galeria (obrazki z opisem "title")

Na tym przykładzie kod html odrobinę się różni od tego powyżej, pojawił się tutaj opis dużego zdjęcia w title, który podczas wyświetlenia podglądu będzie umieszczony pod obrazkiem:

href="1.jpg" class="preview" title="Duża wersja zdjęcia">src="1m.jpg" alt="gallery thumbnail" /></a>

Znaczniki a posiadają tutaj tą samą klasę co wyżej także, kod CSS wygląda identycznie. Przypisane zostały wartości dla koloru czcionki oraz jej wielkości i są one teraz dziedziczone przez tekst wyświetlany w title.

#preview{
position:absolute;
border:1px solid #ffffff;
background:#d0d0d1;
padding:7px;
display:none;
color:#626262;
font-size:12px;
font-weight:bold;
}

Podgląd obrazka zastosowany w tekście

Dla tych osób, którym zależy na zaoszczędzeniu miejsca na stronie istnieje także możliwość podpięcia podglądu obrazka na standardowym linku w treści.

Według własnych potrzeb można wstawić dla obrazka tytuł w title lub też nie.
Kod html:

Jeżeli chcesz zobaczyć podgląd zdjęcia najedź na href="http://vivee.info" class="screenshot" rel="1.jpg" title="Podgląd zdjęcia">ten link</a></p>

W tym przypadku obrazek, który ma się pojawić po najechaniu na link jest przekazywany za pomocą rel, co jest dość istotne, bo daje nam to możliwość przypisania standardowego linka dla a.
Podobnie jak wcześniej należy pamiętać o dodaniu odpowiedniej klasy dla znacznika a, tym razem nazywa się ona screenshot.
CSS dla tej klasy:

#screenshot{
position:absolute;
border:1px solid #ffffff;
background:#d0d0d1;
padding:7px;
display:none;
color:#626262;
font-size:12px;
font-weight:bold;
}

Wszystkie pozycje w CSSie są dowolne do przypisania, najważniejsze jak zawsze jest pozycja position:absolute; i display:none; których nie można pominąć.

Podgląd opisu linka zastosowany w tekście

W tym przypadku po najeździe na link pojawi się jego opis zamieszczony w atrybucie title

Kod html:

Wróć do serwisu href="http://vivee.info" class="tooltip" title="blog o webmasteringu, grafice i fotografii">Vivee.info</a></p>

Tutaj pojawia się kolejna ważna klasa dla znacznika a - tooltip
Tak samo jak we wcześniejszych przypadkach w kodzie CSS należy zamieścić position:absolute; i display:none;.

#screenshot{
position:absolute;
font:11px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
padding:8px;
border:1px solid #d0d0d1;
background:#ffffff;
color:#333;
display:none;
}

Wersje Demo do wszystkich prezentowanych podglądów dostępne są na tej stronie.

Mamy nadzieję, że narzędzie to okaże się dla wielu osób przydatne.

Tutorial na stronę domową

Siostra Nocy — Mon, 07 Sep 2009 15:42:12 +0000

W tym samouczku zobaczycie jak szybko zrobić bardzo prosty szablon, który może posłużyć jako portfolio, np. dla fotografa. Projekt jest niesamowicie łatwy do realizacji - dlaczego ten? Bo pojawiły się prośby o jego "rozpisanie" (nie interesuje mnie, czy to było na poważnie, czy to była czysta ironia), a ja muszę powoli wrócić do formy pisania tutoriali.

Otwieramy dokument o dowolnej szerokości, ja ostatnimi czasy zazwyczaj pracuję na formacie 1200x1200px. Projekt, który opisuję ma akurat rozmiar 900x900, bo jest dość stary.

Kiedy utworzymy powierzchnię roboczą wybieramy gradient radialny (Radial Gradient). Kolory, które wykorzystałam w swoim projekcie to #001943 oraz #000212. Farbę/gradient rozlewamy w ten sposób, by jaśniejsza barwa była po środku. Należy również pamiętać, by na wykończeniach był stały kolor. Na wierzch dokoptowałam wzorek widoczny na obrazku, jego krycie ustawiając na "multiply".

Kolejnym krokiem jest dodanie - jak widać na projekcie - obrazu, który kojarzyłby się z naszą stroną (najlepiej, ale niekoniecznie), by dodać jej trochę artystycznego wyglądu. W związku z charakterystyczną kolorystyką zdecydowałam się na rybki (http://www.sxc.hu/photo/1214923). Usuwamy kolory z wybranego obrazu (Desturate - Ctrl + Shift + U), odpowiednio formatujemy, a krycie zmieniamy na "Color Dodge" 40%. Ja swój obraz delikatnie wygumkowałam po brzegach przy użyciu soft brusha 350px. Powinniście uzyskać coś takiego:

Możemy zdecydować się również na bardziej oklepaną wersję z drewnem (wzór powtarzalny można uzyskać wykorzystując ten obrazek: http://tzolkin.deviantart.com/art/Texture-Dusty-Wood-70928532). Po prostu tworzymy nowy dokument, wklejamy nasze drewienko, desturujemy, wchodzimy w Edit -> Define Pattern i zapisujemy. Następnie, w naszym już projekcie, tworzymy nową warstwę i przez Layer -> New Fill Layer wypełniamy nasze tło. Podobnie jak w przypadku zdjęcia wybieramy "Color Dodge", ale nie zmniejszamy krycia.

Następnie przy użyciu Rectangle Tool (chyba że ktoś woli zaokrąglenia, to po prostu Rounded Rectangle Tool z odpowiednim "Radius"), tworzymy kształty, na których następnie umieścimy naszą treść. Nie rzucamy prostokątów jakkolwiek - rozmieszczamy poszczególne pola z głową. Oczywistą oczywistością jest, że menu musi być stosunkowo wąskie, pole na treść główną (czyli np. teksty) powinno mieć dużą powierzchnię, a prostokąt po prawej (lub lewej - można zmienić "orientację" projektu), służący do prezentacji najnowszych/najlepszych prac musi pokazywać odpowiednio dużo, by zainteresować potencjalnego odbiorcę. Po prawej umieszczamy niewielkie kwadraty, które służyłyby do wyboru zdjęcia. Na nich umieszczamy cyfry (kropki, literki, miniatury innych zdjęć - co tylko podpowie nam wyobraźnia).

Treść

Tutaj istnieje pełna dowolność, nie ma raczej co zakopywać tego małego, biednego kwadracika tonami ściśniętego tekstu - lepiej wpisać mniej, by było czytelniej, ale i tu trzeba postępować z głową - nikt przecież nie chce nieprzyjemnej pustki! Do tego najlepszy font - dla mnie niepodważalnie pozostaje nim Tahoma albo Verdana.

Pamiętamy o stopce i o informacji CO-TO-ZA-STRONA (w przypadku opisywanego projektu widoczna po prawej na górze).

Finiszujemy z czymś takim:

Już niebawem tutorial na projekt http://siostranocy.deviantart.com/art/Wojewodztwa-template-115873901

MobilePress – wersja mobile Twojej strony wordpressowej

agressiva — Sat, 05 Sep 2009 16:05:01 +0000

Jeżeli posiadasz stronę opartą o system zarządzania treścią Wordpress i chcesz, aby była ona na tyle ergonomiczna, żeby osoby często serfujące po internecie za pomocą telefonu komórkowego mogły ją przeglądać bez obawy o jej ciężkość, która wynikać może z dużej ilości grafiki to wtyczka MobilePress jest dla Ciebie.

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:

Inspirujące strony www – lipiec 2009

agressiva — Wed, 02 Sep 2009 23:43:09 +0000

Z lekkim opóźnieniem wynikającym z wakacyjnych podróży publikujemy kolejną porcję inspirujących stron www, które wzbudziły nasze zainteresowanie pod względem graficznym i funkcjonalnym w lipsu 2009r.

Vivee - wordpress, webmastering, grafika i fotografia

Inspiracje od 7rano.com

Skórka z własnym panelem administracyjnym

Nasz pierwszy panel

Mój panel

Tekst z boku strony

Mój panel

O nas - żeby się z boku strony pokazało

Mój panel

O nas - żeby się z boku strony pokazało

O nas

Podsumowanie

FlippingBook WordPress Gallery Plugin

Instalacja

Tworzenie pierwszej książki

Zarządzanie książką

Dodawanie książek do stron / wpisów

Inspiracje od 7rano.com

Rybka lubi pływać…

Tło

Logo

Menu

Content

Stopka

Inspirujące strony www – sierpień 2009

“Szybki podgląd” za pomocą jQuery

Na sam początek

Podgląd zastosowany na obrazkach

Podgląd obrazka zastosowany w tekście

Podgląd opisu linka zastosowany w tekście

Tutorial na stronę domową

Menu

Treść

MobilePress – wersja mobile Twojej strony wordpressowej

Instalacja

Funkcjonalność

Zakładka Options (opcje)

Zakładka Themes (skóry)

Inspirujące strony www – lipiec 2009