{"id":1363,"date":"2013-12-25T08:30:39","date_gmt":"2013-12-25T08:30:39","guid":{"rendered":"http:\/\/musilda.cz\/?p=1363"},"modified":"2013-12-25T08:30:39","modified_gmt":"2013-12-25T08:30:39","slug":"jak-vytvorit-vlastni-metabox","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-vytvorit-vlastni-metabox\/","title":{"rendered":"Jak vytvo\u0159it vlastn\u00ed metabox"},"content":{"rendered":"\n<p>V dne\u0161n\u00edm tutori\u00e1lu si uk\u00e1\u017eeme, jak vytvo\u0159it vlastn\u00ed metabox. Co jsou vlastn\u011b metaboxy? Narazil na n\u011b ka\u017ed\u00fd, kdo kdy ve WordPressu vytv\u00e1\u0159el str\u00e1nku, nebo \u010dl\u00e1nek. Jsou to p\u0159esouvateln\u00e9 boxy, kter\u00e9 se nach\u00e1z\u00ed v administraci, p\u0159i vytv\u00e1\u0159en\u00ed \u010dl\u00e1nku, nebo str\u00e1nky. V\u0161echny akce, kter\u00e9 d\u011bl\u00e1te p\u0159i ukl\u00e1d\u00e1n\u00ed \u010dl\u00e1nku, p\u0159id\u00e1v\u00e1n\u00ed n\u00e1hledov\u00e9ho obr\u00e1zku, nebo za\u0159azen\u00ed do kategorie, d\u011bl\u00e1te v jednom z metabox\u016f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Metaboxy v administraci<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/12\/Um\u00edst\u011bn\u00ed-metabox\u016f-e1387955578938.png\" alt=\"\" class=\"wp-image-1364\" \/><\/figure>\n\n\n\n<p>Jak m\u016f\u017eete vid\u011bt, na obr\u00e1zku jsou dva metaboxy, jeden v um\u00edst\u011bn\u00ed Advanced, to je Custom Fields a potom um\u00edst\u011bn\u00ed Side &#8211; Page Attributes.<\/p>\n\n\n\n<p>Do t\u011bchto metabox\u016f pak m\u016f\u017eete vkl\u00e1dat r\u016fzn\u00e9 prvky, kter\u00e9 v\u00e1m pomohou vytv\u00e1\u0159et vlastn\u00ed nastaven\u00ed. M\u016f\u017ee se v podstat\u011b jednat o jak\u00e9koliv funkce, my si dnes uk\u00e1\u017eeme. jak vytvo\u0159it metabox, jen\u017e z textov\u00e9ho pole formul\u00e1\u0159e, ulo\u017e\u00ed zadanou hodnotu do post meta.<\/p>\n\n\n\n<p>Post meta, jsou informace ukl\u00e1dan\u00e9 do datab\u00e1ze, spole\u010dn\u011b s id obsahu, ke kter\u00e9mu pat\u0159\u00ed. \u0158ekn\u011bme, \u017ee budeme m\u00edt o automobilech. Ka\u017edou zna\u010dku pak budeme cht\u00edt v \u0161ablon\u011b odli\u0161it a zobrazit jej\u00ed logo. Vytvo\u0159\u00edme si post meta s n\u00e1zvem &#8222;znacka&#8220; a u ka\u017ed\u00e9ho \u010dl\u00e1nku budeme m\u00edt mo\u017enost vlo\u017eit informaci o zna\u010dce.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vytvo\u0159en\u00ed metaboxu<\/h3>\n\n\n\n<p>Mo\u017en\u00e1 se to na prvn\u00ed pohled zd\u00e1 slo\u017eit\u00e9, ale ve skute\u010dnosti u\u017e v\u00fdvoj\u00e1\u0159i WordPressu ud\u011blali v\u011bt\u0161inu pr\u00e1ce za v\u00e1s a m\u00e1te k dispozici funkci add_meta_box, pomoc\u00ed n\u00ed\u017e jednodu\u0161e metabox vytvo\u0159\u00edme.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function pridani_znacky_box() {\nadd_meta_box(\n     'muj_metabox_znacka',\n     __('Informace o vozidle','textdomain'),\n     'funkce_zobrazeni_metaboxu',\n     'post',\n     'side',\n     'default'\n);\n}\n<\/pre>\n\n\n\n<p><strong>Id metaboxu<\/strong> &#8211; muj_metabox_znacka, html id metaboxu.<br \/><strong>Titulek metaboxu<\/strong> &#8211; Informace o vozidle, titulek, kter\u00fd se bude zobrazovat v horn\u00ed \u010d\u00e1sti metaboxu.<br \/><strong>Funkce pro obrazen\u00ed metaboxu<\/strong> &#8211; funkce_zobrazeni_metaboxu, funkce, kter\u00e1 se postar\u00e1 o vykreslen\u00ed metaboxu.<br \/><strong>Druh obsahu<\/strong> &#8211; post, typ obsahu, kde se bude metabox zobrazovat. D\u00edky tomu m\u016f\u017eete vytvo\u0159it i metabox, kter\u00fd se bude zobrazovat jen na custom post type, nebo jen u \u010dl\u00e1nk\u016f. V na\u0161em p\u0159\u00edpad\u011b to jsou \u010dl\u00e1nky.<br \/><strong>Um\u00edst\u011bn\u00ed metaboxu<\/strong> &#8211; side, ur\u010duje, kde se bude metabox zobrazovat.<br \/><strong>Priority <\/strong>&#8211; default, ur\u010duje prioritu metaboxu, v na\u0161em p\u0159\u00edpad\u011b jsme ji nechali na default.<\/p>\n\n\n\n<p>Cel\u00e1 funkce add_meta_box je uvnit\u0159 funkce pridani_znacky_box, proto\u017ee mus\u00edme WordPressu \u0159\u00edci, \u017ee m\u00e1 metabox zaregistrovat a proto pomoc\u00ed akce add_meta_boxes zavol\u00e1me funkci pridani_znacky_box. T\u00edm se p\u0159i\u0159ad\u00ed add_meta_box k ostatn\u00edm metabox\u016fm a p\u0159i zobrazen\u00ed administrace se zobraz\u00ed tak\u00e9.<\/p>\n\n\n\n<p>Jako posledn\u00ed vytvo\u0159\u00edme funkci, pro zobrazen\u00ed obsahu metaboxu.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function funkce_zobrazeni_metaboxu( $post ) {\n wp_nonce_field( basename( __FILE__ ), 'znacka_vozu_post_class_nonce' );\n?&gt;<\/pre>\n\n\n\n<p>&lt;input id=&quot;znacka_vozu&quot; name=&quot;znacka_vozu&quot; type=&quot;text&quot; value=&quot;ID, &#8218;znacka_vozu&#8216;, true ) ); ?&gt;&#8220;&gt;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><!--?php\n}\n&lt;\/pre&gt;\n&lt;p&gt;Tato funkce je vol\u00e1na pomoc\u00ed argumentu v add_meta_box, viz. v\u00fd\u0161e.&lt;br ?-->\nPomoc\u00ed wp_nonce_field p\u0159id\u00e1me skryt\u00e1 pole, pro kontrolu autorizace. Je to z bezpe\u010dnostn\u00edch d\u016fvod\u016f, proto\u017ee tak m\u016f\u017eeme ur\u010dit, zda byla post hodnota skute\u010dn\u011b odesl\u00e1na z aktu\u00e1ln\u00ed str\u00e1nky.<br \/>\nFunkce get_post_meta ve value inputu se star\u00e1 o zobrazen\u00ed ji\u017e ulo\u017een\u00e9 hodnoty, proto\u017ee, pokud bude pole pr\u00e1zdn\u00e9, dojde p\u0159i ulo\u017een\u00ed \u010dl\u00e1nku k p\u0159eps\u00e1n\u00ed hodnoty.<\/pre>\n\n\n\n<p>V\u00fdsledek je vid\u011bt zde:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2013\/12\/novy-metabox.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"306\" height=\"190\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2013\/12\/novy-metabox.png\" alt=\"novy metabox\" class=\"wp-image-1365\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/12\/novy-metabox.png 306w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/12\/novy-metabox-300x186.png 300w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ulo\u017een\u00ed hodnot<\/h3>\n\n\n\n<p>Vytvo\u0159\u00edme si funkci, pro ulo\u017een\u00ed hodnoty z metaboxu:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function znacka_save_post_meta( $post_id, $post ){\n\nif ( defined('DOING_AUTOSAVE') &amp;&amp; DOING_AUTOSAVE )\n\t\t  return $post_id;\n\nif ( !isset( $_POST['znacka_vozu_post_class_nonce'] ) ||\n     !wp_verify_nonce( $_POST['znacka_vozu_post_class_nonce'],\n     basename( __FILE__ ) ) )\n    return $post_id;\n\n$new_meta_value = ( isset( $_POST['znacka_vozu'] ) ?\nsanitize_html_class( $_POST['znacka_vozu'] ) : '' );\n\nupdate_post_meta( $post_id, 'znacka_vozu', $new_meta_value );\n\n}\n<\/pre>\n\n\n\n<p>Nejprve zkontrolujeme, zda se jedn\u00e1 o automatick\u00e9 ulo\u017een\u00ed \u010dl\u00e1nku. Proto\u017ee jsme \u010dl\u00e1nek neukl\u00e1dali, nen\u00ed pot\u0159eba m\u011bnit hodnotu post_meta.<\/p>\n\n\n\n<p>P\u0159i zobrazen\u00ed metaboxu jsme vytvo\u0159ili nonce field a zde zkontrolujeme, zda nonce existuje a zda odpov\u00edd\u00e1 spr\u00e1vn\u00e9 hodnot\u011b. Pokud ne, nebudeme nic ukl\u00e1dat.<\/p>\n\n\n\n<p>Do prom\u011bnn\u00e9 $new_meta_value vlo\u017e\u00edme po sanitov\u00e1n\u00ed hodnotu odeslanou z formul\u00e1\u0159e. M\u011bli bychom v\u017edy sanitovat textov\u00e1 pole, proto\u017ee nem\u016f\u017eeme v\u011bd\u011bt, zda n\u011bkdo nevkl\u00e1d\u00e1 \u0161kodliv\u00fd k\u00f3d.<\/p>\n\n\n\n<p>Jako posledn\u00ed ulo\u017e\u00edme post meta. Funkce update_post_meta kontroluje, zda ji\u017e hodnota existuje a pokud ne, vytvo\u0159\u00ed ji. Nemus\u00edme tedy pou\u017e\u00edvat add_post_meta.<\/p>\n\n\n\n<p>Funkci m\u00e1me hotovou a mus\u00edme ji zaregistrovat do akce save_post, co\u017e znamen\u00e1, \u017ee v\u017edy, kdy\u017e budeme \u010dl\u00e1nek ukl\u00e1dat, provede se i tato funkce:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_action( 'save_post', 'znacka_save_post_meta', 10, 2 );\n<\/pre>\n\n\n\n<p>Pokud tedy nyn\u00ed vlo\u017e\u00edte do formul\u00e1\u0159e zna\u010dku vozu a ulo\u017e\u00edte \u010dl\u00e1nek, bude se v\u00e1m v metaboxu zobrazovat ulo\u017een\u00e1 hodnota.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Z\u00e1v\u011br<\/h3>\n\n\n\n<p>V tuto chv\u00edli m\u00e1te u \u010dl\u00e1nku mo\u017enost p\u0159idat post_meta s n\u00e1zvem znacka_vozu. To v\u00e1m d\u00e1v\u00e1 mo\u017enost pomoc\u00ed podm\u00ednky v \u0161ablon\u011b kontrolovat hodnotu meta a nab\u00eddnout u\u017eivateli pro ka\u017edou zna\u010dku jin\u00e9 logo vozu.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>V dne\u0161n\u00edm tutori\u00e1lu si uk\u00e1\u017eeme, jak vytvo\u0159it vlastn\u00ed metabox. Co jsou vlastn\u011b metaboxy? Narazil na n\u011b ka\u017ed\u00fd, kdo kdy ve WordPressu vytv\u00e1\u0159el str\u00e1nku, nebo \u010dl\u00e1nek. Jsou to p\u0159esouvateln\u00e9 boxy, kter\u00e9 se nach\u00e1z\u00ed v administraci, p\u0159i vytv\u00e1\u0159en\u00ed \u010dl\u00e1nku, nebo str\u00e1nky. V\u0161echny akce, kter\u00e9 d\u011bl\u00e1te p\u0159i ukl\u00e1d\u00e1n\u00ed \u010dl\u00e1nku, p\u0159id\u00e1v\u00e1n\u00ed n\u00e1hledov\u00e9ho obr\u00e1zku, nebo za\u0159azen\u00ed do kategorie, d\u011bl\u00e1te v<\/p>\n","protected":false},"author":1,"featured_media":1189,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[240],"class_list":["post-1363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","tag-metabox"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1363"}],"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=1363"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/1189"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}