homefinance blog
En este artículo, crearemos una versión extendida del widget “Publicaciones recientes”-“Widget WordPress”. Para seguir estas instrucciones, necesitará una instalación funcional de WordPress en un automóvil o servidor host local y un editor de texto, como Notepad ++. El widget de “publicaciones recientes” es en realidad una parte de la instalación de WordPress y viene en un títulos de publicaciones de forma muy simples con hipervínculos. Ahora, crearé una versión diferente, que contiene una miniatura de publicación, un título de publicación y un fragmento muy pequeño, sin embargo, diseñado para destacar. Descargo de responsabilidad: no acepta ningún consejo de diseño de mi parte.
*** Atención *** Le aconsejo que cree y pruebe el widget en una instalación local de WordPress (o al menos en un sitio de prueba). También debe hacer una copia de seguridad de su sitio. Esto se debe al hecho de que los errores pueden causar errores fatales y bloquear su sitio, perturba a los usuarios. El director de widgets personalizados de WordPress widgets cualquier suplemento de WordPress, ya sea un complemento o un widget, tendrá que tener su propio director en “complementos” y al menos un archivo PHP. Así que comencemos creando un director. Primero, navegue por el director “WP-Content/Plugins” (a través de FTP) y cree una carpeta. Siéntete libre de nombrarlos como quieras. En nuestro caso, será “Widget de computadora fijo”.
Lea nuestra guía sobre cómo usar FTP para averiguar cómo acceder a sus archivos WP.
Después de eso, cree un archivo PHP usando Notepad ++ (o cualquier editor de código). Nómbralo como quieras, asegúrate de que termine con la extensión “.php”. Llamé a mi archivo de complemento “fijo-widget-plin.php”. Copie e inserte esto en su archivo de complemento y lo editaremos más tarde: > Personalización) sin actualizar la página. Clase Fixunner_custom_widget extiende wp_widget {// principal constructor de funciones públicas __construct () {$ widget_ops = matrix (‘classname’ => fixrunner_cusget ‘,,
‘Descripción’ => ‘un complemento para lectores fijos’, ‘Customize_Selective_Refresh’ => true,); Parent :: __ construct (‘fixunner_custom_widget’, ‘fixrunner widget personalizado’, $ widget_ops); } La parte de “descripción” es diferente de la descripción del encabezado. Esta descripción es visible desde el aspecto >> widgets:
Widget Widget WordPress Content utilizando la función “widget ()”.Entonces, esta es la interfaz real del widget WordPress.Lo que escriba aquí se mostrará en su sitio. Por lo tanto, en nuestro caso, hay una parte sustancial del código (para aquellos que no están familiarizados con PHP), pero hacemos comentarios para explicar por qué las líneas son. No entrar en detalles para cada línea de código que pueda necesitar en Google algunos de ellos: // Definición de la parte del widget frontend de la función pública ($ args, $ instancia) {if (! isset ($ args [‘id_widget’ ])) {$ args [‘widget_id’] = $ this-> id;} // Obtén el título del backend
$ title = (! vacía ($ ‘[‘ title ‘))?$ instancia [‘title’]: __ (‘publicaciones recientes’);$ Title = Aplicte_filters (‘title_widget’, $ title, $ Court, $ this-> id_base);// obteniendo el número de publicaciones desde el extremo posterior (el valor predeterminado es 5 si no se establece ningún valor)
$ número = (! vacía ($ instancia [‘número’]))? ausente ($ instancia [‘número’): 5; if (! $ number) {$ number = 5; } // limitar la longitud excertp a 10 palabras la función custom_excerpt_length ($ longitud) {return 10; } add_filter (‘longitud_extras’, ‘longitud_extras_personalized’, 999); // Configuración de los argumentos del bucle $ args = matrix (‘post_type’ => ‘post’, ‘post_status’ => publicación ‘,’ posts_per_page ‘=> $ number); $ Query1 = nuevo WP_Query ($ args); ? $ args [‘antes de_itle’]. $ Título. $ args [‘After_title’]. ‘
‘;}?> have_posts ()) {$ query1-> the_post (); $ séntese_img_url = get_the_post_thumbnail_url (); “? Color de fondo: blanco; Text-Align: Center; Color: #666; Display: Block; Weight Font: Bold; “> $ telength) echo “…”; ? ?
? Php} widget wordpress personalizado -the administración form -form () En resumen, esta es la parte en la que definimos cómo se mostrará el widget en el backynd, en “apariciones -> widgets”. En general, si hace algo muy simple, es posible que solo necesite crear un campo en el que el “título” esté configurado para el widget personalizado. Crearemos el campo “Título” y “Número de publicaciones” (que dictará cuántas de las publicaciones recientes se mostrarán). Este número se usa realmente en el código anterior. Verá una variable “$ número” que en realidad es el número que establecí en el backend. Para resumir, este es el código que necesitará: Formulario de función pública ($ instancia) {$ title = isset ($ instancia [‘title’)? esc_attr ($ instancia [‘title’]): ”; $ número = isset ($ instancia [‘número’])? ABSINT ($ instancia [‘número’]): 5; ? “WideFat” id = ” get_field_id (‘title’);?>” Name = ” get_field_name (‘title’); ?> “Type =” text “value =” “Dimension =” 3 ” />
<
? Php}} Actualización de su widget wordPress – update () opciones () para que esta parte sea exactamente lo que dice: actualiza las opciones de widget cuando las cambia en backend. Debido a que tengo 2 opciones en mi widget, tendré que establecer 2 líneas para actualizarlas: actualización de funciones públicas ($ new_instance, $ old_instance) {$ instancia = $ old_instance; $ instancia ['title'] = sanitize_text_field ($ new_instance ['title']); $ instancia ['número'] = (int) $ new_instance ['número']; } Entonces, si solo tiene una opción (como el título de Widget), solo necesitará las dos primeras líneas y la línea de título ($ instancia ['title'] = sanitize_text_field ($ new_instance ['title');). Además, si tiene más opciones, deberá especificar una línea para cada uno de ellos. Así que no olvidemos el CSS, si ha creado el archivo CSS de acuerdo con las instrucciones anteriores, puede pegar las siguientes filas del código CSS para obtener el estilo que creé: .Fr-Post-Container {Width: 235px; Llenado: 5px; Color de fondo: #EEE; margen: coche; Altura mínima: 85 PX; Chenar-Jos: 1 PX Solid #999; Chenar-Ras: 10px; Botón de margen: 5px; Transición: todos los .2s Facilizados; -Webkit-box-shadow: 1px 1px 5px 1px rgba (0.0,0,0.75); -Moz-box-shadow: 1px 1px 5px 1px RGBA (0.0,0,0.75); Shadow de caja: 1px 1px 5px 1px RGBA (0.0,0,0.75);} .fr-Post-Container: Hover {Color-Found: #EEE; Transformación: escala (1.1);} .Fr-Thumb {float: izquierda; Ancho: 75px; Altura: 75px; Tamaño del fondo: cubierta; Posición del sótano: centro central; Pantalla: bloque en línea; } .fr-text {ancho: 150px; Pantalla: bloque en línea; Tamaño de fuente: 11px; Padre-izquierda: 5px; Font-Family: "Times New Roman";
} .fr-text p {text-align: justificación; borde: 0; color de fondo: blanco; relleno: 5px 5px 0px 5px; Color: #666; Line-Weight: 11px;} .Container-frr {Padding-top: 10px; Bottom: 10px; margen-bottom: 20px;} En resumen, no entraremos en detalles lo que hace cada línea de código. Sin embargo, son bastante simples y duran unos 5 minutos para llevarlos a Google. Probar un widget personalizado WordPress Si ha seguido las instrucciones (o exactamente, siempre que desee crear un widget idéntico), puede continuar y agregar el widget a su barra lateral de WordPress. Vaya a “Widget” y “Widget” y agregue “Widget Fixunner personalizado” al área de la barra lateral. El resultado debe ser un widget creado para mostrar una miniatura de publicación, el título de publicación de WordPress y el fragmento con cada uno de los elementos que crecen en tamaño al pasar con el mouse sobre: también, la codificación del widget requiere una cierta familiaridad con la programación orientada a objetos y en Mínimo conocimiento del bucle de WordPress. Debe consultar el Codex de WordPress si tiene alguna duda y lo estará. No hay nada malo o extraño en eso. Al menos, ahora sabe cómo crear un directorio y un archivo de complemento/widget en WordPress. Si esto suena demasiado complicado, puede contactarnos. Resolveremos cualquier problema relacionado con WordPress. Más recursos:
Cómo agregar el encabezado expirado a WordPress
Err_ssl_version_or_cipher_mismatch Error – Cómo remediar
Cómo corregir err_too_many_redires Error en WordPress
