{"id":37595,"date":"2020-10-06T09:01:21","date_gmt":"2020-10-06T00:01:21","guid":{"rendered":"https:\/\/contactform7.com\/?page_id=37595"},"modified":"2020-12-22T07:48:47","modified_gmt":"2020-12-21T22:48:47","slug":"loading-javascript-and-stylesheet-only-when-it-is-necessary","status":"publish","type":"page","link":"https:\/\/contactform7.com\/es\/loading-javascript-and-stylesheet-only-when-it-is-necessary\/","title":{"rendered":"Cargar el JavaScript y la hoja de estilos solo cuando sea necesario"},"content":{"rendered":"\n<p>En sus ajustes por defecto, Contact Form 7 carga su hoja de estilos CSS y JavaScript en todas las p\u00e1ginas. Puedes pensar que esto es redundante o un desperdicio y que quieres cargarlos solo en aquellas p\u00e1ginas que contienen formularios de contacto. Entiendo la preocupaci\u00f3n, pero existe una limitaci\u00f3n t\u00e9cnica que impide que un plugin sepa si la p\u00e1gina contiene formularios de contacto, o no, al inicio de la carga. Sin embargo, puedo mostrarte una forma de solucionarlo.<\/p>\n\n\n\n\n\n\n<h4 class=\"wp-block-heading\">Paso 1: deten la carga del JavaScript y la hoja de estilos CSS en todas las p\u00e1ginas<\/h4>\n\n\n\n<p>Cuando el valor de <code>WPCF7_LOAD_JS<\/code> est\u00e1 establecido en <em>false<\/em> (por defecto: <em>true<\/em>), Contact Form 7 no carga el JavaScript. Puedes <a href=\"https:\/\/contactform7.com\/es\/controlling-behavior-by-setting-constants\/\">establecer el valor de esta constante en tu archivo wp-config.php<\/a> del siguiente modo:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\ndefine( 'WPCF7_LOAD_JS', false );\n<\/pre><\/div>\n\n\n<p>Asimismo, puedes controlar la carga de la hoja de estilos CSS con <code>WPCF7_LOAD_CSS<\/code>. Contact Form 7 no carga la hoja de estilos CSS cuando el valor de <code>WPCF7_LOAD_CSS<\/code> es <em>false<\/em> (por defecto: <em>true<\/em>). Puedes <a href=\"https:\/\/contactform7.com\/es\/controlling-behavior-by-setting-constants\/\">establecerlo en wp-config.php<\/a> de esta manera:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\ndefine( 'WPCF7_LOAD_CSS', false );\n<\/pre><\/div>\n\n\n<p>O tambi\u00e9n puede desactivar la carga del JavaScript y el CSS a\u00f1adiendo algunas l\u00edneas de c\u00f3digo en el archivo functions.php de tu tema del siguiente modo:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_filter( 'wpcf7_load_js', '__return_false' );\nadd_filter( 'wpcf7_load_css', '__return_false' );\n<\/pre><\/div>\n\n\n<p>Ya has logrado detener la carga del JavaScript y de la hoja de estilos CSS, pero, desafortunadamente, tambi\u00e9n los has detenido en las p\u00e1ginas que contienen formularios de contacto, por lo que necesitamos volver a colocarlos en las p\u00e1ginas correctas. As\u00ed que el siguiente paso detalla lo que necesitar\u00e1s para cargar los archivos en las p\u00e1ginas espec\u00edficas donde son necesarios.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Paso 2: cargar los archivos en las p\u00e1ginas que contienen formularios de contacto<\/h4>\n\n\n\n<p>Por ejemplo, digamos que tienes una p\u00e1gina llamada \u00abContacto\u00bb y es la \u00fanica p\u00e1gina que contiene un formulario de contacto. Y suponte que tienes un archivo de plantilla para la p\u00e1gina \u00abContacto\u00bb llamado \u00abcontacto.php\u00bb en la carpeta de tu tema. Ahora deber\u00e1s cargar la hoja de estilos CSS y el JavaScript de Contact Form 7 espec\u00edficamente en la p\u00e1gina \u00abContacto\u00bb.<\/p>\n\n\n\n<p>Para hacer esto, debe editar el archivo de plantilla \u00abcontacto.php\u00bb e insertar las siguientes l\u00edneas en \u00e9l:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php\n\nif ( function_exists( &#039;wpcf7_enqueue_scripts&#039; ) ) {\n  wpcf7_enqueue_scripts();\n}\n\nif ( function_exists( &#039;wpcf7_enqueue_styles&#039; ) ) {\n  wpcf7_enqueue_styles();\n}\n\n?&gt;\n<\/pre><\/div>\n\n\n<p>Ten en cuenta que <code>wpcf7_enqueue_scripts()<\/code> y <code>wpcf7_enqueue_styles()<\/code> deben llamarse antes de que <code>wp_head()<\/code> se haya llamado.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En sus ajustes por defecto, Contact Form 7 carga su hoja de estilos CSS y JavaScript en todas las p\u00e1ginas. Puedes pensar que esto es redundante o un desperdicio y que quieres cargarlos solo en aquellas p\u00e1ginas que contienen formularios de contacto. Entiendo la preocupaci\u00f3n, pero existe una limitaci\u00f3n t\u00e9cnica que impide que un plugin &hellip; <a href=\"https:\/\/contactform7.com\/es\/loading-javascript-and-stylesheet-only-when-it-is-necessary\/\" class=\"more-link\">Seguir leyendo <span class=\"screen-reader-text\">Cargar el JavaScript y la hoja de estilos solo cuando sea necesario<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_locale":"es_ES","_original_post":"1269","footnotes":""},"class_list":["post-37595","page","type-page","status-publish","hentry","es-ES"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/pages\/37595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/comments?post=37595"}],"version-history":[{"count":0,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/pages\/37595\/revisions"}],"wp:attachment":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/media?parent=37595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}