Como criar uma lista de tarefas com um plugin WordPress Checklist

Você já pensou como seria legal adicionar uma lista de verificação interativa ao seu site ou a uma das postagens do seu blog? As listas de verificação são super úteis e legais para todos os tipos de coisas. Desde a organização e realização de eventos, ao planeamento de férias ou simplesmente às compras, todos fazemos listas, ou, pelo menos, todos precisamos delas. Se você precisa de uma lista de verificação para seu uso pessoal ou deseja oferecer essa funcionalidade aos seus leitores, ficará feliz em saber sobre um pequeno e legal plugin de lista de verificação do WordPress que queremos recomendar a você hoje.

Com o uso deste excelente plugin, você pode facilmente adicionar listas de verificação para quaisquer necessidades que possa ter. Por exemplo, se você estiver administrando um blog de viagens, poderá colocar uma lista de verificação de coisas que as pessoas precisam levar para um determinado destino.

Outro exemplo seria um blog de maternidade, onde você pode criar uma lista de coisas que todos os futuros pais precisam obter antes da chegada do bebê.

Você pode fazer listas de compras, listas de compras, listas de tarefas, praticamente qualquer tipo de lista de verificação que faça sentido para seu site ou blog específico.

Como dissemos anteriormente, você pode adicionar facilmente uma lista de verificação ao seu blog usando o plugin WordPress Frontend Checklist. É uma solução fantástica que você vai adorar usar.

As listas de verificação são práticas, por isso decidimos ser práticos também e economizar seu tempo pesquisando esta excelente solução para você.

Lista de verificação de front-end

Frontend Checklist é um plugin do WordPress para criar checklists em HTML ou PDF para o seu site. É um plugin muito simples, intuitivo e sem complicações. Não é particularmente rico em recursos, mas isso é apenas porque você realmente não precisa fazer muitas coisas. Você precisa de uma lista de verificação simples e é isso que a Lista de Verificação do Frontend irá ajudá-lo a obter.

Uma grande coisa sobre este plugin é que você pode salvar suas listas de verificação via cookies ou no banco de dados. Dessa forma, seus visitantes podem acessar sua lista de verificação quando voltarem ao site e marcar ou desmarcar itens adicionais.

Configurações básicas e uso

A primeira coisa a fazer, é claro, é instalar o plugin e ativá-lo. Depois de resolver tudo isso, vá para Configurações> Lista de verificação do frontend.

Você verá um painel de opções simples, que contém vários códigos de acesso diferentes. A única opção disponível aqui é Nova Lista de Verificação.

Clique em Nova lista de verificação e insira primeiro um nome de lista de verificação. Não se preocupe, o nome da lista não aparecerá na sua página.

O campo Descrição é opcional. Novamente, o texto que você inserir aqui não será exibido em sua página e servirá apenas para facilitar o gerenciamento de várias listas de verificação.

A parte de itens é importante. É aí que você realmente insere os itens da sua lista de verificação. Você pode adicionar até 50 itens, o que é mais que suficiente. Campos adicionais são abertos à medida que você percorre a lista e preenche os campos do item.

<b>

Depois de concluir sua lista de verificação e inserir todos os itens, a próxima etapa é, naturalmente, adicioná-la a uma página do seu site. O Frontend Checklist oferece quatro códigos de acesso diferentes.

Use o primeiro, [frontend-checklist name="Standard"], para adicionar uma lista de verificação a uma página. Certifique-se de substituir o atributo name pelo nome da sua lista de verificação real.

Copie o shortcode e cole-o onde quiser. Criamos uma página especial para o checklist de viagem, adicionamos uma imagem e colocamos o checklist abaixo.

Você também pode adicionar listas de verificação a widgets usando o campo de texto. Claro, só faça isso se fizer sentido para você colocar a lista de verificação no rodapé ou na barra lateral.

A próxima opção de código de acesso é “Cookie on/off" e é extremamente útil. Basicamente, ele ajuda você a definir se deseja salvar a lista de verificação para uso futuro ou não. Se os cookies estiverem ativados, o status da lista de verificação será salvo para usuários logados e eles poderão continuar de onde pararam antes de atualizar ou sair da página. Se você não quiser que essa funcionalidade seja habilitada – se você quiser exibir uma lista de verificação em branco a cada vez, basta desativar os cookies.

[frontend-checklist name=”ChecklistName” cookie=”off”]

Você pode até definir o tempo de vida do cookie, usando o atributo days. Basta adicionar o número de dias que você deseja que seus cookies durem e observe que o padrão é 365 dias.

[nome da lista de verificação de frontend=”Padrão” dias=”180″]

Outra opção interessante que você pode usar é oferecer um link para a versão em PDF do seu checklist. Dessa forma, seus visitantes, após preencherem o checklist, poderão salvá-lo em seu computador ou imprimi-lo. Isso é particularmente conveniente para listas de compras, embalagem de férias e assim por diante.

O shortcode para isso é [frontend-checklist name=”ChecklistName” type=”pdf” title=”Minha lista de verificação” linktext=”Para a lista de verificação”].

O link para download estará localizado abaixo da lista de verificação. Você pode alterar o teste de link padrão “Para a lista de verificação” e substituí-lo pelo seu próprio texto.

Configurações avançadas

Depois de definir sua lista de verificação, você pode personalizá-la e torná-la mais adequada ao seu site.

Com o plug-in Frontend Checklist, por padrão, sua lista de verificação tem as mesmas configurações de outros formulários usados ​​em seu site. Isso significa o mesmo tamanho de fonte, cor, espaçamento e assim por diante. Graças a isso, seu site é estilisticamente uniforme, mas se você quiser alterá-lo e destacar sua lista de verificação, isso também é possível.

Se você deseja personalizar a aparência de sua lista de verificação e seus itens, é necessário adicionar a tag HTML “span” a cada um dos itens e definir a classe. Nesse caso, a classe é “myclist”, mas você pode, é claro, usar a sua própria. Fazemos isso para atribuir certos atributos à classe, atributos que mudarão a aparência de sua lista de verificação.

Depois de inserir as tags HTML, você precisará definir como serão os itens da classe “myclist”. Para isso, você precisa adicionar algumas linhas de CSS, o que é muito simples e não requer nenhum conhecimento específico dessa linguagem. Pense em adicionar CSS como adicionar certos atributos a uma classe. Basta seguir estes passos:

Vá para Aparência > Personalizar > CSS Adicional.

À sua esquerda, você verá um campo no qual poderá inserir seu CSS, no nosso caso, a classe “myclist”. Você pode acompanhar as mudanças ao vivo no campo à direita.

Vá para o Menu e encontre a página onde sua lista de verificação está localizada.

Neste exemplo, vamos alterar a fonte e suas propriedades. Especificamente, vamos atribuir seis propriedades à nossa classe:

• color: para alterar a cor da fonte dos itens na lista de verificação
• text-shadow: para adicionar uma sensação 3D às fontes. Os números no código definem o tamanho da sombra comparado ao tamanho da fonte. Você também pode experimentar adicionar cores diferentes a sombras e fontes.
• font-weight: para definir a espessura da fonte
• font-family: há muitos deles disponíveis, então escolha de acordo com suas preferências
• font-size: para definir o tamanho das fontes usadas para os itens da lista de verificação
• padding: para definir o número de pixels ao redor do próprio item. Os valores expressos referem-se a superior, direita, inferior e esquerda, nessa ordem, portanto, preste atenção. Em nosso exemplo, é apenas preenchimento esquerdo, ou seja, o espaço entre a caixa e o item na lista de verificação.

text-shadow: 0,5px 1px laranja;

família de fontes: ‘Comic Sans MS’, Comic Sans, cursiva;

.myclist { color: #cc615f; text-shadow: 0,5px 1px laranja; peso da fonte: 600; família de fontes: ‘Comic Sans MS’, Comic Sans, cursiva; Tamanho da fonte: 20px; preenchimento: 0 0 0 10px; }

.myclist {
color: #cc615f;
text-shadow: 0.5px 1px orange;
font-weight: 600;
font-family: 'Comic Sans MS', Comic Sans, cursive;
Font-size:20px;
padding: 0 0 0 10px;
}

Note que você tem que prestar muita atenção na estrutura do seu código, se quiser que tudo dê certo. A classe é definida como .classname. Claro, você provavelmente terá um nome diferente que usará em seu lugar. Todas as propriedades são colocadas entre {}. As propriedades são adicionadas como propriedade: descrição da propriedade; e esta é a estrutura que absolutamente deve ser seguida.

Outra coisa interessante que você pode definir é fazer com que os itens marcados sejam diferentes dos não marcados para tornar a distinção ainda mais clara. Para fazer isso, você adicionará propriedades à classe .checked .myclist.

Ao contrário dos itens desmarcados, os marcados terão decoração de texto: linha que risca os itens marcados.

text-decoration: line-through;}

.checked .myclist { color:#e4d2b8; peso da fonte: 300; text-decoration: line-through;}

.checked .myclist {
color:#e4d2b8;
font-weight: 300;
text-decoration: line-through;}

O resultado ficará assim:

Como você pode ver, é tudo muito simples. Basta seguir a estrutura do código, experimentar, brincar com as propriedades e fazer seu blog se destacar com esta adição legal e útil.

Pensamentos finais

O plugin Frontend Checklist para WordPress é uma pequena ferramenta útil que você provavelmente nem sabia que precisava. Considere adicionar uma ou duas listas de verificação ao seu site para aumentar o envolvimento do usuário e fazer com que seus visitantes voltem para mais.

Além disso, agora que você sabe como é fácil, certifique-se de personalizar sua lista de verificação, torná-la mais pessoal e alinhada com o estilo do seu blog. E nos conte os resultados!