Este artigo foi contribuído por PSDtoWP.net

Talvez seria melhor começar aqui com o porquê. Cerca de um quarto de todos os sites são executados no WordPress, a plataforma de blogs online. Isso o torna de longe um dos sistemas de gerenciamento de conteúdo de código aberto mais populares do planeta.

a grande maioria dos web designers ainda usa o Photoshop para projetar um site, embora existam alternativas. Isso significa que muitos designers de sites precisam encontrar maneiras de converter arquivos PSD em um tema WordPress responsivo!

agora, isso pode parecer bastante simples. No entanto, converter um arquivo PSD em um site WordPress não é exatamente fácil. Requer muito mais do que apenas habilidades de Photoshop! Para transformar seu arquivo PSD em um tema responsivo que pode ser usado no WordPress, você precisará de conhecimento sobre linguagens de desenvolvimento web front-end, como HTML, CSS e JavaScript, bem como a linguagem de programação back-end PHP.

agora que o porquê está fora do caminho, é hora de prosseguir para o como! Embora o como certamente não seja fácil, ainda pode ser realizado em cinco etapas bastante simples de entender!

etapa um: Crie o web design

Pule para a Etapa dois se você já projetou seu site.Há muito mais para criar um site do que simplesmente criar um logotipo e colocar em um menu, uma barra lateral, um rodapé e o conteúdo juntos. As peças neste quebra-cabeça precisam ser criadas em primeiro lugar, e o processo dessa criação é algo que nem todos podem fazer facilmente.

o web design que você cria precisa ser o equilíbrio perfeito entre forma e função, um web design que atenda a uma ótima experiência do Usuário.

Pesquisa

para criar um web design que cumpre com sucesso os critérios de aparência e funcionalidade, você precisa fazer alguma pesquisa séria. Em primeiro lugar, quem é o seu público-alvo e o que o seu público-alvo quer? Esses são obviamente aspectos-chave de sua pesquisa.

Aprenda com outros

outro aspecto do web design que você precisa pesquisar são as técnicas que seus concorrentes aplicaram. Esses concorrentes provavelmente estão mais bem estabelecidos do que você, então você certamente poderá aprender muito com o design que eles usam! Depois de fazer sua pesquisa e ter uma boa ideia de como seu site deve ficar, você deve começar a pensar em funcionalidade. Quais funções você deseja que seu web design possua?

Wireframe

depois de resolver tudo, coloque-o no papel. Desenhe & esboce como você imagina o seu site para ter uma ajuda visual à medida que avança!

Design

depois de terminar de fazer os esboços físicos / wireframes, você está pronto para entrar na cadeira do capitão e disparar o Photoshop. A primeira coisa que você precisa fazer antes de começar a sério é ter certeza de que está usando uma grade baseada em coluna, como XXgrid. Isso fará com que seu design pareça realmente arrumado e alinhado! Isso não é apenas para estética. Usar uma grade baseada em coluna para criar um design alinhado tornará mais fácil para você ou seu desenvolvedor front-end que desenvolverá o HTML e o CSS para criar um layout otimizado e responsivo para tablets e smartphones!

Antes de passar para a próxima etapa, lembre-se de que você precisa manter seus arquivos de design PSD organizados em camadas, ou seja, cada seção deve ter sua própria pasta com títulos correspondentes!

Passo Dois: Corte o PSD

depois de criar um web design com o qual você está completamente satisfeito, é hora da crise. Basicamente, o que você precisa fazer agora é o processo PSD para WordPress.

os sites hoje em dia são todos construídos usando HTML5 e CSS3. Estes estão muito melhores do que XHTML e CSS2, porque, em vez de todos os botões, fronteiras, gradientes, bordas arredondadas e todos os outros recursos que estão sendo criados usando imagens, eles são criados, como órgãos funcionais do CSS3 codificação. Portanto, cortar o arquivo PSD basicamente agora envolverá apenas cortar as imagens de fundo do PSD!

para fazer isso, você precisará abrir o arquivo no Photoshop ou no Illustrator, dependendo de qual software você usou para criar o design. Se o designer tivesse feito seu trabalho corretamente, ele teria criado um arquivo de design bem estruturado com pastas e camadas, facilitando a localização do que você precisa. Estude o web design e procure imagens que você acha que precisariam ser cortadas. Estas são basicamente todas as imagens que não podem ser criadas usando CSS3, geralmente o logotipo e as imagens de fundo. Leia Como cortar imagens aqui.

depois de substituir essas imagens de fundo usando CSS, você verá uma enorme queda nos tempos de carregamento. Isso atrairia muitos usuários para o seu site, porque o usuário médio da internet não suporta longos tempos de carregamento!

Passo Três: Crie o HTML, CSS3 e JavaScript (jQuery)

depois de cortar as imagens do seu arquivo PSD, é hora de criar o HTML5 e CSS3. A primeira coisa que você precisa fazer é criar uma nova pasta na qual você cria índice.html e estilo.Forum. Além disso, crie uma subpasta chamada imagens ou img (o que você preferir) e coloque as imagens que você extraiu nesta pasta. Crie outra pasta chamada JavaScript ou js. Isso é para mais tarde, para que você possa armazenar todos os arquivos JavaScript e jQuery em um local bem marcado. Depois de criar todas as pastas, arquivos e subpastas, é hora de começar a construir o HTML5 e o CSS3.

HTML5

HTML5 é uma linguagem relativamente nova que possui funcionalidades XHTML e HTML. Esta linguagem é essencialmente usada para criar a estrutura básica do documento, bem como nomear todos os elementos da página. O HTML5 tem elementos separados para as diferentes seções do seu site, tais como o <cabeçalho>, o <nav>, o <lado>, bem como o <rodapé> elementos (e muito mais), o que permite que você para criar um visual elegante e bem estruturado documento que é universalmente legível. Aqui estão alguns recursos excelentes que você pode usar para aprender ou atualizar sua memória sobre HTML5.

recursos HTML

W3Schools é o site número top para aprender o básico de HTML5. Cada elemento e atributo desta linguagem é explicado e ensinado usando demos, tornando uma experiência de aprendizado fácil.

Mozilla Developer’s Section – as pessoas por trás do popular navegador Mozilla Firefox têm uma seção de desenvolvedor em seu site. Você pode usar esta seção para aprender muito sobre HTML5 através dos tutoriais que eles têm lá, se você é um iniciante ou um Codificador avançado.

Web Design Tuts – Este site tem um monte de diferentes HTML5 tutoriais, alguns dos quais são gratuitos e alguns pagos.

W3 – este site é responsável pelo desenvolvimento de todos os padrões da Web aberta que foram criados para garantir a longevidade da web. Aqui você pode encontrar informações detalhadas sobre HTML5, bem como todos os seus últimos desenvolvimentos.

W3 validador – depois de ter concluído o seu HTML5, colocá-lo através deste validador. Ele dirá se o seu HTML5 atende aos padrões W3 open web!

CSS3

CSS refere-se a Folhas de estilo em cascata, e CSS3 é a versão mais recente desta linguagem front-end. CSS3 é usado para tirar os ossos dos elementos criados usando HTML5 e forma, posição e estilo-los. Isso permite que você crie um web design consistente no qual todos os elementos confirmam o design geral do site. Depois de usar o CSS3, você descobrirá que seu HTML5 será muito mais limpo e mais bem estruturado, o que, por sua vez, permitirá que ele carregue muito mais rápido, além de permitir que ele seja indexado mais rapidamente pelos mecanismos de pesquisa. Abaixo estão alguns recursos para ajudá – lo a aprender ou atualizar sua memória sobre CSS3:

recursos CSS

W3 CSS-W3 está nos recursos mais conhecidos e renomados para tutoriais CSS3 e exemplos dos vários seletores, propriedades e valores CSS3. A melhor parte disso é que todo tutorial tem uma página ‘experimente você mesmo’, que permite aplicar o que aprendeu.

Saiba CSS3-Mozilla não é apenas o criador do navegador Firefox. Também é um excelente lugar para se familiarizar com o CSS3, além de atualizar seus conhecimentos sobre o idioma.

CSS Web Design Tuts – este site contém toda uma cornucópia de tutoriais que você pode passar. Alguns desses tutoriais precisam ser pagos, mas outros ainda são totalmente gratuitos e podem ensinar muito sobre seletores, propriedades e valores do CSS3.

W3 CSS-este site é um ótimo lugar para se manter atualizado com as últimas notícias do CSS3, porque esta é a própria comunidade que desenvolve os padrões da web do CSS3. Também é um ótimo lugar para descobrir informações técnicas sobre o idioma.

validador CSS-este é o validador através do qual você deve executar todos os seus CSS3 antes de tornar o site público. Isso é para garantir que seu CSS3 atenda aos padrões da web definidos pelo W3!

design responsivo

a internet percorreu um longo caminho desde a sua criação. Isso se deve em parte ao advento de smartphones e tablets e à proliferação desses tipos de tecnologia em nossas vidas cotidianas. Como resultado da imensa popularidade desses dispositivos, uma parte significativa do total de usuários da internet olha para sites em telas significativamente menores do que o laptop médio. Além disso, eles interagem com esses sites não usando Cursores, usando os dedos. Portanto, o site moderno precisa ser capaz de se adaptar aos vários tipos de dispositivos que estão por aí. É aqui que entra o design responsivo. Usando design responsivo, os designers são capazes de criar um site que pode ajustar todo o seu layout com base no tipo de dispositivo em que está sendo visualizado.

é uma boa idéia para decidir de antemão se você deseja que o seu novo site para recurso responsivos ou não antes de começar a construir o HTML5 e o CSS3. Isso ocorre porque quando você codifica a parte responsiva do design do seu site, você precisará trabalhar com consultas de mídia CSS3. Usando essas consultas de mídia, você pode definir diferentes texturas e estilos para diferentes resoluções de tela.

lembre-se de nunca usar larguras fixas, use porcentagens. Isso é conhecido como design de layout fluido ou líquido, que permite otimizar seu site não apenas para as resoluções definidas em suas consultas de mídia, mas para todas as resoluções entre elas também. Esta é uma grande vantagem para o seu site, já que os smartphones, tablets e computadores que estão saindo hoje têm tantos tamanhos diferentes e, portanto, resoluções, e você precisa acomodar todos eles.

Responsivo Recursos

Aqui estão alguns grandes recursos que você pode usar para refrescar sua memória, ou aprender sobre design responsivo e todos os relacionados com a codificação:

Google Sensíveis – Este é um ótimo recurso para aqueles de vocês que são novos para o responsive design usando CSS3 media queries.

princípios de Webdesign responsivo-leia este artigo para entender a diferença entre web design responsivo e web design adaptável. Tem alguns ótimos exemplos para ajudá-lo a entender as coisas em detalhes!

grades de fluidos – você pode usar este excelente artigo de Ethan Marcotte para aprender sobre grades de fluidos e como usá-las. Tente usar os exemplos fornecidos no artigo você mesmo!

estrutura de front-end responsiva

se você não estiver disposto a aprender as cordas no que diz respeito às consultas de mídia CSS3, ou talvez você simplesmente não tenha tempo suficiente para isso, tente usar uma estrutura de front-end responsiva. Se você decidir usar uma estrutura de grade, lembre-se de que você precisa aplicar a mesma estrutura ao CSS e ao HTML, pois você estará trabalhando com classes e IDs predefinidos para conectar a estrutura criada usando HTML5 ao CSS3. Usar uma estrutura de front-end responsiva certamente permitirá que você desenvolva seu site muito mais rápido, mas, no lado negativo, também diminuirá os tempos de carregamento do seu site devido à grande quantidade de código que você não usará.

alguns dos frameworks front-end mais populares são:Bootstrap-esta estrutura responsiva é bastante fácil de implementar, e um bônus adicional é que ele usa um CDN para reduzir o impacto das velocidades de carregamento do seu site também.

LESS-esta é uma estrutura de grade CSS adaptativa em vez de responsiva, que permite criar um layout adaptável.

Foundation-esta é uma estrutura de grade front-end com um tamanho de arquivo que é absolutamente minúsculo, a fim de minimizar o impacto que terá na velocidade de carregamento do seu site.

JavaScript (vs CSS3)

JavaScript é uma das linguagens de programação mais populares do mundo atualmente. Isso se deve ao fato de ser suportado por uma ampla gama de navegadores e também pelo fato de conter bibliotecas como jQuery e sistemas de back-end como Node.js, bem como estruturas como AngularJS. Não é de admirar que tantos desenvolvedores jurem por esta linguagem de programação! No entanto, nos últimos tempos, o JavaScript começou a se tornar obsoleto, pois muitas de suas funções começaram a ser assumidas por animações CSS3, que permitem animar transições entre estilos.

Javascript Resources

W3 – este é um excelente lugar para começar se você é novo no JavaScript, graças ao excelente tutorial que está disponível neste site.

jQuery-depois de ter alguma experiência com JavaScript, você pode começar a usar bibliotecas como esta para programar muito mais facilmente. jQuery é a biblioteca JavaScript mais popular por uma milha.

NodeJS – se você preferir sistemas de back-end, mas ao mesmo tempo adora JavaScript, confira este site.AngularJS-Combine as forças formidáveis de HTML e Java usando esta estrutura e obtenha algumas visualizações dinâmicas.

certifique – se de verificar os seguintes recursos antes de começar a usar JavaScript para animar elementos em seu site, enquanto você provavelmente também pode usar animações CSS3:

CSS3-mais uma vez, recorremos ao w3schools para nossos tutoriais CSS3. Examine as demos disponíveis neste site para entender todas as diferentes animações CSS3.

Mozilla Animations-aprofundar o seu conhecimento de animações CSS3 com as nove amostras e exemplos que a Mozilla forneceu.

Passo Quatro: Construa os arquivos de tema do WordPress

agora que você converteu com sucesso seus projetos PSD em HTML5, CSS3 e JavaScript, é hora da Grande conversão: transformando seu HTML em um tema WordPress responsivo completo. Lembre-se de seguir a hierarquia de modelos do WordPress para garantir que seus temas realmente funcionem. A ordem geral é começar com cabeçalho.php, seguido por index.php, rodapé.php e estilo.Forum. Você estará usando esses quatro modelos em todas as páginas do seu site.

depois de ter uma compreensão completa de como a hierarquia de modelos funciona, você precisa começar a quebrar os arquivos HTML em pedaços. Você pode começar criando uma pasta na pasta temas que pode encontrar em sua instalação do WordPress, cujo endereço é /wp-content/themes/. Crie o cabeçalho do arquivo.php nesta pasta. Este arquivo é o que você usará para declarar o tipo de documento, bem como todos os itens que pertencem ao cabeçalho da sua página, como metas, título, folhas de estilo, javascripts e assim por diante. Depois de terminar com isso, crie rodapé.php e cole todos os elementos do rodapé em seu documento HTML. Se o design do seu site incluir uma barra lateral, crie um arquivo chamado barra lateral.php também e incluir toda a codificação pertinente dentro deste arquivo.

depois de concluir a criação de todos os elementos do seu site nesses arquivos, você precisa começar a criar sua página inicial. Existem várias maneiras de fazer isso. Por exemplo, você pode simplesmente criar índice.php, frontpage.php ou página inicial.php, qualquer um desses arquivos será adequado para o que você está tentando fazer, então a escolha final depende inteiramente de você. Agora que você acabou de criar um dos três modelos para sua página inicial, inclua todos os .arquivos php que você acabou de fazer. Agora que você tem sua parte superior, inferior e lateral prontos, cole o HTML5 de sua página inicial no meio e você terá criado com sucesso a página inicial do seu site. Basta seguir o mesmo processo para todas as páginas do seu site e você pode passar para a próxima e última etapa.

Passo Cinco: Use WordPress inbuilt tags e funções

depois de ter criado com sucesso o tema para o seu WordPress, agora você precisa ter certeza de que você é capaz de editar o seu site a partir do painel de administração em vez de ter que alterar o arquivo de tema cada vez que você quer mudar alguma coisa. Possivelmente, as funções mais populares do WordPress para tornar todo o seu conteúdo editável através do painel de administração é adicionando a função add_meta_box. Basta configurar meta caixas para o conteúdo em cada página e você está pronto para ir!

criar as principais funcionalidades do seu site é muito fácil usando o WordPress. Por exemplo, exibir informações como links em seus sites pode ser feito facilmente usando as funções do WordPress. Basta verificar a página de referência da função para o WordPress para ver todas as funções disponíveis.

da mesma forma, WordPress também oferece tags de modelo. Essas são essencialmente funções em si, com a única diferença de que foram criadas especificamente para temas específicos que os tornam mais eficientes.

menu do WordPress

quando você faz login no painel de administração do seu site, provavelmente deseja alterar os itens de menu nos Menus e na aparência para não precisar editá-lo usando o painel de administração. Isso é bastante fácil graças ao fato de você estar usando o WordPress, tudo o que você precisa fazer é substituir a lista de menus do arquivo de modelo por uma linha de PHP, após a qual você pode simplesmente começar a adicionar itens de menu.

pode haver situações em que uma página interna tem um cabeçalho ou rodapé diferente. Para adicionar essa funcionalidade ao seu site, tudo o que você precisa fazer é adicionar tags condicionais. Isso permite que você aplique código diferente para páginas ou postagens selecionadas.

uma vez que seu site WordPress está instalado e funcionando em seu servidor de desenvolvimento, tudo que você precisa fazer é obtê-lo em seu servidor ao vivo. Aqui está um artigo onde é explicado em grande detalhe como você move um site WordPress, passo a passo. Basta seguir todas as seis etapas fornecidas e você terá seu site instalado e funcionando em um servidor ao vivo em nenhum momento.