Theme development workshop 2018/2019.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
wp-content/themes
.gitignore
LICENSE
README.md

README.md

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

Č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:

Pozivanje stilova i skripti:

Hook za učitavanje stilova i skripti:

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

R-02

Članak

Samostalna tema - "Radionica"

Minimum za instaliranje bez grešaka:

Minimum za prikaz stranice

Podrazumevani šabloni

Više o šablonima na wphierarchy.com.

Delovi šablona i kondicionali

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

Title Tag

Custom Background

Post Thumbnails

Custom Header

Navigation Menus

R-04

Članak

Walker_Nav_Menu::start_lvl

Walker_Nav_Menu::end_lvl

Walker_Nav_Menu::start_el

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>

R-05

Članak Članak

Šablon pojedinačnog članka

Meta i autor

Paginacija i navigacija

Accessibility i klasa za čitače ekrana

Komentari

Formati članka

Prilagođeni šablon članka

R-07

Članak

Vidžeti i bočna traka

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.