Icono del sitio Daniel Ruiz

Plantilla Personalizada WordPress Warp

Hola!

Hace poco comence a usar el framework  Warp de Yootheme. Me leí toda la documentación para ver cómo podría aplicar una plantilla concreta (con mi código) a una página de wordpress con este framework. No encontré. 

Así que os traigo un tutorial sobre cómo crear una nueva plantilla de este framework para nuestras páginas, que es muy cómodo para hacer una plantilla rápida, así como personalizable (pero hay que saber y documentarse!)

Pretendo ayudar a crear plantillas personalizables con este framework… ¡ADELANTE!

Warp Framework

  1. Creamos un fichero en la carpeta de la plantilla de warp llamado page-ejemplo.php con la siguiente cabecera (ya que si no wordpress no se entera de que es una plantilla de página)
    [sourcecode language=»plain»]
    <?php
    /*
    Template Name: Plantilla de ejemplo
    */
    ?>
    [/sourcecode]
  2. El código que viene después de la cabecera es el siguiente (esto ya es propio de la api de warp…)
    [sourcecode language=»plain»]
    <?php

    // get warp
    $warp = Warp::getInstance();

    // load main template file
    echo $warp[‘template’]->render(‘template’);
    [/sourcecode]
    Esto lo que hace es llamar a la plantilla por defecto en warp y añadir lo que el fichero layouts/page-ejemplo.php escriba. Ojo, porque aún no lo hemos creado. Simplemente con ese código llamamos a layouts/page-ejemplo.php y lo ejecutamos…

  3. Creamos el page-ejemplo.php dentro de la carpeta layouts de la ruta principal y escribimos el html y php que queramos mostrar para esa página.
    [sourcecode language=»plain»]
    <div id="system">
    <h3>My Custom Page</h3>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

    <article class="item">

    <header>

    <h1 class="title"><?php the_title(); ?></h1>

    </header>

    <div class="content clearfix"><?php the_content(»); ?></div>

    <?php edit_post_link(__(‘Edit this post.’, ‘warp’), ‘<p class="edit">’,'</p>’); ?>

    </article>

    <?php endwhile; ?>
    <?php endif; ?>

    <?php comments_template(); ?>

    </div>
    [/sourcecode]
    Modifica como quieras este fichero para conseguir la vista que desees

  4. Copiamos ahora warp/systems/wordpress/layouts/content.php a la carpeta layouts. Ahora debemos editar este último (layouts/content.php) y donde tenemos:
    [sourcecode language=»plain»]
    elseif (is_page()) {
    $content = ‘page’;
    [/sourcecode]
    Modificarlo a esto:
    [sourcecode language=»plain»]
    } elseif (is_page()) {
    if (is_page_template(‘page-ejemplo.php’)) {
    $content = ‘page-ejemplo’;
    } else {
    $content = ‘page’;
    }
    [/sourcecode]
    Esto lo que hace es que si una página la configuramos para que sea cargada por determinada plantilla (page-ejemplo), se cargue el fichero correspondiente a esa plantilla.

¡¡¡Eso es todo amigos!!!

Salir de la versión móvil