{"id":233397,"date":"2023-02-13T17:18:00","date_gmt":"2023-02-13T14:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233397"},"modified":"2022-11-10T23:28:07","modified_gmt":"2022-11-10T20:28:07","slug":"tutorial-de-tema-de-wordpress-para-principiantes-parte-6-funciones-de-un-tema-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/tutorial-de-tema-de-wordpress-para-principiantes-parte-6-funciones-de-un-tema-php\/","title":{"rendered":"Tutorial de tema de WordPress para principiantes \u2013 Parte 6: Funciones de un tema.php"},"content":{"rendered":"\n

Hoy aprenderemos d\u00f3nde y c\u00f3mo agregar c\u00f3digo fuera de las plantillas en nuestro tema. Hacemos esto agregando el functions.php<\/code>archivo del tema. En el camino, tambi\u00e9n aprenderemos c\u00f3mo agregar sus hojas de estilo y scripts de la manera adecuada.<\/p>\n

El archivo functions.php de un tema<\/h2>\n

Un tema necesita un lugar para colocar el c\u00f3digo que no forma parte de las plantillas. Siempre hay un mont\u00f3n de c\u00f3digo que todos los temas necesitan agregar para manejar la funcionalidad. Por ejemplo, habilitar la funci\u00f3n de im\u00e1genes destacadas de WordPress (\u00bfnot\u00f3 que faltaba?), Soporte para men\u00fas, widgets, agregar hojas de estilo y scripts (de la manera adecuada), y m\u00e1s.<\/p>\n

Ese archivo es functions.php<\/code>. WordPress autom\u00e1ticamente y siempre carga este archivo si existe en su tema. Siempre se carga tanto en el administrador como en la interfaz.<\/p>\n

Agregar un archivo functions.php a nuestro tema<\/h2>\n

Vamos a crear un nuevo archivo vac\u00edo en nuestra carpeta de tema ra\u00edz y as\u00edgnele el nombre functions.php<\/code>.<\/p>\n

En ese archivo, comience inmediatamente con una etiqueta PHP de apertura (<?php<\/code>) y no incluya la etiqueta de cierre<\/strong>. El functions.php<\/code>archivo est\u00e1 dise\u00f1ado para c\u00f3digo PHP, no para HTML. Su tema puede romperse (o incluso actuar de manera extra\u00f1a) si tiene caracteres o saltos de l\u00ednea fuera de las etiquetas PHP en este archivo. Obviamente, puede salir de las etiquetas de PHP para generar HTML, pero debe hacerse dentro de funciones o ganchos. Perm\u00edtanme explicar esto con un experimento.<\/p>\n

Probemos este archivo para ver c\u00f3mo funciona. Dentro functions.php<\/code>escribe un eco de alg\u00fan texto ficticio:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
Actualice su interfaz. Aparece el texto ficticio. Pero si inspecciona o ve la fuente HTML, ver\u00e1 que el texto aparece antes de abrir <html><\/code>. \u00a1Esto hace que el HTML sea completamente inv\u00e1lido!<\/p>\n
\"Tutorial<\/a><\/p>\n
Vaya a su panel de administraci\u00f3n y presione actualizar. Tambi\u00e9n hace lo mismo all\u00ed (puede estar oculto detr\u00e1s de la barra de administraci\u00f3n, pero est\u00e1 all\u00ed en el HTML).<\/p>\n
Como puede ver, cualquier c\u00f3digo en sus functions.php<\/code>cargas antes que cualquier otra cosa en nuestras plantillas. Por lo tanto, como regla, cualquier salida (HTML fuera de las etiquetas de PHP o echo<\/code>) debe estar dentro de funciones que se ejecutar\u00e1n en los momentos adecuados, normalmente enganchadas a acciones o filtros.<\/p>\n
Recuerde cuando aprendimos y agregamos ganchos en la parte 3<\/a> del tutorial de temas de WordPress para principiantes. La forma en que ejecutamos el c\u00f3digo en un enlace es adjuntar una funci\u00f3n al enlace con add_action()<\/code>. Probemos algo m\u00e1s; hagamos una funci\u00f3n enganchada a un gancho que ya tenemos definido en nuestras plantillas; wp_footer<\/code>.<\/p>\n
En functions.php<\/code>elimine lo echo<\/code>que agregamos con fines de prueba y en su lugar escriba:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Haga clic en Actualizar en la interfaz y vea que la cadena aparece bien en el lugar exacto que ha definido wp_footer<\/code>, justo antes de cerrar <\/body><\/code>. Adem\u00e1s, tenga en cuenta que esto no har\u00e1 eco de nada en admin. Esto se debe wp_footer<\/code>a que es un enlace que solo se ejecuta en la interfaz.<\/p>\n
\u00a1Hagamos nuestras primeras operaciones propias en functions.php<\/code>!<\/p>\n
Nota: En PHP no es posible tener dos funciones con exactamente el mismo nombre. \u00a1Eso incluye nombres de funciones en WordPress, su tema y cualquier complemento activado! Siga las mejores pr\u00e1cticas y prefije sus funciones con su slug de tema, como en el ejemplo anterior: " wptutorial_<function_name><\/code>". Esto reduce en gran medida que WordPress se bloquee fatalmente debido a nombres de funciones id\u00e9nticos.<\/p>\n
Nota 2: no importa en qu\u00e9 orden agregue funciones y enlaces en su archivo functions.php<\/code>. Recuerde que los ganchos se ejecutan en ciertos puntos de control de todos modos, no en el orden en que est\u00e1n functions.php<\/code>. La \u00fanica excepci\u00f3n es si incluye otros archivos o inicializa sus propias clases.<\/p>\n
La forma correcta de agregar estilos y scripts frente a la forma incorrecta<\/h2>\n
Algunos de ustedes recordar\u00e1n la parte 3<\/a>, donde agregamos el wp_head<\/code>gancho en nuestro archivo header.php<\/code>. Despu\u00e9s de que hicimos esto, WordPress pudo cargar sus estilos y scripts, incluida la barra de administraci\u00f3n. Podr\u00eda estar pensando que para agregar nuestras hojas de estilo necesitamos hacer una funci\u00f3n enganchada wp_head<\/code>y generar el <link><\/code>para la hoja de estilo … \u00a1Por lo general, tendr\u00eda raz\u00f3n!<\/p>\n
Sin embargo, en WordPress hay una forma especial de agregar scripts y estilos. Esto es principalmente para administrar el orden de carga y evitar cargar bibliotecas duplicadas. Por ejemplo, es posible que usted, como autor de un tema, desee agregar Javascripts que dependan de la jQuery<\/code>biblioteca. Luego, debe asegurarse de que jQuery<\/code>se cargue antes que sus archivos. Pero WordPress y cualquier complemento tienen la misma necesidad, para asegurarse de que jQuery<\/code>tambi\u00e9n se cargue antes de sus scripts. No puede cargar la jQuery<\/code>biblioteca varias veces porque eso causa problemas. Entonces, WordPress tiene una forma de administrar en qu\u00e9 orden<\/strong> se cargan los scripts y las hojas de estilo.<\/p>\n
Agregar hojas de estilo (de la manera correcta)<\/h2>\n
Para agregar estilos y javascripts, usamos un gancho llamado wp_enqueue_scripts<\/code>. S\u00ed, tambi\u00e9n usas este gancho para estilos, a pesar de su nombre. Agregar secuencias de comandos y estilos se conoce como "poner en cola", como poner en una cola. Pongamos en cola (agreguemos) nuestra hoja de estilo usando la funci\u00f3n wp_enqueue_style<\/a> en nuestro functions.php<\/code>:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
La wp_enqueue_style<\/code>funci\u00f3n toma como m\u00ednimo dos par\u00e1metros. El primero es un nombre \u00fanico (identificador o \u00abID de slug"), y el segundo es la ubicaci\u00f3n del archivo. El identificador debe ser \u00fanico, ya que este es el identificador que usa WordPress para determinar si hay duplicados.<\/p>\n
En cuanto a devolver la ruta a tu tema, hay muchas funciones disponibles. Arriba utilic\u00e9 get_stylesheet_directory_uri()<\/code>which devuelve la URL a la carpeta de su tema, y \u200b\u200bluego agregu\u00e9 el resto de la ruta a nuestra hoja de estilo.<\/p>\n
PD: WordPress ofrece una funci\u00f3n separada para devolver la URL completa a su tema style.css<\/code>: get_stylesheet_uri()<\/code>. Us\u00e9 la otra funci\u00f3n anterior porque es m\u00e1s \u00fatil familiarizarse con ella. Lo usar\u00e1 para cualquier otro archivo que necesite poner en cola.<\/p>\n
La funci\u00f3n wp_enqueue_style<\/code>acepta par\u00e1metros m\u00e1s \u00fatiles, como dependencias (que otros archivos css deben cargarse antes) y el n\u00famero de versi\u00f3n (\u00fatil para fines de almacenamiento en cach\u00e9).<\/p>\n
\u00a1 Actualice su interfaz y vea que su hoja de estilo est\u00e1 cargada en <head><\/code>la etiqueta!<\/p>\n
Si usted es uno de los que est\u00e1n ansiosos por hacer que su tema se vea m\u00e1s bonito mientras lo codifica, esta es su oportunidad. Lo animo a comenzar a definir su HTML, clases y contenedores y agregar algo de estilo en su archivo style.css<\/code>. Agregaremos m\u00e1s contenido que requerir\u00e1 estilo a medida que avanzamos en esta serie de tutoriales.<\/p>\n
Agregar scripts (de la manera correcta)<\/h2>\n
Veamos c\u00f3mo agregamos javascripts a nuestro tema. Se hace usando el mismo gancho (as\u00ed que puedes ponerlo todo dentro de una funci\u00f3n). Pero para los scripts usamos una funci\u00f3n ligeramente diferente.<\/p>\n
Para poner en cola un script, usa wp_enqueue_script()<\/code>. Los par\u00e1metros son los mismos que wp_enqueue_style()<\/code>. El primero es el identificador \u00fanico y el segundo es la ruta al script. Tercero (opcional) es la matriz de dependencias. Como cuarto par\u00e1metro (opcional) establece el n\u00famero de versi\u00f3n. Y finalmente, quinto (opcional) define si el script debe cargarse o no en la <head><\/code>etiqueta o al final de <\/body><\/code>.<\/p>\n
WordPress viene con una amplia gama de bibliotecas ya incluidas. No siempre est\u00e1n todos cargados, pero est\u00e1n disponibles si los necesita. Si desea agregar un script de biblioteca com\u00fan, primero verifique si WordPress ya lo tiene<\/a>. Los ejemplos son jQuery, todos los m\u00f3dulos jQuery UI, Underscore y Backbone.<\/p>\n
Si agrega uno de los scripts incluidos de WordPress como una dependencia, \u00a1no necesita poner en cola ese script! Hagamos esto en la pr\u00e1ctica.<\/p>\n
Cree una carpeta assets<\/code>y dentro de ella una subcarpeta en nuestra carpeta de temas, y luego agregue un nuevo archivo js<\/code>vac\u00edo. main.js<\/code>Digamos que este script requiere la jQuery<\/code>biblioteca, as\u00ed que lo configuramos como dependencia. Sabemos que WordPress viene con jQuery<\/code>paquetes y su identificador es jquery<\/code>. Pondremos en cola nuestro script as\u00ed:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Si actualiza la interfaz y verifica su c\u00f3digo fuente, deber\u00eda ver que main.js<\/code>se agrega su secuencia de comandos, pero tambi\u00e9n que jQuery<\/code>se carga la biblioteca. \u00a1Y jQuery<\/code>se carga antes que su archivo!<\/p>\n
\"Tutorial<\/a><\/p>\n
Ahora ha aprendido a agregar estilos y scripts. Para agregar m\u00e1s archivos, agregue un wp_enqueue_style()<\/code>o wp_enqueue_script()<\/code>para cada nuevo archivo.<\/p>\n
Documentaci\u00f3n sobre los m\u00e9todos utilizados<\/h2>\n