Esta é a melhor (e única) opção para estilizar CSS para um determinado tipo de post?

4

Primeiramente, obrigado pela leitura e minhas desculpas por minha falta de conhecimento.

Eu tenho um site do WP em execução com um tema e um tema filho. Eu corro isto em 3 idiomas espanhol, inglês e português; e para lidar com as traduções estou usando o plugin WPML.

Meu problema é que, na página de portfólios e contatos traduzidos, o site não está parecendo o que eu quero. Depois de muita pesquisa sobre o suporte do WPML, a conclusão foi que o meu devs o tema-criança, incluindo folhas CSS adicionais que são surpreendentemente definidas para postar / página de níveis específicos. Então o estilo aparece nas fotos:

E o mesmo vale para as postagens de ID de Contatos.

Portanto, neste cenário, a solução de suporte do WMPL é "copiar" o script e apenas alterar nas linhas copiadas o ID do post.

Acredito que essa é uma solução de curto prazo, como se no futuro qualquer um dos seguintes eventos tivesse que ser feito novamente:

-Eu quero criar uma segunda página do portfólio -Eu quero adicionar um novo idioma -Por qualquer motivo que eu excluir o portfólio ou página de contato e re-fazê-lo, terá um novo ID de postagem

Então a questão é: não há outra opção para conseguir isso de uma forma mais "limpa"? Eu não sei como, mas eu imagino algo como dizer no CSS, para portfólios o estilo deve ser esses - não importa qual idioma -; para contato, o estilo deve ser esses, etc

Meu dev está dizendo que esta abordagem está errada, mas para mim suas explicações não fazem sentido.

Qualquer conselho seria profundamente apreciado

Felicidades

    
por user114431 28.02.2017 / 22:50

2 respostas

3

Você está absolutamente certo em sua suposição. O CSS deve nunca estar vinculado a IDs de postagem, porque eles sempre podem ser alterados (por exemplo, se você decidir migrar suas postagens para outra instalação).

Você sempre pode alternar o controle para o painel do administrador.

Adicione um campo personalizado em uma postagem / página que você deseja estilizar de maneira especial (no seu exemplo, você teria o mesmo campo personalizado em todas as versões de idioma da postagem / página). Digamos que seja wpse_custom_class . Adicione a cada post / página; o valor será portfolio para este exemplo.

Adicione este código a functions.php (copiado de esta resposta ). Quando a página for carregada, ela procurará um campo personalizado e inserirá seu valor como uma classe CSS no elemento de corpo HTML.

function wpse_filter_post_class( $classes ) {
    $my_post_class = get_post_meta($post->ID, "wpse_custom_class");

    if( $my_post_class != '' ) {
        $classes[] = $my_post_class;
    }
    return $classes;
}

add_filter( 'post_class', 'wpse_filter_post_class' );

Seu designer agora pode usá-lo da seguinte forma:

.portfolio #content .main {
    max-width: 100%;
}

Isso é mais trabalho do lado do administrador (você ou o designer precisará inserir manualmente e especificar essas classes CSS para todas as páginas com estilo personalizado), mas, no final, contribui para uma solução muito flexível e preparada para o futuro.

    
por montrealist 28.02.2017 / 23:16
0

Por que não usar regras CSS específicas de ID:

CSS específico de ID de postagem só pode ser uma solução rápida e está longe de ser a melhor prática. O ID do post não é confiável em muitos casos. Por exemplo:

  • Pode ser que você exclua uma postagem e substitua-a por uma nova postagem.

  • Pode ser que você precise migrar seu site no futuro para outro servidor.

  • Pode ser que você esteja criando uma versão mais recente da postagem / página e queira revisar a nova postagem / página antes de substituir a antiga.

Em todos esses casos, é provável que a ID do post mude e esse CSS específico do ID não será mais aplicável. Então você terá que atualizar seu CSS novamente para atender às suas necessidades de design. O WordPress é extremamente personalizável, portanto, não há cenário em que você precise usar as regras CSS de ID do post. Para um desenvolvimento e uma prática de design mais maduros, o uso de regras CSS específicas de ID é altamente desencorajado. Em vez disso, use uma das opções abaixo:

Use modelos de página:

O WordPress suporta modelos de páginas para páginas por um longo tempo e a partir da versão 4.7 O WordPress suporta modelos de página para qualquer tipo de postagem . Portanto, se você tiver o WordPress 4.7 ou mais tarde, poderá criar um modelo de página específico para quaisquer postagens ou páginas no seu tema filho.

Dessa forma, você não precisa de nenhum CSS específico para identificação, pois assim que tiver esses modelos específicos, sempre que precisar do mesmo design para qualquer página ou postagem, você terá que escolher o mesmo modelo de o editor de postagem ou página. Isso é tudo. Depois disso, o design desse modelo de página será aplicado a esse page , post ou custom post type .

Use o post_class gancho de filtro:

Se você não quiser ir para diferentes páginas ou postagens no painel de administração para atribuir modelos específicos (pode ser que você tenha muitas páginas / postagens), use o gancho de filtro post_class . Dessa forma, você poderá atribuir classes CSS exclusivas a diferentes postagens e páginas que precisam delas e estilizá-las com base nessas classes CSS. Por exemplo, digamos que você tenha um tipo de postagem personalizado movie & você quer uma classe CSS diferente para movie entradas. Em seguida, no arquivo functions.php do seu tema, você pode adicionar o seguinte CÓDIGO:

add_filter( 'post_class', 'movie_post_class' );
function movie_post_class( $class ) {
    if ( get_post_type() === 'movie' ) {

        // remove these CSS classes from movie entries
        $remove = array( 'css-class-to-remove', 'another-class-to-remove' );
        $class = array_diff( $class, $remove );

        // add these custom CSS classes to movie entries
        $add = array( 'custom-movie', 'my-movie-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

Agora você pode usar o seguinte CSS para segmentar filmes:

.custom-movie {
    background-color: gold;
}

Use o body_class gancho de filtro:

Em algumas situações, se você não quiser usar modelos de página e precisar de mais controle genérico sobre o design da página inteira (comparado ao que o post_class fornecerá), você poderá modificar a <body> class usando o body_class filter hook (da mesma maneira que você pode fazer com o gancho de filtro post_class ). Assim:

add_filter( 'body_class', 'movie_body_class' );
function movie_body_class( $class ) {
    if ( is_single() && get_post_type() === 'movie' ) {

        // remove these CSS classes from body class
        $remove = array( 'css-class-to-remove', 'another-class-to-remove' );
        $class = array_diff( $class, $remove );

        // add these custom CSS classes to body class of a movie post
        $add = array( 'custom-movie', 'my-movie-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

Agora, você pode usar o seguinte CSS para segmentar a página de postagem personalizada do filme:

body.custom-movie .any-inner-content-class {
    color: blue;
}

Como essa classe personalizada é adicionada no <body> , você pode segmentar qualquer elemento dentro da página dessa maneira.

    
por Fayaz 28.02.2017 / 23:27