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_script( 
    'theme-script',
    get_template_directory_uri(). '/script.js',
    array( 'jquery' ),
    '0.1.0',
    true
 );
 wp_enqueue_script( '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

Title ID Priority
Site Title & Tagline title_tagline 20
Colors colors 40
Header image header_image 60
Background image background_image 80
Menus (Panel) nav_menus 100
Widgets (Panel) widgets 110
Static Front Page static_front_page 120
default 160
Additional CSS custom_css 200

Customizer - Partials

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

Klausimai?

klausk@aruno.lt

slid.es/arunas/wordpress-theme-codeacademy

WordPress išvaizdos temos kūrimas

By Arūnas Liuiza

WordPress išvaizdos temos kūrimas

  • 1,852

More from Arūnas Liuiza