Como mostrar suas associações em guias ou em um acordeão

O MemberPress já tem uma opção para mostrar todas as associações em uma página se você optar por Grupos MemberPress. No entanto, e se suas assinaturas forem tão diferentes que não faça sentido fazer um upgrade ou downgrade, ou se você simplesmente não quiser usar esse recurso por algum motivo?

Você já deve ter notado que cada associação cria um conjunto de códigos de acesso que você pode acessar clicando no botão Códigos curtos de associação no link Registro guia de Opções de associação caixa.

Você vai perceber que são gerados dois códigos de atalho. Para este tutorial, você precisará do código de atalho inferior, que contém a parte do ID; portanto, será necessário preparar os códigos de atalho de todas as assinaturas que deseja utilizar.

Bem, você poderia inserir esses códigos de atalho diretamente em uma página ou postagem, e isso funcionaria, mas você veria que todos os campos de cadastro ficariam visíveis imediatamente; e, se tiver três ou mais planos de assinatura que deseja adicionar, o resultado não ficaria muito agradável, já que a página ficaria bastante longa, com muitos campos exibidos de uma só vez.

Para deixar tudo bem mais bonito, você precisará instalar e ativar o Guia - Acordeão plug-in. Assim que a ativação for concluída, você verá uma nova seção no seu Painel do WordPress:

Depois disso, você estará pronto para continuar. A interface do usuário pode parecer um pouco contraintuitiva no início, mas se você seguir essas etapas, estará pronto para começar em um piscar de olhos. Você pode começar clicando no Criar agora botão.

Nas versões gratuitas, você verá oito abas disponíveis e oito acordeões disponíveis; para ter acesso a mais, você pode fazer o upgrade para a versão Pro do plug-in.

Comece clicando no botão “Escolher tema” em uma das abas ou seções que você deseja criar. Você verá o seguinte no lado esquerdo da tela:

Clique no símbolo de "mais" no campo Campos de guias linha, e você verá o seguinte:

Você terá três guias já preparadas (mas pode adicionar mais ou excluir a terceira), o que é perfeito para o nosso exemplo, já que vamos adicionar nossa Assinatura Bronze, Assinatura Prata e Assinatura Ouro. Em seguida, clique no ícone da caneta para editar cada guia individualmente. Você estará na aba “Menu”. Digite o nome da assinatura, selecione o ícone da aba e a cor do texto e do plano de fundo, se desejar (as outras duas opções estão disponíveis apenas na versão Pro), clique no Conteúdo aba e cole o código de atalho da associação no Texto vista.

Não se esqueça de clicar no botão “Atualizar conteúdo”. Provavelmente, você precisará rolar a página para baixo para vê-lo.

Repita o procedimento para as assinaturas Silver e Gold.

Essas outras opções, como Opções gerais no Guias e outras opções na guia Menu e Conteúdo permitirão que você ajuste essas guias visualmente, da maneira que desejar. Recomendamos que você experimente essas guias para ver como elas afetam a exibição visual.

Não se esqueça de clicar no botão “Salvar/Atualizar” após cada alteração. Quando terminar, clique no botão “Voltar ao WP”.

Será perguntado se você deseja sair da página. Confirme clicando no botão “Sair da página”.

Você verá uma aba “Concluído”, que também gerará um shortcode que você precisará copiar e colar em uma página ou postagem de sua escolha.

Ao clicar no ícone da caneta, você poderá voltar à edição, criar uma cópia da aba clicando no ícone ’Copiar” ou excluí-la clicando no ícone da lixeira. O ícone de Visualização (olho) não será muito útil, pois, durante a visualização, ele mostrará apenas os códigos de atalho das assinaturas que você adicionou anteriormente.

No entanto, depois de publicar essa postagem ou página, com o shortcode incluído, você verá algo assim:

Os visitantes e membros do seu site poderão alternar entre as três (ou trinta e três) associações 🙂 simplesmente clicando em uma guia.

Se você receber mensagens de erro indicando que alguns valores não foram preenchidos, será necessário ativar o Estilos CSS globais opção em MemberPress -> Configurações -> Geral guia.

E pronto, você criou listas de membros em formato de tabela com uma aparência muito melhor, ou em formato de acordeão, dependendo da opção que você preferir.