Nuevo: no se necesita estilo
Actualización 20/04/21 – Quizás quieras echar un vistazo al complemento add-on Portal de Afiliados pro. Es una nueva alternativa al Área de Afiliados que proporciona una interfaz atractiva para tus afiliados sin necesidad de personalización. Funciona con cualquier tema y se ve genial en dispositivos móviles.
Hemos hecho todo lo posible para que AffiliateWP se sienta y parezca parte de la administración de WordPress. Está ahí cuando lo necesitas y fuera de tu camino cuando no. Del mismo modo, en el front-end, diseñamos AffiliateWP para que se integre perfectamente con cualquier tema de WordPress.
Creemos en proporcionar a los afiliados una experiencia coherente en todo el sitio web.
Debido a esto, AffiliateWP incluye un estilo mínimo para el Área de Afiliados y se basa en el estilo actual del tema para la mayor parte del trabajo pesado.
Para muchos de nuestros clientes, el estilo predeterminado del Área de Afiliados es perfecto. Los enlaces aparecen en el color de enlace del tema, el texto se muestra en la fuente del tema, los elementos del formulario tienen el estilo de formulario del tema, etc. Sin embargo, recibimos el ocasional ticket de soporte preguntando por qué el Área de Afiliados no se ve muy "llamativa", con esquemas de color personalizados, iconos, animaciones, fuentes personalizadas; ¡lo que sea!
Podríamos haber optado por estilizar el Área de Afiliados basándonos en las "tendencias de diseño actuales", pero los clientes no siempre estarán de acuerdo con las decisiones de diseño que tomamos. Como tal, un Área de Afiliados muy estilizada probablemente no coincidirá con el tema de WordPress del cliente y, considerando los miles de clientes que usan AffiliateWP, puedes imaginar el problema potencial...
Los clientes exigirán que "arreglemos" su tema porque AffiliateWP lo "rompió".
Es mejor añadir estilo a un lienzo limpio (como el Área de Afiliados de AffiliateWP) que eliminar todo y empezar de nuevo. Además, algunas tendencias de diseño pueden pasar de moda al año siguiente y nos veríamos obligados a rediseñar el Área de Afiliados una y otra vez.
Dado que decidimos mantener las cosas simples desde el principio, nuestros clientes siempre tendrán un Área de Afiliados con un aspecto genial que coincida con su tema de WordPress. Si hay el deseo de añadir elementos de diseño personalizados, todo lo que se necesita es algo de estilo CSS.
Estilo con CSS
Enseñar CSS no es el objetivo de este artículo, pero afortunadamente hay innumerables tutoriales disponibles en la web. No hay mejor manera de aprender que experimentando, pero antes de hacerlo, necesitarás considerar dónde poner tu código CSS personalizado.
En tu tema hijo
El código CSS personalizado se puede añadir al archivo style.css de tu tema hijo. Si no tienes un tema hijo, es muy fácil crear uno. Añadir CSS a un tema hijo asegura que no pierdas tu estilo personalizado cuando se actualice el tema padre.
En un plugin personalizado
Hay muchos plugins gratuitos disponibles en el repositorio de WordPress que te permiten agregar código CSS personalizado a tu sitio, pegando el CSS directamente en el administrador de WordPress. Si tu tema se actualiza alguna vez, no perderás tus modificaciones. Aquí tienes un plugin de este tipo que se me ocurre: Reaktiv CSS Builder.
Encontrar los selectores CSS correctos para usar
Para dar estilo al Área de Afiliados con CSS, necesitarás saber qué estilizar. La forma más fácil de hacerlo es usar las herramientas de desarrollador integradas en tu navegador. Esto te permite simplemente pasar el cursor sobre cualquier elemento en el Área de Afiliados y descubrir exactamente cuál es el selector CSS relevante a usar.
Cada navegador tiene una forma ligeramente diferente de acceder a sus herramientas de desarrollador:
Chrome
https://developer.chrome.com/devtools
Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
Otra forma de averiguar qué selectores CSS usar es mirar los archivos de plantilla de AffiliateWP en un editor de código. Todos los archivos de plantilla relevantes para el Área de Afiliados se incluyen en la carpeta templates del plugin.
dashboard.php
El panel de control del afiliado
dashboard-tab-urls.php
La pestaña de URLs del panel de control del afiliado
dashboard-tab-stats.php
La pestaña de Estadísticas del panel de control del afiliado
dashboard-tab-graphs.php
La pestaña de Gráficos del panel de control del afiliado
dashboard-tab-referrals.php
La pestaña de Referidos del panel de control del afiliado
dashboard-tab-visits.php
La pestaña de Visitas del panel de control del afiliado
dashboard-tab-creatives.php
La pestaña de Creatividades del panel de control del afiliado
dashboard-tab-settings.php
La pestaña de Configuración del panel de control del afiliado
Estilizar los enlaces del Área de Afiliados para que parezcan "pestañas"
Una de las solicitudes que hemos recibido es estilizar los enlaces del Área de Afiliados para que parezcan "pestañas". A continuación, se muestra un ejemplo de cómo puedes lograr esto utilizando estilos CSS y el tema predeterminado de WordPress TwentySixteen.
Algo muy importante a tener en cuenta es que todos los temas son únicos. Aunque hemos proporcionado código de ejemplo para convertir los enlaces en pestañas, puede que se necesiten estilos adicionales para tu tema. Con TwentySixteen, tuvimos que agregar algunos estilos más para que las cosas se vieran como queríamos. Esto se indica en los comentarios CSS al final.
Así es como se ven los enlaces predeterminados del Área de Afiliados tal cual (con el tema TwentySixteen).
Así es como se ven nuestras nuevas pestañas una vez que se han agregado algunos estilos CSS.
Para probar esto tú mismo:
- Ver el código CSS.
- Copia y pega el código CSS (todo lo que está entre las etiquetas <style>) en un plugin CSS personalizado, o directamente en el archivo style.css de tu tema hijo (como se discutió anteriormente).
- ¡Disfruta!
Como nota final, los fragmentos de código en nuestro repositorio están configurados para ser plugins por conveniencia. Una forma alternativa de usar el código CSS es guardar el archivo mostrado e instalarlo directamente como un plugin en tu sitio. Puedes encontrar instrucciones sobre cómo hacerlo en la sección “Usar fragmentos”. Usarlo de esta manera tiene la ventaja adicional de cargar el CSS solo en tu Área de Afiliados, y no en ninguna otra página que no lo requiera.
Con un poco de entusiasmo y algunos conocimientos básicos de CSS, puedes estilizar el Área de Afiliados para que se vea exactamente como deseas. Si estás interesado en aprender más sobre CSS, consulta algunos tutoriales y prueba a experimentar con los diversos elementos de diseño. ¡Incluso podrías divertirte!
¡Feliz diseño!
Buen tutorial,
Modificaré mi área de afiliados 😀
mucho más fácil con visual composer, lol.
Claro que sí. Hay muchas maneras de abordar esto 🙂
¿es posible usar elementor para editar el diseño del área de afiliados?
Estoy esperando una respuesta para esto también. Quizás Andrew pueda responder en algún momento de este año. Gracias.
Hola, ¿quieres editar la página en sí (se llama "Área de Afiliados" por defecto), o quieres editar los enlaces reales, campos de formulario, etc. dentro del Área de Afiliados?
La página se puede diseñar usando Elementor, pero el Área de Afiliados en sí necesitaría ser modificada agregando CSS personalizado a Elementor. El Área de Afiliados se genera usando un bloque o un shortcode (puedes elegir cuál quieres usar), por lo que no es algo que puedas personalizar desde dentro de Elementor.
¿Cómo anular las plantillas del plugin? ¿En qué jerarquía tienes que colocar los archivos en tu tema hijo? He probado todas las obvias, nada funciona. Esta es una opción de personalización absolutamente crítica necesaria para personalizar el área de afiliados de WP, y no hablas de ella en absoluto en este artículo.
Consulta este artículo de documentación: http://docs.affiliatewp.com/article/118-modifying-template-files
Gracias, hombre.
Está funcionando de maravilla.
Me alegra saber que esta publicación ayudó.
¿Cuál es el mejor tema o plantilla de wp para usar con el plugin de afiliados de wp?
AffiliateWP funciona bien con cualquier tema de WP. El mejor tema será el que te guste en diseño y funcionalidad.
¿cómo configurar en una pestaña del menú lateral...? ¿puedes ayudarme...?
Hola Yupi, uno de los consultores de terceros puede ayudarte si necesitas algún desarrollo personalizado: https://affiliatewp.com/consultants/
Recomiendo hacer que el plugin y los complementos sean compatibles con Beaver Builder.
Hola,
Esto estuvo bien, pero no se ajustó del todo a mis requisitos, así que creé algo que se ve un poco mejor (si me permites decirlo 🙂
https://github.com/mattbingham/wordpress-affiliateswp/blob/master/style1.css
Captura de pantalla aquí: https://github.com/mattbingham/wordpress-affiliateswp/blob/master/affiliateswp-style1.jpg
Es adaptable, por lo que las pestañas deberían saltar a la siguiente línea en dispositivos más pequeños.
¡Te amo! Gracias por esto
Ya estoy buscando comprar este plugin, lo he probado y me ha gustado, pero solo tengo una pregunta y parece ser la más importante para decidir si comprarlo o no.
Tu plugin se ve genial en el escritorio, pero de alguna manera en pantallas pequeñas, como en un teléfono móvil, el área de afiliados, una vez que se hace clic en cualquier pestaña, ya sea Panel o Estadísticas, el contenido salta al final de la pantalla, después de que terminan todas las pestañas. Y todo lo que quiero es que en pantalla pequeña pueda editarlo usando CSS en un tema hijo de manera que, una vez que se haga clic en las pestañas, se deslice a la siguiente página con su contenido y pueda agregar un botón para volver al menú.
Si es posible, lo compraré
¡Hola Tabish!
Eso suena posible, pero necesitarás algunos conocimientos de CSS y HTML (quizás incluso JavaScript para lograr el efecto de deslizamiento) para obtener el resultado final que deseas.
El Área de Afiliados se puede personalizar completamente a tu gusto copiando los archivos de plantilla a tu tema hijo de WordPress.
Puede encontrar más información sobre los archivos de plantilla aquí: https://docs.affiliatewp.com/article/118-modifying-template-files
¡Espero que eso ayude!
Hola
¿Cómo puedo agregar algo de texto debajo de la pestaña de URL de afiliados? ¿Cómo es posible?
Hola Saket,
Podrías lograr esto de varias maneras:
1. Crea tu propia pestaña de URL personalizada usando el complemento de pestañas del área de afiliados: https://affiliatewp.com/add-ons/official-free/affiliate-area-tabs/
Puedes usar una página de WP para la pestaña, lo que significa que puedes poner cualquier cosa en ella, incluido tu texto personalizado. Luego, puedes colocar el shortcode [affiliate_urls] debajo de tu texto para imitar la funcionalidad proporcionada en la pestaña original.
Este shortcode es proporcionado por el complemento de shortcodes del área de afiliados: https://affiliatewp.com/add-ons/official-free/affiliate-area-shortcodes/
2. Agrega el texto usando el archivo de plantilla dashboard-tab-urls.php proporcionado por AffiliateWP. Puedes encontrar más información sobre los archivos de plantilla aquí: https://docs.affiliatewp.com/article/118-modifying-template-files
3. Agrega el texto a través del hook de acción affwp_affiliate_dashboard_urls_top. Se requerirían algunos conocimientos de desarrollo para esto.
¿Cómo puedo combinar el contenido de dos pestañas?
Por ejemplo, quiero que las URL de afiliados y las estadísticas estén en una sola pestaña
¿Cómo puedo estilizar el portal? Específicamente, la página de creatividades. He intentado agregar clases flex-1, w-0 -mr -px a mi CSS de tema hijo, pero nada cambia. No hay "creatives.php" dentro de /wp-content/plugins/affiliatewp-affiliate-portal/templates/ para que tenga una mejor idea de las clases utilizadas (pero estoy bastante seguro de que son esas).
Solo quiero cambiar el color de fondo de blanco para que se puedan ver los gráficos invertidos.
Hola Shane,
El complemento Affiliate Portal tiene su propio estilo personalizado, por lo que no es posible personalizar el CSS. El portal elimina todas las demás hojas de estilo para evitar conflictos de estilo entre él y el tema activo.
Es probable que en el futuro agreguemos algunas opciones básicas de color para que pueda combinar mejor los colores de su marca. También estamos considerando la compatibilidad con el modo oscuro. Esto ayudaría a que el arte invertido se vea contra el fondo blanco en la página de creatividades.
¿Sigue siendo una opción para usted el Área de Afiliados estándar? Puede personalizarla como desee y tiene plantillas que puede anular (el portal no tiene ninguna plantilla).
El Portal me atrajo y compré la versión Pro. Luego me di cuenta de que no funcionaría porque mi sitio web está en modo oscuro con colores de fuente de cuerpo BLANCOS.
Pasé las últimas 7 horas intentando personalizar los colores a través de CSS y solo leí tu comentario aquí. Me muero.
Hola, quiero mostrar solo la página de inicio de sesión y una página de registro. En esta página de inicio de sesión, si el usuario no está registrado, haga clic en el enlace de registro, de lo contrario, inicie sesión en su cuenta de afiliado. ¿Cómo es posible?
AffiliateWP muestra un formulario de inicio de sesión y registro en la misma página por defecto. Si un usuario ha cerrado sesión, verá ambos.
Hay un enlace roto en el artículo: https://github.com/AffiliateWP/affiliatewp-code-snippet-library/blob/master/affiliate-area/affiliate-area-custom-styling.php
Gracias Lucas, el enlace ha sido actualizado.
¿Dónde puedo poner las clases CSS?