📱 Storm WebStories - Plugin WordPress

Plugin profissional para criar Web Stories responsivas com SEO otimizado e URLs customizadas

Criado para Storm Animes (stormanimes.com.br)

---

✨ Recursos Principais

• ✅ Layout Responsivo - Funciona perfeitamente em mobile e desktop
• ✅ SEO Otimizado - Schema.org, Open Graph, Twitter Cards
• ✅ URLs Customizadas - /stories/nome-da-story
• ✅ Compatível com Qualquer Permalink - Funciona com /%post_id%/, /%postname%/, etc.
• ✅ Gerador em Massa - Crie stories de milhares de posts existentes
• ✅ Sitemap Próprio - Para Google Search Console
• ✅ Copy Instigante Automático - Gera conteúdo engajador dos posts
• ✅ Navegação Intuitiva - Swipe, clique, teclado
• ✅ Progress Bar - Indica progresso da story
• ✅ Auto-play - Avanço automático de slides
• ✅ Customização de Cores - Personalize cada story
• ✅ CTA Poderoso - Converte visualizadores em leitores
• ✅ Dashboard Completa - Estatísticas e controle total

---

🚀 Instalação

Opção 1: Via WordPress Admin

1. Baixe o repositório como ZIP
2. Vá em Plugins > Adicionar Novo > Enviar Plugin
3. Selecione o arquivo ZIP e clique em Instalar Agora
4. Ative o plugin
5. Acesse Web Stories > Dashboard

Opção 2: Via FTP/SSH

cd wp-content/plugins/
git clone https://github.com/danilostorm/storm-webstories-wp-plugin.git

Depois ative o plugin no painel do WordPress.

⚠️ Importante: Flush Rewrite Rules

Após instalar, vá em Configurações > Links Permanentes e clique em Salvar Alterações (sem mudar nada). Isso garante que as URLs funcionem corretamente.

---

📊 Dashboard

Ao ativar o plugin, você terá acesso a uma Dashboard completa em: WordPress Admin → Web Stories → Dashboard

Funcionalidades da Dashboard:

• 📈 Estatísticas em Tempo Real: Total de stories, publicadas, rascunhos
• ⚡ Ações Rápidas: Criar story, ver todas, acessar sitemap
• 🌟 Últimas Stories Criadas: Tabela com as 5 mais recentes
• 🚀 Guia de Uso: Tutorial passo a passo
• 💡 Dicas Profissionais: Melhores práticas
• 🔗 Links Importantes: Sitemap, arquivo, GitHub

---

🔥 Gerador em Massa

Para Sites com Milhares de Posts!

Acesse: Web Stories → Gerador em Massa

Recursos do Gerador:

✅ Filtros Avançados:

• Selecionar categorias específicas
• Filtrar por intervalo de datas
• Apenas posts com imagem destacada
• Pular stories já existentes

✅ Processamento em Lote:

• Processa até 1000 posts por vez
• 10 posts processados simultaneamente
• Não dá timeout
• Pode pausar a qualquer momento

✅ Status Configurável:

• Criar como rascunho (revisar depois)
• Publicar automaticamente

✅ Log em Tempo Real:

• Veja cada story sendo criada
• Contador de sucessos/erros/pulados
• Barra de progresso visual

Exemplo de Uso:

1. Acesse Web Stories → Gerador em Massa
2. Selecione as categorias desejadas
3. Marque "Apenas com Imagem Destacada"
4. Marque "Pular Existentes"
5. Defina limite (ex: 100 posts)
6. Clique em "Contar Posts" para ver quantos serão processados
7. Clique em "Iniciar Geração"
8. Aguarde o processamento
9. Revise as stories criadas em Web Stories → Todas as Stories

---

📚 Como Usar

1. Criar Story Manualmente

Passo 1: Crie um Post Normal

Crie seus posts normalmente no WordPress com:

• Título atraente
• Conteúdo completo
• Imagem destacada (obrigatório)
• Resumo/Excerpt

Passo 2: Crie a Web Story

1. Vá em Web Stories > Adicionar Nova
2. Dê um título para a story
3. Na caixa "Post de Origem", selecione o post base
4. Configure:
   • Cor de Fundo: Cor principal da story
   • Cor do Texto: Cor dos textos
   • Cor de Destaque: Cor dos botões CTA
   • Número de Slides: Entre 3 e 10

Passo 3: Publique!

Quando você publicar, o plugin automaticamente:

• Gera os slides com copy instigante
• Cria as animações e transições
• Otimiza para SEO
• Adiciona ao sitemap

2. Gerar Stories em Massa

Use o Gerador em Massa para criar stories de posts existentes automaticamente (veja seção acima).

---

🗺️ URLs e Estrutura

Web Stories Individuais

http://seusite.com/stories/nome-da-story/

Arquivo de Todas as Stories

http://seusite.com/stories/

Sitemap XML

http://seusite.com/webstories-sitemap.xml

📌 Adicione o sitemap no Google Search Console!

✅ Compatibilidade com Permalinks

O plugin funciona com QUALQUER estrutura de permalink:

• /%postname%/ ✅
• /%post_id%/ ✅
• /%year%/%monthnum%/%postname%/ ✅
• /%category%/%postname%/ ✅
• Qualquer outra estrutura ✅

---

🎨 Estrutura de uma Story

Cada Web Story é composta por:

1. Slide de Capa

   • Título do post
   • Imagem destacada
   • Chamada para deslizar

2. Slides de Conteúdo (3-8 slides)

   • Ganchos instigantes
   • Trechos do conteúdo
   • Imagens
   • Número do slide

3. Slide de CTA (Final)

   • Chamada para ação
   • Botão para ver notícia completa
   • Link para o post original

---

📱 Experiência Mobile vs Desktop

Mobile (Padrão)

• Tela cheia
• Swipe para navegar
• Progress bar no topo
• Auto-play ativo

Desktop

• Story centralizada em formato mobile (414x736px)
• Clique nas laterais para navegar
• Teclas de seta funcionam
• Hover pausa auto-play
• Fundo escuro elegante

---

⚙️ Recursos Técnicos

SEO

• Schema.org WebStory completo
• Meta tags Open Graph
• Twitter Cards
• Sitemap XML dedicado
• URLs amigáveis
• Link canônico para post original

Performance

• CSS otimizado (minificado)
• JavaScript vanilla (sem dependências pesadas)
• Lazy loading de imagens
• Transições GPU-accelerated
• Processamento em lote sem timeout

Acessibilidade

• Navegação por teclado
• ARIA labels
• Prefers-reduced-motion support
• Alto contraste

Compatibilidade

• WordPress 5.8+
• PHP 7.4+
• Todos os navegadores modernos
• Progressive Enhancement
• Qualquer estrutura de permalink

---

🛠️ Customização Avançada

Templates Customizados

Você pode sobrescrever os templates copiando para seu tema:

wp-content/themes/seu-tema/
  ├── single-webstory.php
  └── archive-webstory.php

Hooks Disponíveis

// Modificar slides gerados
add_filter('storm_ws_generated_slides', function($slides, $post) {
    // Sua lógica aqui
    return $slides;
}, 10, 2);

// Modificar configurações de SEO
add_filter('storm_ws_seo_schema', function($schema, $post_id) {
    // Customizar schema
    return $schema;
}, 10, 2);

CSS Customizado

Adicione no seu tema:

:root {
    --story-bg: #sua-cor;
    --story-accent: #sua-cor-destaque;
}

.webstory-slide-title {
    font-family: 'Sua-Fonte', sans-serif;
}

---

📊 Google Search Console

Configurando o Sitemap

1. Acesse Google Search Console
2. Selecione sua propriedade
3. Vá em Sitemaps
4. Adicione: webstories-sitemap.xml
5. Clique em Enviar

Validando Web Stories

Use a Ferramenta de Teste de Web Stories do Google.

---

🔧 Troubleshooting

As stories não estão sendo geradas?

1. Verifique se o post tem imagem destacada
2. Confirme que o post foi selecionado como origem
3. Salve como rascunho e publique novamente

URLs não funcionam (404)?

1. Vá em Configurações > Links Permanentes
2. Clique em Salvar Alterações (flush rewrite rules)
3. Tente acessar a story novamente

Slides não avançam?

1. Verifique se jQuery está carregado
2. Desative outros plugins de cache temporariamente
3. Limpe o cache do navegador

Gerador em massa não processa todos?

1. Aumente o limite de posts
2. Verifique filtros aplicados
3. Confirme que posts têm imagem destacada (se filtro ativo)

Erro "post type inválido"?

1. Vá em Configurações > Links Permanentes
2. Clique em Salvar Alterações
3. Desative e reative o plugin

---

📋 Roadmap Futuro

• [ ] Integração com Google Analytics
• [ ] Editor visual de slides (drag & drop)
• [ ] Templates pré-definidos de design
• [ ] Export para AMP Stories
• [ ] Compartilhamento social direto
• [ ] Métricas de engajamento
• [ ] Vídeo em slides
• [ ] Áudio background
• [ ] Integração com API de IA para copy automático
• [ ] Agendamento de publicação de stories

---

👨‍💻 Autor

Storm Animes

• Site: stormanimes.com.br
• GitHub: @danilostorm

---

📜 Changelog

v1.0.1 (23/01/2026)

• ✅ Corrigida compatibilidade com estruturas de permalink customizadas
• ✅ Adicionado Gerador em Massa com filtros avançados
• ✅ Melhorado sistema de rewrite rules
• ✅ Dashboard completa com estatísticas
• ✅ Processamento em lote sem timeout

v1.0.0 (23/01/2026)

• 🎉 Lançamento inicial
• ✅ Custom post type WebStory
• ✅ Gerador automático de slides
• ✅ SEO completo com Schema.org
• ✅ Layout responsivo
• ✅ Sitemap XML

---

📝 Licença

GPL v2 or later

---

💖 Contribuindo

Contribuições são bem-vindas!

1. Fork o projeto
2. Crie sua feature branch (git checkout -b feature/MinhaFeature)
3. Commit suas mudanças (git commit -m 'Adiciona MinhaFeature')
4. Push para a branch (git push origin feature/MinhaFeature)
5. Abra um Pull Request

---

⭐ Suporte

Se este plugin foi útil, considere dar uma estrela no GitHub!

Feito com ❤️ para a comunidade WordPress brasileira