¿Alguna vez has querido que AffiliateWP se ajuste a tus necesidades exactas, como añadir un mensaje personal al panel de afiliados o ajustar algunos elementos de diseño? Si te preguntas cómo personalizar AffiliateWP sin ningún riesgo para tu sitio, esta guía te guiará paso a paso.
Con la ayuda del plugin WPCode, te mostraremos cómo añadir fragmentos de código personalizados de forma rápida, segura y todo en un solo lugar.
¿Por qué añadir código personalizado?
Añadir código personalizado puede ayudarte a hacer que AffiliateWP sea verdaderamente tuyo. Ya sea que quieras cambiar el estilo o personalizar el área de afiliados, los fragmentos de código personalizados pueden dar vida a esos cambios. Pero modificar el código directamente en los archivos del plugin puede ser arriesgado; si algo sale mal, podría hacer que tu sitio sea inaccesible.
En su lugar, utilizaremos un enfoque más seguro trabajando con una herramienta de gestión de código llamada WPCode, que mantiene tus archivos principales intactos mientras te permite organizar y activar fragmentos de código personalizados desde un solo lugar.
Uso del plugin WPCode para añadir los fragmentos de código
El primer paso es instalar el plugin WPCode, que te permite añadir y gestionar fácilmente fragmentos de código sin tener que editar los archivos principales. WPCode te proporciona un área dedicada para añadir código personalizado de forma segura, para que puedas mantener todos tus cambios organizados en un solo lugar.
Para configurar WPCode, ve a tu panel de WordPress, navega a Plugins > Añadir nuevo y busca WPCode.
Una vez que lo hayas encontrado, haz clic en Instalar ahora y luego en Activar.
Después de activar el plugin, verás un nuevo elemento de menú llamado Fragmentos de código en el panel.
Aquí es donde añadirás y gestionarás tu código personalizado.
Añadir código PHP
Intentemos añadir nuestro primer fragmento de código personalizado a AffiliateWP. Imagina que quieres añadir un encabezado de bienvenida en la parte superior del Área de Afiliados para hacerla más atractiva para tus afiliados. Este es un uso perfecto para un fragmento de PHP.
En tu panel de WordPress, ve a Fragmentos de código y selecciona Añadir nuevo. Como acabas de instalar el plugin, tu lista estará vacía.
Se te llevará a una pantalla donde puedes introducir tu código personalizado. Aquí, puedes añadir tu propio código único o seleccionar un fragmento de código de la biblioteca predefinida. Pasa el ratón sobre Añadir tu código personalizado (Nuevo fragmento) y haz clic en el botón Añadir fragmento personalizado.
Se te llevará a una pantalla donde puedes seleccionar el tipo de código. Aquí debes seleccionar Fragmento de PHP.
Empieza por dar un título a tu fragmento, como Encabezado personalizado del Área de Afiliados, algo que te ayude a recordar lo que hace este fragmento.
En el cuadro de código, pega el siguiente código PHP:
// Add a custom heading to the Affiliate Area
function custom_affiliate_area_heading() {
echo '<h2>Welcome to Your Affiliate Dashboard!</h2>';
}
add_action('affwp_affiliate_dashboard_top', 'custom_affiliate_area_heading');
Este fragmento de código añade un encabezado que aparece en la parte superior del Área de Afiliados. Para asegurarte de que el fragmento se ejecuta automáticamente, elige Inserción automática en las opciones de Inserción.
Cuando hayas terminado, activa el menú Activo y haz clic en el botón Guardar fragmento.
Ahora, cuando vayas al Área de Afiliados, verás el encabezado personalizado dando la bienvenida a tus afiliados.
Añadir CSS personalizado
Ahora digamos que quieres ajustar el color de las pestañas de navegación en el Área de Afiliados. Para ello, usaremos un fragmento de CSS que cambia el color del texto, haciendo que las pestañas de navegación coincidan mejor con el diseño de tu sitio.
En el panel de WPCode, haz clic en Añadir nuevo para crear otro fragmento y selecciona fragmento CSS.
En el cuadro de código, pega el siguiente código CSS:
/* Change text color for all navigation tabs */
#affwp-affiliate-dashboard-tabs li.affwp-affiliate-dashboard-tab a {
color: #333; /* Default text color */
}
/* Change text color for the active tab */
#affwp-affiliate-dashboard-tabs li.affwp-affiliate-dashboard-tab.active a {
color: #3498db; /* Active tab text color */
font-weight: bold; /* Optional: make active tab text bold */
}
Luego, establece la Inserción en Inserción automática para que el estilo se aplique a todas las pestañas de navegación de AffiliateWP. Guarda y activa tu fragmento, y los enlaces de navegación en el Área de Afiliados se mostrarán ahora con los colores actualizados.
¡Eso es todo! Ahora has añadido fragmentos de PHP y CSS para personalizar AffiliateWP, creando una experiencia más personalizada para tus afiliados. Usar WPCode hace que este proceso sea seguro y sencillo, para que no tengas que preocuparte por editar archivos principales o gestionar cambios de código complejos.