06. Crear una Plantilla en Wordpress
Programador Novato > Crear una Plantilla en WP > 06.- Crear una Plantilla en WordPress [page.php]

06.- Crear una Plantilla en WordPress [page.php]

INTRODUCCIÓN

A estas alturas ya tenemos creado casi todo el home de nuestra pagina web a nivel de blog pero que tal si ademas queremos agregar paginas (como cualquier sitio web con área de contacto, nosotros). Para solventar estos detalles wordpress nos ofrece el archivo page.php

PROCEDIMIENTOS

1.- Creamos un archivo page.php

2.- Copiamos el contenido de dopetrope/no-sidebar.html (el html estatico que descargamos) en page.php

3.- Creamos el archivo header-page.php y le pegamos el header de page.php

4.- En header-page.php sustituimos

<!DOCTYPE HTML>
<!--
 Dopetrope by HTML5 UP
 html5up.net | @ajlkn
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
 <head>
  <title>Dopetrope by HTML5 UP</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="assets/css/main.css" />
 </head>

por

<!DOCTYPE HTML>
<!--
 Dopetrope by HTML5 UP
 html5up.net | @ajlkn
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html <?php language_attributes(); ?>>
    <head>
        <title><?php echo bloginfo("name");// Nos da el nombre del blog ?></title>
        <meta charset="<?php bloginfo("charset");//Nos da el charset del blog ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <?php wp_head(); ?>
    </head>

5.- En header-page.php sustituimos

     <!-- Logo -->
      <h1><a href="index.html">Dopetrope</a></h1>

     <!-- Nav -->
      <nav id="nav">
       <ul>
        <li><a href="index.html">Home</a></li>
        <li>
         <a href="#">Dropdown</a>
         <ul>
          <li><a href="#">Lorem ipsum dolor</a></li>
          <li><a href="#">Magna phasellus</a></li>
          <li><a href="#">Etiam dolore nisl</a></li>
          <li>
           <a href="#">Phasellus consequat</a>
           <ul>
            <li><a href="#">Magna phasellus</a></li>
            <li><a href="#">Etiam dolore nisl</a></li>
            <li><a href="#">Veroeros feugiat</a></li>
            <li><a href="#">Nisl sed aliquam</a></li>
            <li><a href="#">Dolore adipiscing</a></li>
           </ul>
          </li>
          <li><a href="#">Veroeros feugiat</a></li>
         </ul>
        </li>
        <li><a href="left-sidebar.html">Left Sidebar</a></li>
        <li><a href="right-sidebar.html">Right Sidebar</a></li>
        <li class="current"><a href="no-sidebar.html">No Sidebar</a></li>
       </ul>
      </nav>

por

     <!-- Logo -->
      
      <h1><a href="<?php home_url(); ?>"><?php bloginfo("name"); ?></a></h1>

      <?php
      $arg = array(
          'theme_location' => 'principal',
          'container' => 'nav',
          'container_id' => 'nav'
      );
      wp_nav_menu($arg);
      ?>

6.- En page.php hasta arriba colocamos

<?php  get_header("page"); ?>

7.- En page.php eliminamos todo el footer y ponemos esto:

<?php  get_footer(); ?>

8.- En page.php sustituimos

      <!-- Content -->
       <article class="box post">
        <a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
        <header>
         <h2>No Sidebar</h2>
         <p>Lorem ipsum dolor sit amet feugiat</p>
        </header>
        <p>
         Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
         hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
         Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
         Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
         Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
         hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
         Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
        </p>
        <p>
         Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
         a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
         placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
         eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
         elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
        </p>
        <section>
         <header>
          <h3>Something else</h3>
         </header>
         <p>
          Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
          placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
          eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
          elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
          sit amet nullam consequat feugiat dolore tempus.
          Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
          placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
          eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
          elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
         </p>
         <p>
          Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
          eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
          elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
          sit amet nullam consequat feugiat dolore tempus.
         </p>
        </section>
        <section>
         <header>
          <h3>So in conclusion ...</h3>
         </header>
         <p>
          Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
          eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
          elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
          sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
          Maecenas sagittis convallis justo vel mattis.
         </p>
        </section>
       </article>

por

            <?php
            //Si hay posts publicados
            if (have_posts()):
                //Ciclo de todos los posts publicados
                while (have_posts()):
                    //Llamamos al post
                    the_post();
                    ?>
       <article class="box post">
        <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri();?>/images/pic01.jpg" alt="" /></a>
        <header>
         <h2><?php the_title(); ?></h2>
        </header>
         <?php the_content(); ?>
                    <?php
                // Fin del ciclo que llama todos los posts
                endwhile;
            // Fin del if si hay post publicados
            endif;
            ?>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Salir de la versión móvil