Siempre vamos a querer algo especial, algún detalle que no trae incluido el tema o complemento instalados en nuestra web. WordPress está estructurado de tal forma, por medio de hooks (ganchos), a los que podemos hacer referencia directa a través de funciones personalizadas, de esta forma es posible crear cambios en el comportamiento o el aspecto es situaciones concretas.
¿Qué son las funciones personalizadas de WordPress?
Se trata de pequeños fragmentos de código que se inyectan en el código de nuestra web a través de los llamados hooks (ganchos).
Es el mismo proceso que utilizan muchos plugins para añadir nuevas funcionalidades, pero con la diferencia que sólo añadimos lo que necesitamos, manteniendo así el código de nuestra web lo más limpio posible, sin añadir código innecesario que es posible que no utilicemos nunca.
Hay que diferenciar dos tipos de funciones personalizadas, las que afectan al tema que hemos instalado (que se deberán colocar dentro de las opciones del tema si lo permite o en un Child Theme (tema hijo), y las que utilizamos para modificar algún comportamiento de la web (que colocaremos en un plugin de funciones creado especialmente para este proceso).
Aunque podemos instalar todos los fragmentos de código en el mismo sitio, lo más recomendado es diferenciarlos. De esta forma, si sólo hemos utilizado un plugin personalizado y cambiamos de tema en algún momento, arrastraremos códigos inútiles en el plugin de funciones personalizadas. Y si hemos colocado todos los fragmentos en un Child Theme, perderemos todos los cambios al desactivar el tema.
En este artículo sólo mostraré fragmentos que se instalarán en un archivo de funciones personalizadas y que no afectan a ningún tema que podamos tener instalado. Son códigos que utilizo yo mismo y que he recopilado de internet para tenerlos a mano en cualquier momento.
Cómo crear el plugin para añadir funciones personalizadas
Ya he explicado en otra ocasión cómo crear un plugin de funciones personalizadas para liberar al archivo funtions.php a través de un editor y creando nosotros mismos el encabezado, pero en esta ocasión voy a realizar todo desde la misma administración de WordPress.
Para este proceso hay que instalar un plugin que nos ayudará a crear el encabezado del nuevo archivo y, una vez que lo tengamos, podremos borrarlo para que no ocupe espacio.
Utilizar plugin temporal para crear el encabezado del plugin de funciones
Como cualquier otro plugin, añadimos uno llamado "Pluginception".
Dentro de la misma pestaña de administración de plugins se añadirá una nueva opción desde la que accedemos a rellenar los campos del encabezado del nuevo plugin. Aunque el único obligatorio es el del nombre, recomiendo rellenar algunos de los opcionales por si lo compartimos o comercializamos.
Los campos recomendados para rellenar son los siguientes:
- Nombre del plugin: El nombre que aparecerá en el listado de los plugins instalados.
- Slug del plugin: nombre del archivo, debe ser sencillo, sin espacios o separado por guiones y sin caracteres especiales.
- URL del plugin: Puedes poner la url de tu página web.
- Descripción: Un recordatorio para saber lo que hace el plugin.
- Versión: Puedes poner el valor que quieras o dejarlo en blanco.
- Autor: Pon tu nombre para que quien use sepa quien lo ha creado.
- URI del autor: Si tienes un sitio personal relacionado contigo puedes ponerlo aquí.
- Licencia: Siguiendo los cánones de WordPress, pongamos una licencia libre y sin restricciones de uso GPLv2 o posterior.
Una vez que hemos picado en el botón "¡Crea un plugin en blanco y actívalo!", podemos desactivar y desinstalar el plugin que hemos instalado inicialmente para liberar espacio y no tener basura que ya no necesitamos.
El aspecto que tenemos de nuestro plugin de funciones será el siguiente:
Añadir fragmentos de funciones al plugin
Aunque lo ideal siempre es trabajar fuera de la web a la hora de editar archivos (utilizando con un cliente FTP o desde el administrador de archivos del hosting), en esta ocasión vamos a seguir dentro de la administración de WordPress editando el plugin para añadir los fragmentos de código que nos interesen.
En el caso de tener algún error, lo único que tenemos que hacer es seguir las instrucciones de WordPress y la función de "Modo de recuperación", o acceder al administrador de archivos y editar el plugin para revertir el último cambio que hemos realizado.
Si está bloqueada la posibilidad de editar archivos y temas con algún plugin de seguridad, hay que desactivar esa opción mientras realizamos los cambios y volver a activarla cuando terminemos.
Para empezar a pegar o escribir nuestras nuevas funciones en el plugin, lo editamos desde la pestaña "Plugins - Editor de plugins". Una vez dentro, seleccionamos nuestro plugin en el menú desplegable que encontramos en la parte superior derecha.
Ahora ya podemos escoger que código necesitamos y empezar a realizar cambios en nuestro sitio, no os volváis locos y añadáis cosas sin sentido o innecesarias, podemos poner la web en un estado de inestabilidad que tengamos que corregir.
Códigos que puedes añadir a tu plugin de funciones personalizadas
A continuación, te dejo algunos códigos que pueden servirte para mejorar el aspecto o la funcionalidad de tu página, puedes encontrar muchos más buscando en internet, pero te facilito los que yo uso más a menudo.
Fragmentos de código que puedes utilizar para WordPress
Personalizar la página de acceso a la administración de WordPress
Ideal para personalizar sitios creados para clientes que sustituye el logo de WordPress por el de la empresa que queramos y coloca una imagen de fondo personalizada.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //Logo y formulario personalizado en login function my_custom_login_logo() { echo '<style type="text/css"> body { background: url(PONER URL DE IMAGEN DE FONDO); background-repeat: no-repeat; background-size: cover; background-position: center; } h1 a { background-image:url(PONER URL DE IMAGEN DE LOGOTIPO) !important; background-size:200px !important; width: auto !important; height: 102px !important; } </style>'; } add_action('login_head', 'my_custom_login_logo'); add_action( 'password_protected_login_head', 'my_custom_login_logo'); |
Cambiar la url del logo en el formulario de acceso
Este código se utiliza en conjunto con el anterior y permite cambiar la url del enlace al picar sobre el logo del formulario de acceso.
1 2 3 4 5 | //Personalizar url logo acceso function my_custom_login_url() { return 'tudominio.com'; } add_action( 'login_headerurl', 'my_custom_login_url' ); |
Ocultar mensaje de error al acceder a WordPress
Muy útil si el plugin de seguridad que utilizamos no dispone de esta opción. Así evitamos dar información concreta de por qué alguien no se puede registrar y los hackers lo tienen más difícil para poder encontrar el punto de ataque. Podemos poner el mensaje que queramos.
1 2 3 4 5 | //Desactivar errores de acceso function login_errors_message() { return 'Ooooops!'; } add_filter('login_errors', 'login_errors_message'); |
Redirigir al front-end al acceder a la administración
Con este fragmento de código redirigimos a la página de inicio a la persona que acceda a la administración de WordPress, mostrando en un principio la web en lugar del escritorio de administración. debes cambiar la palabra "inicio" por el slug de tu página principal.
1 2 3 4 5 6 7 8 | //Redirigir a la home tras acceder a wordpress function my_custom_login_redirect(){ //Colocamos en la función home_url() el slug de nuestra página de inicio wp_redirect( home_url("inicio") ); exit(); } add_action('wp_login','my_custom_login_redirect'); |
Añadir la fecha de actualización de las publicaciones
Si disponemos de contenido actualizado, en muchos casos es importante mostrar cuando se han realizado los cambios para mostrar que mantenemos la información al día. En la siguiente función podemos cambiar el formato en el que se muestra la fecha y la hora modificando las cadenas estandarizadas en internet como se muestra aquí.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //Añadir la fecha de actualización de las publicaciones function dcms_last_updated_entry( $content ) { if ( ! is_single() ) return $content; $custom_content = ''; $u_time = get_the_time('U'); $u_modified_time = get_the_modified_time('U'); if ($u_modified_time >= $u_time + 86400) { $updated_date = get_the_modified_time('M j, Y'); $updated_time = get_the_modified_time('h:i a'); $custom_content .= '<p class="last-updated">Última actualización: '. $updated_date . ' - '. $updated_time .'</p>'; } $custom_content .= $content; return $custom_content; } add_filter( 'the_content', 'dcms_last_updated_entry' ); |
Sustituir la fecha de publicación por la de actualización
Otra opción para mostrar una fecha diferente a la de publicación, pero esta vez sustituyendo una por otra.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //Fecha de actualización en vez de publicación function ivw_last_modified_date_blog( $the_date ) { if ( 'post' === get_post_type() ) { $the_time = get_post_time( 'U' ); $the_modified = get_post_modified_time( 'U' ); if ($the_modified >= $the_time + 86400) { $last_modified = sprintf( __( '%s', '' ), esc_html( get_post_modified_time( 'j \d\e F \d\e Y', '', '', true ) ) ); $date = $last_modified; } else { $actual_time = sprintf( __( '%s', '' ), esc_html( get_post_time( 'j \d\e F \d\e Y', '', '', true ) ) ); $date = $actual_time; } return $date; } } add_action( 'get_the_date', 'ivw_last_modified_date_blog' ); add_action( 'get_the_time', 'ivw_last_modified_date_blog' ); |
Fragmentos de código que puedes utilizar para Woocommerce
Añadir el nombre de las categorías en el loop de productos
Al mostrar el listado de los productos, suele aparecer el título con el precio, pero hay ocasiones especiales, como los catálogos, que es necesario mostrar también las categorías.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //Añade nombre de categorias en productos function IVW_woo_loop_product_title() { $terms = get_the_terms( $post->ID, 'product_cat' ); if ( $terms && ! is_wp_error( $terms ) ) : $cat_links = array(); foreach ( $terms as $term ) { $cat_links[] = $term->name; } $on_cat = join( " ", $cat_links ); sort($cat_links); ?> <div class="label-group"> <?php echo $cat_links[0];?> </div> <?php endif; // echo '<h2 class="woocommerce-loop-product__title">' . get_the_title() . '</h2>'; } remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 ); add_action( 'woocommerce_shop_loop_item_title', 'IVW_woo_loop_product_title', 10 ); |
Ocultar la pestaña "Descargas" dentro de la cuenta de Woocommerce
Si no ofrecemos contenido descargable, es absurdo tener una opción que no ofrece usabilidad al cliente o usuario de Woocommerce, con esta función desactivamos y ocultamos esta sección.
1 2 3 4 5 6 7 | // Ocultar pestaña descargas function ivw_ocultar_descargas( $items ) { unset($items['downloads']); return $items; } add_filter( 'woocommerce_account_menu_items', 'ivw_ocultar_descargas', 999 ); |
Vaciar el carrito al salir
El carrito de Woocommerce se queda con los productos añadidos para los usuarios registrados, pero en ocasiones esto puede resultar molesto para quien desea comprar otros productos diferentes cuando regresa en otro momento a la tienda.
1 2 3 4 5 6 7 8 9 | // Vaciar carrito al salir function woo_custom_add_to_cart( $cart_item_data ) { global $woocommerce; $woocommerce->cart->empty_cart(); return $cart_item_data; } add_filter( 'woocommerce_add_cart_item_data', 'woo_custom_add_to_cart' ); |
Añadir pie de foto con el título de la imagen
Esta opción es interesante sobre todo cuando disponemos de productos variables, pudiendo mostrar el título de la imagen que hemos seleccionado junto a la selección elegida, añadiendo información extra a la que se muestra en el título del producto.
Para poder adaptar el estilo y colocar el texto como queramos, podemos utilizar la clase CSS "imagewc-caption" para dar nuestro toque personal.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //Título en imágenes de productos function imagewc_insert_captions( $html, $attachment_id ) { $captions = ''; $title = get_post_field( 'post_title', $attachment_id ); if( !empty( $title ) ) { $captions .= '<h2><br>' . esc_html( $title ) . '</h2>'; } $description = get_post_field( 'post_excerpt', $attachment_id ); if( !empty( $description ) ) { $captions .= '<p>' . $description . '</p>'; } if( !empty( $captions ) ) { $captions = '<div class="imagewc-caption">' . $captions . '</div>'; $html = preg_replace('~<\/div>$~', $captions . '</div>', $html ); } return $html; } add_filter( 'woocommerce_single_product_image_thumbnail_html', 'imagewc_insert_captions', 10, 2 ); |
Redirigir a la página a la home cuando el carrito está vacío
Para evitar mostrar una página en blanco o un mensaje donde ponga que no tenemos nada añadido al carrito, podemos redirigir automáticamente al usuario a la página de inicio cuando vacíe el carrito o este no tenga productos añadidos.
1 2 3 4 5 6 7 8 | //Redirigir a Inicio cuando el carrito no tiene productos function carrito_vacio_ir_a_home() { if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) { wp_safe_redirect( home_url() ); exit; } } add_action( 'template_redirect', 'carrito_vacio_ir_a_home' ); |
Auto completar los pedidos pendientes de pago
Aunque no es lo más apropiado para gestionar una tienda si lo usamos en todo tipo de pagos, hay momentos en los que puede solucionarnos un problema importante que impide que recibamos los correos de los nuevos pedidos, ya que estos no se envían si la transacción está pendiente de pago. Una situación muy común es el pago a través de pasarelas de pago de los bancos, que no aceptan determinados certificados de seguridad o IP compartidas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //Autocompleta los pedidos pendientes de pago function letsgo_auto_processing_orders( $order_id ) { if ( ! $order_id ) return; $order = wc_get_order( $order_id ); //ID’s de las pasarelas de pago a las que afecta $paymentMethods = array( 'redsys' ); if ( !in_array( $order->payment_method, $paymentMethods ) ) return; // Si el pedido está "pendiente" actualizar el estado a "procesando" if( $order->has_status( 'pending' ) ) { $order->update_status( 'processing' ); } } add_action( 'woocommerce_thankyou', 'letsgo_auto_processing_orders'); |
Ocultar campos en el formulario del Checkout
Aunque no es lo más apropiado para gestionar una tienda si lo usamos en todo tipo de pagos, hay momentos en los que puede solucionarnos un problema importante que impide que recibamos los correos de los nuevos pedidos, ya que estos no se envían si la transacción está pendiente de pago. Una situación muy común es el pago a través de pasarelas de pago de los bancos, que no aceptan determinados certificados de seguridad o IP compartidas.
Las líneas con doble barra (//) son los únicos campos que se mostrarán, en este ejemplo sólo habrá opción a rellenar el nombre, apellidos, país y correo electrónico. campos más que suficientes para vender productos de suscripción online.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //Ocultar campos del formulario en el checkout function custom_override_checkout_fields( $fields ) { //unset($fields['billing']['billing_first_name']); //unset($fields['billing']['billing_last_name']); unset($fields['billing']['billing_address_1']); unset($fields['billing']['billing_address_2']); unset($fields['billing']['billing_company']); unset($fields['billing']['billing_city']); unset($fields['billing']['billing_postcode']); //unset($fields['billing']['billing_country']); unset($fields['billing']['billing_state']); unset($fields['order']['order_comments']); unset($fields['billing']['billing_phone']); //unset($fields['billing']['billing_email']); unset( $tabs['additional_information'] ); return $fields; } add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); |
Como activar "breadcrumbs" o migas de pan en Divi- Mantenimiento periódico para aumentar la seguridad en WordPress
- Cómo hacer una copia de seguridad en WordPress de nuestro sitio
- Añadir más botones en los módulos del tema Divi
- Plugin para vídeos de Youtube con botón de suscripción
- Añadir funciones personalizadas en WordPress sin usar un tema hijo
Juan Martin.
Excelente!!!!!. MUY claro y preciso. Felicitaciones.
Gracias por compartir tus conocimientos.