Cómo crear y elegantes cajas con avisos en WordPress

Si generalmente lee sitios de noticias o revistas, notará que a veces usan algo llamado “notificaciones” o “comillas” para resaltar el texto clave. Estas son una excelente manera de separar piezas largas de texto y atraer la atención del lector a los puntos clave y las citas interesantes. Se usan mucho en entrevistas y generalmente incluirán lo más interesante o controvertido que dijo la entrevistada.
Tal vez también notaste que nuestro nuevo rediseño de blog incluye nuevos modelos de notificación como este, ¡gracias al talento de diseño WPMU y al equipo front-end!
También puede usarlos para el texto que no es parte del contenido principal, como una exhortación o publicidad. Estos atraerán la atención del lector y lo ayudarán a aumentar el número de personas que leen a lo largo de una página o hacen clic en otra página que desea dirigir. En esta publicación, le mostraré cómo escribir un complemento que le brinde un código corto para un texto simple. El código corto tiene solo un atributo, que es la alineación, por lo que puede elegir si enfocar sus avisos o alinearlos hacia la izquierda o la derecha, para que el texto los envuelva.
Lo que necesitará para rastrear esta publicación, necesitará lo siguiente:
Un editor de código,
Un sitio de desarrollo puede probar su trabajo y
Acceso a su carpeta WPRPress WP-Content.
Utilizo un sitio de prueba en mi automóvil local al que agregué los datos ficticios proporcionados por WordPress para las pruebas: puede encontrarlo en las páginas de prueba de unidades temáticas. Pero puede escribir su propio contenido inactivo, usar contenido real o copiar en un texto Lorem Ipsum. Nota: He cargado el código completo para esta publicación en GitHub, por lo que puede verificar el suyo a medida que avanza. Configurar el complemento Lo primero que debe hacer es crear su complemento. En la carpeta WP-Content/Plugins, cree una nueva carpeta llamada WPMU-Pretty-Callouts. En esa carpeta crea dos archivos vacíos: el archivo de complemento principal, llamado WPMU-Prety-Caluts.php y una hoja de estilo, llamada style.css. Ahora abra el archivo PHP que acaba de crear. Comience agregando texto comentado a la cima, diciendo WordPress qué es esto:
Cargue la idea 5D3026689A44AD81C778E6987CBC7133
Ella le dice a WordPress que este es un complemento y ofrece a los usuarios algo de información al respecto. Puede editar el suyo para agregar su nombre y URI en lugar de el mío.
Agregar la función de código corto ahora para agregar la función que crea el código corto. Comience creando esta función vacía:
Cargue la idea 6F8FFC318343C2F725574C8B3F3D56
Esto configura su función y la adjunta al gancho add_shortcode para que se ejecute cuando se active. Ahora para llenar la función. En primer lugar, configuraremos nuestro atributo para la alineación. Dentro de la función, agregue eso:
La idea se carga 1CB711BFF9A431499C345E994F393017
Esto establece el atributo de alineación que los usuarios pueden usarlo para agregar alineación izquierda, derecha o central. Por defecto, tiene un valor nulo. A continuación, aún dentro de su función, agregue el código para eliminar el contenido del código corto en su sitio:
Cargue la idea 8B8A77084EE9F6B6B60161C663FBF9
Esto usa funciones ob_start () y ob_get_clean () para asegurarse de que su contenido sea ob_get_clean () en el lugar correcto. Entre ellos se encuentran el código que agrega el contenido del código corto, envuelto en un elemento aparte con una clase de bonita y completa agregada como clase si se establece. Esto significa que puede usar este atributo para la estilización más adelante. Nota: Para obtener más información sobre la creación de complementos de código corto, consulte nuestra guía completa para la creación de complementos.
Tu función completa ahora se verá así:
La idea F7582ED35FABE93486C549234FB8 está cargada.
Ahora guarde el archivo y active el complemento.
Probemos cómo funciona. Abra una publicación en su sitio (o cree una nueva) y agregue algún texto. Por encima de uno de sus párrafos de texto, agregue el código corto. Aquí está el mío: [BIRETO-CILLOUT] Esta es una buena notificación. Se ve muy bien cuando agrega mucho texto. ¡Odio! Amor. [/Pretty-Callout] Ahora guarde la publicación y eche un vistazo a su sitio. Descubrirá que se agrega el texto, pero aún no se destaca:
Tenemos que agregar algo de estilo. Vamos a hacer eso.

Agregar una hoja de estilo lo primero que debe hacer es grabar la hoja de estilo que ya ha creado en la carpeta Plugin. Regrese al archivo del complemento principal y agregue esta función:

La idea se carga 97B1F5562015EE25795741FFC697567 Esto registra la hoja de estilo en su complemento y la pone en la cola correcta, para que WordPress pueda usarla. Agreguemos un estilo básico a la hoja de estilo. Abra el archivo style.css en el complemento y agregue eso:
Cargue la idea 14E3BB366D456745D20FC6E5F42E1A32
Esto agrega algo de estilo a .Pretty-Callout .Pretty-Callout, sin ninguna alineación adicional. Ahora echemos un vistazo a cómo se ve la notificación en nuestro sitio:
Se ve mejor: el texto está escrito en caracteres cursivos, es más grande que el resto del contenido y tiene bordes para resaltarlo. Ahora intentemos agregar estilo para ese atributo de alinearse. Agregue eso a su hoja de estilo:
La idea D37BC9F99643A353C51C3C49EB85C0E2 está cargada
Esto agrega flotador para las versiones izquierda y derecha de la notificación, así como los bordes para ellos y para una versión enfocada, que será más estrecha que la predeterminada. Esto es más útil cuando se trabaja con un diseño de ancho completo. Regrese a su publicación y edite el código corto para agregar uno de los atributos. Agregaré alineación a la derecha:

[Pretty-Callout align = “correcto”] Esta es una buena notificación. Se ve muy bien cuando agrega mucho texto. ¡Odio! Amor. [/Pretty-Callout] Ahora actualice la publicación y eche un vistazo a su sitio:
¡Eso se ve aún mejor! Ahora, si desea cambiar su hoja de estilo, puede, tal vez variar la fuente o el tamaño del texto. Alternativamente, en su archivo de complemento puede finalizar el texto de salida en una etiqueta H3, para aplicar el estilo dado a los elementos H3. ¡La elección es suya! Los hermosos anuncios lo hacen que el texto sea más atractivo y son fáciles de implementar. Espero que esté de acuerdo conmigo en que esta técnica le permite agregar un texto que parece atractivo y hace que sus publicaciones sean más fáciles de leer para los visitantes. No le aconsejaría que use demasiado aviso, los agregue con moderación para obtener el máximo impacto. Y ahora que ha creado su propio complemento para agregar hermosas notificaciones, puede activar esto en todos sus sitios y puede usarlo donde lo necesite. ¡Divertirse! ¿Utiliza avisos en su sitio? ¿Has notado nuestras notas recientemente rediseñadas aquí en el blog? Cuéntanos lo que piensas en los comentarios a continuación.
Etiquetas:
citas de bloque

Avisos
personalización