Criar template para worpdress, com vertente web responsive

[codercss 14]

Olá a todos,

 

Estou à bastante tempo longe do desenvolvimento web. Pretendo criar um website com recurso ao wordpress, que já tenho experiência (apenas via painel de instrumentos) e criar um template para esse mesmo site. O objectivo é aplicar os meus conhecimentos de CSS + JavaScript, com forte vertente de web responsive (atenção, não sou nenhum profissional).

 

Estive a googlar e encontrei esta série de vídeos, link

O Inglês não é o meu forte, mas consigo ver bem os vídeos e aprender.

Mas o que aconselham fazer? Que fonte aconselham seguir?

 

Obrigado

[Ted k' 126]

Ótimo link por sinal, mas esquece o WordPress, você primeiro faz o site FORA DO WORDPRESS, monta ele, testa o responsivo, depois que ele tiver ok você vai e ver esses vídeos que, não precisa nem ouvir, basta ver mesmo, entendi bem sem audio... bem didático esse link.

[Maykel-ctba 233]

Entrei nesse barco de temas para wordpress este ano também. Vi que é um mercado que tem bastante espaço.

 

Como o @Ted k' disse, é importante você dominar bem a montagem dos sites FORA do Wordpress. Importante ter um conhecimento de PHP também, para não se quebrar demais em coisas mais específicas.

 

Tendo ele programadinho em HTML/CSS, você vai colocando/substituindo trechos dos códigos pelas funções do Wordpress.

 

Eu aprendi por estes tutoriais: https://www.wptotal.com/como-criar-um-wordpress-theme/

E conforme as duvidas iam aparecendo, o pessoal do WP Development Stack Exchange me ajudou bastante!

[codercss 14]

Obrigado pelas dicas pessoal. Parece-me bem partir pedra primeiro no html/Css e depois avançar para o wordpress!

óptimo link @Maykel-ctba, adorei a dica!

 

Para aprender responsive o que sugerem?

Sei montar html e fazer coisas especificas em CSS. Coisas como menus, cores e assim estou à vontade. Perco-me totalmente é na parte do grid! Percebo o conceito, mas quando toca a implementar o responsive fico perdido!

 

Após ler bastante sobre o tema prefiro a seguinte abordagem: "esquecer os grids, as media queries  standars e ir fazendo o responsive à medida do meu layout." Conforme mandam os prós: https://www.casadocodigo.com.br/products/livro-css-eficiente

e https://www.casadocodigo.com.br/products/livro-web-mobile

Gostei bastante do que li! Mas sinto-me um pouco perdido, não por cause deles, mas sim porque sou novato na área! Quando abro a folha css e no momento que tenho que arrancar não sei por onde começar.

 

Espero ter-me explicado bem! Agradeço a ajuda!

[Maykel-ctba 233]

Vou falar pela minha experiência (Não sei se isso é certo, vai de cada um):

 

- Baixe o Bootstrap, e monte seu site responsivo. Quando tiver um tempo, examine os códigos dele e veja a mágica acontecer... ou melhor, a "matemágica". O Bootstrap é um arquivo CSS/JS que você usa como base para montar seu site e torná-lo responsivo. http://getbootstrap.com/

 

Basicamente, um site responsivo trabalha com medidas relativas ao invés de absolutas, ou seja: Porcentagens.

 

Um site sempre terá 100% de área do canvas (tela do seu navegador), mas esse 100% muda de acordo com o tamanho em que ele está, correto? O bootstrap trabalha com "quebras de medidas", ou os famosos "media queries". Nada mais são do que condicionais:

 

- de 1 a 767px: O site terá tal comportamento

- de 768 a 970px: O site terá outro comportamento

 

E assim vai... Isso somado a produção da estrutura em porcentagens, te leva longe.