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;
            ?>
Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

🟢Editar código de un módulo en Dolibarr [04]

🟢Editar código de un módulo en Dolibarr [04]

En este tutorial vamos editar el código de nuestro módulo personas para poder personalizar algunas…

2 meses hace
🟢Crear un sub_módulo en Dolibarr [03]

🟢Crear un sub_módulo en Dolibarr [03]

En este tutorial vamos a crear un sub módulo llamado seguridad que será muy parecido…

2 meses hace
🟢Modificar un módulo en Dolibarr [02]

🟢Modificar un módulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
🟢Constructor de módulos en Dolibarr

🟢Constructor de módulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una política clara:…

2 meses hace
🟢Tickets en Dolibarr [19]

🟢Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
🟢Agenda en Dolibarr [18]

🟢Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace