Theme Fotografo

Tema para estudios de fotografía. Contiene modelo de datos con los que se podrá rellenar los servicios, trabajos destacados, portfolio... Además tiene una sección de opciones donde configurar la distintas visualizaciones del tema, como pueden ser colores, tipografías, cabeceras...

VER TEMA COMPLETO

WORDPRESS / MALDONADO Y BUENO

Sitio web creado con Wordpress para Maldonado & Bueno es un estudio de interiorismo que desarrolla proyectos integrales de decoración inspirados en las últimas tendencias y en una selección de productos de alta calidad con la finalidad de crear soluciones únicas para cada espacio. El proyecto contiene la inserción del tema y el maquetado y la modificación de estilos CSS.

VISITAR SITIO WEB

WORDPRESS / OZOKILLER

Landing page creada en Wordpress para empresa que ha realizado un nuevo Generador que es el más potente del mercado y el más esperado por los cultivadores de indoor. El proyecto contiene la creación de la landing y el maquetado y la modificación de estilos CSS. Sitio web realizado en colaboración con Desarrollo Online.

VER PROYECTO

Integrar menús de bootstrap en WP

Si estás desarrollando un tema nuevo en WordPress y estás usando el framework Bootstrap para la maquetación del Front-end, probablemente te hayas encontrado con el problema de cómo integrar las clases de los menús de bootstrap en los menús que construye WordPress.

La solución pasa por utilizar una clase walker a la que llamaremos desde la función wp_nav_menu(). Afortunadamente, podemos encontrar en GitHub esta clase gracias a Edward McIntyre.

El proceso que tenemos que seguir para implementarla en nuestro tema es:

  1. Descarga la clase wp-bootstrap-navwalker aquí https://github.com/twittem/wp-bootstrap-navwalker.
  2. Coloca el archivo php descargado en la carpeta de tu tema
  3. Abre el archivo functions.php  y agrega la siguiente línea.
    require_once(‘wp_bootstrap_navwalker.php’);
  4. En el header agrega la clase wp_bootstrap_navwalkerwp_nav_menu([
    ‘menu’ => ‘primary’,
    ‘theme_location’ => ‘primary’,
    ‘depth’ => 2,
    ‘container’ => ‘div’,
    ‘container_class’ => ‘collapse navbar-collapse’,
    ‘container_id’ => ‘bs-example-navbar-collapse-1’,
    ‘menu_class’ => ‘nav navbar-nav’,
    ‘fallback_cb’ => ‘wp_bootstrap_navwalker::fallback’,
    ‘walker’ => new wp_bootstrap_navwalker()
    ]);

El menú de bootstrap se enmarca dentro de otros elementos HTML, a continuación expongo el código completo del menú de navegación creado para este blog:

<div class="navbar navbar-default">
  <div class="container">
    <div class="visible-xs">
      <?php get_search_form();?>
    </div>

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation-menu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div><!-- navbar-header -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <nav class="collapse navbar-collapse navigation-menu" role="navigation">
      <?php wp_nav_menu( array(
        'menu' => 'header-menu',
        'theme_location' => 'header-menu',
        'depth' => 2,
        'container' => '',
        'container_class' => '',
        'menu_class' => 'nav navbar-nav',
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
        'walker' => new wp_bootstrap_navwalker())
      );?>
    </nav><!-- navigation -->
  </div><!-- container -->
</div><!-- navbar-default -->

Ya sólo quedaría maquetar los menús a tu gusto con CSS.