{"id":1911,"date":"2014-08-17T10:44:17","date_gmt":"2014-08-17T10:44:17","guid":{"rendered":"http:\/\/musilda.cz\/?p=1911"},"modified":"2014-08-17T10:44:17","modified_gmt":"2014-08-17T10:44:17","slug":"jak-vytvorit-vlastni-sablonu-pro-wordpress-6-dil","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-vytvorit-vlastni-sablonu-pro-wordpress-6-dil\/","title":{"rendered":"Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress – 6 d\u00edl"},"content":{"rendered":"\n
V\u00edt\u00e1m v\u00e1s ji\u017e u \u0161est\u00e9ho d\u00edlu seri\u00e1lu Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress<\/strong>. V minul\u00e9m d\u00edle jsme si vytvo\u0159ili dv\u011b \u0161ablony str\u00e1nek, upravili jsme css t\u0159\u00eddy pro nov\u011bj\u0161\u00ed verzi Bootstrapu a p\u0159idali trochu styl\u016f.<\/p>\n\n\n\n Dnes se budeme v\u011bnovat zobrazen\u00ed metadat u v\u00fdpisu \u010dl\u00e1nk\u016f a zobrazen\u00ed koment\u00e1\u0159\u016f.<\/p>\n\n\n\n Nejsem si jist, zda se jedn\u00e1 o ofici\u00e1ln\u00ed n\u00e1zev, ale v \u0161ablon\u011b jsou v\u011bt\u0161inou tyto informace takto nazv\u00e1ny a jedn\u00e1 se o data, kter\u00e1 jsou n\u011bjak\u00fdm zp\u016fsobem spojena s \u010dl\u00e1nkem.<\/p>\n\n\n\n Nap\u0159\u00edklad:<\/p>\n\n\n\n V tuto chv\u00edli se n\u00e1\u0161 v\u00fdpis \u010dl\u00e1nk\u016f zobrazuje takto:<\/p>\n\n\n\n A pr\u00e1v\u011b mezi titulek a zkr\u00e1cen\u00fd v\u00fdpis vlo\u017e\u00edme tato metadata.<\/p>\n\n\n\n Otev\u0159eme si soubor content.php a do n\u011bj vlo\u017e\u00edme nov\u00fd div p\u0159\u00edmo za h2:<\/p>\n\n\n\n Pro zobrazen\u00ed jm\u00e9na autora \u010dl\u00e1nku pou\u017eijeme funkci the_author_posts_link(), jen\u017e n\u00e1m zobraz\u00ed jm\u00e9no autora, spole\u010dn\u011b s odkazem na v\u00fdpis jeho dal\u0161\u00ed \u010dl\u00e1nky. Div uprav\u00edme:<\/p>\n\n\n\n A proto\u017ee jsme pou\u017eili Bootstrap, kter\u00fd m\u00e1 celkem dost komponent, m\u016f\u017eeme jednodu\u0161e p\u0159ed autora vlo\u017eit ikonku:<\/p>\n\n\n\n V tuto chv\u00edli vypad\u00e1 v\u00fdpis takto:<\/p>\n\n\n Podobn\u011b, jako autora, p\u0159id\u00e1me datum publikace, pouze pou\u017eijeme funkci the_time(), pomoc\u00ed n\u00ed\u017e definujeme tvar zobrazovan\u00e9ho data. J\u00e1 jsem pou\u017eil j<\/strong> – pro den, n<\/strong> – pro m\u011bs\u00edc a Y<\/strong> – pro rok. Pro zobrazen\u00ed po\u010dtu koment\u00e1\u0159\u016f, spole\u010dn\u011b s odkazem na n\u011b, pou\u017eijeme funkci comments_popup_link(). Ta umo\u017e\u0148uje definovat text pro nula koment\u00e1\u0159\u016f, jeden koment\u00e1\u0159 a v\u00edce koment\u00e1\u0159\u016f. To sice nen\u00ed ide\u00e1ln\u00ed, ale existuje plugin, kter\u00fd toto dok\u00e1\u017ee vy\u0159e\u0161it spr\u00e1vn\u00fdm zp\u016fsoben. V\u00fdpis v\u0161ech kategori\u00ed, ve kter\u00fdch je \u010dl\u00e1nek za\u0159azen, dos\u00e1hneme pomoc\u00ed funkce get_the_category, v\u00fdsledek pak projdeme pomoc\u00ed cyklu a seznam kategori\u00ed vyp\u00ed\u0161eme.<\/p>\n\n\n\n K\u00f3d, kter\u00fd jsme vytvo\u0159ili, n\u00e1m zobraz\u00ed takto vypsan\u00e1 meta data:<\/p>\n\n\n Proto\u017ee je zkr\u00e1cen\u00fd v\u00fdpis ihned pod post meta, p\u0159id\u00e1me t\u0159\u00edd\u011b entry-meta spodn\u00ed margin, aby to nebylo tak sra\u017een\u00e9. Nejprve tedy p\u0159id\u00e1me tla\u010d\u00edtko a op\u011bt vyu\u017eijeme Bootstrap, tentokr\u00e1t css t\u0159\u00eddu btn a btn-danger:<\/p>\n\n\n\n Nakonec uprav\u00edme styl:<\/p>\n\n\n\n Pokud v tuto chv\u00edli kliknete na vytvo\u0159en\u00e9 tla\u010d\u00edtko Read more, zobraz\u00ed se v\u00e1m detail \u010dl\u00e1nku, ale bez koment\u00e1\u0159\u016f. V\u00fdpis koment\u00e1\u0159\u016f a formul\u00e1\u0159 pro jeho p\u0159id\u00e1n\u00ed, m\u016f\u017eeme zobrazit dv\u011bma zp\u016fsoby. Dnes si uk\u00e1\u017eeme ten snaz\u0161\u00ed. a ten uprav\u00edme:<\/p>\n\n\n\n Bohu\u017eel v\u0161ak tato funkce zobraz\u00ed jen formul\u00e1\u0159 pro p\u0159id\u00e1v\u00e1n\u00ed koment\u00e1\u0159\u016f. Pro zobrazen\u00ed schv\u00e1len\u00fdch koment\u00e1\u0159\u016f, mus\u00edme je\u0161t\u011b pou\u017e\u00edt funkci wp_list_comments(). Dal\u0161\u00edm krokem je vytvo\u0159en\u00ed souboru comments.php, do n\u011bj\u017e vlo\u017e\u00edme k\u00f3d:<\/p>\n\n\n\n T\u00edm jsme vytvo\u0159ili soubor pro definov\u00e1n\u00ed vzhledu koment\u00e1\u0159\u016f a jeho \u00faprava bude sou\u010d\u00e1st\u00ed sedm\u00e9ho d\u00edlu. V\u00edt\u00e1m v\u00e1s ji\u017e u \u0161est\u00e9ho d\u00edlu seri\u00e1lu Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress. V minul\u00e9m d\u00edle jsme si vytvo\u0159ili dv\u011b \u0161ablony str\u00e1nek, upravili jsme css t\u0159\u00eddy pro nov\u011bj\u0161\u00ed verzi Bootstrapu a p\u0159idali trochu styl\u016f. Dnes se budeme v\u011bnovat zobrazen\u00ed metadat u v\u00fdpisu \u010dl\u00e1nk\u016f a zobrazen\u00ed koment\u00e1\u0159\u016f. Co jsou post meta? Nejsem si jist, zda se<\/p>\n","protected":false},"author":1,"featured_media":8400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jak-vytvorit-vlastni-sablonu-pro-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1911"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=1911"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1911\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8400"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Co jsou post meta?<\/h2>\n\n\n\n
\n
\n
<!-- Post meta -->\n<div class=\"entry-meta\">\n<\/div><\/code><\/pre>\n\n\n\n
Autor \u010dl\u00e1nku<\/h2>\n\n\n\n
<!-- Post meta -->\n <div class=\"entry-meta\">\n <span class=\"entry-author\">\n <?php the_author_posts_link(); ?>\n <\/span>\n <\/div><\/code><\/pre>\n\n\n\n
<!-- Post meta -->\n <div class=\"entry-meta\">\n <span class=\"entry-author\">\n <span class=\"glyphicon glyphicon-user\"><\/span>\n <?php the_author_posts_link(); ?>\n <\/span>\n <\/div><\/code><\/pre>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n
Datum publikov\u00e1n\u00ed<\/h2>\n\n\n\n
Za span autora p\u0159id\u00e1me dal\u0161\u00ed span, pro datum:<\/p>\n\n\n\n<span class=\"entry-date\">\n <span class=\"glyphicon glyphicon-calendar\"><\/span>\n <?php the_time( 'j.n. Y' ); ?>\n<\/span><\/code><\/pre>\n\n\n\n
Po\u010det koment\u00e1\u0159\u016f<\/h2>\n\n\n\n
Za span data publikace, p\u0159id\u00e1me po\u010det koment\u00e1\u0159\u016f:<\/p>\n\n\n\n<span class=\"entry-comments\">\n <?php comments_popup_link(__('No Comments', 'theme'),\n __('1 Comment', 'theme'),\n __('% Comments', 'theme')); ?>\n<\/span><\/code><\/pre>\n\n\n\n
Kategorie<\/h2>\n\n\n\n
<span class=\"entry-category\">\n<?php\n$categories = get_the_category();\n$separator = ', ';\n$output = '';\nif($categories){\nforeach($categories as $category) {\n$output .= '<a href=\"'.get_category_link($category->term_id ).'\"\ntitle=\"' . esc_attr( sprintf( __( \"View all posts in %s\" ), $category->name ) ) . '\">'.\n$category->cat_name.'<\/a>'.$separator;\n}\necho trim($output, $separator);\n}\n?>\n<\/span><\/code><\/pre>\n\n\n\n
V\u00fdsledek<\/h2>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n
Drobn\u00e9 \u00fapravy<\/h2>\n\n\n\n
Co je\u0161t\u011b mus\u00edme ud\u011blat, je odkaz na detail \u010dl\u00e1nku. sice m\u016f\u017eeme kliknout na nadpis, ale b\u011b\u017en\u00fd \u010dten\u00e1\u0159 o\u010dek\u00e1v\u00e1 viditeln\u00e9 tla\u010d\u00edtko, \u010di odkaz na detail.<\/p>\n\n\n\n<a class=\"btn btn-danger\" href=\"<?php the_permalink(); ?>\">\n <?php _e('Read more','theme'); ?>\n<\/a><\/code><\/pre>\n\n\n\n
\/* Entry *\/\n.entry-meta{\n margin-bottom:10px;\n}\n.post-content{\n margin-bottom:34px;\n}\r<\/code><\/pre>\n\n\n\n
V\u00fdsledek<\/h2>\n\n\n
<\/a><\/figure><\/div>\n\n\n
Koment\u00e1\u0159e<\/h2>\n\n\n\n
Otev\u0159eme si soubory single.php a page.php, najdeme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n<div class=\"entry-content\">\n <?php the_content(); ?>\n<\/div><\/code><\/pre>\n\n\n\n
<div class=\"entry-content\">\n <?php the_content(); ?>\n<\/div>\n<?php comment_form(); ?><\/code><\/pre>\n\n\n\n
P\u0159ed \u00fapravou<\/h2>\n\n\n
<\/a><\/figure><\/div>\n\n\n
Po \u00faprav\u011b<\/h2>\n\n\n
<\/a><\/figure><\/div>\n\n\n
Bohu\u017eel v\u0161ak tato funkce nepracuje spr\u00e1vn\u011b v single.php a proto mus\u00edme nahradit comment_form() funkc\u00ed comments_template(). K\u00f3d v single.php a page.php bude vypadat takto:<\/p>\n\n\n\n<div class=\"entry-content\">\n <?php the_content(); ?>\n<\/div>\n <?php comments_template(); ?>\n<\/div><\/code><\/pre>\n\n\n\n
<ol class=\"commentlist\">\n <?php wp_list_comments(); ?>\n<\/ol>\n<?php comment_form(); ?><\/code><\/pre>\n\n\n\n
V\u00fdsledek<\/h2>\n\n\n
<\/a><\/figure><\/div>\n\n\n
Douf\u00e1m, \u017ee si na dal\u0161\u00ed d\u00edl najdu \u010das co nejd\u0159\u00edve a seri\u00e1l bude brzy pokra\u010dovat.<\/p>\n\n\n\nSeri\u00e1l: Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress<\/h2>\n\n\n\n
\n