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 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.
    • By hyper_pixel
      Estou com problema com tradução, tema gringo coloquei a tradução do mario sam mas não ativa pelo que entendi por que a tradução e foi feita para o rwd é isso? pois tenho outro site com o rwd que funciona normalmente. Nesse coloquei a pasta no caminho e nao faz e efeito   app\locale\pt_BR\    depois joguei dentro da pasta do tema ativo e depois dentro da default e não muda nada app/design/frontend/tm_themes/theme760/locale/pt_BR    app/design/frontend/default/default/locale/pt_BR   Vi tutoriais de onde comprei de como instalar nova linguagem para que apareça no combo para que o usuário escolha, não quero isso quero que a loja fique em português e pronto. No Back and também nao traduziu, esta em ingles mas aparece no store config a opção (português brasil) mas só isso, não muda nada. Pelo que entendi o magento não sabe da pasta que tem traduções, nivel de código posso programar. como faco par que ele leia a pasta com os csvs a tratuza todo o site, carrinho rodape admin etc Obrigado    
    • By Felipe Barros Gontijo
      Preciso passar esse código do formulario de contato para responsivo. Preciso usar ele, pois já está configurado com conexão com o banco de dados.
       
      Me desculpem pela ignorância, estou adicionando esse código em um campo html nessa página wordpress e o que sei sobre programação é o básico do básico como mudar cor, fonte e imagem responsiva e algo mais.
       
      página:
      http://www.mundoagua.com.br/banheiras/spa-3-pessoas/
       
       
      Código:
      <h2 id="orcamento">Solicite um orçamento</h2>
      <form id="contact-mail-page" 
      action="http://www.mundoagua.com.br/enviar.php" 
      method="post" accept-charset="UTF-8">
      <div id="contato-titulo">
        <p class="vermelho"><strong>(* Preenchimento 
      obrigatório )<br />
        </strong></p>
        <table id="bgtabela" width="478" border="0" 
      cellspacing="0" cellpadding="0">
      <tbody>

      <tr>
      <td width="77"><span class="style4">*Nome:</span></td>
      <td width="436"><br />
        <input type="text" name="nome" size="65" 
      maxlength="80" />
          <br />
          <br /></td>
      </tr>
      <tr>
      <td>
      <p class="style4">*E-mail:</p></td>
      <td><input type="text" name="email" size="65" 
      maxlength="50" /></td>
      </tr>
      <tr>
        <td><span class="style4">*DDD:</span></td>
        <td><br />
          <input type="text" name="ddd" size="3" maxlength="2" 
      id="ddd" />
          <br />
          <br /></td>
      </tr>
      <tr>
      <td>
      <p class="style4">*Telefone:</p></td>
      <td><input type="text" name="telefone" size="20" 
      maxlength="10" /></td>
      </tr>
      <tr>
      <td>
      <p class="style4">Sexo:</p></td>
      <td><select name="sexo"> <option selected="selected" 
      value="M">Masculino</option> <option 
      value="F">Feminino</option> </select></td>
      </tr>
      <tr>
      <td>
      <p class="style4">*Cidade:</p></td>
      <td><input type="text" name="cidade" size="65" 
      maxlength="50" /></td>
      </tr>
      <tr>
      <td>
      <p class="style4">Estado:</p></td>
      <td><select name="estado"> <option 
      selected="selected">AC</option> <option>AL</option> 
      <option>AM</option> <option>AP</option> 
      <option>BA</option> <option>CE</option> 
      <option>DF</option> <option>ES</option> 
      <option>GO</option> <option>MA</option> 
      <option>MG</option> <option>MS</option> 
      <option>MT</option> <option>PA</option> 
      <option>PB</option> <option>PE</option> 
      <option>PI</option> <option>PR</option> 
      <option>RJ</option> <option>RN</option> 
      <option>RO</option> <option>RR</option> 
      <option>RS</option> <option>SC</option> 
      <option>SP</option> <option>SE</option> 
      <option>TO</option> </select></td>
      </tr>
      <tr>
      <td>
      <p class="style4">Mensagem:</p></td>
      <td><textarea name="comentarios" rows="4" 
      cols="60"></textarea></td>
      </tr>
      <tr>
      <td></td>
      <td><input onclick="javascript:valida_cadastro(); return 
      false" type="submit" name="EnviarBt" value="Enviar" /> 
      <input type="reset" name="Reset" value="Limpar" /></td>
      </tr>
      </tbody>
      </table>
       
       
×

Important Information

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