TWORZENIE PRZYKŁADOWEJ STRONY INTERNETOWEJ W

F -X C h a n ge
F -X C h a n ge
c u -tr a c k
N
y
bu
to
k
lic
TWORZENIE PRZYK ADOWEJ STRONY INTERNETOWEJ W WORDPRESS
1. Opis strony
Strona internetowa ma dotyczy wynajmu domków letniskowych. Klient za yczy
sobie, aby na stronie znalaz y si : HOME, OFERTA, OKOLICZNE ATRAKCJE,
GALERIA, FORMULARZ ZG OSZENIOWY oraz KONTAKT. Klient poprosi
równie o optymalne wypozycjonowanie strony. Klientowi zale y na czasie
2. Instalacja pakietu WORDPRESS (pomijamy, gdy by a na 1 zaj ciach)
3. Instalacja nowego szablonu
W przegl darce wpisujemy adres URL http://benignus.com.pl/wordpress/denis.zip.
Pobieramy szablon, rozpakowujemy go, a nast pnie przegrywamy na serwer do
katalogu ./wp-content/themes. Nast pnie z poziomu „zaplecza” ustawiamy nowo
zainstalowany szablon (motyw) na W CZONY. Od momentu w czenia szablonu
mo na go edytowa . Z racji tego, e szablon ma tak mo liwo , mo na w nim
zmienia (poza standardem) wiele elementów np.: fotki w pokazie slajdów na stronie
ównej.
4. Zmiana zdj
w pokazie slajdów w szablonie
Po wej ciu na WYGL D na zapleczu strony pojawi a si opcja DENIS THEME
OPTIONS. Zawiera ona elementy konfiguracyjne nowo zainstalowany motyw.
Jednym z nich jest FEATURED POSTS. Zawiera on min. FEATURED POSTS
SOURCE, który pozwala na wstawienie nowych slajdów oraz modyfikacj starych
(równie mo liwo skasowania). Po wej ciu w edycj elementu (EDIT) jest
mo liwo zmiany zdj cia które chcemy wstawi . Nale y wpisa odpowiedni
ie
dost pu do fotki, która ma widnie .
.d o
o
.c
m
C
m
w
o
.d o
w
w
w
w
w
C
lic
k
to
bu
y
N
O
W
!
PD
O
W
!
PD
c u -tr a c k
.c
F -X C h a n ge
F -X C h a n ge
c u -tr a c k
N
y
bu
to
k
lic
Warto w ty miejscu zauwa , e zdj cia maj z góry okre lon wielko , a zatem
dobrze by by o przed zmian zdj cia sprawdzi , jak wielko
mia y zdj cia
pierwotnie istniej ce i tak sam wielko ustawi dla nowo wstawianych przez nas.
Ta sama opcja umo liwia ponadto w FEATURED POSTS ustawi , gdzie pokaz
dzie si pojawia – na jakich stronach poza stron g ówn , a mo e w ogóle chcemy z
niego zrezygnowa . Poza atrybutami pokazu slajdów, o których wspomnia em, mo na
zmienia wiele innych pozycji np.: co ma si pojawia (chocia by tytu y), jaki ma by
odst p czasowy mi dzy zdj ciami, czy zdj cia maj si pokazywa w uk adzie
horyzontalnym czy wertykalnym.
5. Zmiana wygl du strony g ównej
Strona g ówna b dzie równocze nie informacj ogóln o wynajmie wraz z bie
informacj o rezerwacjach. Zatem nale y w odpowiedni sposób sformatowa jej
wygl d. W tym celu zmodyfikujemy przyk adowy wpis, który ju istnieje. Nale y
przestrzega nast puj cych zasad:
-
tekst ma by pisany czcionk Times New Roman, wielko
tekst ma by wyjustowany;
odst py mi dzy wierszami maj wynosi 0,7 cm;
14;
Aby tekst by zapisany wed ug powy szych wytycznych, w edytorze nale y zaznaczy
po lewej stronie opcj TEKSTOWY i korzystaj c ze znaczników kodu HTML wpisa
nast puj
linijk :
<p style=”font-size: 14; line-height: 0.7; font-family:’Times New Roman’;>Jaki
tekst</p>
Powy szy wpis ustawia nam rozmiar, odst py mi dzy wierszami i krój czcionki. Aby
wyjustowa tekst zaznaczamy w edytorze w trybie wizualnym ikonk
. Dzi ki
temu otworzy si druga linijka z dodatkowymi opcjami edycyjnymi, z których
wybieramy
. Podczas naje ania na dany element pojawiaj si podpowiedzi,
które u atwiaj trafno wyboru narz dzia. Oczywi cie, je eli chcemy dany tekst
zmieni , nale y go wcze niej zaznaczy !
Czy taki sposób edycji jest wygodny ? Odpowied mo e by tylko jedna – NIE !!!
Aby to zmieni pos ymy si dodatkow wtyczk ULTIMATE TINYMCE. Pozwoli
ona na dodanie dodatkowych funkcji do edytora wpisów. Instalacja wtyczki jest
standardowa: wybieramy WTYCZKI>DODAJ NOW i w oknie wyszukiwania
wpisujemy ULTIMATE TINYMCE. Nasza wtyczka powinna si na samej górze.
.d o
o
.c
m
C
m
w
o
.d o
w
w
w
w
w
C
lic
k
to
bu
y
N
O
W
!
PD
O
W
!
PD
c u -tr a c k
.c
F -X C h a n ge
F -X C h a n ge
c u -tr a c k
N
y
bu
to
k
lic
Nast pnie j instalujemy. Po zainstalowaniu nale y j w czy . Po w czeniu
przegl du wszystkich wtyczek, naszym oczom uka e si równie nowo zainstalowana
wtyczka. B dzie ona mia a opcj SETTINGS. Po wej ciu w ustawienia wtyczki na
samej górze b dzie opcja DEFAULT SETTINGS. Po wej ciu na ni pojawi si
nast pnie okno z pytaniem o ch za adowania ustawie domy lnych. Zaznaczamy
pole wyboru, e si zgadzamy na to i zatwierdzamy przez klikni cie przycisku LOAD
DEFAULTS.
Nast pnie wchodzimy poni ej na ADMIN OPTIONS i zaznaczamy opcj LOAD
EDITOR – STYLE CSS FILE, a nast pnie na samym dole zatwierdzamy zmiany.
Po tych zmianach ustawienia wtyczki podczas zmiany wpisu b dzie widoczny
dodatkowy pasek narz dziowy
.d o
o
.c
m
C
m
w
o
.d o
w
w
w
w
w
C
lic
k
to
bu
y
N
O
W
!
PD
O
W
!
PD
c u -tr a c k
.c
F -X C h a n ge
F -X C h a n ge
c u -tr a c k
N
y
bu
to
k
lic
Ca y tekst, który powinien znale si na pierwszej stronie, nale y pobra wpisuj c w
przegl dark adres http://benignus.com.pl/wordpress/pliki.zip, a nast pnie po
dekompresji pliku otworzy plik home.txt.
6. Tworzenie kolejnych stron
Dla ka dego kolejnego menu nale y doda jedn stron . Po dodaniu strony pojawi si
ona w postaci elementu menu na samej górze strony pod logo. Zawarto stron
OFERTA, OKOLICZNE ATRAKCJE oraz KONTAKT nale y utworzy na
podstawie danych, które znajduj si w Internecie na portalu meteor-turystyka.pl.
Naj atwiej ofert na tym portalu znale , wykonuj c nast puj ce kroki:
w wyszukiwarce google.pl wpisujemy fraz domki letniskowe+ostrowite;
wybieramy link znajduj cy si na samej górze (Domki Ostrowite - …);
Na wybranej stronie klikamy na link (niebieski) Ostrowite
(Czersk/chojnicki/pomorskie);
Nasza oferta znajduje si jako 3 od góry (Noclegi/Ostrowite/Domki
Wypoczynkowe Korona);
Oferta zawiera wszystkie potrzebne informacje do sporz dzenia OFERTY,
OKOLICZNYCH ATRAKCJI, KONTAKTU. Obowi zkowo kontakt musi zawiera
zdj cie z mapk .
Aby wstawi zdj cie wchodzimy na DODAJ MEDIUM i dodajemy nowe zdj cie, a
nast pnie wciskamy WSTAW NA STRON (wchodz c na edycj obrazka mo na go
zmieni ).
7. Tworzenie galerii
Galeri utworzymy poprzez dodanie nowej strony i wybór DODAJ MEDIUM. Tym
razem wybieramy UTWÓRZ GALERI , a nast pnie do galerii dodajemy nowe
zdj cia (DODAJ PLIKI). Po wstawieniu wszystkich zdj wciskamy na dole po
prawej stronie STWÓRZ NOW GALERI . Po wstawieniu galerii na stronie
wpisujemy jej tytu GALERIA. Je eli chcieliby my posiada kilka galerii jako strony,
mogliby my ustawi je jako „strony potomne” g ównej strony o nazwie galeria. W
tym miejscu jednak tego robi nie b dziemy. Ostatecznie stron trzeba jeszcze
OPUBLIKOWA . Po od wie eniu strony internetowej pojawi si menu GALERIA z
naszymi fotkami.
Wszystkie zdj cia znajdziesz pod adresem http://benignus.com.pl/wordpress/fotki.zip.
.d o
o
.c
m
C
m
w
o
.d o
w
w
w
w
w
C
lic
k
to
bu
y
N
O
W
!
PD
O
W
!
PD
c u -tr a c k
.c
F -X C h a n ge
F -X C h a n ge
c u -tr a c k
N
y
bu
to
k
lic
8. Wstawienie formularza
Kolejnym elementem, który zostanie zmieniony to formularz kontaktowy. W tym celu
zainstalowana zostanie wtyczka CP EASY FORM BUILDER. Po wej ciu w jego
ustawienia pojawi si okno, w którym nale y wcisn MANAGE SETTINGS.
Zarz dzanie ustawieniami tej wtyczki pozwoli nam na ukszta towanie jej wygl du wraz z
opcjami jak np.: gdzie b dzie wysy any formularz po zatwierdzeniu. Je eli ju ustawimy
wszelkie opcje interfejsu formularza i inne niezb dne cechy wtyczki, mo emy j wstawi
albo jako oddzieln stron (na stronie), albo jako WIDGET obszaru SIDEBAR. Zale y to
tylko od nas. Po wstawieniu formularza mo na sprawdzi , jak ona dzia a.
9. Ostatnim krokiem do wykonania b dzie zmiana ustawie szablonu oraz wygl du
strony np.: zmiana obrazków, logo itp. W tym celu nale y wybra
WYGL D>MOTYWY>DENIS THEME OPTIONS.
.d o
o
.c
m
C
m
w
o
.d o
w
w
w
w
w
C
lic
k
to
bu
y
N
O
W
!
PD
O
W
!
PD
c u -tr a c k
.c
F -X C h a n ge
F -X C h a n ge
c u -tr a c k
N
y
bu
to
k
lic
Co znajdziemy w opcjach szablonu ? Poni ej przedstawiam krótk charakterystyk ka dej z
nich:
GENERAL – zmiana zdj logo, logo WORDPRESS, adresu kontaktowego email;
FEATURED POSTS – zmiana ustawie pokazu slajdów;
LAYOUT – zmiana ustawie wielko ci zdj w pokazie slajdów i pojedynczych w
artyku ach;
PRIMARY MENU – ustawienia menu g ównego np.: czy ma by widoczne;
SECONDARY MENU – ustawienia menu podrz dnego;
INTEGRATION – dodatkowy kod wstawiany na stronie internetowej np.: w cz ci
nag ówkowej;
ADS - reklamy i ich ustawienia;
RESET OPTIONS – ustawienie opcji domy lnych;
SUPPORT – informacja o wsparciu dla szablonu.
.d o
o
.c
m
C
m
w
o
.d o
w
w
w
w
w
C
lic
k
to
bu
y
N
O
W
!
PD
O
W
!
PD
c u -tr a c k
.c