Estabelecendo um fluxo de trabalho Dreamweaver CC e WordPress

eu cresci um nerd de química e ainda me lembro vividamente da emoção de polvilhar o depósito de ferro sobre meu mini Bunsen burner para ver os fogos de artifício cintilantes. A ideia de que dois elementos poderiam se combinar com um efeito tão espetacular foi alucinante para mim. Eu experimentei a mesma alegria sináptica quando descobri como o WordPress e o Dreamweaver foram feitos um para o outro.

WordPress é, inegavelmente, o CMS mais popular em uso hoje. Com a maior parte do mercado (47.5% dos principais sites 10k, de acordo com BuiltWith.com), vasta gama de modelos e plug-ins, para não mencionar uma facilidade de uso em constante evolução, o WordPress oferece uma rota direta para um amplo espectro de destinos de sites. Mas e se você não quiser ir exatamente onde um modelo WordPress diz que deveria? E se seu cliente—ou seu próprio senso de design pessoal—exigir uma presença on-line personalizada? Então deixe-me apresentá-lo ao melhor parceiro de design e codificação que o WordPress nunca soube que tinha: Dreamweaver CC.

sou um grande fã do fluxo de trabalho Dreamweaver / WordPress e tendo combinado essas duas ferramentas elétricas elementares por anos para construir sites para clientes que precisam de recursos de gerenciamento de conteúdo, juntamente com uma aparência personalizada. O Dreamweaver é, acredito, adequado para a tarefa, não apenas como um mecanismo de design para aperfeiçoar o site voltado para a frente, mas também como um ambiente de codificação eficiente para lidar com funções PHP personalizadas, inevitavelmente necessárias.

Vantagem Do WordPress: Dreamweaver CC

o que o Dreamweaver traz para a mesa que o torna tão adequado para o desenvolvimento do WordPress? A chave é a combinação de Visualização ao vivo e suporte PHP. O WordPress é uma estrutura PHP / MySQL e a capacidade do Dreamweaver de processar a linguagem do lado do servidor é crítica. A visualização ao vivo do Dreamweaver executa o código PHP, integra os dados MySQL e exibe o design de saída HTML5 e CSS 3 com precisão compatível com o navegador-tudo isso mantendo tudo interativo e editável.

WordPress é um aplicativo de modelagem incrivelmente complexo que depende de quase 100 arquivos separados incluídos e entrelaçados para gerar uma única página. Como sei disso? Basta abrir um índice.arquivo php de uma raiz do site WordPress e dê ao Dreamweaver o sinal verde para descobrir arquivos dinamicamente relacionados. Em breve, você verá uma infinidade de arquivos disponíveis—PHP, CSS, JavaScript e XML—no topo da janela do documento na barra de ferramentas arquivos relacionados. E Dreamweaver não só lhe dá acesso a cada um deles, mas processa todos eles e apresenta o resultado renderizado fielmente. Poderoso.

filtragem para arquivos essenciais

claro, a disponibilidade de um número tão grande de arquivos pode ser contraproducente quando você está tentando aprimorar apenas o CSS certo ou outro arquivo. Dreamweaver CC inclui a ferramenta perfeita para segmentar arquivos selecionados: filtrar arquivos relacionados. Este recurso facile torna possível exibir apenas certos tipos de arquivos (como PHP ou JavaScript) ou arquivos individuais. Eu uso rotineiramente a opção de filtro Personalizado deste recurso para trabalhar apenas nas páginas CSS, índice, cabeçalho e rodapé do meu tema, assim:

*.css; índice.pai;cabeçalho*; rodapé*

https://blog.adobe.com/media_96f5f722920d6ba831d715073c8763583b6dfe1e.gif

quando inseridos no campo de filtro personalizado da caixa de diálogo, apenas os arquivos de que preciso—incluindo aqueles em quaisquer temas ativos ou modelos filhos—são exibidos na barra de ferramentas arquivos relacionados. Agora posso trabalhar com o código na Visualização dividida e uma atualização rápida mostra todas as atualizações na Visualização ao vivo.

estilo Swift

A integração com CSS é ainda mais apertada, com as alterações feitas no painel do designer CSS do Dreamweaver entrando em vigor imediatamente. Além de oferecer a paleta completa de propriedades CSS, a interface dá acesso direto a várias fontes, mesmo aquelas usadas em consultas de mídia, para que você possa ter certeza de que está trabalhando com o arquivo CSS adequado.

https://blog.adobe.com/media_504fd2693d1ae75005819cc5acb5dcf82f56ed76.gif

o melhor de tudo é que é muito fácil com a visualização ao vivo recém-evoluída identificar exatamente quais áreas ou elementos da tela precisam ser abordados. Basta navegar até a página desejada usando o recurso seguir Link e ativar o modo inspecionar. O Dreamweaver processa sua página do WordPress perfeitamente e, em seguida, destaca o seletor CSS correspondente e suas propriedades para modificação de ponto e clique. Edições mais detalhadas estão a apenas um clique com o botão direito do mouse quando você acessa o código.

WordPress código específico insinuando

falando de código, além da compatibilidade geral com todos os aplicativos PHP, Dreamweaver CC também fornece suporte para funções específicas do WordPress. Como nem todos os projetos são Sites WordPress, esse recurso direcionado é ativado site a site, escolhendo insinuações de código específicas do site >. A caixa de diálogo subsequente que se abre detecta sua instalação e seleciona automaticamente o WordPress, bem como a raiz do código relevante. Honestamente, na maioria dos cenários, tudo o que você precisa fazer é executar o comando, abrir a caixa de diálogo e clicar em OK: o restante é automático. Agora, dicas para todas as funções do WordPress, completo com sintaxe e breve descrição pop-up como você código.

http://blogs.adobe.com/creativecloud/files/2015/02/code-hint.png

preparando-se para um fluxo de trabalho Dreamweaver e WordPress

então, o que é preciso para começar a funcionar com um Dreamweaver e WordPress? Surpreendentemente pouco. Aqui estão as principais etapas:

configure Apache, PHP e MySQL

para servir o WordPress corretamente, você precisará de um servidor Web local (normalmente Apache) junto com os recursos MySQL e PHP, conhecidos coletivamente como pilha AMP.Existem duas rotas básicas que você pode seguir para atender a esse requisito: componentes separados vs. pacote de software. Instalar e habilitar componentes separados (servidor Apache, MySQL, PHP e geralmente um programa de gerenciamento de banco de dados como o phpMyAdmin) leva mais tempo e requer mais conhecimento técnico, mas oferece mais controle.Instalar um pacote de software como MAMP (Mac e Windows) ou Wampserver (somente Windows) é um processo simples e simples de apontar e clicar, mas renuncia ao sistema detalhado management.Lynda.com oferece um curso que cobre toda a orla do AMP e o autor David Gassner percorre cada um dos cenários, completo com solução de problemas. (Se você não é um Lynda.com Membro, obtenha 10 dias Grátis para ver este curso e quaisquer outros, incluindo meus próprios cursos Dreamweaver / WordPress.)

crie um banco de dados

uma vez que seu ambiente de desenvolvimento esteja rolando, você precisará criar um banco de dados para a instalação do WordPress—um snap com todos os programas do Gerenciador de banco de dados. Você pode nomear o banco de dados o que quiser; eu normalmente vou com algo baseado em cliente porque desenvolvo muitos sites WordPress localmente. E o banco de dados é tudo que você precisa: todas as tabelas e esquemas são criados para você durante a instalação do WordPress.

Defina seu site Dreamweaver

seu site Dreamweaver deve estar em uma pasta dentro da raiz da web local, para que possa ser navegado por meio de um endereço da web http://localhost/. (Observação: dependendo da configuração do servidor Apache, talvez seja necessário anexar um número de porta.). Além disso, é necessário um servidor de teste que especifique a raiz da web local, bem como um modelo de servidor PHP.

configurar o WordPress no seu site Dreamweaver

eu sempre baixar a versão mais recente de WordPress.org ao iniciar um projeto. A estrutura é frequentemente atualizada com versões menores (orientadas para correções de bugs) e principais (recursos aprimorados). Manter-se atualizado é especialmente importante do ponto de vista da segurança nos dias de hoje; a equipe do WordPress está bastante vigilante no fortalecimento de quaisquer vulnerabilidades percebidas. Armazene o conteúdo do arquivo baixado na pasta do Site local do Dreamweaver. Se o site for totalmente voltado para WordPress, coloque os arquivos na raiz do Diretório; se você estiver integrando um blog WordPress em um site, mantenha todos os arquivos WordPress em sua própria pasta fora da raiz do site.

Instale o WordPress

embora seja aqui que todo o trabalho real ocorre, instalar o WordPress é talvez o passo mais fácil, graças à insistência da estrutura em uma abordagem infalível, fácil e fácil.Basta navegar para a pasta wp-admin do seu site (com um URL como http://localhost/My_WP_DW_Site/wp-admin/) e você está desligado.O WordPress detectará a falta de um arquivo de configuração e confirmará que você deseja criar um. Depois de fazer isso, você precisará inserir algumas informações básicas, como nome do banco de dados e credenciais. Então, se você seguiu as etapas anteriores corretamente, você estará cumprimentando com uma das mensagens de instalação mais satisfatórias já criadas: “tudo bem Sparky!”Isso me faz sorrir sempre. Mais um clique e a instalação está concluída: você está pronto para fazer login e começar a trabalhar com o WordPress.No lado do Dreamweaver, certifique-se de estar em exibição ao vivo e abra o índice do WordPress.pai. BAM! Há seu tema WordPress padrão e postagem de exemplo. Techno-abracadabra.

mundo de possibilidades revelado

agora a verdadeira diversão começa quando você começa a explorar os dois lados do fluxo de trabalho: Dreamweaver e WordPress. E há uma tonelada que você pode fazer com ambos, incluindo temas filhos, plug-ins, páginas personalizadas e até mesmo uma interface administrativa personalizada do WordPress, O painel. O Dreamweaver CC pode lidar com tudo isso, desde o design CSS até as funções PHP. Experimente e veja se não desencadeia uma reação química própria.