{"id":7486,"date":"2017-12-21T10:28:30","date_gmt":"2017-12-21T12:28:30","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=7486"},"modified":"2019-03-16T03:00:49","modified_gmt":"2019-03-16T06:00:49","slug":"campos-personalizados","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/campos-personalizados\/","title":{"rendered":"Aprenda criar campos personalizados no WordPress"},"content":{"rendered":"<p>O <strong>WordPress<\/strong> possui uma forma de adicionar informa\u00e7\u00f5es extras em publica\u00e7\u00f5es. Dessa forma \u00e9 poss\u00edvel incrementar suas postagens desde dados complementares quanto a\u00e7\u00f5es mais complexas.<\/p>\n<p>Esses campos s\u00e3o chamado <strong>Campos Personalizados<\/strong> ou <strong>Custom Fields<\/strong>.<\/p>\n<p>Voc\u00ea consegue criar <strong>campos personalizados<\/strong> direto no painel do <strong>WordPress<\/strong>. Basta ir em <strong>Posts &gt; Adicionar Novo. <\/strong>E no final da p\u00e1gina voc\u00ea ter\u00e1 uma tela assim:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7493 bd_img\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-painel-600x206.jpg\" alt=\"Campo Personalizado do Painel\" width=\"619\" height=\"212\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-painel-600x206.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-painel-768x263.jpg 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-painel-740x254.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-painel-24x8.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-painel.jpg 858w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/p>\n<p>Caso ela n\u00e3o esteja aparecendo, basta ir na parte superior a direita, e clicar em <strong>Op\u00e7\u00f5es de Tela. <\/strong>E depois marcar a op\u00e7\u00e3o<strong> Campos personalizados.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone bd_img wp-image-7494\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-opcao-de-tela-600x123.jpg\" alt=\"Op\u00e7\u00f5es da Tela\" width=\"620\" height=\"127\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-opcao-de-tela-600x123.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-opcao-de-tela-768x158.jpg 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-opcao-de-tela-740x152.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-opcao-de-tela-24x5.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-opcao-de-tela.jpg 1158w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>Com a op\u00e7\u00e3o do <strong>campo personalizado<\/strong> aparecendo, voc\u00ea ter\u00e1 o campo Nome (chave), e o Valor. Basta definir um nome e o seu valor correspondente e depois clicar em <strong>Adicionar campo personalizado.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone bd_img wp-image-7496\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado.gif\" alt=\"Exemplo de utilizar o campo personalizado\" width=\"620\" height=\"199\" \/><\/p>\n<p>Dessa forma voc\u00ea pode criar quantos campos personalizados quiser.<\/p>\n<p>Quando for criar um novo post, existir\u00e1 a op\u00e7\u00e3o da chave que voc\u00ea criou. Voc\u00ea poder\u00e1 selecionar e adicionar um valor associado a ele.<\/p>\n<p><img decoding=\"async\" class=\"alignnone bd_img wp-image-7498\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-selecionar-600x199.jpg\" alt=\"Op\u00e7\u00e3o do campo personalizado pr\u00e9-cadastrado\" width=\"620\" height=\"205\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-selecionar-600x199.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-selecionar-768x254.jpg 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-selecionar-740x245.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-selecionar-24x8.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-selecionar.jpg 846w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>Agora voc\u00ea precisa exibir essa informa\u00e7\u00e3o nas suas publica\u00e7\u00f5es. Para isso voc\u00ea precisar\u00e1 acessar o arquivo que deseja exibir e dentro do <strong>Loop<\/strong> adicionar a fun\u00e7\u00e3o <strong>the_meta();<\/strong><\/p>\n<p>Vamos usar o c\u00f3digo do tema\u00a0<strong>twentyseventeen<\/strong>, mais precisamente no arquivo <strong>single.php<\/strong><\/p>\n<p><strong>wp-content\/themes\/twentyseventeen\/single.php<\/strong><\/p>\n<pre class=\"lang:php decode:true \">&lt;?php\r\n\/**\r\n * The template for displaying all single posts\r\n *\r\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/#single-post\r\n *\r\n * @package WordPress\r\n * @subpackage Twenty_Seventeen\r\n * @since 1.0\r\n * @version 1.0\r\n *\/\r\n\r\nget_header(); ?&gt;\r\n\r\n&lt;div class=\"wrap\"&gt;\r\n\t&lt;div id=\"primary\" class=\"content-area\"&gt;\r\n\t\t&lt;main id=\"main\" class=\"site-main\" role=\"main\"&gt;\r\n\r\n\t\t\t&lt;?php\r\n\t\t\t\/* Start the Loop *\/\r\n\t\t\twhile ( have_posts() ) : the_post();\r\n\r\n\t\t\t\tget_template_part( 'template-parts\/post\/content', get_post_format() );\r\n\t\t\t\t\r\n\t\t\t\tthe_meta();\r\n\r\n\t\t\t\t\/\/ If comments are open or we have at least one comment, load up the comment template.\r\n\t\t\t\tif ( comments_open() || get_comments_number() ) :\r\n\t\t\t\t\tcomments_template();\r\n\t\t\t\tendif;\r\n\r\n\t\t\t\tthe_post_navigation( array(\r\n\t\t\t\t\t'prev_text' =&gt; '&lt;span class=\"screen-reader-text\"&gt;' . __( 'Previous Post', 'twentyseventeen' ) . '&lt;\/span&gt;&lt;span aria-hidden=\"true\" class=\"nav-subtitle\"&gt;' . __( 'Previous', 'twentyseventeen' ) . '&lt;\/span&gt; &lt;span class=\"nav-title\"&gt;&lt;span class=\"nav-title-icon-wrapper\"&gt;' . twentyseventeen_get_svg( array( 'icon' =&gt; 'arrow-left' ) ) . '&lt;\/span&gt;%title&lt;\/span&gt;',\r\n\t\t\t\t\t'next_text' =&gt; '&lt;span class=\"screen-reader-text\"&gt;' . __( 'Next Post', 'twentyseventeen' ) . '&lt;\/span&gt;&lt;span aria-hidden=\"true\" class=\"nav-subtitle\"&gt;' . __( 'Next', 'twentyseventeen' ) . '&lt;\/span&gt; &lt;span class=\"nav-title\"&gt;%title&lt;span class=\"nav-title-icon-wrapper\"&gt;' . twentyseventeen_get_svg( array( 'icon' =&gt; 'arrow-right' ) ) . '&lt;\/span&gt;&lt;\/span&gt;',\r\n\t\t\t\t) );\r\n\r\n\t\t\tendwhile; \/\/ End of the loop.\r\n\t\t\t?&gt;\r\n\r\n\t\t&lt;\/main&gt;&lt;!-- #main --&gt;\r\n\t&lt;\/div&gt;&lt;!-- #primary --&gt;\r\n\t&lt;?php get_sidebar(); ?&gt;\r\n&lt;\/div&gt;&lt;!-- .wrap --&gt;\r\n\r\n&lt;?php get_footer();\r\n<\/pre>\n<ul>\n<li>Veja que na linha 25 est\u00e1 a fun\u00e7\u00e3o <strong>the_meta(); <\/strong><\/li>\n<\/ul>\n<p>Veja como \u00e9 exibido:<\/p>\n<p><img decoding=\"async\" class=\"alignnone bd_img wp-image-7501\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-600x431.jpg\" alt=\"Visualiza\u00e7\u00e3o do Campo Personalizado\" width=\"620\" height=\"446\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-600x431.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-24x17.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto.jpg 690w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>O WordPress gerar uma lista n\u00e3o ordenada com todos os campos personalizado no post, onde voc\u00ea adicionar a fun\u00e7\u00e3o <strong>the_meta()<\/strong>.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;ul class='post-meta'&gt;\r\n           &lt;li&gt;&lt;span class='post-meta-key'&gt;Fonte:&lt;\/span&gt; Blog MX Cursos&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<h2>Campo Personalizado Avan\u00e7ado<\/h2>\n<p>Vimos como criar um campo personalizado pelo painel nativamente e atribuir dinamicamente a um post. J\u00e1 para informa\u00e7\u00f5es complementares o processo \u00e9 bem interessante. Muitas vezes voc\u00ea deseja personalizar mais a cria\u00e7\u00e3o desses campos personalizados, principalmente se voc\u00ea precisa organizar a forma de publicar informa\u00e7\u00f5es extras e precisa exibir em um momento especifico.<\/p>\n<p>Podemos ent\u00e3o criar essa op\u00e7\u00e3o para se exibido pelo tema e dessa forma exibir onde desejamos.<\/p>\n<p>Vamos continuar utilizando o tema\u00a0<strong>twentyseventeen, <\/strong>que vem por padr\u00e3o no WordPress.<\/p>\n<p>Nesse tema, existe uma pasta chamada <strong>inc.<\/strong>\u00a0Iremos criar um arquivo nessa pasta com nome de<strong> custom-fields.php.\u00a0<\/strong><\/p>\n<p><strong>wp-content\/themes\/twentyseventeen\/inc\/custom-fields.php<\/strong><\/p>\n<p>Depois do arquivo criado, vamos incluir no arquivo<strong> functions.php<\/strong> no tema. Iremos adicionar no final do arquivo:<\/p>\n<pre class=\"lang:php decode:true\">require get_parent_theme_file_path( '\/inc\/custom-fields.php' );\r\n<\/pre>\n<p>Usamos a fun\u00e7\u00e3o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_parent_theme_file_path\/\" target=\"_blank\" rel=\"noopener noreferrer\">get_parent_the_file_path<\/a> para retornar o caminho do tema pai. Essa fun\u00e7\u00e3o \u00e9 \u00fatil se voc\u00ea deseja trabalhar com temas filhos. Ali\u00e1s, temos aqui no blog o artigo\u00a0<a href=\"https:\/\/www.mxcursos.com\/blog\/wordpress-criando-e-customizando-temas-filhos-child-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Criando e customizando Temas Filhos\u00a0<\/a>caso queira aprender mais sobre esse assunto.<\/p>\n<p>No arquivo <strong>custom-fields.php<\/strong>, criaremos uma fun\u00e7\u00e3o que ser\u00e1 respons\u00e1vel por exibir um campo de formul\u00e1rio na cria\u00e7\u00e3o\/edi\u00e7\u00e3o do Post.<\/p>\n<p>No nosso exemplo vamos colocar um campo para inserir o c\u00f3digo do v\u00eddeo do youtube<\/p>\n<pre class=\"lang:php decode:true\">&lt;?php \r\n\r\nfunction create_form_custom_field($post) {\r\n    \r\n    $code_youtube = get_post_meta($post-&gt;ID, 'code_youtube', true);\r\n\r\n    $html  = '&lt;label for=\"code_youtube\"&gt;C\u00f3digo Youtube: &lt;\/label&gt;';\r\n    $html .= '&lt;input type=\"text\" name=\"code_youtube\" value=\"'.$code_youtube.'\" \/&gt;';\r\n\r\n    echo $html;\r\n}<\/pre>\n<ul>\n<li>Na linha 3, definimos um nome da fun\u00e7\u00e3o\u00a0<strong>create_form_custom_field<\/strong>\u00a0e como par\u00e2metro ir\u00e1 receber a vari\u00e1vel <strong>$post<\/strong>;<\/li>\n<li>Na linha 5 recuperamos o valor que est\u00e1 no campo personalizado. Para isso usamos a fun\u00e7\u00e3o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">get_post_meta<\/a>\u00a0. Ela recebe 3 par\u00e2metros: O <strong>ID<\/strong> do post, O <strong>nome do campo<\/strong>, A forma que ir\u00e1 retornar. Se definir como <strong>true<\/strong>, retornar\u00e1 uma <strong>string.<\/strong>\u00a0Se for <strong>false<\/strong>, retornar\u00e1 um <strong>array<\/strong>. Voc\u00ea ir\u00e1 usar <strong>true<\/strong>\u00a0se existir apenas esse campo personalizado no post, mas se voc\u00ea precisa utilizar esse campo personalizado no post v\u00e1rias vezes, como um campo para autor e o post tem v\u00e1rios autores, nesse caso voc\u00ea insere como false, pois desta forma ele retornar\u00e1 todos os autores num array;<\/li>\n<li>Na linha 7 e 8 \u00e9 criado uma vari\u00e1vel para guardar o html com o campo de formul\u00e1rio que ser\u00e1 exibido. Veja que no\u00a0 campo input, tem o valor e \u00e9 atribu\u00eddo o valor que retorna do campo personalizado;<\/li>\n<li>Na linha 10 usamos o echo para exibir o conte\u00fado da vari\u00e1vel.<\/li>\n<\/ul>\n<p>Agora precisamos informar ao WordPress que queremos exibir essa informa\u00e7\u00e3o do campo de edi\u00e7\u00e3o do Post. Para isso precisamos definir o Meta Box, que ser\u00e1 o box que ir\u00e1 conter os valores a serem exibidos para realizar a cria\u00e7\u00e3o\/edi\u00e7\u00e3o no Post.<\/p>\n<pre class=\"lang:php decode:true\">&lt;?php \r\n\r\nfunction create_form_custom_field($post) {\r\n    \r\n    $code_youtube = get_post_meta($post-&gt;ID, 'code_youtube', true);\r\n\r\n    $html  = '&lt;label for=\"\"&gt;C\u00f3digo Youtube: &lt;\/label&gt;';\r\n    $html .= '&lt;input type=\"text\" name=\"code_youtube\" value=\"'.$code_youtube.'\" \/&gt;';\r\n\r\n    echo $html;\r\n}\r\n\r\nfunction add_custom_meta_box() {\r\n    add_meta_box(\r\n            'custom-field-code',\r\n            'Configura\u00e7\u00e3o Extra',\r\n            'create_form_custom_field',\r\n            'post'\r\n        );\r\n}<\/pre>\n<ul>\n<li>Na linha 13 criamos a fun\u00e7\u00e3o chamada <strong>add_custom_meta_box<\/strong>;<\/li>\n<li>Na linha 14 usamos a fun\u00e7\u00e3o <strong>add_meta_box<\/strong>; Ela recebe 7 par\u00e2metros, os 4 \u00faltimos s\u00e3o opcionais. No nosso caso, vamos usar apenas 4 par\u00e2metros, os outros deixaremos por padr\u00e3o<strong>;<\/strong><\/li>\n<li>Na linha 15 definimos o identificador do meta box que estamos criando;<\/li>\n<li>Na linha 16 definimos o t\u00edtulo que ser\u00e1 exibido nesse meta box;<\/li>\n<li>Na linha 17 definimos a fun\u00e7\u00e3o, no nosso caso\u00a0<strong>add_custom_meta_box\u00a0<\/strong>que ser\u00e1 respons\u00e1vel por exibir os campos que ser\u00e3o exibidos;<\/li>\n<li>Na linha 18 definimos onde ser\u00e1 exibido, no caso ser\u00e1 no Post. Se voc\u00ea criar tipos personalizados poder\u00e1 definir exibir nesses lugares. Temos um artigo abordando esse assunto: <a href=\"https:\/\/www.mxcursos.com\/blog\/como-criar-custom-types-no-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como criar Custom Types no WordPress.<\/a><\/li>\n<\/ul>\n<p>Definimos agora o meta box e precisamos informar isso ao WordPress para que ele seja exibido.<\/p>\n<p>Para isso iremos usar action <strong>add_meta_boxes<\/strong>. Caso queira saber mais sobre actions (ganchos) WordPress, leia esse artigo:\u00a0<a href=\"https:\/\/www.mxcursos.com\/blog\/entendendo-e-utilizando-as-actions-ganchos-no-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Entendendo e utilizando as actions (ganchos) no WordPress<\/a>.<\/p>\n<pre class=\"lang:php decode:true\">&lt;?php \r\n\r\nfunction create_form_custom_field($post) {\r\n    \r\n    $code_youtube = get_post_meta($post-&gt;ID, 'code_youtube', true);\r\n\r\n    $html  = '&lt;label for=\"\"&gt;C\u00f3digo Youtube: &lt;\/label&gt;';\r\n    $html .= '&lt;input type=\"text\" name=\"code_youtube\" value=\"'.$code_youtube.'\" \/&gt;';\r\n\r\n    echo $html;\r\n}\r\n\r\nfunction add_custom_meta_box() {\r\n    add_meta_box(\r\n            'custom-field-code',\r\n            'Configura\u00e7\u00e3o Extra',\r\n            'create_form_custom_field',\r\n            'post'\r\n        );\r\n}\r\n\r\nadd_action( 'add_meta_boxes', 'add_custom_meta_box');<\/pre>\n<ul>\n<li>Na linha 22 usamos a fun\u00e7\u00e3o <strong>add_action.\u00a0<\/strong>Utilizamos ainda\u00a0<strong>add_meta_boxes,\u00a0<\/strong>atribuindo a fun\u00e7\u00e3o que criamos, no caso\u00a0<strong>add_custom_meta_box.<\/strong><\/li>\n<\/ul>\n<p>Pronto! Agora se voc\u00ea acessar no admin a parte de criar ou editar um post, ser\u00e1 exibido o campo que criamos no final da p\u00e1gina.<\/p>\n<p><img decoding=\"async\" class=\"alignnone bd_img wp-image-7520\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-metabox-600x82.jpg\" alt=\"Campo Personalizado do admin\" width=\"620\" height=\"85\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-metabox-600x82.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-metabox-768x105.jpg 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-metabox-740x102.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-metabox-24x3.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-metabox.jpg 860w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<h2>Salvando os Campos Personalizados<\/h2>\n<p>J\u00e1 criamos como deve ser exibido o campo, criamos o metabox e informamos ao WordPress para exibir o campo que criamos.<\/p>\n<p>Agora ser\u00e1 necess\u00e1rio salvar esse valor que criamos para ser exibido no post.<\/p>\n<pre class=\"lang:php decode:true \">&lt;?php \r\n\r\nfunction create_form_custom_field($post) {\r\n    \r\n    $code_youtube = get_post_meta($post-&gt;ID, 'code_youtube', true);\r\n\r\n    $html  = '&lt;label for=\"\"&gt;C\u00f3digo Youtube: &lt;\/label&gt;';\r\n    $html .= '&lt;input type=\"text\" name=\"code_youtube\" value=\"'.$code_youtube.'\" \/&gt;';\r\n\r\n    echo $html;\r\n}\r\n\r\nfunction add_custom_meta_box() {\r\n    add_meta_box(\r\n            'custom-field-code',\r\n            'Configura\u00e7\u00e3o Extra',\r\n            'create_form_custom_field',\r\n            'post'\r\n        );\r\n}\r\n\r\nadd_action( 'add_meta_boxes', 'add_custom_meta_box');\r\n\r\nfunction save_form_custom_field($post_id) {\r\n\r\n    if( isset($_POST['code_youtube'] ) ) {\r\n        update_post_meta( $post_id, 'code_youtube', sanitize_text_field( $_POST['code_youtube'] ) );\r\n    }\r\n}<\/pre>\n<ul>\n<li>Na linha 24 criamos uma fun\u00e7\u00e3o chamada <strong>save_form_custom_field\u00a0<\/strong>e definimos um par\u00e2metro chamado $post_id;<\/li>\n<li>Na linha 26 verificamos se existe o campo <strong>code_youtube<\/strong> que criamos.<\/li>\n<li>Na linha 27 usamos a fun\u00e7\u00e3o update_post_meta do WordPress para salvar a informa\u00e7\u00e3o. Ele recebe 3 par\u00e2metros: o primeiro o ID do post, segundo o nome da campo (chave) que ser\u00e1 salva e o terceiro o valor que ser\u00e1 salvo.<\/li>\n<\/ul>\n<p>Agora precisamos informar ao WordPress que queremos usar essa fun\u00e7\u00e3o que criamos para salvar a informa\u00e7\u00e3o quando for salvo o post.<\/p>\n<p>Para isso usaremos <strong>add_action<\/strong> com chave <strong>save_post<\/strong><\/p>\n<pre class=\"lang:php decode:true\">&lt;?php \r\n\r\nfunction create_form_custom_field($post) {\r\n    \r\n    $code_youtube = get_post_meta($post-&gt;ID, 'code_youtube', true);\r\n\r\n    $html  = '&lt;label for=\"\"&gt;C\u00f3digo Youtube: &lt;\/label&gt;';\r\n    $html .= '&lt;input type=\"text\" name=\"code_youtube\" value=\"'.$code_youtube.'\" \/&gt;';\r\n\r\n    echo $html;\r\n}\r\n\r\nfunction add_custom_meta_box() {\r\n    add_meta_box(\r\n            'custom-field-code',\r\n            'Configura\u00e7\u00e3o Extra',\r\n            'create_form_custom_field',\r\n            'post'\r\n        );\r\n}\r\n\r\nadd_action( 'add_meta_boxes', 'add_custom_meta_box');\r\n\r\nfunction save_form_custom_field($post_id) {\r\n\r\n    if( isset($_POST['code_youtube'] ) ) {\r\n        update_post_meta( $post_id, 'code_youtube', sanitize_text_field( $_POST['code_youtube'] ) );\r\n    }\r\n}\r\n\r\nadd_action( 'save_post', 'save_form_custom_field');\r\n<\/pre>\n<ul>\n<li>Na linha 31 usamos a fun\u00e7\u00e3o <strong>add_action\u00a0<\/strong>usando <strong>save_post\u00a0<\/strong>e atribu\u00edmos a fun\u00e7\u00e3o que criamos, no caso\u00a0<strong>save_form_custom_field.<\/strong><\/li>\n<\/ul>\n<p>Pronto! Agora os dados ser\u00e3o salvos ao salvar seus posts.<\/p>\n<p>Agora precisamos exibir essa informa\u00e7\u00e3o no post.<\/p>\n<p>Acessaremos o arquivo <strong>single.php<\/strong><\/p>\n<pre class=\"lang:php decode:true \">&lt;?php\r\n\/**\r\n * The template for displaying all single posts\r\n *\r\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/#single-post\r\n *\r\n * @package WordPress\r\n * @subpackage Twenty_Seventeen\r\n * @since 1.0\r\n * @version 1.0\r\n *\/\r\n\r\nget_header(); ?&gt;\r\n\r\n&lt;div class=\"wrap\"&gt;\r\n\t&lt;div id=\"primary\" class=\"content-area\"&gt;\r\n\t\t&lt;main id=\"main\" class=\"site-main\" role=\"main\"&gt;\r\n\r\n\t\t\t&lt;?php\r\n\t\t\t\/* Start the Loop *\/\r\n\t\t\twhile ( have_posts() ) : the_post();\r\n\t\t\t?&gt;\r\n\t\t\t\r\n\t\t\t&lt;?php if($code_youtube = get_post_meta(get_the_ID(), 'code_youtube', true)) :  ?&gt;\r\n\t\t\t\t&lt;iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/&lt;?php echo $code_youtube; ?&gt;\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen&gt;&lt;\/iframe&gt;\r\n\t\t\t&lt;?php endif;?&gt;\r\n\r\n\t\t\t&lt;?php\r\n\t\t\t\tget_template_part( 'template-parts\/post\/content', get_post_format() );\r\n\t\t\t\t\r\n\r\n\r\n\t\t\t\t\/\/ If comments are open or we have at least one comment, load up the comment template.\r\n\t\t\t\tif ( comments_open() || get_comments_number() ) :\r\n\t\t\t\t\tcomments_template();\r\n\t\t\t\tendif;\r\n\r\n\t\t\t\tthe_post_navigation( array(\r\n\t\t\t\t\t'prev_text' =&gt; '&lt;span class=\"screen-reader-text\"&gt;' . __( 'Previous Post', 'twentyseventeen' ) . '&lt;\/span&gt;&lt;span aria-hidden=\"true\" class=\"nav-subtitle\"&gt;' . __( 'Previous', 'twentyseventeen' ) . '&lt;\/span&gt; &lt;span class=\"nav-title\"&gt;&lt;span class=\"nav-title-icon-wrapper\"&gt;' . twentyseventeen_get_svg( array( 'icon' =&gt; 'arrow-left' ) ) . '&lt;\/span&gt;%title&lt;\/span&gt;',\r\n\t\t\t\t\t'next_text' =&gt; '&lt;span class=\"screen-reader-text\"&gt;' . __( 'Next Post', 'twentyseventeen' ) . '&lt;\/span&gt;&lt;span aria-hidden=\"true\" class=\"nav-subtitle\"&gt;' . __( 'Next', 'twentyseventeen' ) . '&lt;\/span&gt; &lt;span class=\"nav-title\"&gt;%title&lt;span class=\"nav-title-icon-wrapper\"&gt;' . twentyseventeen_get_svg( array( 'icon' =&gt; 'arrow-right' ) ) . '&lt;\/span&gt;&lt;\/span&gt;',\r\n\t\t\t\t) );\r\n\r\n\t\t\tendwhile; \/\/ End of the loop.\r\n\t\t\t?&gt;\r\n\r\n\t\t&lt;\/main&gt;&lt;!-- #main --&gt;\r\n\t&lt;\/div&gt;&lt;!-- #primary --&gt;\r\n\t&lt;?php get_sidebar(); ?&gt;\r\n&lt;\/div&gt;&lt;!-- .wrap --&gt;\r\n\r\n&lt;?php get_footer();\r\n<\/pre>\n<ul>\n<li>Na linha 24 verificamos se existe o valor usando a fun\u00e7\u00e3o get_post_meta e j\u00e1 atribuindo a vari\u00e1vel. Caso n\u00e3o exista, a fun\u00e7\u00e3o get_post_meta retorna um valor nulo;<\/li>\n<li>Na linha 25 exibimos o player do youtube, colocando apenas o a vari\u00e1vel $code_youtube que foi definido anteriormente.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone bd_img wp-image-7526 size-full\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-video.jpg\" alt=\"Exemplos do campo personalizado sendo exibido no site\" width=\"598\" height=\"584\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-video.jpg 598w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-video-492x480.jpg 492w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/campo-personalizado-texto-video-24x24.jpg 24w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/p>\n<p>Pronto!<\/p>\n<p>Dessa forma voc\u00ea pode personalizar seus posts de acordo com suas necessidades. Voc\u00ea pode criar por exemplo um site de imobili\u00e1ria e adicionar as op\u00e7\u00f5es do im\u00f3vel com campos personalizados, como quantidade quartos, etc.<\/p>\n<p>Gostou do post? Tem d\u00favidas? Deixe seu coment\u00e1rio abaixo e compartilhe este post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O WordPress possui uma forma de adicionar informa\u00e7\u00f5es extras em publica\u00e7\u00f5es. Dessa forma \u00e9 poss\u00edvel incrementar suas postagens desde dados complementares quanto a\u00e7\u00f5es mais complexas. Esses campos s\u00e3o chamado Campos Personalizados ou Custom Fields. Voc\u00ea consegue criar campos personalizados direto no painel do WordPress. Basta ir em Posts &gt; Adicionar Novo. E no final da [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":7543,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"class_list":["post-7486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=7486"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/7543"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=7486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=7486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=7486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}