{"id":3547,"date":"2016-06-20T08:50:06","date_gmt":"2016-06-20T11:50:06","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3547"},"modified":"2019-03-24T15:01:13","modified_gmt":"2019-03-24T18:01:13","slug":"inserindo-css-e-javascript-corretamente-no-wordpress","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/inserindo-css-e-javascript-corretamente-no-wordpress\/","title":{"rendered":"Inserindo CSS e Javascript corretamente no WordPress"},"content":{"rendered":"

Ol\u00e1 amigos! Normalmente, quando adicionamos um arquivo CSS ou Javascript ao nosso site WordPress<\/a>, nosso primeiro pensamento \u00e9 fazer isto dentro de nossa tag <head>:<\/p>\n

<link rel=\"stylesheet\" href=\"caminhoparaoarquivo\/arquivo.css\" type=\"text\/css\">\r\n<script src=\"caminhoparaoarquivo\/arquivo.js\" type=\"text\/javascript\"><\/pre>\n
Mas voc\u00ea sabia que o WordPress possui fun\u00e7\u00f5es pr\u00f3prias para adicionar estes arquivos?<\/p>\n
O principal benef\u00edcio de incluir estes arquivos da forma correta \u00e9 a tranquilidade de saber que voc\u00ea poder\u00e1 atualizar o seu tema sem se preocupar com os scripts que estavam inseridos nele.<\/p>\n
Al\u00e9m disso, fica mais f\u00e1cil para\u00a0adicionar, remover e at\u00e9 mesmo decidir em quais p\u00e1ginas determinados estilos e scripts ser\u00e3o utilizados.<\/p>\n
Adicionar estilos no WordPress usando a fun\u00e7\u00e3o wp_enqueue_style();<\/h2>\n
function add_estilos_e_scripts() {\r\n   wp_enqueue_style( 'nomedocss', get_template_directory_uri() . '\/css\/arquivo.css')}\r\nadd_action( 'wp_enqueue_scripts', 'add_estilos_e_scripts' );<\/pre>\n
A fun\u00e7\u00e3o\u00a0wp_enqueue_style(<\/code><\/strong><\/code><\/code>)\u00a0<\/strong>possui cinco\u00a0par\u00e2metros:
\n<\/code><\/p>\n
    \n
  1. Nome do arquivo (deve ser um nome \u00fanico) – obrigat\u00f3rio<\/em>;<\/li>\n
  2. Caminho para o arquivo – opcional<\/em>;<\/li>\n
  3. Depend\u00eancias (nome dos arquivos nos quais este arquivo depende para funcionar corretamente) – opcional<\/em>;<\/li>\n
  4. Vers\u00e3o – opcional<\/em>;<\/li>\n
  5. Media (O tipo de media atribu\u00edda ao arquivo. Ex.: screen, print ou media queries como ‘(max-width: 440px)’) – opcional;<\/li>\n<\/ol>\n
    wp_enqueue_style( $handle, $src, $deps, $ver, $media );<\/pre>\n
    Adicionando scripts usando a fun\u00e7\u00e3o wp_enqueue_script();<\/h2>\n
    function add_estilos_e_scripts() {\r\n\u00a0\u00a0wp_enqueue_script( 'script', get_template_directory_uri() . '\/js\/script.js', array ( 'jquery' ), 1.1, true);\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'add_estilos_e_scripts' );\r\n<\/pre>\n
    A fun\u00e7\u00e3o wp_enqueue_script() possui cinco par\u00e2metros:<\/p>\n
      \n
    1. Nome do arquivo (deve ser um nome \u00fanico) – obrigat\u00f3rio<\/em>;<\/li>\n
    2. Caminho para o arquivo – opcional<\/em>;<\/li>\n
    3. Depend\u00eancias (nome dos arquivos nos quais este arquivo depende para funcionar corretamente) – opcional<\/em>;<\/li>\n
    4. Vers\u00e3o – opcional<\/em>;<\/li>\n
    5. in_footer(booleano)(Definir como true<\/em> faz com que o script seja inserido antes de <\/body> ao inv\u00e9s de <\/head>.Por padr\u00e3o vem definido como false) – opcional<\/em>;<\/li>\n<\/ol>\n
      wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );<\/pre>\n
      Condicionando a utiliza\u00e7\u00e3o dos arquivos<\/h2>\n
      Voc\u00ea pode inserir todos os arquivos em uma mesma fun\u00e7\u00e3o no seu arquivo functions.php<\/em> e dentro dela fazer as devidas verifica\u00e7\u00f5es. No exemplo a seguir, vamos inserir\u00a0dois arquivos, sendo que o segundo s\u00f3 ser\u00e1 inserido na p\u00e1gina inicial do seu blog.<\/p>\n
      function add_estilos_e_scripts() { \r\n  wp_enqueue_script( 'script', get_template_directory_uri() . '\/js\/script.js', array ( 'jquery' ), 1.1, true);\r\n    if ( is_front_page() ) {\r\n        wp_enqueue_style( 'slider', get_template_directory_uri() . '\/css\/slider.css', array(), '1.1', 'all');\r\n    }\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'add_estilos_e_scripts' );<\/pre>\n
      Gostaram do artigo? Deixem seus coment\u00e1rios e compartilhe.<\/p>\n
      Caso voc\u00ea queira se aperfei\u00e7oar em WordPress, aprender a criar temas, plugins ou potencializar seu site neste poderoso CMS, conhe\u00e7a nossos Cursos Online de WordPress<\/a>. E tamb\u00e9m, se precisar aumentar seus conhecimentos em desenvolvimento, veja nossos cursos de Desenvolvimento Front-End<\/a>.<\/p>\n
      Bons estudos!<\/p>\n","protected":false},"excerpt":{"rendered":"
      Ol\u00e1 amigos! Normalmente, quando adicionamos um arquivo CSS ou Javascript ao nosso site WordPress, nosso primeiro pensamento \u00e9 fazer isto dentro de nossa tag <head>: <link rel=”stylesheet” href=”caminhoparaoarquivo\/arquivo.css” type=”text\/css”> <script src=”caminhoparaoarquivo\/arquivo.js” type=”text\/javascript”> Mas voc\u00ea sabia que o WordPress possui fun\u00e7\u00f5es pr\u00f3prias para adicionar estes arquivos? O principal benef\u00edcio de incluir estes arquivos da forma correta […]<\/p>\n","protected":false},"author":25,"featured_media":18733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[1181,1233],"class_list":["post-3547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-css3","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3547","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=3547"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18733"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=3547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=3547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=3547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}