Radionice za razvijanje WordPress tema

Ovde se nalazi kod sa radionica za izradu WordPress tema, održanih u Novom Sadu 2018/2019 godine. Više o radionicama ovde.

Svaka grana (branch) sadrži kod jedne radionice i nazvana je po modelu:

R-{redni_broj}

Master grana sadrži kompletan kod, odn. kod sa poslednje radionice.

Sadržaj:

R-01
- Child tema za Twentyseventeen temu
- Načini modifikacije roditeljske teme kroz child temu
R-02 - Samostalna tema - "Radionica"
R-03 - add_theme_support()
R-04 - Walker_Nav_Menu
R-05 - Šablon pojedinačnog članka
R-07 - Vidžeti i arhive
- Vidžeti i bočna traka
- Arhive
R-08 - Escaping
- HTML
- Atributi
- URL
- Javascript

R-01

Članak

Child tema za Twentyseventeen temu

U /themes/ folderu napravimo novi folder u kome će biti datoteke child teme. Folder može biti nazvan proizvoljno. Ipak, opšteprihvaćen model je {NAZIV_RODITELJA}-child.
U ovom folderu napravimo style.css i od roditelja kopiramo samo komentar s početka datoteke.
Komentar je potrebno izmeniti kako bi se definisala roditeljska tema (Template) i identifikacija za prevod i lokalizaciju (Text Domain).
Učitavanje roditeljskih stilova i skripti i usklđivanje redosleda zavisi od toga na koji način su ovi aseti pozvani u roditeljskoj temi. Ovde treba obratiti pažnju na dve stvari: 1. aseti child teme moraju biti učitani posle roditeljskih, i 2. obratiti pažnju da se style.css child teme ne učita dva puta.

Izvori:

Child Theme - developer.wordpress.org

Pozivanje stilova i skripti:

Hook za učitavanje stilova i skripti:

wp_enqueue_scripts

Funkcije za lociranje datoteka u temi, roditeljskoj i child

U verziji 4.7 su uvedene nove funkcije:

Izvor: New Functions, Hooks, and Behaviour for Theme Developers in WordPress 4.7

Načini modifikacije roditeljske teme kroz child temu

modifikacija stilova u style.css
podrška teme: add_theme_support() i remove_theme_support()
uklanjanje hookova: remove_filter() i remove_action()
modifikacija roditeljske funkcije (sa function_exists proverom )
kopiranje templejta iz roditeljske teme na istu putanju
modifikacija custom filtera definisanog u roditeljskoj temi

R-02

Članak

Samostalna tema - "Radionica"

Minimum za instaliranje bez grešaka:

style.css sa komentarom,
index.php sa get_header() i get_footer(),
header.php - DOCTYPE, <head>, otvarajući <html> i <body>; wp_head(); body_class(),
footer.php - wp_footer(); zatvarajući <body> i <html>.

Minimum za prikaz stranice

function.php - učitavanje style.css
header.php - identitet sajta - bloginfo(), home_url(), esc_url()
footer.php - copyrights - get_bloginfo(), esc_html__()
index.php - osnovna petlja The Loop, the_title(), the_content()

Podrazumevani šabloni

page.php - sve stranice
single.php - svi članci
index.php - postaje šablon za arhive; get_permalink(), the_title_attribute()

Više o šablonima na wphierarchy.com.

Delovi šablona i kondicionali

Isti ili dovoljno sličan kod koji se pojavljuje u više šablona, izdvojiti u poseban deo šablona get_template_part()
Pomoću kondicionala odrediti koji kod će se prikazivati u kom šablonu - is_archive(), is_home(), is_single()
the_category(), the_tags()

Lista kondicionala: Conditional Tags Index

Osnovni markup unosa i glavni wrapper

Smernice za pisanje kvalitetnog CSS koda koji je moguće održavati na duge staze: Harry Roberts - cssguidelin.es

R-03

Članak

add_theme_support()

Custom Logo

Automatic Feed Links

add_theme_support( 'automatic-feed-links' )

Title Tag

Custom Background

add_theme_support( 'custom-background' )

Post Thumbnails

Custom Header

Navigation Menus

R-04

Članak

Walker_Nav_Menu

Walker_Nav_Menu::start_lvl

odnosi se na submenu, vraća <ul>
Walker_Nav_Menu::start_lvl()
Objašnjenje za $item_spacing

Walker_Nav_Menu::end_lvl

odnosi se na submenu, vraća </ul>
Walker_Nav_Menu::end_lvl()

Walker_Nav_Menu::start_el

odnosi se na svaku stavku izbornika, vraća <li> i <a></a>
Walker_Nav_Menu::start_el()

Walker_Nav_Menu::end_el

odnosi se na svaku stavku izbornika, vraća </li>
Walker_Nav_Menu::end_el()

Markup prilagođenog izbornika

<nav class="custom-navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a>
      <ul>
        <li>
          <div class="entry-title">
            <a href="#">Post title</a>
            <span>This is description</span>
          </div>
          <div class="entry-summary">
            <p>The Accessibility Team works to make WordPress accessible to as many people as possible. This means making sure people are not just able to read web pages but also to maintain websites. You are a part of this mission. You benefit from this mission. So in the spirit of one of the largest open-source communities in the world, let’s work on universal accessibility.</p>
          </div>
          <div class="entry-image">
            <img src="https://images.unsplash.com/photo-1495774539583-885e02cca8c2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b4876c41d5e7585486007cab84b34512">
          </div>
        </li>
        <li>
          <div class="entry-title">
            <a href="#">Post title</a>
            <span>This is description</span>
          </div>
          <div class="entry-summary">
            <p>In this Make WordPress Accessibility Handbook you will learn what the best practices are for web accessibility, the many great accessibility tools, the testing we do to improve WordPress, themes, and plugins, and how to get involved in WordPress accessibility.</p>
          </div>
          <div class="entry-image">
            <img src="https://s.w.org/style/images/about/WordPress-logotype-alternative.png">
          </div>
        </li>
        <li>
          <div class="entry-title">
            <a href="#">Post title</a>
            <span>This is description</span>
          </div>
          <div class="entry-summary">
            <p>Below are the web essentials you’ll need to make your site accessible. Other handbook pages explain why these standards are critical to your site. This page tells you how to quickly implement the standards, with WordPress-specific code examples, guidelines, and best-practices.</p>
          </div>
          <div class="entry-image">
            <img src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png">
          </div>
        </li>
      </ul>
    </li>
  </ul>
</nav>

apply_filters( 'the_excerpt', $excerpt )

R-05

Članak Članak

Šablon pojedinačnog članka

Meta i autor

Kategorije i tagovi - get_the_category_list(), the_tags()
Datum - formatiranje i konstante
Autor - get_avatar(), get_the_author_meta(), get_author_posts_url()

Paginacija i navigacija

wp_link_pages()

Accessibility i klasa za čitače ekrana

screen-reader-text

Komentari

Formati članka

Prilagođeni šablon članka

R-07

Članak

Vidžeti i bočna traka

Bočna traka
register_sidebar()
filter widgets_init
get_sidebar()
sidebar.php - dynamic_sidebar(), is_active_sidebar()
Ukoliko je aktivna bočna traka može se dodati klasa na <body>, putem filtera body_class, kako bi se CSS-om lakše definisao layout.

Arhive

wphierarchy.com
Hijerarhija šablona
archives.php - Odnosi se na sve arhive i preuzima od index.php ulogu šablona za arhive.
Prikaz naziva arhive the_archive_title() i filter pomoću koga se može izmeniti get_the_archive_title
Prikaz opisa arhive the_archive_description() i filter pomoću koga se može izmeniti get_the_archive_description
date.php - Odnosi se na sve arhive datuma: godina, mesec i dan; preuzima od archives.php ulogu šablona za arhive datuma. Dodatna klasifikacija se može dobiti upotrebom year.php, month.php i day.php šablona.
author.php - Odnosi se na arhive autora i preuzima od archives.php ulogu šablona za arhive autora. Moguća upotreba avatara, biografije, prilagođenog izbornika za veze ka društvenim mrežama i sl. is_nav_menu()
search.php - Arhiva rezultata pretrage.
searchform.php - Posebni deo šablona koji sadrži formular za pretagu.
get_search_form()
get_search_query()

R-08

HTML

esc_html(), esc_textarea() - ne "izvrši" HTML već ga konvertuje u "običan" tekst i proverava važeće i nevažeće UTF8 karaktere. Pogledati htmlspecialchars()
wp_kses_post(), wp_kses() - stripuje nedozvoljene HTML tagove ali ostavi njihov sadržaj, ne izvršava kratke kodove (shortcodes).
Filteri the_content i the_excerpt - filtriraju sadržaj i pripremaju ga za content, odnosno excerpt. Filter za excerpt vraća sadržaj jednako filtriran kao sa wp_kses_post(), dok filter za content podržava i kratke kodove.

Atributi

esc_attr() - potpuno isto kao i esc_html() - ne "izvrši" HTML već ga konvertuje u "običan" tekst i proverava važeće i nevažeće UTF8 karaktere.

URL

esc_url() - ukoliko nije definisan protokol dodaje http:// na početak bilo kog stringa. Ukoliko je definisan protokol, vratiće samo validan URL sa datim protokolom. Pogledati wp_allowed_protocols().
antispambot() - konvertuje email adresu u HTML entitete.

Javascript

esc_js() - Preporučuje se izbegavanje inline Javascript-a ali ako je baš neophodno, preporučuje se upotreba wp_json_encode() u kombinaciji sa esc_attr() umesto esc_js().
wp_localize_script() - inicijalna upotreba je lokalizacija teksta u Javascript datotekama, međutim mnogo češće se upotrebljava za prosleđivanje različitih vrednosti iz PHP-a u Javascript.

Type	Name	Latest commit message	Commit time
	Failed to load latest commit information.
	wp-content/themes
	.gitignore
	LICENSE
	README.md

wordpress-serbia/theme-development-workshop-2018

Join GitHub today

Clone with HTTPS

Downloading...

Launching GitHub Desktop...

Launching GitHub Desktop...

Launching Xcode...

Launching Visual Studio...

README.md

Radionice za razvijanje WordPress tema

R-01

Child tema za Twentyseventeen temu

Načini modifikacije roditeljske teme kroz child temu

R-02

Samostalna tema - "Radionica"

Minimum za prikaz stranice

Podrazumevani šabloni

Delovi šablona i kondicionali

Osnovni markup unosa i glavni wrapper

R-03

Custom Logo

Automatic Feed Links

Title Tag

Custom Background

Post Thumbnails

Custom Header

Navigation Menus

R-04

Walker_Nav_Menu::start_lvl

Walker_Nav_Menu::end_lvl

Walker_Nav_Menu::start_el

Walker_Nav_Menu::end_el

Markup prilagođenog izbornika

R-05

Meta i autor

Paginacija i navigacija

Accessibility i klasa za čitače ekrana

Komentari

Formati članka

Prilagođeni šablon članka

R-07

Vidžeti i bočna traka

Arhive

R-08

HTML

Atributi

URL

Javascript