Workshop - Vývoj šablony na Wordpress. 7.2.202Ve spolupráci s DevX.

Workshopu se účastní SPŠ Karviná. Asistovat budou studenti SŠ INFOTECH. Fotogalerie z akce.

Obsahem školení

je především naučit studenty pracovat s Wordpressem a ukázat, jak se vyvíjí šablona, co to jsou custom post type a jak si ušetřit práci např. s využitím pluginu Advanced Custom Fields

Požadované vstupní znalosti: HTML + CSS

Programové vybavení:

Editor: PHP Storm (alternativně Atom.io),

Server: MAMP PRO

Správce databáze: https://www.adminer.org/

OS: Windows 10

Vedení workshopu: DevX

https://devx.agency/


Lektoři: Adam Gajdzica, David Hotař

MAMP - instalace

  1. Stažení: https://www.mamp.info/en/downloads/ (verze pro Windows)
  2. Instalace spuštěním exe souboru do složky "C:\MAMP\" (doporučeno)
    • Instalace na localhost (127.0.0.1).
    • Vytvoří ikonu na ploše.


MAMP - konfigurace

  1. Parametry konfigurace jsou standardní. Ponechat v deafultním nastavení.
  2. V sekci Hosts pod záložkou Databases vytvořit novou databázi s názvem "wordpress".
  3. Test: http://127.0.0.1/
  4. Informace MAMP: http://localhost/MAMP/

Alternativa: XAMPP, Bitnami

Host

Porty

Databáze

Instalace Wordpressu

  1. Stažení archívu zip ze stránek Wordpress.
  2. Zkopírování obsahu archívu do složky: "C:\MAMP\htdocs".
  3. Spuštění instalace WP: http://127.0.0.1/
  4. Další postup dle návodu.
    • název databáze: wordpress
    • uživatelské jmeno (databáze): root
    • heslo (databáze): root
    • vytvoření uživatele WP: admin
    • vytvoření hesla pro uživatele admin: <vymyslet>
    • Přihlášení do administrace: http://127.0.0.1/wp-admin/


C:\MAMP\htdocs\wp-content\themes

Zkopírování šablony Devx Theme

  1. Překopírování složky devx-theme do /wp-content/themes/
  2. Přihlášení se do administrace
  3. Záložka Vzhled —> Aktivovat šablonu Devx Theme

Šablona je k dispozici na šk. disku "P" a na Google disku.

Adminer - instalace

Správce databáze, stránka projetku: https://www.adminer.org/

- Demo Adminer.

  1. Stažení (skript PHP).
  2. Instalace: soubor "adminer-4.7.5.php" zkopírovat do kořenové složky webu.
    • "C:\MAMP\htdocs"
  3. Spuštění: http://127.0.0.1/adminer-4.7.5.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  1. Plugin
  2. Stažení
  3. Instalace.
    • realizuje se v prostředí administrace WP jako plugin

ACF - instalace

  1. V sekci Pluginy vyhledáme "Advanced Custom Fields"
  2. Kliknutím nainstalujeme.
  3. Aktivujeme.

Tutorial.

Dokumentace.

CSS

  1. CSS; (animace)
  2. Sass: preprocesorový skriptovací jazyk, který interpretuje nebo kompiluje CSS
  3. Vzhled, fonty grafika apod.:

PHP

  1. Co je PHP?
  2. Tutoriál.
  3. Instalace (je součásti MAMP)

Prohledání konkrétních stránek Googlem:

sites: stackoverflow.com bootstrap menu

Nástroje

Grafický online editor: https://pixlr.com/

Redukce velikosti obrázku: https://tinypng.com/

Další nástroje (https://pinetools.com/)

Psaní na klávesnici (české).

  • < - alt gr + čárka (alt gr + 60)
  • > - alt gr + tečka (alt gr + 62)
  • # - alt gr + X (hashtag) (alt gr + 35)
  • { - alt gr + B (alt gr + 123)
  • } - alt gr + N (alt gr + 125)


Zdroj: code.visualstudio.com

Urychlí psaní kódu: Dokumentace.

Vyzkoušej: ul.seznam*2>li.polozka$*5

  1. div.container-fluid.py-5 (stiskem TAB expanduje)
    • <div class="container-fluid py-5"></div>
  2. div.col-lg-4 (stiskem TAB expanduje)
    • <div class="col-lg-4"></div>
  3. div+p (stiskem TAB expanduje)
    • <div></div>
    • <p></p>

Další příklady: https://docs.emmet.io/cheat-sheet/

> potomek

+ sourozenec

. třída

# hlavička

* násobení

{} text

@ změna posloupnosti čísel

() seskupení

$ číselná proměnná

[] atribut

PhpStorm

  1. PHP Storm - stažení
  2. Videotutorial.
  3. Registrace účtu JetBrains. (k dispozici licence pro nekomerční využití)

Git

git config user.name "Jméno Příjmení"

git config user.email "lojza@domena.cz"

git init

git status

git clone https://github.com/zszatopkovych/3D-Trinec.git

git add <soubor>

git commit -m "pridame soubor do repo"

git pull

git push origin master

XAMPP - MySQL - změna hesla

Změnu hesla a přístup k databázi tvoří dva kroky:

  1. úprava C:\xampp\phpMyAdmin\config.inc.php
    • $cfg['Servers'][$i]['user'] = 'root';
    • $cfg['Servers'][$i]['password'] = '<heslo>';
  2. změna samotného hesla v databázi v prostředí phpMyAdmin.

FTP

FTP - File Transfer Protocol

Pro připojení potřebuji:

  • hostname,
  • user,
  • heslo

Databáze

SELECT * 
FROM customer;

INSERT INTO customer(cust_id, branch, status) 
VALUES 
  ('appl01', 'main', 'A');