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