{"id":2085,"date":"2014-10-18T21:23:27","date_gmt":"2014-10-18T21:23:27","guid":{"rendered":"http:\/\/musilda.cz\/?p=2085"},"modified":"2014-10-18T21:23:27","modified_gmt":"2014-10-18T21:23:27","slug":"jak-vytvorit-vlastni-sablonu-pro-wordpress-8-dil","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-vytvorit-vlastni-sablonu-pro-wordpress-8-dil\/","title":{"rendered":"Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress \u2013 8 d\u00edl"},"content":{"rendered":"\n

V d\u00edle sedm\u00e9m jsme se v\u011bnovali v\u00fdpisu koment\u00e1\u0159\u016f, kter\u00e9 se zobrazuj\u00ed na detailu \u010dl\u00e1nku a str\u00e1nky. V dne\u0161n\u00edm d\u00edle dopln\u00edme v\u00fdpis \u010dl\u00e1nk\u016f, a\u0165 ji\u017e se jedn\u00e1 o kategorii, nebo arch\u00edv, o r\u016fzn\u00e1 druhy post form\u00e1t\u016f.<\/p>\n\n\n\n

Post form\u00e1ty jsou r\u016fzn\u00e9 druhy \u010dl\u00e1nk\u016f, kter\u00e9 umo\u017e\u0148uj\u00ed zobrazovat r\u016fzn\u011b upraven\u00fd v\u00fdpis, dle toho, o jak\u00fd post form\u00e1t se jedn\u00e1. Nap\u0159\u00edklad post form\u00e1t video nepot\u0159ebuje m\u00edt textov\u00fd obsah, nebo citace, nepot\u0159ebuje titulek.<\/p>\n\n\n\n

Nejprve v\u0161ak mus\u00edme umo\u017enit \u0161ablon\u011b pou\u017eit\u00ed post form\u00e1t\u016f.<\/p>\n\n\n\n

Do functions.php vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed funkci:<\/p>\n\n\n\n

add_theme_support( 'post-formats', array(\n    'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery', 'status', 'chat'\n) );<\/code><\/pre>\n\n\n\n
D\u00edky tomu \u0159ekneme WordPressu, \u017ee \u0161ablona podporuje post form\u00e1ty. V tuto chv\u00edli si trochu uprav\u00edme functions.php. Vytvo\u0159\u00edme funkci blank_setup a tu zav\u011bs\u00edme do hooku after_setup_theme.<\/p>\n\n\n\n
add_action( 'after_setup_theme', 'blank_setup' );<\/code><\/pre>\n\n\n\n
Tento hook vyu\u017eijeme, proto\u017ee se provede d\u0159\u00edve, ne\u017e init, kdy u\u017e pro n\u011bkter\u00e1 nastaven\u00ed m\u016f\u017ee b\u00fdt pozd\u011b.
Do t\u00e9to funkce p\u0159esuneme podporu post form\u00e1t\u016f, register menu a thumbnails.<\/p>\n\n\n\n
V\u00fdsledek bude vypadat takto:<\/p>\n\n\n\n
if ( !function_exists('blank_setup') ) {\n\n  function blank_setup(){\n\n    register_nav_menu('primary-menu', __('Primary Menu','theme'));\n\n    add_theme_support( 'post-thumbnails' );\n    set_post_thumbnail_size( 56, 56, true ); \/\/ Normal post thumbnails\n    add_image_size( 'sidebar', 50, 50, true ); \/\/ Sidebar thumbnail\n    add_image_size( 'blog', 619, 300, true ); \/\/ Blog thumbnail\n\n\n    add_theme_support( 'post-formats', array(\n\t   'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',\n    ) );\n\n  }\n\n}\n\nadd_action( 'after_setup_theme', 'blank_setup' );<\/code><\/pre>\n\n\n\n
Zvykn\u011bte si pou\u017e\u00edvat function_exists, kdy\u017e d\u011bl\u00e1te \u0161ablonu, v p\u0159\u00edpad\u011b \u0161ablony tak umo\u017en\u00edte vytvo\u0159en\u00ed child theme.
V prav\u00e9m sloupci se v\u00e1m objev\u00ed nov\u00fd metabox.
<\/p>\n\n\n
\n
\"post<\/figure><\/div>\n\n\n
Post form\u00e1ty m\u016f\u017eete p\u0159ejmenov\u00e1vat a r\u016fzn\u011b upravovat, ale jejich po\u010det je nem\u011bnn\u00fd. Tak\u017ee nov\u00e9 nen\u00ed mo\u017en\u00e9 p\u0159idat.<\/p>\n\n\n\n
Nyn\u00ed za\u010dneme upravovat content.php<\/p>\n\n\n\n
Proto\u017ee se n\u00e1m bude \u0161patn\u011b pracovat s velk\u00fdm mno\u017estv\u00edm k\u00f3du, vezmeme meta, kter\u00e9 jsme vytvo\u0159ili a d\u00e1me je do zvl\u00e1\u0161tn\u00edho souboru post-meta.php, do nov\u011b vytvo\u0159en\u00e9 slo\u017eky inc.
Cel\u00fd k\u00f3d zkop\u00edrujeme do nov\u00e9ho souboru a na jeho m\u00edsto vlo\u017e\u00edme:<\/p>\n\n\n\n
<?php get_template_part( 'inc\/post-meta' ); ?><\/code><\/pre>\n\n\n\n
A nyn\u00ed za\u010dneme vytv\u00e1\u0159et varianty content pro r\u016fzn\u00e9 post form\u00e1ty.<\/p>\n\n\n\n
Content-gallery.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t      <?php the_title(); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <a href=\"<?php the_permalink() ?>\" title=\"<?php the_title(); ?>\">\n        <?php the_title(); ?>\n      <\/a>\n\t  <\/h2>\n  <?php endif; ?>\n      <div class=\"post-content\">\n\t     <?php if ( is_single() || ! get_post_gallery() ) : ?>\n        <?php echo the_content();?>\n       <?php else: ?>\n\t       <?php echo get_post_gallery(); ?>\n          <?php get_template_part( 'inc\/post-meta' ); ?>\n          <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n            <?php _e('Read more','theme'); ?>\n          <\/a>\n        <?php endif; ?>\n     <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Content-link.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t      <?php the_title(); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <a href=\"<?php the_permalink() ?>\" title=\"<?php the_title(); ?>\">\n        <?php the_title(); ?>\n      <\/a>\n\t  <\/h2>\n  <?php endif; ?>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n      <div class=\"post-content\">\n\t     <?php echo the_content();?>\n     <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Content-image.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t      <?php the_title(); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <a href=\"<?php the_permalink() ?>\" title=\"<?php the_title(); ?>\">\n        <?php the_title(); ?>\n      <\/a>\n\t  <\/h2>\n  <?php endif; ?>\n      <div class=\"post-content\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Content-audio.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t      <?php the_title(); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <a href=\"<?php the_permalink() ?>\" title=\"<?php the_title(); ?>\">\n        <?php the_title(); ?>\n      <\/a>\n\t  <\/h2>\n  <?php endif; ?>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n      <div class=\"post-content\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Content-video.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t      <?php the_title(); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <a href=\"<?php the_permalink() ?>\" title=\"<?php the_title(); ?>\">\n        <?php the_title(); ?>\n      <\/a>\n\t  <\/h2>\n  <?php endif; ?>\n      <div class=\"post-content\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Content-aside.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n      <div class=\"post-content content-aside\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Pro tento form\u00e1t lehce uprav\u00edme styly<\/p>\n\n\n\n
.content-aside{\n  margin-top:30px;\n  width:100%;\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding:20px 20px 20px 40px;\n}<\/code><\/pre>\n\n\n\n
Content-quote.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n      <div class=\"post-content content-quote\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Tak\u00e9 lehce uprav\u00edme styly<\/p>\n\n\n\n
.content-quote{\n  margin-top:30px;\n  width:100%;\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding:20px 20px 20px 40px;\n  background-color:#dddddd;\n  border-left:solid 5px #d43f3a;\n}<\/code><\/pre>\n\n\n\n
Content-status.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n      <div class=\"post-content content-status\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Styl statusu je podobn\u00fd aside, tak\u017ee do css jen p\u0159id\u00e1me \u0159\u00e1dek:<\/p>\n\n\n\n
.content-aside,
.content-status<\/p>\n\n\n\n
t\u00edm maj\u00ed aside i status stejn\u00fd styl.<\/p>\n\n\n\n
Content-chat.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t      <?php the_title(); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <a href=\"<?php the_permalink() ?>\" title=\"<?php the_title(); ?>\">\n        <?php the_title(); ?>\n      <\/a>\n\t  <\/h2>\n  <?php endif; ?>\n      <div class=\"post-content\">\n\t     <?php echo the_content();?>\n     <\/div>\n  <?php get_template_part( 'inc\/post-meta' ); ?>\n  <?php if ( !is_single() ) : ?>\n    <a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n      <?php _e('Read more','theme'); ?>\n    <\/a>\n  <?php endif; ?>\n<\/div><\/code><\/pre>\n\n\n\n
Content-none.php<\/strong><\/p>\n\n\n\n
<div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">\n  <?php if ( is_single() ) : ?>\n    <h1 class=\"title\">\n\t    <?php _e( 'Nothing Found', 'theme' ); ?>\n\t  <\/h1>\n  <?php else: ?>\n    <h2 class=\"title\">\n\t    <?php _e( 'Nothing Found', 'theme' ); ?>\n\t  <\/h2>\n  <?php endif; ?>\n      <div class=\"post-content\">\n\t     <?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>\n\t       <p><?php printf( __( 'Ready to publish your first post? <a href=\"%1$s\">Get started here<\/a>.', 'theme' ), admin_url( 'post-new.php' ) ); ?><\/p>\n\t     <?php elseif ( is_search() ) : ?>\n\t       <p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with different keywords.', 'theme' ); ?><\/p>\n\t     <?php get_search_form(); ?>\n\t     <?php else : ?>\n\t       <p><?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'theme' ); ?><\/p>\n\t     <?php get_search_form(); ?>\n\t     <?php endif; ?>\n     <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
A to by pro dne\u0161ek mohlo sta\u010dit. Sice to na prvn\u00ed pohled vypad\u00e1 jako mnoho, st\u00e1le se opakuj\u00edc\u00edho k\u00f3du, jen s mal\u00fdmi zm\u011bnami, ale v\u0161imn\u011bte si, jak se zm\u011bnil v\u00fdpis post form\u00e1tu audio<\/p>\n\n\n
\n
\"screenshot-by-nimbus\"<\/figure><\/div>\n\n\n
Nav\u00edc, d\u00edky speci\u00e1ln\u00edmu souboru pro ka\u017ed\u00fd post form\u00e1t, m\u016f\u017eete jejich vzhled v\u00edce odli\u0161it. Nap\u0159\u00edklad u magaz\u00edn\u016f jsem vid\u011bl zobrazen\u00ed ikonek, kter\u00e9 ozna\u010dovaly ur\u010dit\u00e9 post form\u00e1ty.
Proto\u017ee v\u00e1s nechci nutit ps\u00e1t cel\u00fd k\u00f3d, \u0161ablonu v aktu\u00e1ln\u00edm stavu si m\u016f\u017eete st\u00e1hnout:<\/p>\n\n\n\n
Dummy theme<\/a>St\u00e1hnout<\/a><\/div>\n\n\n\n
Seri\u00e1l: Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress<\/h2>\n\n\n\n