WordPResS

Administracja

Politechnika Śląska

Trener

 

Marcin Kieruzel

Jestem programistą z 15-letnim doświadczeniem. Programuję głównie w środowisku JS w tym w (Node, Nest.js, React, React Native).

 

Prowadzę firmę No Input Signal. Pracujemy między innymi dla Polskiego Radia, Polskiej Rady Biznesu, PKP Infomatyka, Orange Polska. 

  • Czas: 8 – 15

  • Przerwa obiadowa: 12.30

Szkolenie

  1. WordPress – wprowadzenie, rys historyczny i statystyki. Czym różni się WordPress od podobnych systemów.

  2. Co składa się na WordPress’a – omówienie najważniejszych pojęć i technologii

    1. HTML

    2. CSS

    3. PHP

    4. Mysql

    5. Linux / server

  3. Krótki warsztat z HTML / CSS

  4. Ekosystem WordPress’a – omówimy na czym polega zasada open/closed (otwarte na rozszerzenia zamknięte na modyfikacje). Omówimy sposoby rozszerzania WordPress’a.

    1. Motywy

    2. Wtyczki

    3. Widgety

    4. Edytory wizualne

  5. Edytor TinyMce i Gutenberg czyli “What you see is what you get” – omówienie i przykłady. Jak dodać własny html i css do edytorów.

  6. Najpopularniejsze wtyczki do WordPress’a

    1. Yoast SEO

    2. ACF

    3. WPML

    4. Contact Form 7

  7. Bezpieczeństwo w WordPress’ie

    1. Aktualizacje

    2. Mechanizmy bezpieczeństwa

Plan

WordPress jest jednym z najpopularniejszych systemów zarządzania treścią (CMS) na świecie. Jego historia rozpoczęła się w 2003 roku i obejmuje wiele ważnych momentów i wydarzeń, które przyczyniły się do jego obecnej pozycji. Oto kluczowe etapy w historii WordPressa:

Początki (2003)

WordPress został stworzony przez Matta Mullenwega i Mike'a Little'a jako fork innego projektu o nazwie b2/cafelog. Celem było stworzenie łatwiejszego w użyciu i bardziej elastycznego narzędzia do publikacji treści w Internecie. Pierwsza wersja WordPressa, oznaczona numerem 0.7, została wydana 27 maja 2003 roku.

 

Ewolucja w pełnoprawny CMS (2010-2014)

WordPress 3.0, wydany w 2010 roku, przyniósł integrację z WordPress MU (multi-user), co umożliwiło tworzenie sieci blogów. Wprowadzono również niestandardowe typy postów, co pozwoliło użytkownikom na tworzenie różnych rodzajów treści poza tradycyjnymi postami i stronami. W 2011 roku WordPress 3.3 wprowadził nowy interfejs użytkownika i udoskonalenia w edytorze treści.

Nowoczesność i Gutenberg (2015-obecnie)

W 2015 roku WordPress 4.3 wprowadził lepsze zarządzanie menu i dostosowanie wyglądu. W 2018 roku wydano WordPress 5.0, który wprowadził edytor blokowy Gutenberg, rewolucjonizując sposób, w jaki użytkownicy tworzą i zarządzają treściami na swoich stronach. Edytor Gutenberg pozwala na łatwe dodawanie, układanie i edytowanie bloków treści, takich jak tekst, obrazy, galerie i inne elementy multimedialne.

WordPress dzisiaj

Obecnie WordPress jest najczęściej używanym CMS-em na świecie, obsługującym ponad 40% wszystkich stron internetowych. Społeczność wokół WordPressa jest niezwykle aktywna, z setkami tysięcy wtyczek i motywów dostępnych dla użytkowników. System jest regularnie aktualizowany, aby zapewnić bezpieczeństwo, wydajność i nowe funkcje.

WordPress jest nie tylko narzędziem do tworzenia blogów, ale pełnoprawnym systemem zarządzania treścią, który może obsługiwać różnorodne strony internetowe, od prostych blogów po złożone strony e-commerce. Dzięki swojej elastyczności, otwartości i rozbudowanej społeczności, WordPress pozostaje liderem wśród narzędzi do tworzenia stron internetowych.

Historia

 

WCZESNY ROZWÓJ (2004-2005)

W 2004 roku WordPress 1.2 wprowadził system wtyczek, który umożliwił użytkownikom rozszerzanie funkcjonalności swoich stron bez modyfikowania rdzenia oprogramowania. W 2005 roku WordPress 1.5, nazwana "Strayhorn", wprowadziła system motywów, co pozwoliło na łatwe zmiany wyglądu stron.

Historia

 

 

WZROST POPULARNOŚCI (2006-2009)

W tych latach WordPress zyskał na popularności, stając się preferowanym narzędziem dla blogerów i małych firm. W 2008 roku powstała WordPress Foundation, organizacja non-profit, której celem jest wspieranie dalszego rozwoju WordPressa. W 2009 roku WordPress 2.9 dodał funkcje takie jak zagnieżdżone komentarze i aktualizacje wtyczek z poziomu panelu administracyjnego.

 

 

Historia

 

 

EWOLUCJA W PEŁNOPRAWNY CMS (2010-2014)

WordPress 3.0, wydany w 2010 roku, przyniósł integrację z WordPress MU (multi-user), co umożliwiło tworzenie sieci blogów. Wprowadzono również niestandardowe typy postów, co pozwoliło użytkownikom na tworzenie różnych rodzajów treści poza tradycyjnymi postami i stronami. W 2011 roku WordPress 3.3 wprowadził nowy interfejs użytkownika i udoskonalenia w edytorze treści.

 

 

Historia

 

 

NOWOCZESNOŚĆ I GUTENBERG (2015-OBECNIE)

W 2015 roku WordPress 4.3 wprowadził lepsze zarządzanie menu i dostosowanie wyglądu. W 2018 roku wydano WordPress 5.0, który wprowadził edytor blokowy Gutenberg, rewolucjonizując sposób, w jaki użytkownicy tworzą i zarządzają treściami na swoich stronach. Edytor Gutenberg pozwala na łatwe dodawanie, układanie i edytowanie bloków treści, takich jak tekst, obrazy, galerie i inne elementy multimedialne.

 

 

 

 

Historia

 

 

WORDPRESS DZISIAJ

Obecnie WordPress jest najczęściej używanym CMS-em na świecie, obsługującym ponad 40% wszystkich stron internetowych. Społeczność wokół WordPressa jest niezwykle aktywna, z setkami tysięcy wtyczek i motywów dostępnych dla użytkowników. System jest regularnie aktualizowany, aby zapewnić bezpieczeństwo, wydajność i nowe funkcje.

 

 

 

 

 

Historia

 

 

WORDPRESS DZISIAJ

WordPress jest nie tylko narzędziem do tworzenia blogów, ale pełnoprawnym systemem zarządzania treścią, który może obsługiwać różnorodne strony internetowe, od prostych blogów po złożone strony e-commerce. Dzięki swojej elastyczności, otwartości i rozbudowanej społeczności, WordPress pozostaje liderem wśród narzędzi do tworzenia stron internetowych.

 

 

 

 

 

Historia

 

MAtt MullenwEg

Twórca WOrdPreSSa

1. The New Yorker

The New Yorker, prestiżowy amerykański magazyn literacki, korzysta z WordPressa do zarządzania treściami online, w tym artykułami, recenzjami i komentarzami.

2. BBC America

Strona BBC America używa WordPressa do publikacji informacji o programach telewizyjnych, artykułów i innych treści multimedialnych.

3. TechCrunch

TechCrunch, jedna z najpopularniejszych stron internetowych zajmujących się technologią i startupami, również używa WordPressa do zarządzania swoimi artykułami, recenzjami i relacjami na żywo.

 

7. Beyoncé

Oficjalna strona internetowa Beyoncé, zawierająca informacje o koncertach, muzyce, teledyskach i innych aktualizacjach, jest oparta na WordPressie.

8. The Rolling Stones

Strona internetowa legendarnej brytyjskiej grupy rockowej The Rolling Stones również używa WordPressa do zarządzania treściami i informacjami o trasach koncertowych.

9. Microsoft News

Microsoft News używa WordPressa do zarządzania swoimi artykułami i aktualizacjami dotyczącymi produktów, usług i technologii.

10. Whitehouse.gov

Oficjalna strona Białego Domu była oparta na WordPressie przez pewien czas, co pokazuje, że nawet rządowe strony mogą korzystać z tego CMS-a.

11. Vogue

Magazyn Vogue, znany na całym świecie z treści dotyczących mody i stylu życia, używa WordPressa do zarządzania artykułami i zdjęciami.

12. Usain Bolt

Oficjalna strona internetowa Usaina Bolta, jednego z najszybszych ludzi na świecie, jest oparta na WordPressie i zawiera informacje o jego karierze, osiągnięciach i przedsięwzięciach.

 

Strony używające WP

4. THE WALT DISNEY COMPANY

Disney używa WordPressa do obsługi różnych swoich stron internetowych, w tym stron korporacyjnych i informacyjnych.

5. SONY MUSIC

Strona Sony Music, prezentująca artystów i ich muzykę, wykorzystuje WordPressa do zarządzania treściami i interakcjami z fanami.

6. MTV NEWS

MTV News korzysta z WordPressa do publikacji najnowszych wiadomości, artykułów, wywiadów i treści multimedialnych związanych z muzyką, kulturą i rozrywką.

 

 

 

Strony używające WP

7. BEYONCÉ

Oficjalna strona internetowa Beyoncé, zawierająca informacje o koncertach, muzyce, teledyskach i innych aktualizacjach, jest oparta na WordPressie.

8. THE ROLLING STONES

Strona internetowa legendarnej brytyjskiej grupy rockowej The Rolling Stones również używa WordPressa do zarządzania treściami i informacjami o trasach koncertowych.

9. MICROSOFT NEWS

Microsoft News używa WordPressa do zarządzania swoimi artykułami i aktualizacjami dotyczącymi produktów, usług i technologii.

 

 

 

 

Strony używające WP

10. WHITEHOUSE.GOV

Oficjalna strona Białego Domu była oparta na WordPressie przez pewien czas, co pokazuje, że nawet rządowe strony mogą korzystać z tego CMS-a.

11. VOGUE

Magazyn Vogue, znany na całym świecie z treści dotyczących mody i stylu życia, używa WordPressa do zarządzania artykułami i zdjęciami.

12. USAIN BOLT

Oficjalna strona internetowa Usaina Bolta, jednego z najszybszych ludzi na świecie, jest oparta na WordPressie i zawiera informacje o jego karierze, osiągnięciach i przedsięwzięciach.

 

 

 

 

Strony używające WP

〞

Famous 5 minuts installment

  • serwer
  • html
  • css
  • javascript
  • php
  • mysql

Składniki WP

Zwyczajowo wordpress używa serwerów Linux.

Tzw. LEMP lub LAMP Stack.

Jest to najpopularniejsza konfiguracja serwerowa powszechnie dostępna na serwerach hostingowych

SERWER

WordPress używa bazy danyh Mysql

Baza Danych

Historia HTML (HyperText Markup Language) jest nierozerwalnie związana z rozwojem internetu i technologii webowych. Oto kluczowe etapy i wydarzenia w historii HTML:

Początki HTML i World Wide Web (1989-1991)

HTML został stworzony przez Tima Bernersa-Lee, brytyjskiego naukowca pracującego w CERN (Europejskiej Organizacji Badań Jądrowych), jako część projektu World Wide Web (WWW). W 1989 roku Berners-Lee przedstawił swoją wizję systemu hipertekstowego, który umożliwiłby łatwe udostępnianie i przeglądanie dokumentów naukowych.

Pierwsza wersja HTML została opracowana w latach 1990-1991 i była bardzo prostym językiem znaczników umożliwiającym tworzenie dokumentów z hiperłączami, nagłówkami, paragrafami i listami.

HTML

Historia HTML (HyperText Markup Language) jest nierozerwalnie związana z rozwojem internetu i technologii webowych. Oto kluczowe etapy i wydarzenia w historii HTML:

Początki HTML i World Wide Web (1989-1991)

HTML został stworzony przez Tima Bernersa-Lee, brytyjskiego naukowca pracującego w CERN (Europejskiej Organizacji Badań Jądrowych), jako część projektu World Wide Web (WWW). W 1989 roku Berners-Lee przedstawił swoją wizję systemu hipertekstowego, który umożliwiłby łatwe udostępnianie i przeglądanie dokumentów naukowych.

Pierwsza wersja HTML została opracowana w latach 1990-1991 i była bardzo prostym językiem znaczników umożliwiającym tworzenie dokumentów z hiperłączami, nagłówkami, paragrafami i listami.

HTML

HTML5 (2008-obecnie)

Prace nad HTML5 rozpoczęły się w 2008 roku pod przewodnictwem W3C oraz WHATWG (Web Hypertext Application Technology Working Group). Celem HTML5 było stworzenie nowoczesnego języka znaczników, który obsługiwałby nowe technologie internetowe i był zgodny z poprzednimi wersjami HTML. HTML5 wprowadził wiele nowych elementów i funkcji, takich jak:

HTML

  • Nowe elementy semantyczne (np. <article>, <section>, <nav>, <header>, <footer>)

  • Obsługa multimediów bez potrzeby stosowania wtyczek (np. <audio>, <video>)

  • Nowe API do tworzenia dynamicznych aplikacji internetowych (np. Canvas, Web Storage, Geolocation)

  • Lepsza obsługa formularzy i interakcji użytkownika

HTML5 został oficjalnie wydany jako rekomendacja W3C w październiku 2014 roku. Od tego czasu HTML5 stał się standardem dla nowoczesnych stron internetowych i aplikacji webowych.

HTML

HTML (HyperText Markup Language) jest językiem znaczników używanym do tworzenia i strukturyzowania treści na stronach internetowych. Działa na zasadzie znaczników (tags), które są umieszczane w dokumencie HTML, aby określić, jak różne części strony mają być wyświetlane przez przeglądarkę internetową. Oto jak HTML działa krok po kroku:

HTML

1. Struktura Dokumentu HTML

Dokument HTML składa się z elementów, które są reprezentowane za pomocą znaczników. Podstawowa struktura dokumentu HTML wygląda następująco:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
</body>
</html>

2. Elementy HTML

Elementy HTML są podstawowymi blokami konstrukcyjnymi stron internetowych. Każdy element jest otoczony znacznikami:

  • Znaczniki otwierające i zamykające: Każdy element HTML zaczyna się znacznikiem otwierającym, a kończy znacznikiem zamykającym. Na przykład <p> jest znacznikiem otwierającym dla paragrafu, a </p> jest znacznikiem zamykającym.

  • Treść elementu: Między znacznikami otwierającym i zamykającym znajduje się treść elementu. Na przykład:

HTML

<p>This is a paragraph.</p>

3. Atrybuty HTML

Elementy HTML mogą mieć atrybuty, które dostarczają dodatkowych informacji o elemencie. Atrybuty są umieszczane wewnątrz znacznika otwierającego i składają się z nazwy i wartości:

HTML

<a href="https://www.example.com">Visit Example</a>

4. Główne Elementy HTML

  • <!DOCTYPE html>: Deklaracja DOCTYPE informuje przeglądarkę, że dokument jest napisany w HTML5.
  • <html>: Element html jest korzeniem dokumentu HTML.
  • <head>: Element head zawiera meta informacje o dokumencie, takie jak tytuł, linki do stylów CSS i skrypty JavaScript.
  • <title>: Element title określa tytuł strony, który pojawia się na karcie przeglądarki.
  • <body>: Element body zawiera główną treść dokumentu HTML, która jest wyświetlana w przeglądarce.

HTML

5. Semantyczne Elementy HTML

HTML5 wprowadził szereg semantycznych elementów, które pomagają lepiej zorganizować i zrozumieć strukturę strony:

  • <header>: Definiuje nagłówek dokumentu lub sekcji.
  • <nav>: Zawiera nawigacyjne linki do innych stron lub sekcji.
  • <article>: Reprezentuje niezależny fragment treści, który może być dystrybuowany niezależnie.
  • <section>: Definiuje sekcję w dokumencie.
  • <footer>: Definiuje stopkę dokumentu lub sekcji.
  • <aside>: Zawiera treści poboczne, takie jak reklamy, linki do innych artykułów.

HTML

6. Multimedialne Elementy HTML

HTML5 wprowadził także elementy multimedialne, które umożliwiają osadzanie dźwięku i wideo bez potrzeby korzystania z wtyczek:

  • <audio>: Umożliwia osadzanie plików audio.

  • <video>: Umożliwia osadzanie plików wideo.

HTML

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<video controls>
  <source src="videofile.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

7. Formularze HTML

Formularze są kluczowym elementem interakcji użytkownika z witryną. HTML dostarcza różnych elementów do tworzenia formularzy:

  • <form>: Definiuje formularz.
  • <input>: Definiuje pole wejściowe dla użytkownika.
  • <textarea>: Definiuje obszar tekstowy.
  • <button>: Definiuje przycisk.

HTML

7. Formularze HTML

HTML

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

CSS (Cascading Style Sheets) jest językiem używanym do opisywania wyglądu i formatu dokumentów napisanych w języku HTML lub XML. CSS umożliwia oddzielenie struktury dokumentu od jego prezentacji, co pozwala na bardziej elastyczne i efektywne zarządzanie wyglądem stron internetowych. Oto, jak działa CSS:

CSS

Selektory:

  • Selektory są używane do wybierania elementów HTML, które mają być stylizowane.
  • Przykłady selektorów:
    • Selektory tagów: p { color: red; } - wszystkie elementy <p> będą miały czerwony tekst.
    • Selektory klas: .myClass { } - wszystkie elementy z klasą myClass będą miały rozmiar czcionki 20px.
    • Selektory identyfikatorów: #myId { background-color: yellow; } - element z identyfikatorem myId będzie miał żółte tło.

CSS

Właściwości i wartości:

  • Właściwości określają, co ma być stylizowane (np. kolor, tło, margines).
  • Wartości określają, jak właściwości mają być stylizowane (np. czerwony, 20px, środek).
  • Przykład: color: blue; - ustawia kolor tekstu na niebieski.

CSS

Bloki deklaracji:

  • Bloki deklaracji zawierają zestaw właściwości i wartości, które są zastosowane do selektorów.

CSS

h1 {
  color: green;
  font-size: 24px;
}

Zasady Kaskadowania

CSS jest kaskadowym arkuszem stylów, co oznacza, że style mogą być stosowane z różnych źródeł i mogą się nadpisywać. Istnieją trzy główne źródła stylów:

CSS

//Ad 1
<p style="color: blue;">This is a paragraph.</p>
//Ad 2
<style>
  p {
    color: green;
  }
</style>
Ad 3
<link rel="stylesheet" href="styles.css">

Zasady Kaskadowania

1. Styl wbudowany – inline

2. Style w nagłówku html

3. Style w pliku css 

CSS

//Ad 1
<p style="color: blue;">This is a paragraph.</p>
//Ad 2
<style>
  p {
    color: green;
  }
</style>
Ad 3
<link rel="stylesheet" href="styles.css">

Specyficzność

Specyficzność określa, które style są stosowane, gdy istnieje konflikt między różnymi regułami. Reguły o wyższej specyficzności mają pierwszeństwo. Specyficzność obliczana jest na podstawie selektorów użytych w regule:

  • Inline style: Najwyższa specyficzność.
  • ID selektory: #myId {} - wysoka specyficzność.
  • Class, attribute, and pseudo-class selectors: .myClass {} - średnia specyficzność.
  • Element and pseudo-element selectors: p {} - niska specyficzność.

 

CSS

DZIEDZICZENIE

Niektóre właściwości w CSS mogą być dziedziczone przez elementy potomne. Na przykład, jeśli ustawisz kolor tekstu dla elementu <div>, to wszystkie elementy wewnątrz tego <div> będą dziedziczyć ten kolor, chyba że mają zdefiniowane inne reguły CSS.

CSS

Model pudełkowy

Każdy element HTML jest traktowany jako prostokątny pudełko. Model pudełkowy CSS określa, jak przestrzeń jest przydzielana do tego pudełka, w tym:

  • Marginesy (margin): Przestrzeń na zewnątrz pudełka.
  • Obramowanie (border): Otoczenie pudełka.
  • Padding: Przestrzeń wewnątrz pudełka, między treścią a obramowaniem.
  • Treść (content): Rzeczywista zawartość elementu, taka jak tekst lub obrazy.

Przykład modelu pudełkowego w CSS:

CSS

Model pudełkowy

Każdy element HTML jest traktowany jako prostokątny pudełko. Model pudełkowy CSS określa, jak przestrzeń jest przydzielana do tego pudełka, w tym:

CSS

div {
  margin: 10px;
  border: 2px solid black;
  padding: 5px;
  width: 100px;
}

Layout i pozycjonowanie

CSS umożliwia kontrolę nad układem elementów na stronie za pomocą różnych właściwości pozycjonowania:

  • Static: Domyślne pozycjonowanie elementu.
  • Relative: Element jest pozycjonowany względem swojej normalnej pozycji.
  • Absolute: Element jest pozycjonowany względem najbliższego pozycjonowanego przodka.
  • Fixed: Element jest pozycjonowany względem okna przeglądarki.
  • Flexbox: Elastyczny model układu, który pozwala na bardziej dynamiczne rozmieszczenie elementów.
  • Grid: System siatki, który pozwala na zaawansowane układy dwuwymiarowe.

CSS

Layout i pozycjonowanie

CSS umożliwia kontrolę nad układem elementów na stronie za pomocą różnych właściwości pozycjonowania:

  • Static: Domyślne pozycjonowanie elementu.
  • Relative: Element jest pozycjonowany względem swojej normalnej pozycji.
  • Absolute: Element jest pozycjonowany względem najbliższego pozycjonowanego przodka.
  • Fixed: Element jest pozycjonowany względem okna przeglądarki.
  • Flexbox: Elastyczny model układu, który pozwala na bardziej dynamiczne rozmieszczenie elementów.
  • Grid: System siatki, który pozwala na zaawansowane układy dwuwymiarowe.

CSS

Media queries

Media queries umożliwiają stosowanie różnych stylów w zależności od charakterystyki urządzenia wyświetlającego, takiej jak szerokość ekranu, wysokość ekranu, rozdzielczość i orientacja. Dzięki media queries, strony internetowe mogą być responsywne i dostosowywać się do różnych urządzeń.

Przykład media query:

CSS

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Strony internetowe i kursy online:

  1. MDN Web Docs (Mozilla Developer Network)

    • HTML

    • CSS

    • Komprehensywne przewodniki, dokumentacja i przykłady kodu.

  2. W3Schools

    • HTML

    • CSS

    • Interaktywne samouczki, przykłady kodu i testy online.

  3. FreeCodeCamp

    • Responsive Web Design Certification

    • Kursy obejmujące HTML, CSS i projekty do praktyki.

  4. Codecademy

    • Learn HTML

    • Learn CSS

    • Interaktywne kursy z zadaniami praktycznymi.

  5. Coursera

  6. Udemy

    • The Complete Web Developer Course 2.0 autorstwa Rob Percival.

    • Kursy oferujące pełne wprowadzenie do HTML i CSS.

Książki:

  1. "HTML and CSS: Design and Build Websites" by Jon Duckett

    • Przystępne wprowadzenie do HTML i CSS z kolorowymi ilustracjami i przykładami.

  2. "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

    • Kompleksowy przewodnik po podstawach tworzenia stron internetowych.

  3. "CSS: The Definitive Guide" by Eric A. Meyer and Estelle Weyl

    • Szczegółowy przewodnik po CSS dla bardziej zaawansowanych użytkowników.

Fora i społeczności:

  1. Stack Overflow

    • Platforma do zadawania pytań i uzyskiwania odpowiedzi od profesjonalistów w dziedzinie web developmentu.

  2. Reddit

  3. CSS-Tricks

    • CSS-Tricks

    • Artykuły, przewodniki i fora dotyczące najnowszych trendów i technik w CSS.

Inne zasoby:

  1. YouTube

  2. CodePen

    • CodePen

    • Platforma do eksperymentowania z kodem HTML, CSS i JavaScript w przeglądarce.

  3. CSS Grid Garden

  4. Flexbox Froggy

 

PHP (Hypertext Preprocessor) to popularny język skryptowy, który działa po stronie serwera i jest używany głównie do tworzenia dynamicznych stron internetowych oraz aplikacji webowych. 

Podstawy PHP

  1. Wykonywanie po stronie serwera:

    • PHP jest językiem skryptowym działającym po stronie serwera, co oznacza, że kod PHP jest wykonywany na serwerze, a nie na komputerze klienta.
    • Przeglądarka użytkownika wysyła żądanie do serwera, który wykonuje skrypt PHP i zwraca wygenerowaną stronę HTML do przeglądarki.

PHP

Wstawianie kodu PHP w HTML:

  • Kod PHP może być wstawiany bezpośrednio w dokument HTML za pomocą znaczników <?php ... ?>.

PHP

<!DOCTYPE html>
<html>
<head>
    <title>My First PHP Page</title>
</head>
<body>
    <h1><?php echo "Hello, World!"; ?></h1>
</body>
</html>

Do pracy z WordPressem nie potrzebna jest dogłębna znajomość PHP.  Warto pamiętać jednak za co będzie on odpowiadał w tym CMS'ie

 

  1. Połączenie z bazą danych
  2. Pobieranie danych z bazy
  3. Dynamiczne generowanie HTML
  4. Routing

PHP

Motyw WordPressa jest zestawem plików, które razem tworzą interfejs użytkownika witryny WordPress. Motywy kontrolują wygląd, układ i sposób prezentacji treści na stronie. Oto, jak działa motyw WordPressa, wraz z omówieniem głównych elementów, które go tworzą:

WordPress – Motywy

Instalacja i aktywacja:

  • Motyw można zainstalować i aktywować z poziomu panelu administracyjnego WordPressa. Po aktywacji motyw nadpisuje domyślne ustawienia wyglądu i układu witryny, korzystając ze swoich własnych szablonów i stylów.

WordPress – Motywy

Pliki motywu:

  • Motyw składa się z różnych plików PHP, CSS, JavaScript i innych zasobów, które wspólnie definiują wygląd i funkcjonalność witryny. Oto kluczowe pliki motywu:
    • style.css: Plik CSS, który zawiera style dla motywu. Zawiera również nagłówek z informacjami o motywie, takimi jak nazwa, autor, wersja itp.
    • index.php: Główny plik szablonu, który jest używany, jeśli nie ma bardziej specyficznego pliku szablonu dla danego typu treści.
    • header.php: Plik szablonu nagłówka, który zawiera kod HTML i PHP dla sekcji nagłówka witryny.
    • footer.php: Plik szablonu stopki, który zawiera kod HTML i PHP dla sekcji stopki witryny.

WordPress – Motywy

Pliki motywu:

  • functions.php: Plik funkcji motywu, w którym można dodać niestandardowe funkcje, zarejestrować widgety, menu, style, skrypty i inne funkcje specyficzne dla motywu.
  • single.php: Plik szablonu dla pojedynczych wpisów.
  • page.php: Plik szablonu dla stron statycznych.
  • sidebar.php: Plik szablonu dla bocznego paska (sidebar).
  • archive.php: Plik szablonu dla stron archiwów (np. kategorie, tagi).

WordPress – Motywy

Hierarchia szablonów w WordPressie to system określający, które pliki szablonów są używane do wyświetlania różnych typów stron w witrynie. Jest to ważny aspekt tworzenia motywów WordPressa, ponieważ umożliwia projektantom i programistom tworzenie bardziej elastycznych i złożonych układów stron. Hierarchia szablonów działa w oparciu o zdefiniowane priorytety, które określają, który plik szablonu zostanie użyty w określonej sytuacji. Oto szczegółowe omówienie hierarchii szablonów w WordPressie:

WordPress – Hierarchia Szablonów

Podstawowa hierarchia szablonów

  1. index.php:
    • Jest to podstawowy plik szablonu i służy jako rezerwowy szablon, gdy żaden inny bardziej specyficzny szablon nie jest dostępny.

WordPress – Hierarchia Szablonów

  • Statyczna strona główna:

    • front-page.php
    • home.php
    • index.php

  • Pojedynczy wpis (single post):

    • single-{post-type}-{slug}.php
    • single-{post-type}.php
    • single.php
    • singular.php
    • index.php

WordPress – Hierarchia Szablonów

Strona pojedynczej strony (page):

  • custom-template.php (jeśli wybrano w edytorze strony)
  • page-{slug}.php
  • page-{id}.php
  • page.php
  • singular.php
  • index.php

WordPress – Hierarchia Szablonów

  • Kategoria:
    • category-{slug}.php
    • category-{id}.php
    • category.php
    • archive.php
    • index.php
  • Tag:
    • tag-{slug}.php
    • tag-{id}.php
    • tag.php
    • archive.php
    • index.php

WordPress – Hierarchia Szablonów

  • Autor:
    • author-{nicename}.php
    • author-{id}.php
    • author.php
    • archive.php
    • index.php
  • Data:
    • date.php
    • archive.php
    • index.php

WordPress – Hierarchia Szablonów

Do zorientowania się w jakim szablonie aktualnie się znajdujemy może nam służyć wtyczka What The File

WordPress – Hierarchia Szablonów

Wtyczki w WordPressie są rozszerzeniami, które można dodać do strony internetowej, aby zwiększyć jej funkcjonalność i możliwości. Dzięki wtyczkom użytkownicy mogą łatwo dodać nowe funkcje bez konieczności pisania kodu od podstaw. Oto szczegółowe wyjaśnienie, jak działają wtyczki w WordPressie:
 

WordPress – Wtyczki

Instalacja i aktywacja:

  • Wtyczki można instalować bezpośrednio z repozytorium WordPressa (WordPress Plugin Directory), przesyłając plik ZIP lub ręcznie przez FTP.
  • Po zainstalowaniu wtyczkę trzeba aktywować, aby zaczęła działać na stronie. Aktywacji dokonuje się z poziomu panelu administracyjnego WordPressa.

WordPress – Wtyczki

Przykłady popularnych wtyczek

  1. WooCommerce:

    • Dodaje pełnoprawne funkcje e-commerce do WordPressa, umożliwiając tworzenie sklepów internetowych.

  2. Yoast SEO:

    • Pomaga optymalizować strony internetowe pod kątem SEO, oferując narzędzia do analizy i poprawy treści.

  3. Contact Form 7:

    • Umożliwia tworzenie i zarządzanie formularzami kontaktowymi.

  4. Elementor:

    • Dodaje funkcje budowania stron za pomocą interfejsu przeciągnij i upuść.

WordPress – Wtyczki

Korzyści i wyzwania

  1. Korzyści:

    • Łatwość użycia: Wtyczki mogą znacznie rozszerzyć funkcjonalność witryny bez konieczności pisania własnego kodu.
    • Dostosowanie: Wtyczki umożliwiają dostosowanie witryny do specyficznych potrzeb bez konieczności zmiany motywu.
    • Społeczność i wsparcie: Istnieje ogromna społeczność deweloperów, którzy tworzą i wspierają wtyczki.

  2. Wyzwania:

    • Kompatybilność: Niektóre wtyczki mogą nie działać poprawnie z innymi wtyczkami lub motywami.
    • Wydajność: Zbyt wiele wtyczek lub źle zoptymalizowane wtyczki mogą spowolnić witrynę.
    • Bezpieczeństwo: Niezaktualizowane lub źle napisane wtyczki mogą stanowić lukę bezpieczeństwa.

WordPress – Wtyczki