WordPress
išvaizdos temos
kūrimas

Arūnas Liuiza

WordPress Core Contributor, WordPress Kaunas Meetup co-organizer, WordCamp, WordSesh, TEDx speaker and one of the editors of the Lithuanian WordPress translation team.

 

Free, premium and custom WordPress plugin developer

 

Engineering Team Lead at

Query Monitor

Puikus įskiepis, sukurtas
John Blackbourn

 

Privalomas bet kuriam WordPress developeriui

tailblocks.cc
 

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: WordPress Theme101
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 šį.
<?php get_header(); ?>
<?php get_footer(); ?>

header.php

  • HTML dokumento "viršus" - <head> dalis + navigacija ir pan
<!DOCTYPE html>
<html>
  <head>
    <title>WordPress Theme101</title>
    <meta charset="UTF-8" />
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>

header.php

  • pridedame dinamines dalis
    • language_attributes();
    • body_class();
    • wp_head();
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
	<?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>

footer.php

  • HTML dokumento "apačia" - </body> ir </html>
  </body>
</html>

footer.php

  • Pridedame dinamines dalis
    • wp_footer();
    <?php wp_footer(); ?> 
  </body>
</html>

Š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' );

 

index.php

  • Padaliname HTML dokumentą į logiškas dalis
<?php get_header(); ?>
<?php get_template_part( 'part', 'hero' ); ?>
<?php get_template_part( 'part', 'cta' ); ?>
<?php get_template_part( 'part', 'footer' ); ?>
<?php get_footer(); ?>

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

index.php

  • Perkeliame navigation ir footer dalis į atitinkamai header.php ir footer.php
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

template parts -> blocks

Š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

add_action( 'wp_enqueue_scripts', 'theme101_assets' );
function theme101_assets() {
  wp_register_style( 
    'theme-style', 
    'https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css'
  );
  wp_enqueue_style( 'theme-style' );
}

Į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

Custom Fields

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

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();

Klausimai?

ask@arunas.co

slid.es/arunas/wordpress-theme

WordPress išvaizdos temos kūrimas

By Arūnas Liuiza

WordPress išvaizdos temos kūrimas

  • 1,058

More from Arūnas Liuiza