Tworzenie Motywu Część I by Walerasan

1. Celem zadania jest wykonanie Motywu dla CMS Wordpressa.
Ćwiczenie pokazuje sposób tworzenia nowego motywu oraz wykorzystanie funkcji bloginfo() z wordpresie.
W pierwsza część ćwiczenia koncentruje się na przykładowych animacjach css oraz na prostej stronie, która nie jest RWD.
Strona będzie wymagać opracowania własnych animacji oraz dostosowania jej do RWD.
2. Całość wyglądu strony prezentuje poniższy screen

3. UWAGA !!! - jeśli prezentowane zdjęcia w ćwiczeniu nie będą wyraźne w tym powiększeniu proszę kliknąć na obraz prawym kl. mychy dalej "pokaż obraz" oraz dodatkowo powiększyć

Wprowadzenie

1. Pobieramy CMS'a Wordpress ze strony: POBIERZ WORDPRESSA

2. Rozpakowujemy pobranego wordpressa i wrzucamy go do kalatogu: C:\xampp\htdocs\imienazwisko\

3. Uruchamiamy XAMPP'a ;)

4. Przechodzimy do przeglądarki internetowej i wpisujemy w URL: http://localhost/phpmyadmin/ i tworzymy pustą bazę danych "imienazwisko" na potrzeby naszego CMS Wordpressa

5. Uruchamiamy instalację Wordpressa na naszym LOCALHOŚCIE ;) "localhost"
Wpisujemy w pasku URL: http://localhost/imienazwisko/

6. Klikamy "zaczynamy" uff ale się namęczyłem "Kaj Koniec Tato !, zapytał mój młodszy syn :) XD ?" lecimy dalej... i wypełniamy formularz jak pokazałem: root domyślnie jest bez hasła więc my również pozostawiamy pole puste ale trzeba podać nazwę bazy danych, u mnie to: "arkadiuszwaliczek" u was wasze imienazwisko. Klikamy na przycisk "Wyślij"

7. Klikamy na przycisk "Uruchom instalacje"

8. Klikamy na przycisk "zainstaluj wordpressa"

9. Logujemy się do CMS klikamy na "Zaloguj się"

10.Logujemy się....

11.Przechodzimy w CMS na Motywy jak pokazano na obrazku - zobaczymy domyślne motywy, z których możemy skorzystać. Narazie zostawiamy CMS WordPress i przejdźmy do pobierania i intalowania środowiska NetBeans ;)

12. Pobieramy środowisko pracy NetBeans ze strony oraz samodzielnie instalujemy oprogramowanie: POBIERZ NetBeans
13. W razie problemów z instalacją, proszę pytań na fb lub drogą mailową
14. Dodajemy plugin WordPressa w NetBeans po uruchomieniu programu

15. Następnie przechodzimy do zakładki "Available Plugin(1/...)" i wpisujemy w polu: Search: "Wordpress" i zaznaczamy pole checkbox "PHP WordPress Blog/CMS" Instalujemy i zamykamy okno

Tworzenie nowego projektu w NetBeans

1. Tworzymy nowy folder "klasa" w katalogu themes naszego zainstalowanego Wordpressa: C:\xampp\htdocs\imienazwisko\wp-content\themes\
2. Posiadamy katalog: C:\xampp\htdocs\imienazwisko\wp-content\themes\klasa
Katalog "klasa" stanowi miejsce nowego motywu.
3. Przechodzimy do NetBeans i zakładamy nowy projekt

4. Wybieramy jak pokazano na obrazku "PHP Application with Existing Sources"

5. Wybieramy Source Folder: C:\xampp\htdocs\imienazwisko\wp-content\themes\ oraz wpisujemy nazwę nowego projektu Project Name: klasa

6. Przechodzimy dalej, w polu Project URL podajemy :http://localhost/imienazwisko, klikamy zakończ (przycisk "finish" :) )

7. Posiadamy pusty Katalog "Klasa"

Tworzenie pliku screenshot.png "wizytówki projektu w CMS"

1. Za pomocą gimpa tworzymy opis w postaci prostej wizytówki w formacie png 1200px x 900px (ja posłużyłem się obrazkiem wyglądu strony z początku ćwiczenia) i nadajemy nazwę wizytówce: screenshot.png, która będzie wyróżniać Motywy w CMS
Oczywiście aby uzyskać screenshot.png w gimpie należy obraz wyeksportować do png menu->file->eksportuj...

2. Następnie utworzoną wizytówkę kopiujemy do folderu "Klasa"

Tworzymy główny dokument nowego motywu index.php

1. Zakładam nowy plik: index.php



2. Zakładamy nowy plik style.css - manifest wraz z opisem dla naszego nowego Motywu


3. Dokument style.css bez opisów

4. Uzupełniamy dokument style.css ( tgz. Manifest )- jest to bardzo ważny moment w tworzeniu Motywu.
Informacje podane w style.css w formie komentarza powodują poprawe dodanie do CMS nowego Motywu, którego będziemy w dalszej części tworzyć

5. Przechodzimy do głównego pliku: index.php.
Kodujemy jak pokazano na obrazku. Tutaj poznamy jedną z najbardziej popularnych funkcji w php.
kod napisany w php bedzie wyświetlony w naszym motywie po przejściu na główna stronę (oczywiście ctrl + s moi mili) http://localhost/imienazwisko

6. Przechodzimy do CMS i klikamy "Wygląd" dalej "Motywy". U mnie jest troche inaczej niż u was ale.... damy radę, powinniście zobaczyć wizytówkę, którą tworzyliście w gimpie na potrzeby nowego Motywu (u mnie na porarańczowo )

7. Teraz będziemy aktywować Motyw, czyli proszę najechać kursorem mychy na stworzoną wizytówkę i kliknąć aktywuj, dalej przejdź url: http://localhost/imienazwisko/

8. http://localhost/imienazwisko/

Łączymy index.php ze stylami

1. Przechodzimy w NetBeans do index.php oraz kodujemy (dla osób wtajemniczonych można uruchomić kontrole wersji projektu "git"
oraz commitować zmiany na swoim koncie na githubie )
2. Usuwam testowy wpis: echo "Witaj Świecie w nowym Motywie Arkadiusza Waliczka";
3. Zakładam strukturę HTML5.0 oraz podpinam style.css do index.php
4. Teraz nadszedł moment aby zaznajomić się z dokumentacją WORDPRESSA oraz z funkcjami wordpressa
5. W tym celu będziemy wykorzystywać funkcji php: w celu oreślenie ścieżki dostępu do naszego motywu
6. Bez funkcji bloginfo('template_directory') będziemy musieli podawać ręcznie ściężkę np. do styli

a zamiast powyższego użyjemy:
7. Czyli mamy następujący kod w pliku index.php

8. Podaję link do strony, gdzie każdy kto chce tworzyć własne motywy oparte na Wordpressie musi o tym wiedzieć: https://codex.wordpress.org/
9. np. wspomniana w/w funkcja "bloginfo()" posiada wiele ciekawych parametrów, które będziemy używać później oprócz parametru "template_directory"

10. Dodajmy coś do style.css, ja sobie dodałem 3 różne trzcionki z fonts google: https://fonts.google.com/
Temat dodawania trzcionek google prezentowałem na lekcji ;)

Index.php

1. Przechodzę do index.php i tworzę "header" według tego co pokazuje poniżej obrazek

2. Na tym etapie należy pobrać materiały przygotowane wcześniej ze strony szkoły
pobieramy załącznik, rozpakowujemy go i cały katalog img kopiujemy do projektu katalog
3. Podaje link do materiałów: POBIERZ MATERIAŁY
4. Po rozpakowaniu materiałów wycięciu i wklejeniu folderu "img" do naszego projektu "Klasa" mamy taki układ folderów

5. Widok struktury katalogów projektu "Klasa" w NetBeans

6. Dodanie kolejnego kodu do pliku index.php pod znacznikiem "/header". Tworzymy menu dla naszego projektu: znacznik "nav" menu
Proszę zwrócić uwagę na listy "ul li" oraz na definicję "class css" takich jak: menu, boxmenu, poziom1, poziom2, item - będziemy je później "ostylowywać" w pliku style.css oraz animacje.css

7. Przejdziemy teraz do dalszego kodowania i dodamy sobie "znaczik div class=wrapperstrona" w którym będzie znajdywać się dwa div'y lewa część strony i prawa część strony: lewa czyli o div class='container' (prezentować będzie artykuły ) a prawy div class='sidebar' (prezentować będzie loga oraz formularz kontaktowy)

8. Tworzę teraz kod dla artykułów w znaczniku div class='container' i kopiuje x 3 kod aby mieć 3 artykuły na stronie to co zakreściłem
dodatkowy div class='clear' posłuży nam do wyczyszenia float:left i float: right naszych artykułów
Prośba aby tekst zastępczy "Lorem" dodać kilka razy do artykułu np 4x...

9. po skopiowaniu i dodaniu kodu dla div class='sidebar' w którym mamy slajder zdjęć, ikony oraz formularz, wyglądać będzie tak

10. Na koniec kodowania w index.php dodajemy stopkę "footer" jak pokazano na obrazku

style.css

1. Dodajemy style dla poszczególnych klass (menu,boxmenu,poziom1,poziom2)

2. Dalej dodaje styl dla menu...

3. Dalej dodajemy styl do menu oraz ikon (menu posiada dwa poziomy więc za pomocą styli tworze symbol strzałki ;) )

4. Dalej dodajemy styl dla artykułów i klass związanych z artykułami na stronie

5. Dalej stopka artykułu i klasa "clear" w artykułach

6. Na koniec dodajemy style dla klas "sidebar" oraz "formularzkontaktowy"

7. Uff trochę tego było.... i to w takim wielkim skrócie bez rozwlekania się... gdyby ktoś miał jakieś uwagi zapraszam do dyskusji...

Modyfikacja index.php

1. Przechodzę do pliku o nazwie index.php.
W części "head" dodaję obsługę animacji oraz skrypt.js (javascript), który wykorzystamy do zmiany zdjęć
Do znacznika "body" dodamy funkcję zmianafotografii(), która bedzie się ładować w celu animacji zdjęć
var prefix jest to zmienna utworzona w javascript która przekazuje do funkcji "zmianafotografii(prefix)" prefix czyli ścieżkę dostępu do zdjęć za pomocą wspomnianej już funkcji wordpresowej bloginfo()

Animacje.css

1. Tworzymy folder "css" w projekcie "Klasa" i w nim zapisujemy nowy plik o nazwie "animacje.css"

2. Zanim będziecie kodować i tworzyć animację proszę o zapoznanie się z tutorialem tworzenia animacji według poniższego linka
3. Tutorial składa się z dwóch części, proszę to potraktować jako zadanie odsłuchanie i wykonanie ćwiczeń w tutorialu
4. XD Ma gościu brodę podobnie jak ja wiec.... posłuchajcie "Hello Roman ;)"

5. I kolejny tutorial....polecam

6. Po obejrzeniu tutoriala od Pana Romana w zadaniu animacje które będą zaproponowane proszę również dodać do strony swoje animacje.... :)
7. A teraz przejdźmy do kodowania pliku animacje.css, sądzę że po obejrzeniu w/w tutoriala nie trzeba wyjaśniać

8. Ciąg dalszy kodowania w animacje.css

9 .Na koniec dodamy @keyframes, jest to Wam znane z lekcji oraz z w/w tutorialu

Skrypt.js

1. Tworzymy nowy dokument o nazwie skrypt.js w głównym katalogu naszego motywu "Klasa"
skrypt.js jest utworzony w języku javascript i jest odpowiedzialny za zmianę zdjęć co 4s (4000 ms)

2. Tutaj funkcja "setTimeout()" wywołuje co 4s funkcję "zmianaforografii(prefix)": narazię proszę poprostu przepisać kod
3. JavaScript będzie osobnym tematem naszych spotkań, tutaj pozwoliłem sobie na zastosowanie jednego skryptu nawet jeśli nie wiadomo jak działa, jaka jest mechanika funkcjonowania, proszę się nie stresować, będzie to omówione w stosownym czasie

Za wszelkie uwagi i wyszukane błędy będę wdzięczny w celu poprawienia tutorialu
Dziękuję za uwagę w razie pytań proszę kontakt: informatyka@pszczyna.edu.pl