WordPress išvaizdos temos kūrimas Arūnas Liuiza | 2013-03-227 1
Hello, world!
Hello, world! WordPress išvaizdos temos laikomos wp-content/themes/ katalogo pakatalogiuose Kiekviena tema privalo turėti bent du failus: style.css index.php
Style.css Stiliai Failo pradžioje turi būti specialiai suformuotas komentaras – theme header.
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 */
Index.php Pagrindinis HTML šablonas su PHP intarpais Jei WordPress neranda kitų, specifinių šablonų, tada naudoja šį.
Index.php <!DOCTYPE html> <html> </html> <head> ... </head> <body> </body> </html>
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>
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>
Header.php footer.php sidebar.php Papildomi šablonai Header.php footer.php sidebar.php
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
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>
Atnaujinta temos struktūra style.css header.php footer.php index.php
The Loop
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; ?>
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; ?>
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(); ?>
Turinio įterpimas Template Tags
Turinio įterpimas Template tags: the_title() the_author() the_date()/the_time() the_category/the_tags() the_content() the_excerpt() ... Plačiau: http://tiny.lt/p7tf75u
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(); ?>
Šablonų hierarchija
Šablonų hieararchija http://tiny.lt/x2ne5df
Š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
Atnaujinta temos struktūra style.css header.php footer.php single.php page.php index.php
Papildomi nustatymai functions.php
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.
Functions.php Nauji template tags. Functions.php: Function the_copyright($text) { echo “© ”.$text; } Bet kuriame šablone: <?php the_copyright('Petras'); ?>
Functions.php Papildomų funkcijų įjungimas add_theme_support() / http://tiny.lt/epd5p3s post-thumbnails (featured image) post-formats (image/quote/video/aside/kt...) automatic-feed-links (RSS) register_sidebar() / http://tiny.lt/5xg9hps Vietos, kur galima naudoti Widgets register_nav_menu() / http://tiny.lt/ba3n95r Navigacijos meniu
Paveikslėliai Template Tag: Functions.php the_post_thumbnail( $size ) / http://tiny.lt/4r9dt Functions.php add_image_size( $name, $width, $height, $crop ); http://tiny.lt/924m65
Paveikslėlių sąrašas https://gist.github.com/ideag/10956058
Action and filter hooks Veiksmai ir filtrai Action and filter hooks
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: http://tiny.lt/g2h52e
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: http://tiny.lt/eufgxdw
„Teisingas“ JavaScript įterpimas functions.php wp_enqueue_script() / http://tiny.lt/g77faxk wp_register_script() / http://tiny.lt/mfr6ur function mano_skriptai() { wp_enqueue_script('jquery' ); } add_action( 'wp_enqueue_scripts', 'mano_skriptai' );
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
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();
Įterpimo kodai shortcode
Į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: http://tiny.lt/d6rhccw
Papildomi turinio tipai ir taksonomijos Custom post types and taxonomies
Turinio tipai Standartiškai – post ir page, bet galima pridėti papildomų, per functions.php register_post_type() / http://tiny.lt/cpt Functions.php: function codex_custom_init() { $args = array( 'public' => true, 'label' => __('Books', 'mm2') ); register_post_type( 'book', $args ); } add_action( 'init', 'codex_custom_init' );
Taksonomijos Standartiškai – category ir post_tag, bet galima pridėti papildomų: register_taxonomy() / http://tiny.lt/neb6hg 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 ) ); }
https://gist.github.com/ideag/11168061
Vertimas <?php $p = __('tekstas', 'tema'); ?> <?php _e('tekstas', 'tema'); ?>
Užduotis http://www.css3templates.co.uk