Para realizar una sección dentro de un WordPress, primero deberemos de encontrar cuál es la distribución de los distintos templates que proporciona nuestro Theme. Es bastante posible que cada tema tenga una distribución distinta, por defecto encontraremos todo lo necesario dentro de la carpeta /themes/nombre_del_theme.

Es muy posible que el tema disponga de una jerarquía de carpetas de forma ordenada y disponga de una subcarpeta denominada templates en la que se encuentran distintas plantillas creadas por los desarrolladores de dicho tema (y que es la manera correcta de realizar este proceso). Así que tendríamos que acceder a /themes/nombre_del_theme/templates.

En esta carpeta suelen aparecer los templates necesarios para nuestros desarrollos, entre otros apartados, como son los encabezados, los footers, o pequeños fragmentos de código que se aplican a la hora de editar nuestros posts desde el panel de control de WordPress.

En este tutorial se va a explicar cómo se ha desarrollado la sección de proyectos que van realizando los socios de Dlabs hackerspace para facilitar el trabajo de documentación de forma simple y categorizada.

La idea principal es desarrollar una sección dentro de nuestro panel de control de WordPress desde el que se podrá acceder a través de la cuenta de un usuario-socio en la web. Una vez dentro de la sección desarrollaremos el código para agregar los contenidos, entre otra información como enlaces a la Wiki, selección de categorías, posicionamiento, etc…

Una vez finalizado el proceso para la creación de estos contenidos que se guardarán en una base de datos, desarrollaremos una sección recopilación en los que aparecerán listados todos los proyectos para su selección. Es decir; tendremos una vista general de proyectos de forma resumida y una vista específica de cada uno de forma extendida.

Definición de una sección

Lo primero que tendremos que tener en cuenta es el modo de presentación. En un principio, desarrollaremos una plantilla que asociaremos a una pagina denominada Projects Template. Para ello crearemos un fichero; que no tiene porqué tener el nombre anterior; y escribiremos dentro del fichero lo siguiente:

<?php /** * Template Name: Projects template */ ?>

<?php while (have_posts()) : the_post(); ?>
  
  <?php get_template_part('templates/content', 'projects'); ?>
<?php endwhile; ?>

 

En los comentarios iniciales se puede observar que sí utilizaremos el nombre mencionado anteriormente y a la hora de crear nuestra página, éste aparecerá en la lista de templates como se puede observar en la siguiente imagen.

Este pequeño código lo que hace es desarrollar una nueva estructura de página. Primero se introduce el contenido que se escribe en este apartado de página y después desarrollaremos la aparición de una sección para la adición y definición de proyectos.

Creación de una sección en el panel de control

Ahora desarrollaremos el modo de creación de los distintos proyectos. Para ello necesitaremos añadir una porción de código dentro de un archivo llamado functions.php. Este archivo se encuentra en la ruta mencionada anteriormente como /themes/nombre_del_theme.

Para crear la sección hay que utilizar principalmente una función del codex de Worpress denominada register post type.

Esta función hace uso de dos parámetros, que son el nombre o identificador de la sección a desarrollar y un segundo que son un conjunto de argumentos pasados en un array y que se utilizan de la siguiente manera.

<?php function create_projects() { $args = array( 'labels' => array(
      'name' => __('Projects'),
      'singular_name' => __('Projects'),
      'all_items' => __('All Projects'),
      'add_new_item' => __('Add New Project'),
      'edit_item' => __('Edit Project'),
      'view_item' => __('View Project')
    ),
    'public' => true,
    'has_archive' => true,
    'rewrite' => array('slug' => 'projects'),
    'show_ui' => true,
    'show_in_menu' => true,
    'show_in_nav_menus' => true,
    'capability_type' => 'page',
    'supports' => array('title', 'editor', 'thumbnail'),
    'exclude_from_search' => true,
    'menu_position' => 80,
    'has_archive' => true,
    'menu_icon' => 'dashicons-format-status'
    );
  register_post_type('dlabs_projects', $args);
  flush_rewrite_rules();
}

add_action( 'init', 'create_projects' );
?>

Ahora se ha creado un nuevo tipo de Post, al cual se puede acceder desde una url determinada, al igual que si fuera un post de blog, pero diferenciándolo del resto.

IMPORTANTE: La función flush_rewrite_rules; es infinitamente necesaria para desarrollar correctamente este modelo de creación en las secciones. De lo contrario podemos tener problemas con los enlaces (permalinks) a la hora de acceder a ellos.

En la base de datos de WordPress todo el contenido se almacena en una tabla denominada wp_post y aquí se guarda todo  o practicamente todo. Y cuando digo todo, me refiero a cada parte escrita que se almacena en el modo de edición WYSYWIG y sobre todo, los links asociados parasu acceso.

El problema viene que los tipos de post personalizados no siguen las mismas reglas que los post que vienen por defecto y a la hora de desarrollarlos no se enlazan correctamente una vez que se van creando nuevas entradas de este tipo.

Así que para hacer que estos adquieran esas propiedades como los post por defecto, se ha de ejecutar la función flush_rewrite_rules que en su descripción define este problema y practicamente actualiza todo el archivo .htcaccess de nuestra página.

Presentación de página de proyectos

Una vez realizado este proceso, solo nos queda definir la presentación de nuestros proyectos para que salgan en una lista y que pueda ordenarse una paginación. De esta manera, cada vez que clicamos sobre un proyecto, nos debería aparecer el título, un resumen del proyecto, el autor que lo ha realizado, etc…

Para ello creamos un archivo denominado content-projects.php dentro de la carpeta de templates. Si nos damos cuenta, esta ruta se ha llamado anteriormente desde la siguiente instrucción. Por lo que esta nueva página es la que contiene la ordenación de nuestros proyectillos en una cuadrícula definida de forma ordenada.

<?php get_template_part('templates/content', 'projects'); ?>

<?php $args = array( 'post_type' => 'dlabs_projects',
            'posts_per_page' => 12,
        );
        $projects = new WP_Query( $args );
        // The Loop
?>

<?php if ( $projects->have_posts() ) {
        while ( $projects->have_posts() ) {
                $projects->the_post(); ?>

<div class="col-sm-12 col-md-3">

<article >
                        <?php //the_post_thumbnail('thumbnail', array('class' => 'project-photo')); ?>

<header>

<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2>

                                <?php get_template_part('templates/entry-meta'); ?>
                        </header>


<div class="entry-summary">
                                <?php the_excerpt(); ?>
                        </div>

                        </article>

                </div>

        <?php }?>
<?php } else { ?>

<h3>No Projects found</h3>

<?php } ?>

<?php wp_reset_postdata();?>