ako na vlastne wp temy
TRANSCRIPT
![Page 1: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/1.jpg)
Ako na vlastne WP temy
![Page 2: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/2.jpg)
WP theme dev @ webikon
soundsystem @ cyklokuchyňa
![Page 3: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/3.jpg)
Preco stavat custom a neklikat premium temy?
![Page 4: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/4.jpg)
20 sliderov!
15 dizajnov
60 shortcodov
50 templatov
18 druhov tlacitok
5 typov menu
800 novych nastaveni v backende
onepage parallax
nekonecno farebnych kombinacii
![Page 5: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/5.jpg)
![Page 6: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/6.jpg)
ako zacat?
• codex.wordpress.org/Theme_Development
• index.php + style.css
• zaklady sa nauc “from scratch” a potom si vyber starter temu
• _s (underscores.me)
• components (components.underscores.me)
![Page 7: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/7.jpg)
nevymyslaj koleso odznova
• codex.wordpress.org/Function_Reference
• <?php echo url_shorten( 'http://www.example.com/an/article/with/a/very/long/url' );
• example.com/an/article/with/a/ve...
![Page 8: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/8.jpg)
Neopakuj sa, get_template_part();
![Page 9: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/9.jpg)
archive.php<?php
while( have_posts() ) : the_post();
if( get_post_type() == ‘post’ ) {
…markup pre post…
} elseif( get_post_type() == ‘product’ ) { …markup pre produkt…
![Page 10: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/10.jpg)
<?php
while( have_posts() ) : the_post();get_template_part( ‘loop’, get_post_type() );
loop-post.phploop-product.php…
![Page 11: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/11.jpg)
Nauc sa pouzivat hooky!
![Page 12: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/12.jpg)
• do_action(); apply_filters();
• add_action();add_filter();
• codex.wordpress.org/Plugin_API/Hooks
![Page 13: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/13.jpg)
• template:do_action( ‘my_action’ );
• plugin:add_action( ‘my_action’, ‘my_function’ )function my_funcion() { echo ‘hello wordcamp’;}
![Page 14: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/14.jpg)
• Nazov page *
• function add_asterisk( $title, $post_id ) { if( get_post_type( $post_id ) == ‘page’ ) { $title = $title . ‘*’; } return $title; }
• add_filter( ‘the_title’, ‘add_asterisk’ );
![Page 15: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/15.jpg)
• function order_posts( $query ) { $query->set( ‘order’, ‘ASC’ ); }
• add_action( ‘pre_get_posts’, ‘order_posts’ );
![Page 16: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/16.jpg)
prezentacia = tema funkcionalita = modul
• templaty = tema
• CPT, taxonomie, metaboxy => modul
• mu-plugins FTW
![Page 17: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/17.jpg)
mu-plugins
• funguju bez aktivacie
• nedaju sa deaktivovat ani zmazat z admin rozhrania
• klient o nich ani nevie
![Page 18: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/18.jpg)
wp-content/mu-plugins/hello-wcba.php
<?php
// print hello wordcamp in footer function wcba_hello() {
echo ‘Hello Wordcamp Bratislava’;
}
add_action( ‘wp_footer’, ‘wcba_hello’ );
![Page 19: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/19.jpg)
boostrap? foundation?
• pouzivaj sass/less a grunt/gulp
• includuj len to co potrebujes
• pouzivaj mixiny
• minifikuj v produkcii
![Page 20: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/20.jpg)
foundation.css
<div class=“site row”> <div class=“site-content small-12 medium-8 large—9”>…</div> <div class=“site-sidebar small-12 medium-4 large-3>…</div> <a class=“button secondary custom-class”…
![Page 21: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/21.jpg)
foundation.scss
<div class=“site”> <div class=“site-content”>…</div> <div class=“side-sidebar”>…</div>
.site { @include grid-row(); &-content { @include grid-column(); @include breakpoint( medium ) { @include grid-column(8); …
![Page 23: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/23.jpg)
Neboj sa customizera
![Page 24: Ako na vlastne WP temy](https://reader031.vdocuments.net/reader031/viewer/2022030214/588af5bd1a28abf8548b564d/html5/thumbnails/24.jpg)
diky