Home

Jak vytvořit vlastní šablonu pro WordPress – 8 díl

V díle sedmém jsme se věnovali výpisu komentářů, které se zobrazují na detailu článku a stránky. V dnešním díle doplníme výpis článků, ať již se jedná o kategorii, nebo archív, o různá druhy post formátů.

Post formáty jsou různé druhy článků, které umožňují zobrazovat různě upravený výpis, dle toho, o jaký post formát se jedná. Například post formát video nepotřebuje mít textový obsah, nebo citace, nepotřebuje titulek.

Nejprve však musíme umožnit šabloně použití post formátů.

Do functions.php vložíme následující funkci:

add_theme_support( 'post-formats', array(
    'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery', 'status', 'chat'
) );

Díky tomu řekneme WordPressu, že šablona podporuje post formáty. V tuto chvíli si trochu upravíme functions.php. Vytvoříme funkci blank_setup a tu zavěsíme do hooku after_setup_theme.

add_action( 'after_setup_theme', 'blank_setup' );

Tento hook využijeme, protože se provede dříve, než init, kdy už pro některá nastavení může být pozdě.
Do této funkce přesuneme podporu post formátů, register menu a thumbnails.

Výsledek bude vypadat takto:

if ( !function_exists('blank_setup') ) {
 
  function blank_setup(){
 
    register_nav_menu('primary-menu', __('Primary Menu','theme'));
 
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 56, 56, true ); // Normal post thumbnails
    add_image_size( 'sidebar', 50, 50, true ); // Sidebar thumbnail
    add_image_size( 'blog', 619, 300, true ); // Blog thumbnail
 
 
    add_theme_support( 'post-formats', array(
	   'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
    ) );
 
  }
 
}
 
add_action( 'after_setup_theme', 'blank_setup' );

Zvykněte si používat function_exists, když děláte šablonu, v případě šablony tak umožníte vytvoření child theme.
V pravém sloupci se vám objeví nový metabox.
post formats

Post formáty můžete přejmenovávat a různě upravovat, ale jejich počet je neměnný. Takže nové není možné přidat.

Nyní začneme upravovat content.php

Protože se nám bude špatně pracovat s velkým množstvím kódu, vezmeme meta, které jsme vytvořili a dáme je do zvláštního souboru post-meta.php, do nově vytvořené složky inc.
Celý kód zkopírujeme do nového souboru a na jeho místo vložíme:

<?php get_template_part( 'inc/post-meta' ); ?>

A nyní začneme vytvářet varianty content pro různé post formáty.

Content-gallery.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	      <?php the_title(); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
	  </h2>
  <?php endif; ?>    
      <div class="post-content">
	     <?php if ( is_single() || ! get_post_gallery() ) : ?>
        <?php echo the_content();?>
       <?php else: ?>
	       <?php echo get_post_gallery(); ?>
          <?php get_template_part( 'inc/post-meta' ); ?>
          <a class="btn btn-danger" href="<?php the_permalink(); ?>">
            <?php _e('Read more','theme'); ?>
          </a>
        <?php endif; ?>
     </div>
</div>

Content-link.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	      <?php the_title(); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
	  </h2>
  <?php endif; ?>
  <?php get_template_part( 'inc/post-meta' ); ?>    
      <div class="post-content">
	     <?php echo the_content();?>
     </div>
</div>

Content-image.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	      <?php the_title(); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
	  </h2>
  <?php endif; ?>
      <div class="post-content">
	     <?php echo the_content();?>
     </div>
  <?php get_template_part( 'inc/post-meta' ); ?> 
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Content-audio.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	      <?php the_title(); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
	  </h2>
  <?php endif; ?>
  <?php get_template_part( 'inc/post-meta' ); ?> 
      <div class="post-content">
	     <?php echo the_content();?>
     </div>
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Content-video.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	      <?php the_title(); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
	  </h2>
  <?php endif; ?>
      <div class="post-content">
	     <?php echo the_content();?>
     </div>
  <?php get_template_part( 'inc/post-meta' ); ?>   
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Content-aside.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
      <div class="post-content content-aside">
	     <?php echo the_content();?>
     </div>
  <?php get_template_part( 'inc/post-meta' ); ?>   
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Pro tento formát lehce upravíme styly

.content-aside{
  margin-top:30px;
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding:20px 20px 20px 40px;
}

Content-quote.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
      <div class="post-content content-quote">
	     <?php echo the_content();?>
     </div>
  <?php get_template_part( 'inc/post-meta' ); ?>   
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Také lehce upravíme styly

.content-quote{
  margin-top:30px;
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding:20px 20px 20px 40px;
  background-color:#dddddd;
  border-left:solid 5px #d43f3a;
}

Content-status.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
      <div class="post-content content-status">
	     <?php echo the_content();?>
     </div>
  <?php get_template_part( 'inc/post-meta' ); ?>   
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Styl statusu je podobný aside, takže do css jen přidáme řádek:

.content-aside,
.content-status

tím mají aside i status stejný styl.

Content-chat.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	      <?php the_title(); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
	  </h2>
  <?php endif; ?>
      <div class="post-content">
	     <?php echo the_content();?>
     </div>
  <?php get_template_part( 'inc/post-meta' ); ?>   
  <?php if ( !is_single() ) : ?> 
    <a class="btn btn-danger" href="<?php the_permalink(); ?>">
      <?php _e('Read more','theme'); ?>
    </a>     
  <?php endif; ?>
</div>

Content-none.php

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php if ( is_single() ) : ?> 
    <h1 class="title">
	    <?php _e( 'Nothing Found', 'theme' ); ?>
	  </h1>
  <?php else: ?>
    <h2 class="title">
	    <?php _e( 'Nothing Found', 'theme' ); ?>
	  </h2>
  <?php endif; ?>
      <div class="post-content">
	     <?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
	       <p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'theme' ), admin_url( 'post-new.php' ) ); ?></p>
	     <?php elseif ( is_search() ) : ?>
	       <p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with different keywords.', 'theme' ); ?></p>
	     <?php get_search_form(); ?>
	     <?php else : ?>
	       <p><?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'theme' ); ?></p>
	     <?php get_search_form(); ?>
	     <?php endif; ?>
     </div>
</div>

A to by pro dnešek mohlo stačit. Sice to na první pohled vypadá jako mnoho, stále se opakujícího kódu, jen s malými změnami, ale všimněte si, jak se změnil výpis post formátu audio

screenshot-by-nimbus

Navíc, díky speciálnímu souboru pro každý post formát, můžete jejich vzhled více odlišit. Například u magazínů jsem viděl zobrazení ikonek, které označovaly určité post formáty.
Protože vás nechci nutit psát celý kód, šablonu v aktuálním stavu si můžete stáhnout zde.

Seriál: Jak vytvořit vlastní šablonu pro WordPress

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

10 Comments

  5. Bendik

    Zdravím,

    jen chci upozornit na chybu v kódu, nevím přesně kde, ale widgety pro nejnovější příspěvky atd se zobrazují dvakrát.

    Odpověď
    1. Dan

      Chyba je v souboru sidebar.php kde v podmínce voláme dynamic_sidebar funkci, ale měli bychom volat is_dynamic_sidebar

      Odpověď

  6. Pingback: Jak vytvořit vlastní šablonu pro WordPress – 3 díl - Musilda.cz

  7. Pingback: Jak vytvořit šablonu pro Wordpress - 1 díl

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *