creating an HTML and CSS page in Wordpress

Asked

Viewed 102 times

0

I took a Wordpress course last year, but I just started using the platform now.

To having the following difficulty:

I’m doing maintenance on an informative site, but on this site I created a webpage to blog, but as I created html and css and played on a page, to maintain and update posts is very manual and time consuming, would have as I play this on the Wordpress system and automate?

I add this code;

<?php
/**
 *Template Name: Blog
 *
 * 
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header page-header newheader">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->
        <section class="wrapper post-highlight">
        <div class="container">
            <div class="row text-left">
                <div class="col-xs-12">
                    <h5 class="pull-left">Novos</h5>
                    <p>                     <a href="javascript:void(0);" class="pull-right hidden-xs" data-anchor="#post-list" data-toggle="btn-scroll">Ver todos os posts</a>
                </div>
                <div class="col-md-6 col-sm-12 high">
                    <div class="row">
                        <div class="col-xs-12 figure">
                            <a href="http://empresa.tintasverginia.com.br/2018/04/saiba-qual-pincel-usar/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/qual-pincel-2-post1.jpg" alt="Você sabe as diferenças entre os pincéis?"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-xs-12 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/saiba-qual-pincel-usar/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="Você sabe as diferenças entre os pincéis?"></p>
                                <h3>Você sabe as diferenças entre os pincéis?</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>26/03/2018</li>
                                    <li>6 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 low">
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href=""></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/05/especialista-1.jpg" alt="Látex ou acrílico"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/" title="Látex ou Acrílica? Tudo que devo saber antes de escolher a tinta certa!"></p>
                                <h3>Látex ou Acrílica? Tudo que devo saber antes de escolher a tinta certa!</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>06/04/2018</li>
                                    <li>4 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/sobra-de-tinta-2.jpg" alt="Nulla bibendum nisl metus, vitae consequat sapien mattis ac."></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="Nulla bibendum nisl metus, vitae consequat sapien mattis ac."></p>
                                <h3>Nulla bibendum nisl metus, vitae consequat sapien mattis ac.</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>26/04/2018</li>
                                    <li>4 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="wrapper post-highlight">
        <div class="container">
            <div class="row text-left">
                <div class="col-xs-12">
                    <h5>Destaque</h5>
                </div>
                <div class="col-md-6 col-sm-12 high">
                    <div class="row">
                        <div class="col-xs-12 figure">
                            <a href=""></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/parede-suja.jpg" alt="[Acessesar]"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-xs-12 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/meu-filho-sujou-parede-e-agora/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="http://empresa.tintasverginia.com.br/2018/04/meu-filho-sujou-parede-e-agora/" title="Parede suja"></p>
                                <h3>Meu filho sujou a parede.E agora?</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>13/07/2017</li>
                                    <li>2 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 low">
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href="http://empresa.tintasverginia.com.br/calculadora-de-tintas/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/calculadora.jpg" alt="Calculadora"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/calculadora-de-tintas/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="calculadora"></p>
                                <h3>Vai pintar e não sabe a quantidade de tinta que precisa comprar? Confira nossa calculadora de tintas!</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>10/10/2017</li>
                                    <li>4 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href="http://empresa.tintasverginia.com.br/cores/off-whites/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/cor-1.jpg" alt="Bolha de sabao"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <a href="http://empresa.tintasverginia.com.br/cores/off-whites/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="Suvinil"></p>
                                <h3>Dúvida em qual cor escolher?</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>13/02/2018</li>
                                    <li>10 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <hr>
    <section class="wrapper post-list">
        <div class="container">
            <div class="row text-left">
                <div class="col-xs-12">
                    <h5>Todos os posts</h5>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Fusce consequat placerat sem. Nam lobortis"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce consequat placerat sem. Nam lobortis</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>07/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Fusce rhoncus massa sed lectus cursus accumsan."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce rhoncus massa sed lectus cursus accumsan.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/03/2018</li>
                        <li>9 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Curabitur quis quam et est volutpat ullamcorper eget quis erat."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Curabitur quis quam et est volutpat ullamcorper eget quis erat.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>02/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Fusce consequat placerat sem. Nam lobortis"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce consequat placerat sem. Nam lobortis</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>07/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Fusce rhoncus massa sed lectus cursus accumsan."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce rhoncus massa sed lectus cursus accumsan.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/03/2018</li>
                        <li>9 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/saiba-como-acabar-com-mofo-1.jpg" alt="Saiba como acabar com o mofo"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Saiba como acabar com o mofo.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/04/2018</li>
                        <li>3 min de leitura</li>
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Fusce consequat placerat sem. Nam lobortis"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce consequat placerat sem. Nam lobortis</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>07/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Fusce rhoncus massa sed lectus cursus accumsan."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce rhoncus massa sed lectus cursus accumsan.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/03/2018</li>
                        <li>9 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png" alt="Curabitur quis quam et est volutpat ullamcorper eget quis erat."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Curabitur quis quam et est volutpat ullamcorper eget quis erat.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>02/04/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="clearfix"></div>3
    </div><!-- .entry-content -->
</article><!-- #post-## -->
html5 wordpress

1 answer

0

The ideal is you use the wordpress loop to replicate posts or some custom post that was created, in your case it would be something like this:

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        <div class="col-md-6 col-sm-12 high">
                <div class="row">
                    <div class="col-xs-12 summary">
                        <article>
                            <p><a href="<?php the_permalink();?>" class="btn btn-topic">Acessar</a></p>                                
                            <h3><?php the_title();?></h3>
                            <ul class="list-inline post-meta">
                                <li><?php the_time('F jS, Y'); ?></li>
                            </ul>
                        </article>
                    </div>
                </div>
            </div>
    } // end while
} // end if
?>

I recommend looking at the basic loop structure: Loop Wordpress

And check the template hierarchy to add the loop in the right place and with content and single files to have the correct hierarchy in your theme. Hierarchy of Themes

As it is starting in Wordpress would be nice you test and modify the templates you already see by default in CMS, you can take advantage of enough code from them.

  • 1

    Thank you Italo, your information has helped me a lot.

  • Nothing @Lucasrafael , anything we are there. Give a UP on the answer to help more people with the same doubt. See more.

Browser other questions tagged html5 wordpress

You are not signed in. Login or sign up in order to post.