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
MAMP - instalace
- Stažení: https://www.mamp.info/en/downloads/ (verze pro Windows)
- 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
- Parametry konfigurace jsou standardní. Ponechat v deafultním nastavení.
- V sekci Hosts pod záložkou Databases vytvořit novou databázi s názvem "wordpress".
- Test: http://127.0.0.1/
- Informace MAMP: http://localhost/MAMP/
Host
Porty
Databáze
Instalace Wordpressu
- Stažení archívu zip ze stránek Wordpress.
- Zkopírování obsahu archívu do složky: "
C:\MAMP\htdocs
". - Spuštění instalace WP: http://127.0.0.1/
- 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>
C:\MAMP\htdocs\wp-content\themes
Zkopírování šablony Devx Theme
- Překopírování složky
devx-theme
do/wp-content/themes/
- Přihlášení se do administrace
- 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/
- Stažení (skript PHP).
- Instalace: soubor "adminer-4.7.5.php" zkopírovat do kořenové složky webu.
- "
C:\MAMP\htdocs
"
- "
- 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">
- Plugin
- Stažení
- Instalace.
- realizuje se v prostředí administrace WP jako plugin
ACF - instalace
- V sekci Pluginy vyhledáme "Advanced Custom Fields"
- Kliknutím nainstalujeme.
- Aktivujeme.
- HTML - W3school.
- Nu Html Checker - validace (kontrola) HTML.
- Automatické formátování zdrojového kódu (HTML, CSS, JS).
- HTML šablony.
- HTML Bootstrap šablony.
------------------------
CSS
- CSS; (animace)
- Sass: preprocesorový skriptovací jazyk, který interpretuje nebo kompiluje CSS
- Vzhled, fonty grafika apod.:
- https://fonts.google.com/, české
- fonty, respektive písma ke stažení
- fonty, grafika, ikony (nutná registrace)
- ikony, loga, vektorová grafika
- fotky: Pexesl, fotobanka
- fotobanky s volně dostupnými i placenými fotkami pro webové stránky
- barvy: color-hex, scheme generator
- web/nástroj - obsahuje sady barevných schémat a jejic různá vyjádření
- CSS animátor, cdnjs animator, daneden
- https://fonts.google.com/, české
PHP
- Co je PHP?
- Tutoriál.
- Instalace (je součásti MAMP)
Prohledání konkrétních stránek Googlem:
Nástroje
Grafický online editor: https://pixlr.com/
Redukce velikosti obrázku: https://tinypng.com/
Další nástroje (https://pinetools.com/)
- < - 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)
- div.container-fluid.py-5 (stiskem TAB expanduje)
- <div class="container-fluid py-5"></div>
- div.col-lg-4 (stiskem TAB expanduje)
- <div class="col-lg-4"></div>
- 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
- PHP Storm - stažení
- Videotutorial.
- Registrace účtu JetBrains. (k dispozici licence pro nekomerční využití)
- Graduation:
rok ukončení školy
- Email address:
školní email
(@zszatopkovych.eu)
- Graduation:
Visual studio code
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:
- úprava C:\xampp\phpMyAdmin\config.inc.php
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '<heslo>';
- změna samotného hesla v databázi v prostředí phpMyAdmin.