Cum sa faci o tema WordPress generata de site-ul Underscores.me
Prezentare MeetUp WordPress aprilie. Tema realizata e aici.
Cum sa faci o tema WordPress generata de site-ul Undesrscores.me nu e atat de greu. Cateva explicatii din pdf-ul de prezentare.
→ Inainte sa generezi tema de pe site-ul underscores.me trebuie sa populezi in platforma wordpress ceva continut ca mai tarziu sa poti verifica daca css-ul este corect facut. Theme Unit Test iti genereaza in admin continutul necesar. (vezi pdf pagina 5).
→ Urmatorul pas este instalarea si activarea pluginului de verificare tema. Acesta ajuta la dezvoltarea temei prin verificarea codurilor introduse in tema.
→ Acum urmeaza generarea temei de pe site-ul underscores.me. Se complecteaza campurile aferente. (vezi pdf pagina 8). Noua tema generata se instaleaza in admin si se activeaza.
→ Tema contine codurile html, php si css de baza sa poti construii pe ea tot ce este necesar (vezi pdf pagina 11).
→ Am eliminat din tema div-ul id page din header.php care se termina in footer.php. Clasa respectiva te poate ajuta doar daca vrei sa faci un tmeplate pe varinata boxed. Eu nu l-am folosit in cazul de fata (pdf paginile 12 si 13).
→ Am folosit pentru acesta tema doar partea de responsive din css-ul general din Bootstrap.
→ Creare folder nou în tema numit css. Creare fisier în folderul css cu numele responsive.css, în care se afla codurile responsive din bootstrap 3.3.7 începând de la linia 1584 la 2250.
→ În functions.php se adauga codul următor. require get_template_directory() . ‘/inc/script.php’; Se creaza un fisier nou în folderul inc din tema cu numele script.php. În script.php se adauga acest cod:
<?php
function responsive() {
wp_enqueue_style ( 'responsive', get_template_directory_uri() . '/css/responsive.css');
}
add_action( 'wp_enqueue_scripts', 'responsive' );
→ Se include in tema libraria jQuery in cazul in care ne vom folosii de ea trebuie activata (vezi pdf pagina 18).
→ Se complectea in fisierul script.php din folderul inc codurile de php necesari dezvoltarii temei. Evident se pot adauga aici si alte coduri, functii pentru dezvoltarea temei (vezi pdf script.php).
→ Urmatorul pas a fost sa sterg din fisierul header.php codurile default din tema care genereaza titlul site-ului si descrierea. aici este doar o preferinta personala ele pot fi lasate si dezvoltate. am inlocuit cu alte coduri care sa afiseze un logo in cazul in care etse incarcat sau daca nu sa apara titlul (pdf pagina 20).
→ Urmatorul pas a fost sa mut din fisierul header.php codul pentru meniu. L-am scos din id-ul header al temei (pdf pagina 21). Asta e ceva optional.
→ Urmeaza indentificarea tuturor claselor din tema si construit css-ul aferent pentru fiecare in parte (pdf general-css). De aceea este important sa ai continut in site atunci cand construieste o tema sa poti indentifica toate elementele necesare ce trebuiesc stilizate.
→ Inregistrare widget nou in admin am introdus codurile in functia deja existenta default din tema meetup_wp_widgets_init (pdf pagina 23):
register_sidebar( array( 'name' => esc_html__( 'Top Header Right', 'meetup_wp' ), 'id' => 'header-right', 'description' => esc_html__( 'Add widgets here.', 'meetup_wp' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );
→ Pentru afisarea continutului in fisierul header.php am introdus codurile (pdf pagina 24):
<div class="header_html"> <?php dynamic_sidebar( 'header-right' ); ?> </div>
→ Se introduc clasele pentru partea de responsive in index.php si celelalte fisiere din tema page.php, 404.php, archive.php, search.php, single.php, sidebar.php, footer.php (pdf pagina 25).
→ Inregistrarea in fisierul functions.php pentru inca 3 wigeturi exact cum am procedat si la widgetul pentru partea de sus din fisierul hedaer.php (pdf pagina 29).
→ Afisarea codului in fisierul footer.php (pdf pagina 30).
→ Cele 4 noi zone pentru widgeturi inregistrate se pot observa in admin-Aspect-Piese. (pdf pagina 31).
→ Pentru optiunile temei am folosit Theme Customization API de la WordPress. Creare fisier options.php in folderul inc. Fisierul trebuie chemat in functions.php:
/** * Implement Options. **/ require get_template_directory() . '/inc/options.php';
→ Toate codurile indroduse in fisierul options.php se gasesc si in acest pdf.
→ Pentru prima pagina am creat un fisier numit template-home.php in folderul template. Se poate folosi pentru a pune mark-up html (pdf pagina 38).
→ Creare css pentru codul dinf fisier (pdf pagina 39).
Pentru alte nelamuriri nu ezitati sa ma contactati sau intrebari le puteti pune direct in sectiunea de comentarii.
General-css