Desarrollo de WordPress para usuarios intermedios: creación de complementos

¿Los complementos le permiten agregar o cambiar la forma en que se ven o funcionan sus sitios y la mejor parte? Casi cualquier funcionalidad que pueda imaginar para su sitio, puede convertirse en un complemento y hacerlo. Esta es la tercera publicación en nuestra serie de usuarios intermedios de WordPress. Esta serie sigue nuestros populares tutoriales de desarrollo de WordPress para principiantes, que le han introducido en los elementos básicos de los sitios web de WordPress, cómo comenzar a codificar con PHP y construir temas y complementos.
Ya debería saber cómo crear un complemento básico: si no lo sabe, debe revisar nuestra serie para principiantes antes de continuar, por lo que no le mostraré cómo hacerlo. En cambio, analizaremos cómo construir algunos complementos más complejos, así como las mejores prácticas para el desarrollo de arados. Hasta ahora, en esta serie, ha desarrollado un tema, que incluye archivos de plantilla, ganchos y funcionalidad de personalización. En esta parte del curso, usaremos uno de los ganchos que ya ha agregado e introduciremos contenido conectándolo. Nota: Es importante tener un conocimiento práctico sobre PHP, ya que este es el lenguaje básico de WordPress y me referiré a fragmentos de código en esta serie.
Vamos a empezar. ¿Se ha perdido un tutorial en nuestra serie de usuarios de WordPress para el desarrollo de WordPress? Puedes mantenerte al día con las siete publicaciones aquí:
Desarrollo de WordPress para usuarios intermedios: desarrollo del tema en detalle
Desarrollo de WordPress para usuarios intermedios: preparación de temas para la personalización
Desarrollo de WordPress para usuarios intermedios: creación de WordPress Pluginidation para usuarios intermedios: publicaciones y taxonomías personalizadas
Desarrollo de WordPress para usuarios intermedios: consulta y bucles
Desarrollo de WordPress para usuarios intermedios: campos personalizados y de metadatos
Desarrollo de WordPress para usuarios intermedios: internacionalización
Así es, toneladas de conocimiento de WordPress, evaluación de pares, comentarios e certificación de instructores, gratis para los miembros de WPMU Dev. Comience a aprender por qué deberá seguir esta parte de la serie, necesitará un sitio de desarrollo con un tema instalado y activado. Debido a que interactuaremos con el tema de las partes anteriores de la serie, deberá usar ese tema. Si prefiere trabajar con su propio tema, deberá agregar un gancho a esto utilizando las técnicas que aprendió en la primera parte de esta serie. Si han trabajado juntos, tendrá su propia versión del tema para esta serie. De lo contrario, puede descargar el segundo tema, WordPress Development para usuarios intermedios: preparar sus temas para personalizar, que están en los archivos de origen para este curso.
También necesitará un sitio de desarrollo para trabajar (tal vez en su automóvil local) y un editor de código. Las mejores prácticas para el desarrollo de complementos antes de comenzar a crear algunos complementos, para ver cómo debe codificar sus complementos. Para ser un desarrollador de complementos competente y eficiente, debe seguir las mejores prácticas:
COD de acuerdo con los estándares de codificación de WordPress. Esto incluye no solo la forma en que codifica su PHP, sino también HTML, CSS y JavaScript. Estruce los archivos y carpetas del complemento. Su complemento necesita un archivo de complemento principal y, si necesita agregar archivos adicionales, debe agregarlos a las carpetas apropiadas, como scripts, estilos, plantillas e incluye.
Usa los ganchos correctos. No adjunte una función a un gancho que se activa demasiado temprano o con demasiada frecuencia para sus necesidades.
Use los principios secos, evitando la repetición en el código. Cuando el código debe repetirse en varios lugares, usar un archivo incluye, por lo que debe codificarlo una vez.
No cree funciones, clases o ganchos que dupliquen las funciones ya proporcionadas por WordPress. Familiarícese con funciones, clases y ganchos de WordPress para que pueda usarlos lo mejor posible.
No use funciones depreciadas.
Si necesita usar scripts o estilos en el complemento, colóquelos correctamente (más pronto).
Use la sintaxis correcta (y consistente) y escriba el código de la manera descrito por los estándares de codificación, con un uso liberal de comentarios para ayudarlo a usted y a otros usuarios.
Cuando cree sus propios ganchos y funciones, use prefijos para asegurarse de que tengan nombres únicos. En este curso, uso wpmu_ como prefijo en todo momento.
Asegúrese de codificar de acuerdo con las mejores prácticas de WordPress.
Independientemente del tipo de complemento que desarrolle, siga estos consejos hará que su código y las prácticas laborales sean más eficientes y lo ayudará a aceptar complementos para el lanzamiento en los complementos de WordPress. Agregar scripts y estilos a los complementos en muchos casos, deberá agregar scripts y estilos a los complementos. Es importante saber cómo hacer esto correctamente. En lugar de usar una llamada o incluye el accesorio de script o estilos de wp_head o wp_footer canlige, debe usar las funciones y ganchos correctos para estilos y scripts de eneue. Para hacer esto, necesita uno de los dos ganchos:

Wp_enqueue_scripts-for scripts y estilos que se utilizarán en el frente de su sitio.
Admin_enqueue_scripts: para scripts y estilos que se utilizarán en las pantallas de administración
En la mayoría de los casos, usará el primero de estos. Pero si desea marcar las pantallas de administración agregando una nueva hoja de estilo, por ejemplo, o desea agregar un selector de datos a la forma de un widget de las pantallas de administración, entonces deberá usar admin_enqueue_scripts. Tenga en cuenta que está utilizando estos dos ganchos para scripts y estilos: no hay un gancho equivalente a los estilos de palabras.
Para acceder a uno de estos ganchos, deberá crear una función que haga dos cosas:
Registre una hoja de script o estilo (wp_register_style para estilos, wp_register_script para scripts)
Ponlo en la cola (wp_enqueue_script o wp_enqueue_style)
Estos son los mismos, ya sea que el script o el estilo esté conectado al gancho frontal o al gancho de administración. A veces solo tienes que poner un guión en la cola, si ya se incluye con WordPress, por ejemplo. Aquí hay un ejemplo de cómo coloca un script en un enchufe en un enchufe para usarse en las pantallas de administración. Este script depende de la idea: la idea 1CB234FB91D9D9F8E50078341414141EF5E2 está cargada
La función registrar_script () tiene tres parámetros en este ejemplo:
El nombre único de mi guión, que luego uso cuando hago cola.
Su ubicación, que es relativa al archivo actual.
Una adicción (opcional), que es jQuey.
Registrar una hoja de estilo en un complemento es similar y tendrá la oportunidad de hacerlo mientras trabaja en esta parte del curso. Tenga en cuenta que poner los scripts y los estilos en los temas de la cola es muy similar, excepto por una diferencia esencial: la ubicación será diferente. En lugar de usar plugins_url (), use get_template_directory_uri () con el sub -Director y el archivo enumerado después. Entonces, si pones el mismo script que cargué anteriormente en un tema, lo codificarías como:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Para obtener una guía completa a este respecto, consulte nuestra guía para agregar correctamente scripts y estilos a WordPress. El complemento utiliza que puede usar un complemento para agregar casi cualquier funcionalidad a su sitio. Aunque ya hemos visto el archivo de funciones.php de su tema y agregamos la funcionalidad del tema mediante un archivo incluye, normalmente incluye que debe escribir un complemento para Agregar funcionalidad. Los temas son para el diseño y la pantalla: definen cómo su sitio muestra su contenido, mientras que sus complementos agregarán características adicionales para agregar el contenido o administrar el sitio. ¿La regulación general hace esta pregunta? Si cambio la tarea para mi sitio, ¿necesitaré esta funcionalidad? Si la respuesta es sí, escriba un complemento en lugar de codificarlo en su tema para que pueda escribir un complemento para hacer cualquiera de los siguientes:
Registre los tipos de publicaciones o taxonomías personalizadas.
Agregue una metabox personalizada a las pantallas posteriores a la edición.
Crear un widget.
Inserte el contenido a través de un gancho (por ejemplo, un botón de llamada o consulta personalizada).
Crea un código corto.
Agregue la personalización del administrador, como el texto de ayuda adicional o las pantallas de administración.
Extraiga contenido de una fuente externa utilizando una API.
Cree una plantilla personalizada para mostrar el contenido agregado del complemento (no solo para reemplazar un archivo de plantilla de tema).
Agregue una pantalla personalizada como una galería.
Maximice el rendimiento, mejore el SEO y/o aumente la seguridad.
Encontrará muchos de estos disponibles en fantásticos complementos de terceros, incluidos los nuestros, por lo que vale la pena verificarlos antes de que le bacala a otra opción es tomar una tercera parte y editarla para satisfacer sus necesidades. Hay muchos complementos en el director de complementos que han comenzado vida de esta manera. Tenga en cuenta que no hay un sistema infantil/principal para complementos, como para temas, por lo que una vez que haya ingresado un complemento, será responsable de mantener el código. Alternativamente, puede crear otro complemento para usar los ganchos proporcionados por el complemento de la tercera parte: lo hago lo suficiente cuando quiero personalizar WooCommerce, que está lleno de ganchos. Ahora, creemos algunos complementos. Lo guiaré a través del proceso de creación de tres complementos: un complemento para códigos cortos
Un complemento para widgets
Un complemento de contenido para conectarse al tema
La construcción de códigos cortos para códigos cortos son bloques de texto que coloca entre los soportes rectos en sus publicaciones y páginas para agregar contenido que está predefinido por un código corto. Toman tres formas:
Códigos cortos simples que insertan contenido predefinido: [código corto]. Por ejemplo, puede crear un código corto con el marcado para un botón de urgencia y puede agregarlo a publicaciones y páginas usando el código corto.
Códigos cortos con etiquetas de apertura y cierre y contenido entre ellas: [Código corto] Contenido [/Shortcode]. Puede usar un código corto como este para agregar marcado alrededor del contenido incluido, como lo hacemos aquí en el blog WPMU Dev.
Códigos cortos con parámetros: [parámetro de código corto = “valor”]. Los códigos cortos pueden tener tantos parámetros como pueda. Un ejemplo aquí podría ser si agrega un código corto para insertar una marca, pero permite al usuario modificarlo a través de los parámetros. Para explorar todas estas tres opciones creando un código corto para un botón de llamada a la acción. Creación del complemento Inicio creando un archivo de complemento vacío en el directorio WP-Context/Plugins y agregue el texto de apertura. Has aprendido esto en detalle en la serie de desarrollo para principiantes. A medida que agregamos algunos estilos, deberá crear una carpeta para su complemento. Active el complemento en su sitio de desarrollo. Aquí está el mío:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Guarde y active sus estilos de complemento en línea luego, para colocar correctamente la hoja de estilo para nuestro botón de acción. Haga esto usando WP_ENQUEUE_STYLE () y WP_ENQUEUE_SCRIPTS. Cree una carpeta llamada CSS en la carpeta de complementos y en el interior, un archivo llamado style.css. Ahora abra el archivo de complemento principal y agréguelo:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Esto pondrá en cola la hoja de estilo para el cuadro de acción. Los estilos son los siguientes: puede agregarlos al archivo style.css de su complemento o puede crear el suyo:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Creación de un código corto simple para comenzar codificando un código corto simple que elimina el marcado y el texto predefinidos cuando se agrega a una página o publicación. En el archivo de complemento, agregue una función para crear el código corto:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Ha creado una función de marcado para mostrar el contenido add_shortcode () y luego usó add_shortcode () para convertirlos en un código corto. El add_shortcode () tiene dos parámetros:
el texto que un usuario entra entre los soportes cuadrados para ingresar el código corto
La función de llamada inversa para ejecutarse cuando WordPress supera el código corto.
Ahora acceda a una página o publique en su sitio e ingrese [CTA-Simple]:
Guarde la publicación o página y verlo. Aquí está el mío:
Puede ver que aparece la caja, pero no está en el lugar donde agregué el accesorio al editar. En cambio, se insertó al comienzo del contenido. Ob_start () esto usando algunas funciones php: ob_start () y ob_get_clean (). Edite su función para que se vea así:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Ahora revise su página. La caja debe aparecer en el lugar correcto:

¡Es mejor de esta forma! Así que ahora tenemos un código corto. ¿Qué pasa si el usuario quiere cambiar el texto que se muestra? Podemos hacer esto creando otro tipo de shortcode: uno con etiquetas de apertura y cierre. Creación de un código corto con las etiquetas de apertura y cierre en el archivo de complemento, cree una nueva función como esta:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Esto agrega algunos parámetros a nuestra función de llamada inversa: $ ATTS, que no se usa, pero es necesario que funcione el segundo parámetro, y $ contenido, que es el contenido ingresado por un usuario entre etiquetas. Ahora, en vista de su página o código de publicación, ingrese el código corto de la siguiente manera:

La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2

Guarde la publicación/página y verlo. Mostrará el cuadro de exhortación con cualquier contenido que haya agregado:
Esto significa que sus usuarios pueden ingresar cualquier contenido que deseen en ese cuadro de exhortación. Pero ahora hagamos las cosas aún más simples para ellas. Creación de un código de parámetros cortos Hay altas posibilidades de que alguien que use el código corto no se sienta cómodo codificando el marcado en el enlace dentro de él. Por lo tanto, creemos un corto código más avanzado con dos atributos: teléfono y correo electrónico. En el archivo de complemento, cree una tercera función, como esta:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2

Ahora ingrese el código corto en su página con los atributos. Algo como eso:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Actualice la publicación o página y échale un vistazo en el front-end. El cuadro de exhortación aparecerá usando los valores que dio para esos atributos:
Por lo tanto, puede ver cómo agregar atributos a un código corto puede hacer que las cosas sean un poco más fáciles para los usuarios y les guardará escribir código, al tiempo que les ofrece más control sobre los resultados. Puede usar esta técnica en una variedad de formas de controlar, contenido, código y estilo. Construir un complemento para widgets Otro uso común de complementos es la creación de un widget que los usuarios pueden agregar a un área de widget en su sitio. Usemos el código en nuestro complemento de código corto para crear un widget para el botón de acción. Creando el widget para crear un widget, debe interactuar con la clase wp_widget, que es parte de la API de widgets. Hay cuatro elementos para codificar un widget, ingresar a su clase:
Función de construcción de widgets para el administrador de widgets

Una función para procesar las actualizaciones de la configuración de widgets
Una característica para mostrar widget en el sitio.
Luego debe grabar el widget usando registro_widget (). Comencemos codificando la clase de widget vacío y registrándola. Cree un nuevo complemento, con su propia carpeta en el director WP-Content/Plugins. Cree un archivo para CSS y una hoja de estilo en esa carpeta, como lo ha hecho con la función de código corto. Deberá editar el estilo para que se vea mejor en un área de widget: la diferencia principal será el ancho, que tendrá que sumar al 100% cuando considere los bordes y el llenado, y también el área de widget de destino y no el área de widget. Código corto (verá clases una vez que comience a escribir el código del widget). No le diré cómo hacer esto, porque es el tipo de trabajo que debería poder resolver en esta etapa del curso, pero puede encontrar mi código en el código fuente para este curso. Coloque la hoja de estilo en el enchufe en la cola, como lo ha hecho para el complemento de código corto; asegúrese de no usar el mismo nombre de función para colocar la cola, ya que activará un error. Aquí está mi código de complemento hasta ahora:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
No guarde el archivo todavía, porque no funcionará sin el contenido de esa clase. Crear la función de constructor La primera función en esa clase es una función de constructor. Vamos a crearlo. Dentro de su clase, agregue eso:

La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Esto construye el widget: define su nombre de clase y descripción. Ahora pasemos al formulario de pantalla del widget. Todavía en su clase, agregue lo siguiente: Cargue la idea 1CB234FB91D9D9F8E5007834141EF5E2
Esto hace lo siguiente:
Define tres variables: título, número de teléfono y correo electrónico.
Produce una forma con los campos de entrada para cada una de nuestras tres variables.
Así que ahora tenemos un formulario en la pantalla Widgets. Pero en realidad no hará nada todavía. Guardar entradas al widget Para guardar lo que un usuario presenta en esos campos para nuestro widget, debemos crear una función de introducción que los guarde en la base de datos. En la función que acaba de agregar, agregue esto:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Utiliza la variable $ Instate para almacenar una matriz de valores, una para cada uno de nuestros campos. En cada caso, verifique si se ha introducido algo nuevo y, de ser así, lo guarda como un nuevo valor, reemplazando el anterior. Salga del widget en el sitio El paso final es eliminar el widget en el sitio, en el área del widget donde agrega el usuario. Aún en clase, agregue eso:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Debe reconocer parte del código allí, porque es similar al código que usé para eliminar la casilla de llamada cuando creé el complemento de código corto.Nuevamente, definimos variables en función del valor de cada elemento en la matriz para la variable de instancia $.Luego se muestra en un cuadro de llamada de acción con texto y un enlace agregado.¡Eso es todo!Ahora guarde el complemento y asegúrese de que esté activado en el sitio.Aquí está la clase completa que creará: la idea 1CB234FB91D9D9F8E500783414141EF5E2 está cargada
Ahora, si agrega el widget a un área de widget e ingresa su correo electrónico y número de teléfono, se mostrará en su sitio. Aquí está el mío en la barra lateral:
Puede usar esta técnica para crear un widget para mostrar lo que desee y usar esas variables y formar campos para definir texto, clases o cualquier otra cosa. Crear un complemento para conectarse a su tema ahora para pasar a otro tipo de complemento. En lugar de mostrar el contenido de este complemento a través de un código corto o un widget, lo conectaremos a un gancho. Nuevamente, crearemos un cuadro de exhortación, pero esta vez lo insertaremos bajo el contenido de cada publicación utilizando una función y etiqueta condicionales. Solo aparecerá en publicaciones individuales, no en páginas o páginas de archivo. Comience creando un nuevo complemento, nuevamente con una hoja de estilo que necesita poner en la cola en el archivo del complemento. Deberá modificar las clases en la hoja de estilo para reflejar las clases utilizadas en el código de salida del plug, que verá a medida que avanzamos. Para que funcione con su tema, debe ejecutar el tema que hemos desarrollado en partes y dos de esta serie (que puede encontrar en los archivos de origen) o agregar un gancho bajo el contenido de su propio tema. El nombre de nuestro gancho es wpmu_after_content. Después de haber configurado el complemento, comience agregando la función vacía y el gancho: la idea 1CB234FB91D9D9F8E500783414141EF5E2 está cargada.
Ahora, dentro de esa función, agregue la etiqueta condicionada is_singular ()::
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Luego, dentro de esa etiqueta acondicionada, agregue el código para eliminar la casilla de llamada a la acción:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2
Guarde el archivo y active el complemento. Aquí está la función completa y el gancho:
La idea se carga 1CB234FB91D9D9F8E5007834141EF5E2A, cuando vea una publicación en su sitio, verá el cuadro de exhortación en la parte inferior:
Entonces, ahora tiene la salida del cuadro de acción para la acción en páginas y no en publicaciones o archivos (¡revise en su sitio!). Vale la pena señalar que el cuadro de acción de la acción que trabajé podría agregarse a través de Customizer. Puede agregar una sección al personalizador para el cuadro de acción, puede crear controles y configuraciones para el número de teléfono y la dirección de correo electrónico, luego conectar el resultado al gancho After_Content. Incluso puede agregar un botón de radio que les pide a los usuarios que seleccionen bajo qué tipo de contenido debe aparecer el cuadro. Como desafío adicional, ¿por qué no intentar hacer esto? Puede usar una combinación de las técnicas que ha aprendido aquí y las que ha aprendido en la parte anterior de esta serie. Los complementos vienen en varias formas, como ha visto trabajando a través de algunos ejemplos de complementos, existen diferentes tipos de complementos que muestran contenido en su sitio de diferentes maneras. Todos estos son complementos simples, que eliminan el código simple y, con la práctica, comenzará a crear complementos mucho más complejos para crear y hacer contenido que los usuarios puedan definir. Pero los complementos no se tratan solo de mostrar el contenido: puede crear un complemento para ayudarlo a administrar el sitio o mejorar el rendimiento de su sitio, entre muchos otros usos. A medida que continuamos trabajando en este curso, descubrirá que puede cubrir más complementos que hacen diferentes tareas. En la próxima parte de esta serie, iremos a trabajar con tipos de publicaciones y taxonomías personalizadas. Aprenderá a grabarlos y mostrarlos a través de los archivos de plantilla del tema relevante. ¡Nos vemos la próxima vez!
¿Y este tutorial parecía útil?¿Por qué quieres aprender el desarrollo de WordPress?¿De qué quieres saber más?Háganos saber en los comentarios a continuación.
desarrollo

intermedio