Download presentation
Presentation is loading. Please wait.
1
WordPress išvaizdos temos
kūrimas Arūnas Liuiza | 1
2
Hello, world!
3
Hello, world! WordPress išvaizdos temos laikomos wp-content/themes/ katalogo pakatalogiuose Kiekviena tema privalo turėti bent du failus: style.css index.php
4
Style.css Stiliai Failo pradžioje turi būti specialiai suformuotas komentaras – theme header.
5
Style.css /* Theme Name: tiny One Theme URI:http://tribuna.lt/
Description: A clean and simple, Svbtle-inspired theme for a blog. Author: tribuna.lt Version: 0.1 */
6
Index.php Pagrindinis HTML šablonas su PHP intarpais
Jei WordPress neranda kitų, specifinių šablonų, tada naudoja šį.
7
Index.php <!DOCTYPE html> <html> </html>
<head> ... </head> <body> </body> </html>
8
Pakeitimai <link href=”style.css” rel=”stylesheet”> →
<link href=”<?php echo get_stylesheet_directory_uri(); ?>/style.css” rel=”stylesheet”> Taip pat – su javascript ir paveikslėliais <title><?php wp_title('|'); ?></title>
9
wp_head() ir wp_footer()
Teisingam įskiepių veikimui header.php privalo būti panaudota funkcija wp_head(): <head>...<?php wp_head(); ?>...</head> O prieš </body> pabaigą – wp_footer(): … <?php wp_footer(); ?></body></html>
10
Header.php footer.php sidebar.php
Papildomi šablonai Header.php footer.php sidebar.php
11
Header.php footer.php sidebar.php
Pasikartojančias tinklalapio detales galima iškelti į atskirus šablonus ir į pagrindinį šabloną įterpti naudojant funkcijas get_header() // header.php get_footer() // footer.php get_sidebar() // sidebar.php Jei yra keli variantai: get_header('front') // header-front.php get_header('single') // header-single.php
12
Atnaujintas index.php <?php get_header(); ?>
<div id=”content”> ... </div> <?php get_footer(); ?> Header.php <!DOCTYPE html> <html> <head>...</head> <body> <header>...</header> <nav>...</nav> Footer.php <footer>...</footer> </body> </html>
13
Atnaujinta temos struktūra
style.css header.php footer.php index.php
14
The Loop
15
The Loop PHP kodas, WordPress naudojamas turinio (įrašų/puslapių/kt.) vaizdavimui Pradžia: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> Pabaiga: <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?>
16
The Loop <article> <h1>Pavadinimas</h1>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <h1>Pavadinimas</h1> <p>Autorius/data</p> <div>Tekstas</div> </article> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?>
17
Atnaujinas index.php <article> <h1>Pavadinimas</h1>
<?php get_header(); ?> <div id=”content”> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <h1>Pavadinimas</h1> <p>Autorius/data</p> <div>Tekstas</div> </article> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> <?php get_footer(); ?>
18
Turinio įterpimas Template Tags
19
Turinio įterpimas Template tags: the_title() the_author()
the_date()/the_time() the_category/the_tags() the_content() the_excerpt() ... Plačiau:
20
Atnaujinas index.php <article>
<?php get_header(); ?> <div id=”content”> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <p><?php the_author(); ?> / <?php the_date(); ?></p> <div><?php the_content(); ?></div> </article> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> <?php get_footer(); ?>
21
Šablonų hierarchija
22
Šablonų hieararchija
23
Šablonų hierarchija page-apie.php // slug=apie page-15.php // ID=15
page.php // visiems puslapiams index.php // bendras category-sportas.php category-15.php category.php archive.php index.php
24
Atnaujinta temos struktūra
style.css header.php footer.php single.php page.php index.php
25
Papildomi nustatymai functions.php
26
Functions.php Papildomų funkcijų ir nustatymų failas.
Galima kurti naujus “template tags” Galima įjungti papildomas funkcijas Galima prikabinti veiksmus (actions) ir filtrus (filters) Galima pridėti naujus įterpimo kodus (shortcode) Galima pridėti naujus turinio tipus ir taksonomijas Ir kt.
27
Functions.php Nauji template tags. Functions.php:
Function the_copyright($text) { echo “© ”.$text; } Bet kuriame šablone: <?php the_copyright('Petras'); ?>
28
Functions.php Papildomų funkcijų įjungimas
add_theme_support() / post-thumbnails (featured image) post-formats (image/quote/video/aside/kt...) automatic-feed-links (RSS) register_sidebar() / Vietos, kur galima naudoti Widgets register_nav_menu() / Navigacijos meniu
29
Paveikslėliai Template Tag: Functions.php
the_post_thumbnail( $size ) / Functions.php add_image_size( $name, $width, $height, $crop );
30
Paveikslėlių sąrašas
31
Action and filter hooks
Veiksmai ir filtrai Action and filter hooks
32
Actions and filters Actions:
Leidžia atlikti papildomus veiksmus tam tikrais WordPress puslapio generavimo momentais add_action('hook_name','function_name',$priority=10) Functions.php: add_action('init','print_a'); function print_a() { echo 'A'; } Plačiau:
33
Actions and filters Filters
Leidžia modifikuoti WordPress sugeneruotus HTML kodo / turinio gabaliukus add_filter('hook_name','function_name',$priority=10) Functions.php: add_filter('the_title','print_b'); function print_b($title) { return $title.'B'; } Plačiau:
34
„Teisingas“ JavaScript įterpimas
functions.php wp_enqueue_script() / wp_register_script() / function mano_skriptai() { wp_enqueue_script('jquery' ); } add_action( 'wp_enqueue_scripts', 'mano_skriptai' );
35
Užduotis – pilnai pabaigti CSS_Three temą
header.php - meniu valdomas iš WordPress admin panelės - wp_head(); wp_title(); footer.php - JS įterpiama per enqueue script - Copyright įterpiama per the_copyright f-ją. - wp_footer(); sidebar.php - skydeliai valdomi iš WordPress admin panelės
36
Užduotis – pilnai pabaigti CSS_Three temą
front-page.php - rodomas statinis pirmas puslapis - Nuotraukų „karuselė“ valdoma per WordPress - naudojamas „the Loop“ ir „template tags“ (the_content(); the_title(); ir kt.) index.php - paslėpta nuotraukų karuselė - the_post_thumbnail();
37
Įterpimo kodai shortcode
38
Įterpimo kodai (shortcode)
Galimybė įterpti įvarius elementus į įrašo/puslapio turinį naudojant sintaksę [pavadinimas] add_shortcode('name','function_name'); Functions.php: add_shortcode('vardas','vardas_shortcode'); function vardas_shortcode($args,$content) { return 'Petras'; } Įrašo/puslapio tekste: [vardas] Plačiau:
39
Papildomi turinio tipai ir taksonomijos
Custom post types and taxonomies
40
Turinio tipai Standartiškai – post ir page, bet galima pridėti papildomų, per functions.php register_post_type() / Functions.php: function codex_custom_init() { $args = array( 'public' => true, 'label' => __('Books', 'mm2') ); register_post_type( 'book', $args ); } add_action( 'init', 'codex_custom_init' );
41
Taksonomijos Standartiškai – category ir post_tag, bet galima pridėti papildomų: register_taxonomy() / Functions.php: add_action( 'init', 'create_book_tax' ); function create_book_tax() { register_taxonomy( 'genre', 'book', array( 'label' => __( 'Genre' ), 'rewrite' => array( 'slug' => 'genre' ), 'hierarchical' => true ) ); }
42
https://gist.github.com/ideag/11168061
43
Vertimas <?php $p = __('tekstas', 'tema'); ?> <?php _e('tekstas', 'tema'); ?>
44
Užduotis
Similar presentations
