Share
En el tutorial anterior, comenzamos a hablar sobre los espacios de nombres y la carga automática con PHP en el contexto del desarrollo de WordPress. Y aunque en realidad nunca presentamos ninguno de estos dos temas, los definimos y comenzamos a sentar las bases de cómo los presentaremos en un próximo tutorial..
Sin embargo, antes de hacer eso, hay algunas funciones que debemos completar para completar nuestro complemento. El objetivo es finalizar el complemento y su funcionalidad para que tengamos un complemento básico, orientado a objetos, que esté documentado y funcione bien con una advertencia; No utiliza espacios de nombres ni carga automática..
Esto, a su vez, nos dará la oportunidad de ver cómo se ve un complemento antes y después de presentar estos temas..
Antes de continuar, recomiendo leer el tutorial anterior. De esta manera, comprenderá qué son los espacios de nombres y la carga automática, tendrá la versión de trabajo del complemento hasta este punto (ya que vamos a desarrollarlo), y luego estará listo para proceder de ese punto en adelante.
Una vez que lo hayas leído, siéntete libre de volver a este tutorial y reanudar tu trabajo.
Al igual que con todos mis tutoriales, asumo que tiene un entorno de desarrollo de trabajo en su máquina. Esto incluye lo siguiente:
Si está tan lejos en la serie (o ha leído alguno de mis trabajos anteriores), supongo que ya tiene alguna cosa como lo anterior ya está en su lugar.
Y cuando lo hagas, estamos listos para empezar..
Recordemos del tutorial anterior:
Construiremos un complemento que facilite la carga de hojas de estilo y estilos de JavaScript en nuestro complemento, y que muestre un cuadro meta que le pide al usuario una pregunta para ayudarlo a hacer una lluvia de ideas sobre qué bloguear.
Sí, es simple y no es probable que alguien lo use fuera del estudio de los conceptos que estamos cubriendo en este blog. Pero los medios por los cuales enseñamos los conceptos que estamos usando son lo importante..
Este plugin nos da la posibilidad de hacer exactamente eso..
Al final del último tutorial, nos fuimos con un complemento que muestra una pregunta aleatoria al escritor en la parte superior de la barra lateral en la pantalla de creación de publicaciones de WordPress.
Cada vez que actualice la página, se cargará una nueva pregunta. Tal como está, no está mal, pero hay algunas mejoras que podemos hacer en términos del estilo del contenido en el cuadro meta..
Es decir, podemos introducir hojas de estilo que nos ayudarán a crear una presentación visualmente más atractiva. Además, nos dará la oportunidad de explorar algunas técnicas más orientadas a objetos que podemos usar cuando trabajamos con activos como hojas de estilo..
Vamos a empezar.
Para los fines de este tutorial, no voy a utilizar ningún tipo de preprocesador. Sólo voy a usar CSS de vainilla. Sin embargo, la forma en que nosotros enlistamos activos estará un poco más orientada a los objetos de lo que muchos desarrolladores de WordPress están acostumbrados a ver.
Todo esto contribuirá al objetivo de usar espacios de nombres y carga automática en esta serie. Pero primero, comencemos con la introducción de estas hojas de estilo, creando las interfaces de clase, las clases y la comunicación necesarias con la API de WordPress..
En el administración directorio, crea un subdirectorio llamado bienes. Dentro de bienes directorio, crea un subdirectorio llamado css y luego agregar el archivo admin.css.
La estructura de directorio final debe verse algo como esto:
Todavía no estamos listos para ofrecer ningún tipo de estilos. En su lugar, debemos centrar nuestra atención en el código del lado del servidor responsable de poner en cola esta hoja de estilos..
Cuando se trata de registrar y publicar hojas de estilo y JavaScript, la mayoría de los desarrolladores de complementos de WordPress están familiarizados con los ganchos necesarios para hacer precisamente eso. Específicamente, me refiero a admin_enqueue_scripts y wp_enqueue_style.
Y aunque vamos a usar estos ganchos, lo vamos a configurar de una manera simple, orientada a objetos. No, esta serie no está destinada a sumergirse en los principios orientados a objetos, pero, cuando corresponda, me complace intentar mostrártelos..
En la programación orientada a objetos, una interfaz se define como tal:
Una interfaz es una estructura / sintaxis de programación que permite que la computadora aplique ciertas propiedades en una clase.
Otra forma de pensarlo es esta:
Si tiene una clase que implementa una interfaz, la clase debe Definir la funcionalidad que dicta la interfaz..
Entonces, si la interfaz tiene dos firmas de métodos con una visibilidad y un nombre específicos, entonces la clase que implementa la interfaz debe tener dos métodos con la misma visibilidad y nombre, así como una implementación del método real.
Y eso es lo que vamos a hacer. Primero, necesitamos definir nuestra interfaz. Así que en el util directorio, crear interfaz-activos.php y luego agregue el siguiente código:
Aviso, la interfaz en realidad no define la funcionalidad. En su lugar, especifica qué Las clases que implementan esta interfaz deben definir..
Como puede suponer, las clases que implementarán esta interfaz tendrán los dos métodos anteriores junto con una implementación real para cada función. Y veremos cómo funciona esto momentáneamente..
A continuación, asegúrese de incluir este archivo en el archivo principal del complemento:
A continuación, necesitamos crear un archivo que implemente esta interfaz. Ya que estamos trabajando con archivos CSS, crearemos un cargador CSS.
El cargador CSS
Esta es la clase que se encarga de implementar la interfaz y de realizar el trabajo real de registrar la función con el gancho de WordPress necesario (y de dar la implementación a dicha función).
Si echa un vistazo al código a continuación, debería ser muy similar a algo que haya visto o quizás haya trabajado en un proyecto anterior:
El código de arriba debería será relativamente fácil de seguir dados los comentarios del código, pero describiré lo que está sucediendo:
Accentsconagua
en eso y encolar son ambas funciones requeridas ya que la clase implementa el Assets_Interface.en eso Se llama, registra el encolar Funciona con el gancho responsable de registrar una hoja de estilo..encolar método registra la admin.css archivo y usos tiempo de archivo como una forma de saber si el archivo ha cambiado o no (lo que nos permite eliminar cualquier versión en caché del archivo cuando se sirve).En esta implementación, el actual admin.css archivo se agrega en cada página. Agregar un condicional para verificar qué página está actualmente activa y luego determinar si la hoja de estilo se debe agregar o no se puede agregar como un ejercicio posterior al tutorial. Para una pista, echa un vistazo get_current_screen ().
A continuación, debemos incluir este archivo en el archivo principal del complemento:
A continuación, necesitamos crear una instancia del cargador CSS y llamar a su
en esométodo en la principaltutsplus_namespace_demofunción:en eso();Suponiendo que haya hecho todo bien, debería poder actualizar el Añadir nueva publicación página, ver la fuente, y ver
admin.csslistado como una hoja de estilo disponible.Tenemos una cosa más que hacer antes de que estemos listos para concluir esta parte del tutorial. Necesitamos escribir algo de CSS.
Estilo de la caja de Meta
Dado que la mayoría del tutorial se ha centrado en algunas técnicas orientadas a objetos y todavía tenemos algunos temas nuevos para explorar en esta serie, haremos esta parte relativamente fácil..
En lugar de utilizar simplemente algunos estilos predeterminados proporcionados por WordPress, mejoremos un poco la meta box.
Primero, ubique el
hacerfunción en elMeta_Box_Displayclase. Modifiquémoslo para que muestre el contenido del archivo en un elemento de párrafo con el atributo ID de "tutsplus-author-prompt".Para hacer esto, vamos a presentar un nuevo método que usará un método de API de WordPress para sanear HTML.
array ('id' => array (),),); devuelve wp_kses ($ html, $ allowed_html);Entonces llamaremos a esta función desde dentro del
hacerMétodo para mostrar el contenido en el cuadro meta.question_reader-> get_question_from_file ($ file); $ html = "$ pregunta
"; echo $ this-> sanitized_html ($ html);Ahora podemos abrir admin.css y hacer algunos pequeños cambios para actualizar la apariencia de la meta box en el Añadir nueva publicación pantalla. Vamos a añadir el siguiente CSS:
# tutsplus-author-prompt font-style: italic; text-align: center; color: # 333;Y en este punto, tu meta box debería verse como la siguiente:
Como se mencionó al principio, no es nada importante, pero es algo que mejora un poco la apariencia de la pregunta un poco..
Que sigue?
En este punto, hemos introducido varias clases diferentes, interfaces y otras características orientadas a objetos. Tenemos un complemento que usa datos de un archivo de texto, que se comunica con la API de WordPress y que desinfecta la información antes de representarla en la página de inicio..
Tenemos una buena base desde la cual comenzar a hablar sobre los espacios de nombres. Así que en el siguiente tutorial, vamos a hacer exactamente eso. Si todavía no se ha puesto al día con el resto de la serie, lo recomiendo, ya que solo continuaremos construyendo sobre lo que hemos aprendido..
Si, mientras tanto, está buscando otro material relacionado con WordPress, puede encontrar todos mis tutoriales anteriores en mi página de perfil y puede seguirme en mi blog o en Twitter..
Hasta entonces, no olvide descargar la versión de trabajo del complemento (versión 0.2.0) adjunta a esta publicación. El enlace está disponible en la barra lateral debajo de un botón titulado Descargar adjunto. Y, como es habitual, no dude en hacer cualquier pregunta en los comentarios.!
Recursos
