Modelos e CSS – Prática de programação adequada?

Eu trabalhei com WP / html / css ocasionalmente por um longo tempo, mas nunca esqueci profundamente antes, tenho algumas perguntas sobre boas práticas.

My Background – ignore totalmente isso se não estiver interessado

Fui deixado temporariamente no comando de um site WP enquanto procuramos outra webdev profissional para replace nossa anterior. Eu sou um engenheiro de software por comércio, mas minha experiência de educação e trabalho nunca tocou html / css muito – apenas a experiência é construir meu próprio site de portfólio e talvez um projeto de class ou dois na escola.

Como eu tenho adicionado funcionalidade e conteúdo, estive cavando no código do ex-dev e na organização de modelos. Muito parece ser uma má prática e um mau uso de princípios gerais de CS, mas não tenho experiência suficiente para saber se essas coisas são “a única maneira” ou, na verdade, boas práticas neste domínio específico.

Questões

Os modelos devem ter valores codificados neles?


Por exemplo, eu criei uma nova página que integrasse a nossa loja virtual de terceiros diretamente em nosso próprio domínio, então eu tive que atualizar os botões em todo o site que estava vinculado à loja. Apenas 2 ou 3 lugares eu tive que atualizar, mas essa página não receberia a mudança. Dug através de todo o site antes de descobrir que o URL tinha sido codificado no botão neste modelo único que esta página usada – meus sinos de alarme de mau funcionamento desaparecem. Existem valores similares codificados como URLs para um arquivo de imagem hospedado no domínio, para headers ou backgrounds ou w / e, em toneladas de modelos.

Respondido: O código para páginas e postagens deve ser misturado?

Atualização: uma publicação no wordpress é qualquer tipo de conteúdo (internamente: post_type) (dos comentários abaixo)


Com base nessa documentação, a 1ª linha desse código é apenas uma etiqueta de publicação e o código CSS na folha de estilo do tema será aplicado às postagens com essa tag. Eu estou mal interpretando a terminologia aqui? Talvez “Posts” e “Pages” sejam terminologia de frontend e não está relacionado com publicações literais?

Preciso hardcode o ID para cada página que eu quero um certo estilo CSS aplicado?


Diga a página “Conteúdo” o modelo A atribuído a ele (correspondente a página-a.php). O modelo A usa get_template_part () para agarrar o modelo a-modified (sob say ../template-parts/a-modified.php)

Eu fui e fiz uma página “Conteúdo novo” que usa o mesmo modelo A como “Conteúdo”. Sem modificações nesta nova página, algumas coisas no header já foram destruídas. Com base nesse segmento de SO , percebi que, em todos os lugares da folha de estilo CSS, a ID para “Conteúdo” (digamos 111) eu tive que duplicar essa linha para a ID 222 de “Conteúdo Novo”, assim:

 .page-id-111 .entry-header img, .page-id-222 .entry-header img { width: 100%; left: 0; } 

Tinha que fazer isso um pouco menos de 20 vezes na folha de estilo para obter o header de “Conteúdo Novo” aparecendo como “Conteúdo”. Outra vez parece uma má prática, e uma dor na bunda sempre que quiser algo novo para usar modelos / funcionalidades existentes (ou alterar o modelo aplicado a algo que já existia). Não há melhor maneira de aplicar o mesmo CSS a todas as Páginas que usam o modelo A?


Obrigado por quem lê isso, desculpa pelo romance. Não consegui encontrar uma resposta sólida para qualquer um desses tipos de perguntas, principalmente tópicos onde as pessoas dão respostas do que parece ser mais má prática ou código ruim.

Solutions Collecting From Web of "Modelos e CSS – Prática de programação adequada?"

Não, não consiga codificar as ID para páginas no seu CSS. Você pode querer usar os mesmos estilos em outro lugar, ou se a folha de estilo é armazenada em cache para os usuários, eles podem não ver imediatamente as mudanças que você exibe se você não for a versão da folha de estilo. Não só isso faz com que decifrar os seus estilos apenas muito mais difícil a longo prazo!

Sim, a terminologia pode ser um pouco confusa se você não estiver acostumado com o WordPress. Uma página na verdade é uma publicação tecnicamente, como são muitas outras coisas. Se o seu modelo de página include uma chamada para post_class () – então as classs do núcleo seriam emitidas na etiqueta que faz uso de post_class (). Isso pode ser útil para segmentar a exibição de um determinado tipo / formato de publicação, ou adicionar condicionalmente suas próprias classs a ele com um filtro para diferentes exibições em diferentes contextos.

Existem várias maneiras de segmentar os elementos com base em onde eles vêm e como você deseja que seus estilos sejam transferidos no WordPress.

Na sua situação, sim, você poderia codificar as IDs, mas eu realmente não diria que é uma boa escolha – mas essa é apenas a minha opinião. Se o seu plano for criar o novo conteúdo e, eventualmente, assim que for feito, você estará removendo a página de conteúdo antigo que usa o mesmo modelo – então provavelmente é melhor criar um novo modelo de página com um novo nome no tempo. Uma class corporal seria aplicada para que você use para estilos específicos nesse modelo, para que você escreva suas definições CSS com o nome de nome para isso:

 .page-template-your-custom-template .entry-header img, .page-template-your-custom-template .entry-header img { width: 100%; left: 0; } 

Você saberia então que você está especificando especificamente esse modelo e não se confundirá no futuro. Você não precisa retornar ao administrador para ver qual o modelo de página que está usando, e ler sua folha de estilo terá mais sentido.

Assim como o método post_class (), há também um método body_class () que adiciona classs ao elemento do corpo. A outra opção seria adicionar condicionalmente uma class de corpo à página, para que você possa cuidar dessa maneira.

Considere por exemplo:

Trabalhando de cima para baixo, provavelmente no header do seu tema.php há um método body_class () em .

Você poderia adicionar suas próprias classs a isso com o filtro body_class e, em seguida, verifique se a ID da página que você deseja manipular com is_page () em seu arquivo functions.php – por exemplo:

 function theme_namespace_your_body_class( $classs ) { if ( is_page( array( 111, 222 ) ) ) { $classs[] = 'your-custom-body-class'; } return $classs; } add_filter( 'body_class', 'theme_namespace_your_body_class' ); 

Agora em vez de escrever algo como isto:

 .page-id-111 .entry-header img, .page-id-222 .entry-header img { width: 100%; left: 0; } 

Sua folha de estilo teria:

 .your-custom-body-class .entry-header img { width: 100%; left: 0; } 

Então, uma vez que você tenha terminado com suas modificações, se você precisar aplicar esses estilos a outras páginas, postagens, modelos ou o que for, você pode simplesmente modificar esse método acima para include outras ID da página ou usar uma variedade de condicionais do WordPress para aplicar esses mesmos estilos em outro lugar dependendo do contexto.

Além disso, se alguém tiver a folha de estilo em cache, não está se forçando a atualizar seu número de versão da folha de estilo com cada alteração menor que você está fazendo para destruir o cache. Seu código PHP está ditando quais as classs a serem aplicadas e dizendo que esta é a forma como esta página, publicação ou o que quer que seja estruturado, enquanto a sua folha de estilos continua sendo uma folha de estilo que controla como as coisas nesses contextos deveriam realmente aparecer.

A partir desse nível superior, as mesmas coisas exatas podem ser feitas movendo-se mais profundamente no nível post_class () e usam algo como is_single () para verificar se a postagem na consulta é para as IDs que você deseja include a class nesse elemento para . Por exemplo:

 function theme_namespace_your_post_class( $classs ) { if ( is_single( array( 111, 222 ) ) ) { $classs[] = 'your-custom-post-class'; } return $classs; } add_filter( 'post_class', 'theme_namespace_your_post_class' ); 

Agora, seu elemento usando o método post_class () condicionalmente terá essa class incluída para aqueles IDs de postagem.

Assim como criar um novo modelo de página – você pode fazer isso para posts. Você pode criar um arquivo como o seu-custom-post-single-post.php e designar é apenas posts para usar:

 < ?php /* * Template Name: Your custom template * Template Post Type: post */ 

Ou talvez você queira o mesmo modelo para ser usado para páginas e postagens:

 < ?php /* * Template Name: Your custom templatee * Template Post Type: post, page */ 

Você definitivamente deve olhar para a hierarquia do modelo do WordPress à medida que expande seu tema, e o que funciona melhor para você pode ser uma solução completamente diferente, mas isso definitivamente ajudará a guiá-lo sobre o que as coisas pertencem e como melhor estruturar seu tema. Olhando para um tema inicial, como _s , ou mesmo qualquer um dos vinte vampiros para ver como eles estruturam coisas, também é uma boa maneira de ver algumas das melhores práticas e methods de fazer.

Tudo isso não significa que seja absolutamente proibido ou uma prática ruim para usar a página ou postar IDs para estilos, mas acredito em 99% dessas situações, não é necessário.