WordPress
išvaizdos temos
kūrimas

Arūnas Liuiza

WordPress Core Contributor, WordPress Kaunas Meetup co-organizer, WordCamp (Lithuania 2015, Riga 2016, 2017, Stockholm 2016, 2017) speaker and one of the editors of the Lithuanian WordPress translation team.

Free & premium WordPress plugin developer:

WordPress Expert on Codeable;

Founder of Arunas.co and EcoSim / Vini.lt;

Lecturer at Kaunas College.

Query Monitor

Puikus įskiepis, sukurtas
John Blackbourn

Privalomas bet kuriam WordPress developeriui

HTML5up

Hello World!

• Visos WordPress temos yra viename kataloge
  • wp-content/themes
     
• Minimaliai temai reikalingi failai:
  • style.css
  • index.php

style.css

• Temos CSS stiliai
   
• Failo pradžioje - theme header komentaras

/*
Theme Name: Hello World!
Theme URI: https://arunas.co/
Description: A hello world theme
Author: Arūnas Liuiza
Version: 0.1
*/

index.php

• Pagrindinis HTML šablonas su PHP intarpais
   
• Jei WordPress neranda kitų, specifinių šablonų, tada naudoja šį.

Pakeitimai

• Visų asset'ų kelio pradžioje - pridėti

  • <?php echo get_stylesheet_directory_uri(); ?>/
    
    

• <title> elemento viduje:

  • <?php wp_title(); ?>
    

Pakeitimai (2)

• Teisingam įskiepių veikimui prieš </head> privalo būti panaudota funkcija wp_head()
   
• O prieš </body> pabaigą – wp_footer()

Sveikinimai!

Papildomi šablonai

Pasikartojantiems blokams:

• header.php - get_header();
• footer.php - get_footer();
• sidebar.php -get_sidebar();

Jei yra keli variantai:

• header-front.php - get_header( 'front' );
• header-single.php - get_header( 'single' );

Šablonų dalys

Universali funkcija - get_template_part()

• loop-main.php - get_template_part( 'loop', 'main' );
• loop-spec.php - get_template_part( 'loop', 'spec' );
• loop-third.php - get_template_part( 'loop', 'third' );

The Loop

Turinio vaizdavimas

Pradžia

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Turinio bloko HTML

Pabaiga

<?php endwhile; endif; ?>

Template Tags

• the_title()
• the_author()
• the_date()/the_time()
• the_category/the_tags()
• the_content()
• the_excerpt()
   
• ...
   
• Visas sąrašas

In action

<?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; endif; ?>

Šablonų hierarchija
wphierarchy.com

Pavyzdžiai

• 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

/whois functions.php

• WordPress išvaizdo temos failas, kur galima* pridėti papildomą kodą;
   
• Užkraunamas su kiekvienu WordPress puslapiu​
   
• Labai gerai kodui kuris yra specifinis konkrečiai išvaizdos temai;
   
• Tas kodas nustos būti naudojamas jei pakeisit išvaizdos temą;
   
• 5.000 eilučių kodo ir 56 kitų failų include'ai - BAD idea

add_theme_support()

• post-thumbnails (featured image)
   

• post-formats (image/quote/video/aside/kt...)
   

• automatic-feed-links (RSS)
   

• title-tag (vietoj <title>)

Paveikslėliai

// functions.php
// add_image_size( $name, $width, $height, $crop );
add_image_size( 'temos-didelis', 800, 600, true );

// loop.php
the_post_thumbnail( 'temos-didelis' );

Lokalizavimas

// style.css - theme headeryje
Text Domain: temos-katalogas

// visur kitur
__( 'Translatable text', 'temos-katalogas' );
_e( 'Translatable text', 'temos-katalogas' );

Stiliai ir skriptai

// style.css - theme headeryje
add_action( 'wp_enqueue_scripts', 'arunas_scripts' );
function arunas_scripts() {
  wp_register_style( 
    'theme-style', 
    get_template_directory_uri(). '/style.css' ) 
  );
  wp_enqueue_style( 'theme-style' );

  wp_register_style( 
    'theme-script',
    get_template_directory_uri(). '/script.js' ) 
    array( 'jquery' ),
    '0.1.0',
    true
 );
 wp_enqueue_style( 'theme-script' );
}

Įterpimo kodas - shortcode

// functions.php
add_shortcode( 'vardas', 'vardas_shortcode' );

function vardas_shortcode( $args, $content ) {
  return 'Petras';
}

// įrašo/puslapio tekste
[vardas]

Įterpimo kodas - shortcode

// functions.php
add_shortcode( 'kitas', 'kitas_shortcode' );

function kitas_shortcode( $args, $content ) {
  $defaults = array(
    'title'       => __( 'Some Title', 'temos-katalogas' ),
    'description' => '',
  );
  $args = wp_parse_args( $args, $defaults );
  $result = "<strong>{$args['title]}</strong>";
  if ( $args['description'] ) {
    $result .= "- <em>{$args['description]}</em>";
  }
  if ( $content ) {
    $result .= '<br />' . do_shortcode( $content );
  }
  return $result;
}

// įrašo/puslapio tekste
[kitas title="Vardas" description="kardas"]tekstas[/kitas]

Meniu

// functions.php
register_nav_menu( 'header-menu', 'Header Menu' );

// header.php
$args = array(
  'theme_location'  => 'header-menu',
  'container'       => 'nav',
  'container_class' => 'my-menu-class',
);
wp_nav_menu( $args );

// Custom walker
// https://gist.github.com/kosinix/5544535

Valdikliai

// functions.php
$args = array(
  'name' => 'Main Sidebar',
  'id' => 'sidebar-1',
  'description' => 'Main widget area',
  'before_widget' => '<li id="%1$s" class="widget %2$s">',
  'after_widget'  => '</li>',
  'before_title'  => '<h2 class="widgettitle">',
  'after_title'   => '</h2>',
);
register_sidebar( $args );

// sidebar.php
<ul id="sidebar">
<?php if ( ! dynamic_sidebar() ) : ?>
	<li>{static sidebar item 1}</li>
	<li>{static sidebar item 2}</li>
<?php endif; ?>
</ul>

Custom valdikliai

// functions.php
function arunas_load_widget() {
    register_widget( 'Arunas_Widget' );
}
add_action( 'widgets_init', 'arunas_load_widget' );

include_once( 'includes/arunas-widget.php' );
// https://gist.github.com/ideag/9a75ad25c16cbaf413f5110012260bbb

Custom Fields

// loop-main.php
echo get_post_meta( get_the_id(), 'field_name, true );

Body klasės

// header.php
<body <?php body_class(); ?>

Custom Loop

<?php
 
// The Query
$query1 = new WP_Query( $args );
 
// The Loop
while ( $query1->have_posts() ) {
    $query1->the_post();
    echo '<li>' . get_the_title() . '</li>';
} 
wp_reset_postdata();

Customizer

add_action( 'customize_register', 'arunas_customize_register' );
function arunas_customize_register( $wp_customize ) {
  // registruoti customizer objektus
}

Customizer - Setting

$wp_customize->add_setting( 
  'setting_id', 
  array(
    'type' => 'theme_mod', // or 'option'
    'capability' => 'edit_theme_options',
    'theme_supports' => '', // Rarely needed.
    'default' => '',
    'transport' => 'refresh', // or postMessage
    'sanitize_callback' => '',
    'sanitize_js_callback' => '', // Basically to_json.
  )
);

Customizer - Control

$wp_customize->add_control( 
  'setting_id', 
  array(
    'type' => 'date',
    'priority' => 10, // Within the section.
    'section' => 'colors', // Required, core or custom.
    'label' => __( 'Date' ),
    'description' => __( 'This is a date control with a red border.' ),
    'input_attrs' => array(
      'class' => 'my-custom-class-for-js',
      'style' => 'border: 1px solid #900',
      'placeholder' => __( 'mm/dd/yyyy' ),
    ),
    'active_callback' => 'is_front_page',
  )
);

Control tipai

• Built-in:
  • <input>
    • text, hidden, number, range, url, tel, email, search, time, date, datetime, week
  • checkbox
  • textarea
  • radio
  • select
  • dropdown-pages

Control tipai

WP_Customize_Color_Control

WP_Customize_Media_Control

WP_Customize_Upload_Control

WP_Customize_Cropped_Image_Control

$wp_customize->add_control( 
  new WP_Customize_Color_Control( 
    $wp_customize, 
    'color_control', 
     array(
      'label'   => __( 'Accent Color', 'theme_textdomain' ),
      'section' => 'media',
    ) 
  ) 
);

Customizer - Section

$wp_customize->add_section( 
  'custom_css', 
  array(
    'title' => __( 'Custom CSS' ),
    'description' => __( 'Add custom CSS here' ),
    'panel' => '', // Not typically needed.
    'priority' => 160,
    'capability' => 'edit_theme_options',
    'theme_supports' => '', // Rarely needed.
  ) 
);

Standartinės sekcijos

Customizer - Partials

$wp_customize->selective_refresh->add_partial( 
  'setting_id', array(
    'selector' => '.site-description',
    'container_inclusive' => false,
    'render_callback' => 'callback_function',
  )
);

Klausimai?