Jump to content
codercss

Criar template para worpdress, com vertente web responsive

Recommended Posts

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

Share this post


Link to post
Share on other sites

Ó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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
    • By ShibuiFansub
      Boa tarde, tenho 18 anos e decidi criar meu primeiro blog, só por teste mesmo, acabei baixando dois template e acabei gostandos de ambos, tentei fazer uma "fusão" deles, mas meio que não consegui.
      Eu queria colocar o 'estilo de postagem' desse template: http://prntscr.com/o105rw
      Nesse daqui: http://prntscr.com/o108ad
      Download Template 1:  https://drive.google.com/file/d/1mhOCYgbwPIcO14wPwOumemBrCZR5l3fT/view
      Download Template 2:  https://drive.google.com/file/d/1QmohfY7MUZI4PTIQYkjbNRwxxWkfIflD/view
       
    • By erick.major
      Oi pessoal,
      Eu desenvolvi um template Volt e pretendo usá-lo como um padrão para os outros. Há um exemplo do meu código abaixo:
      {# LOCKED MODE #} {% if session.get('locked_mode', true) is not empty and session.get('locked_mode', true) is true %}     {{ partial('locked_mode_view') }} {# UNLOCKED MODE #} {% else %} <div class="row">     {{ partial('unlocked_mode_view') }}     {% block content %}         {{ partial('unlocked_mode_content') }}     {% endblock %} </div> {% endif %} Enquanto ele estava compilando, o compilador mostrava esse erro:
      Embedding blocks into other blocks is not supported in... Eu não entendi esse erro. O que posso fazer nesta situação?
    • By isaque_cb2
      Olá! eu estava aqui fazendo meu site, quando me deparei com o problema de fazer um menu "bonito" baixei este template depois de ver o exemplo na net, mas ele é muito complicado pra mim, não sou profissional (mas sou programador iniciante em c#)
      TEMPLATE
      mas se alguém puder me ajudar a criar uma pagina deste tipo, sem tantos códigos, eu agradeço, pois do jeito que está eu não consigo nem alterar as cores...
      pode ser com tutoriais, dicas, videos, etc...
       
      ~Grato desde já~
    • By Naldinhosi
      Pessoal bom dia, peço desculpas se já existe um post referente a esse problema, caso haja me informe por gentileza  se não...
       
      Estou concluindo o desenvolvimento de um site responsive, então resolvi atualizar meus navegadores, quando entro no site fica meio desorganizado o menu superior entre outras informações, então eu retiro o zoom da página para 90% e o site fica tudo ok, gostaria de saber se alguém esta passando por isso e como resolver, ou errei em alguma coisa referente ao meu código. ficarei grato e obrigado.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.