Wordpress

WordPress – jak zacząć

Poradnik dla początkujących

Z artykułu dowiesz się:

  1. Jak zainstalować wordpressa
  2. Dodać wlasny motyw
  3. Przekonwertować footer i header na dynamiczny
  4. Dodać stronę główną oraz style
  5. Dodać menu

Pobieranie i instalacja WordPressa

Najnowszą wersję CMS’u pobierzemy z oficjalnej strony https://wordpress.org/download/. Na ten moment jest to wersja 5.2.1. Zgodnie z wymaganiami https://wordpress.org/about/requirements/ będziemy potrzebowali PHP, serwera https oraz bazy danych mysql, wszystko to zapewni nam paczka XAMPP https://www.apachefriends.org/pl/download.html Po pobraniu potrzebnych rzeczy musimy znaleźć folder, gdzie zainstalowany jest XAMPP i przejść do folderu htdocs, tam wypakowujemy naszą paczkę zip/tar.gz z wordpressem. Po odpaleniu w panelu XAMPP modułów Apache oraz MySQL nasza aplikacja będzie dostępna w przeglądarce pod adresem http://127.0.0.1/wordpress/ lub http://localhost/wordpress/. Możemy przystąpić do krótkiej instalacji. Na początku dostajemy do wyboru język, polski także jest dostępny.

Następnie otrzymujemy informację o potrzebie konfiguracji bazy danych, można przygotować sobie to wcześniej, lecz WordPress da radę z małą pomocą.

wordpress2

Będziemy potrzebowali nowej bazy danych. W tym celu udajemy się pod adres http://localhost/phpmyadmin/. W celu stworzenia nowej bazy klikamy Nowa tak jak na zdjęciu, a następnie wybieramy nazwę i klikamy utwórz.

wordpress3

W następnym oknie wpisujemy nazwę stworzonej przez nas bazy. Niżej wybieramy użytkownika bazy przez którego będą wprowadzane zmiany w bazie, ja wybrałem usera który jest stworzony domyślnie, czyli root’a (domyślnie nie posiada hasła) który posiada wszystkie możliwe uprawnienia. Pracujemy na lokalnej maszynie więc adres serwera to localhost. Ostatnią rzeczą jest przedrostek tabel w naszej bazie, warto zmienić to z domyślnego wp_ ze względu na bezpieczeństwo.

wordpress4

Wszystko przebiegło poprawnie!

wordpress5

Następnie przechodzimy do uzupełniania informacji o witrynie. Zapamiętaj hasło i nazwę użytkownika, ponieważ będzie Ci to potrzebne do zalogowania się na panel WordPressa

wordpress6

Sukces! Udało Ci się zainstalować pierwszy raz wordpressa! Możemy przejść do logowania i wejść na panel administratora.

wordpress7

Instalacja motywu

Teraz przystąpimy do wdrożenia pierwszego motywu do systemu. Aby podejrzeć nasze motywy w menu po prawej stronie wybieramy Wygląd > Motywy, WordPress posiada 3 domyślne.

wordpress8

Będziemy potrzebowali statycznej strony oraz tzw. Underscores’a czy gotowego startowego motywu do WP, na jego podstawie będziemy budować swój motyw, zaoszczędzi nam to dużo czasu. Undescore – https://underscores.me/. Będę korzystał z statycznego szablonu od www.html5webtemplates.co.uk a konkretniej https://www.html5webtemplates.co.uk/templates/textured_orbs/index.html

Po pobraniu underscores’a wchodzimy w katalog wodpressa w htdosc i przechodzimy do folderu wp-content > themes i wypakowujemy zipa. W motywach pojawi się nowa opcja, uaktywniamy ten szablon tak jak na zdjęciu.

wordpress9

Dynamiczny footer i header

Pozostaje nam przenieść content z szablonu do underscores’a. Zaczniemy od footer i header, więc otwieramy folder z naszym themem. Interesować nas będziemy plik header.php oraz footer.php. Zaczniemy od headeru, z statycznej strony kopiujemy wszystko od nawigacji w górę i nadpisujemy wszystko w pliku header.php  

wordpress10

Dodatkowo w wordpressie musimy dodać trochę PHP w sekcji head i body do prawidłowego działania całości

  • Dodać do body klasy wordpressa – <body <?php body_class(); ?>>
  • Dodac w sekcji head informacje od wordpressa  – <?php wp_head(); ?>
  • Dodac informacje o jezyku strony – <html <?php language_attributes(); ?>>
  • Dodac w sekcji head informacje o charsecie – <meta charset=”<?php bloginfo( ‚charset’ ); ?>”>

To samo robimy z stopką, nadpisujemy plik footer.php. Tutaj wystarczy nam dopisać <?php wp_footer(); ?> przed zamknięciem tagu body

wordpress11

Przydało by się dodać nasze style, w tym celu kopiujemy całą zawartość naszych styli z statycznego projektu i wklejamy na sam dół pliku style.css znajdującego się w katalogu szablonu. Musimy umieścić jeszcze informacje o naszych stylach w sekcji head – <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‚stylesheet_directory’); ?>/style.css” />Jak można zauważyć dodatkowo trzeba tutaj dodać informacje o dokładnym katalogu, wordpress nam to ułatwia poprzez dodanie trochę PHP. Jeżeli dodajemy obrazek w css musimy podać pełną ścieżkę, czyli np. url(/wp-content/themes/wordpress/assets/img/logo.png)

Dodanie strony głownej

Tworzymy w folderze szablonu nowy plik page-home.php i kopiujemy zawartość pliku page.php. Zmieniamy zawartość komentarzu u góry pliku na Template Name: Home Page. Oraz usuwamy wszystko pomiędzy get_header() i get_footer().

wordpress12

Teraz w naszym panelu administratora przechodzimy do zakładki Strony > Dodaj nowąNazwiemy ją po prostu Home, następnie w atrybutach strony wybieramy nazwę szablonu taką jaka jest w komentarzu naszego pliku i klikamy opublikuj

wordpress13

Zostało nam jeszcze wybrać stronę główną. Wchodzimy w Ustawienia > Czytanie. Zaznaczmy, aby wyświetlała się statyczna strona i wybieramy stronę, którą wcześniej stworzyliśmy, zapisujemy zmiany.

wordpress14

Możemy już przekopiować nasz content pomiędzy znaczniki header oraz footer. Sprawdźmy, czy wszystko działa ok

wordpress15

Dodanie menu głównego

Ostatnią rzeczą jaką dziś zrobimy będzie dodanie menu do wordpressa. Na początku w panelu administratora wchodzimy w Wygląd > Menu i tworzymy nowe Menu o wybranej nazwie

wordpress16

Dodajemy wszystkie odnośniki jakie chcemy mieć w naszej nawigacji, dodatkowo za znaczmy ze jest to Priamry Menu i zapisujemy.

wordpress17

Przechodzimy do naszego pliku header.php gdzie jest zawarty nasz nav w formie jak na zdjęciu

wordpress18

Będziemy musieli przerobić to przy pomocy PHP oraz wordpressowego obiektu. Powinno to wyglądać mniej więcej tak.

wordpress19

Tworzymy obiekt wp_nav_menu i umieszczamy w nim informacje, które wygenerują nam prawidłowe menu.

Menu ma przekazywać nazwę którego menu w naszym systemie chcemy użyć. Następnie zaznaczamy ze to menu primary czyli to główne. WordPress daje nam też możliwość wyboru kontenera, w którym umieści ul z elementami. Dalej możemy określić container_id/continer_class oraz menu_id/menu_class czyli atrybuty dla listy.

Gotowe! Od teraz edytujemy linki/elementy naszej nawigacji głównej w kokpicie WordPressa.