Escrever PHP, CSS e HTML5 para modificar um site WordPress pode ser bastante frustrante, mas um bom guia pode facilitar. Este não é esse guia. Trata-se apenas de como adicionar o código ao seu site quando já estiver pronto. Mas não se preocupe – isso é tão importante quanto. Como existem várias maneiras de fazer isso, ajuda a conhecer as diferenças entre as várias opções. Mas antes, dois avisos:
- Antes de modificar qualquer coisa, faça backup. Na verdade, continue fazendo backup de seu trabalho durante todo o processo. Também ajuda ter um arquivo separado para colar trechos de código descartados ou que serão usados
em breve. - Se você instalou o tema de outra pessoa, nunca adicione código aos arquivos functions.php ou style.css do seu tema. Se você fizer isso, quando o tema for atualizado, todo o seu trabalho duro será eliminado.
Ao longo do restante deste artigo, explorarei algumas alternativas, organizadas das mais simples às mais complexas.
Plug-ins do WordPress
Assim como existem vários tipos de modificação de código, existem vários tipos de plugins de código personalizados. Os 2 tipos mais comuns são PHP e CSS. Como você deve saber, o PHP governa a arquitetura e a função do WordPress. Portanto, se você estiver tentando modificar as principais funções do seu site, adicionar ou modificar um recurso, há muitos plugins PHP disponíveis para download para ajudá-lo com isso.
Da mesma forma, você provavelmente também sabe o que o CSS faz – ele embeleza as coisas. E se isso é tudo o que você deseja modificar, um plugin CSS personalizado permitirá que você faça isso com o mínimo de problemas. À espreita em segundo plano está o JavaScript, que tem uma relação complexa com os plugins. Para esclarecer, é um pouco diferente, pois funciona perfeitamente bem se você adicioná-lo ao cabeçalho, rodapé ou a um tema filho – mas para usá-lo em um post, você precisa usar um plugin especial. Algo como CSS & Javascript Toolbox deve fazer o truque. Como uma nota lateral, por causa da velocidade da sua página, é melhor colocá-la no rodapé.
Escrevendo seus próprios plugins
Há uma tonelada de trechos de código do WordPress disponíveis na internet para alterar, desativar ou modificar determinado recurso. No entanto, saber onde colocá-los é crucial para a funcionalidade. Por exemplo, se você tem um snippet que modifica a função de um plugin, você vai querer que ele funcione independentemente do tema que você ativou. O mesmo vale para snippets que lidam com alterações em todo o site. Então, em ambos os casos, pode ser uma boa ideia criar um novo plugin para eles. Não se preocupe, não é tão intimidante quanto parece.
Um dos principais benefícios de criar um plugin é que ele permitirá que você ative ou desative o plugin sob demanda. Também permite que informações contextuais sobre o plug-in sejam visualizadas nas páginas do plug-in. A única grande desvantagem é que ele pode ser desativado acidentalmente por qualquer outra pessoa que tenha permissão para modificar o site, mas um aviso severo para eles deve ser capaz de evitar isso.
Como nota lateral, você também pode criar uma pasta chamada mu-plugins em sua pasta wp-content . Quaisquer arquivos PHP inseridos ali serão sempre executados, não podendo ser ativados ou desativados. Isso mantém o código personalizado longe das pastas de temas e plugins. Mas faça isso apenas com plugins que você sempre se sente confortável executando em segundo plano.
Arquivos CSS personalizados
Se as alterações planejadas forem pequenas, você poderá criar um arquivo custom-style.css . Se você quiser visualizar suas alterações antes de fazê-las, sempre poderá usar o DevTools se estiver executando o Chrome ou um aplicativo semelhante. Outra possibilidade é adicionar CSS personalizado através do seu tema WordPress. Alguns temas premium, como nosso framework Total , incluem uma opção de painel de temas para adicionar CSS personalizado onde você pode encontrá-lo e ajustá-lo facilmente. Além disso, quando você atualiza seu tema, as configurações do painel do tema devem permanecer inalteradas – para que seu CSS personalizado permaneça intacto.
Lembre-se de que o CSS cascateia ao contrário, o que significa que as regras que aparecem depois sempre têm precedência sobre as regras que aparecem antes. Portanto, qualquer CSS aplicado a uma planilha separada substituirá o código padrão da página. Isso também se aplica ao CSS inserido em…
Temas filhos do WordPress
Para os não iniciados, um tema filho herda a funcionalidade de outro tema, permitindo que você modifique seu design à vontade (você pode aprender tudo o que deseja saber em nosso guia de temas filhos do WordPress ). Eles foram inventados com o propósito específico de permitir que você modifique um tema sem perder suas alterações na atualização. Os temas filho espelham todas as alterações feitas no tema externo ou ‘pai’. Assim, como aplicar um efeito de camada do Photoshop, você não está realmente editando o conteúdo; você pode removê-lo a qualquer momento para que as coisas voltem ao que eram.
Criar um tema filho quando você quiser modificar seu código economizará muitas dores de cabeça e é bastante fácil (como as modificações do WordPress). Basta acessar seu site via FTP e criar uma pasta, depois criar um arquivo style.css que corresponda a essa pasta. É uma prática padrão nomeá-lo theme-name-child . Depois disso, tudo que você precisa é de uma linha no cabeçalho do seu novo style.css para definir o template. Mas também há algumas coisas que ajuda a ter – que podem ser encontradas na página do WordPress Codex .
Em seguida, faça as alterações necessárias no tema atual abaixo da linha @import . A única desvantagem dos temas filhos é a quantidade de pesquisa que você precisa fazer no tema pai antes de modificá-lo, sem causar conflitos ou efeitos colaterais estranhos. E lembre-se que com temas filhos, você só precisa especificar o que será diferente do tema original. Para aplicar as alterações, basta ZIP-lo, enviá-lo através da página Aparências > Temas em seu painel do WordPress e ativá-lo via WordPress. Isso assumindo que seu tema pai também foi carregado, é claro.
Mostrando código
Há mais um tipo de código de adição que não abordamos: mostrá-lo. Se você é um web designer e gostaria de mostrar como algo é feito, apresentado de uma forma que os espectadores possam copiar e colar, é importante anotar da maneira correta. A forma como seu código será interpretado pelo WordPress depende se você usa a seção HTML do Visual Post Editor. Digitá-lo diretamente no editor visual funcionará para neutralizá-lo, mas não há como colocá-lo na formatação adequada ou em uma caixa de código. O editor visual irá apenas formatá-lo da mesma forma que o texto comum. Por outro lado, o editor HTML irá transformá-lo em código e arruinar seu site. Não se preocupe, você pode desfazer isso.
No entanto, há um compromisso. Você pode destacar e colocar seu código em um bloco usando as tags <code> e </code> , mas isso não impedirá a ativação do código. Tudo o que vai fazer é colocá-lo em fonte montoype, em uma caixa, para mostrar que é oficialmente um código. Para impedir que ele seja ativado, você deve alterar os símbolos ativos para o que são chamados de entidades de personagens divertidas . As versões mais comuns delas, e as que são suficientes para neutralizar a maior parte do código, estão mudando < e > para < e > , respectivamente (você pode aprender mais sobre como mostrar código em nossa postagem sobre como escrever código personalizado em suas postagens do WordPress ).
Como você pode ver, existem muitas maneiras de adicionar código personalizado ao WordPress, e eu encorajo você a experimentar, brincar com eles e ver quais são os mais adequados para você. Alguma maneira adicional de adicionar código personalizado que eu tenha perdido? Deixe-me saber nos comentários.