pavelski

Detalhando o problema:

Desenvolvi um site completo em html5 e na parte de blog deste site criei tipos diferentes de posts para cada tipo de conteúdo (Vídeo, Citação, Som, Artigo e Texto) definidos em CSS (style.css).
Para maior praticidade decidi utilizar um cms e optei pelo WP.
Depois de converter o tema, não estava conseguindo fazer com que os posts puxassem as classes anteriormente já definidas no style.css.

SOLUÇÃO:

PASSO 1: ADICIONANDO SUPORTE PARA POST FORMATS

Primeiro de tudo vamos fazer com que nosso tema suporte ‘post formats’. Para isso tudo o que precisamos fazer é incluir o seguinte em nosso arquivo functions.php, no meu caso eu tive que criar este arquivo:

// adcionando suporte à posts tipo 'citação'
add_theme_support( 'post-formats', array( 'quote' ) );

Dica: Lembre-se que quando é feita a adição de PHP em um arquivo, ele precisa estar dentro das tags de abertura “<?php” e de fechamento “?>” ou então ele só vai mostrar como HTML em vez de ser processado como PHP.

PASSO 2: O ARQUIVO DE CONTEÚDO DA CITAÇÃO

A fim de controlar o formato como nossa Citação será exibida no front-end, precisamos criar (na verdade eu preferi fazer desta maneira, se houver contra indicação por tempo de carregamento da página por exemplo fiquem a vontade para comentar) um arquivo chamado content-quote.php. Este é o nosso modelo de página do formato ‘Citação’ e ele precisa ser colocado dentro da pasta do nosso tema. Aqui está o código precisamos adicionar ao nosso novo arquivo:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-content">
        <?php the_content( '' ); ?>
    </div>
</article>

Este modelo da página será usado em nosso index e páginas em que for solicitado, e é muitas vezes chamado diretamente a partir do arquivo index.php com o seguinte código:

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

PASSO 3: CRIANDO O CSS
No meu caso este código já havia sido criado, mas segue para continuar com a explicação:

/* =Quote
----------------------------------------------- */
blockquote {
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 25px;
    font-weight: 300;
    background-image: url(style/images/quote.png);
    background-repeat: no-repeat;
    background-position: right top;
    font-style: italic;
}
.blog-grid .post.format-quote blockquote {
    background: none
}
.blog-grid .post.format-quote {
    background-image: url(style/images/quote-bg.png);
    background-repeat: no-repeat;
    background-position: right top;
}
blockquote p {
    margin: 0
}
blockquote cite {
    color: #797979;
    display: block;
    font-style: normal;
    font-size: 13px;
}
blockquote cite:before {
    content: "-";
    padding-right: 5px;
}

O CSS acima precisa ser incluído no arquivo style.css do nosso tema, mas nós também precisamos criar um arquivo chamado editor-style.css e adicioná-lo ao nosso tema. Este arquivo é o que vai ser usado quando vamos fazer o post pelo admin do wordpress e selecionamos para visualizar o post.

PASSO 4: A MAGIA DO JQUERY

Quase todos os incríveis efeitos visuais com que me deparei no admin do WordPress são criados usando jQuery. Uma vez que ele já está incluído na página admin, vamos edita-lo para fazer com que o editor visual na área de admin do WordPress (quando você clica em visualizar post antes de publica-lo) passe a trabalhar também com nosso novo formato de post.

Se uma pasta /js ainda não existir em seu tema, criae uma e adicione um novo arquivo JavaScript chamado editor-styles-post-format.js. Uma vez que o arquivo foi criado, abra-o no seu editor de texto favorito e adicione o seguinte:

( function($) {
    $(window).load( function() {
        var init_post_format = $( '#post-formats-select' ).find( '.post-format:checked' ).val();
        add_post_format( init_post_format );
    } );

    $( '#post-formats-select' ).find( '.post-format' ).change( function() {
        var post_format = $(this).val();
        add_post_format( post_format );
    } );

    function add_post_format( post_format ) {
        post_format = ( 0 == post_format ) ? 'standard' : post_format;
        if ( frames['content_ifr'] )
            $( 'html', frames['content_ifr'].document ).removeClass().addClass( 'format-' + post_format );
    }
} )(jQuery);

Lembrando que a adção de qualquer código PHP deve estar entre as tags <?php e ?>

Com o nosso script jQuery pronto, precisamos informar o WordPress para que ele realmente apareça quando estamos navegando na nossa administração. Aqui está outro pequeno código que precisamos adicionar ao nosso arquivo functions.php:

add_action( 'admin_enqueue_scripts', 'editor_style_admin_script' );
function editor_style_admin_script( $hook ) {
    if ( 'post-new.php' == $hook || 'post.php' == $hook )
        wp_enqueue_script( 'editor_styles_post_format_js', get_template_directory_uri() . '/js/editor-styles-post-format.js', true, array( 'jquery' ), '1.0.0' );
}

PASSO 5: POSTANDO NOSSA CITAÇÃO

Com tudo no lugar, podemos selecionar para vizualizar o novo formato de post em nosso admin e ele será exibido de maneira semelhante à forma como ele é adicionado no front-end, e seremos capazes de visualizar como o nosso post vai ficar. Nós apenas temos que usar o seguinte código HTML ao criar um post para que o nosso CSS funcione corretamente:

<blockquote>
    Diante da vastidão do tempo e da imensidão do universo, é um imenso prazer para mim dividir um planeta e uma época com você.
    <cite>
        <a href="http://www.personalinck.com">
            Carl Sagan
        </a>
    </cite>
</blockquote>

CONCLUSÃO:
Desta maneira consegui fazer com que os posts fossem publicados conforme eram quando o site/tema era apenas em html.
Temos de obedecer alguns passos mas depois que você entende a lógica do processo não se torna tão complicado assim.

———————————————————————-
Agora pretendo trabalhar com posts personalizados e taxonomias para que apenas seja necessário preencher os campos ENTRE as tags.

Exemplo: Para publicar a mesma citação acima, precisasse digitar apenas:

Diante da vastidão do tempo e da imensidão do universo, é um imenso prazer para mim dividir um planeta e uma época com você.

http://www.personalinck.com

Carl Sagan

Em campos pré definidos no admim do WordPress. E ele incluisse como variáveis diretamente no código:

<blockquote>
    $quote
    <cite>
        <a href="$site">
            $author
        </a>
    </cite>
</blockquote>

Alguém poderia me ajudar com isso? Referencias dicas e exemplos serão bem vindos.

Mais uma vez fica aqui meu muito obrigado.