Programación y Servidores web - Blog de programación Web y Servidores Web

09.12.201810.12.2018

Incluir un menú de migas de pan a nuestro módulo desde un Bloque o un Controlador en Magento 2

Desde un Bloque

Declaramos la clase UrlInterface y que nos permitirá usar los métodos getBaseUrl(), getUrl(), getCurrentUrl(), getUrl(‘test/test2’) , etc … ya que necesitaremos usarlos en nuestro menú de migas de pan. En un controlador no necesitamos hacer esto ya que ObjectManagerInterface es llamado por la factoría de páginas PageFactory.

use Magento\Framework\UrlInterface;

1	use Magento\Framework\UrlInterface;

En el constructor de nuestro bloque inyectamos la dependencia UrlInterface para poder utilizarla.

public function __construct( Context $context
                             UrlInterface $urlInterface) {            
        
    $this->_urlInterface = $urlInterface;
    parent::__construct($context);  
        
}

public function __construct( Context $context

UrlInterface $urlInterface) {

$this->_urlInterface = $urlInterface;

parent::__construct($context);

}

Creamos el método addbreadcrumb() en nuestro bloque y que se encargará de generar el menú de migas de pan personalizado (breadcrumb) en nuestra página.

public function addbreadcrumb() {
        
    // @var \Magento\Theme\Block\Html\Breadcrumbs 
    $breadcrumbs = $this->getLayout()->getBlock('breadcrumbs');
    $breadcrumbs->addCrumb('home',
        [
            'label' => __('Inicio'),
            'title' => __('Inicio'),
            'link' => $this->_urlInterface->getUrl()
        ]
    );
    $breadcrumbs->addCrumb('news',
        [
            'label' => __('Noticias'),
            'title' => __('Noticias'),
            'link' => $this->_urlInterface->getCurrentUrl()
        ]
    );     
        
    return $this->getLayout()->getBlock('breadcrumbs')->toHtml();

}

public function addbreadcrumb() {

// @var \Magento\Theme\Block\Html\Breadcrumbs

$breadcrumbs = $this->getLayout()->getBlock('breadcrumbs');

$breadcrumbs->addCrumb('home',

[

'label' => __('Inicio'),

'title' => __('Inicio'),

'link' => $this->_urlInterface->getUrl()

]

);

$breadcrumbs->addCrumb('news',

[

'label' => __('Noticias'),

'title' => __('Noticias'),

'link' => $this->_urlInterface->getCurrentUrl()

]

);

return $this->getLayout()->getBlock('breadcrumbs')->toHtml();

}

Y por último llamamos al método addbreadcrumb() que acabamos de crear desde el template que deseemos:

if ($block->addbreadcrumb()) { 
    echo $block->addbreadcrumb();
}

if ($block->addbreadcrumb()) {

echo $block->addbreadcrumb();

}

Desde un controlador

Desde un controlador es mas sencillo, tan solo tenemos que crear nuestro método encargado de generar las migas de pan.

namespace <vendor>\<pack>\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
 
class Index extends Action {
    
    protected $_pageFactory;
    
    public function __construct(
            Context $context, 
            PageFactory $pageFactory) {
        
        $this->_pageFactory = $pageFactory;        
        parent::__construct($context);        
       
    }       
    
    public function addbreadcrumb() {
        
        $pageFactory = $this->_pageFactory->create();
        
        // @var \Magento\Theme\Block\Html\Breadcrumbs 
        $breadcrumbs = $pageFactory->getLayout()->getBlock('breadcrumbs');
        $breadcrumbs->addCrumb('home',
            [
                'label' => __('Inicio'),
                'title' => __('Inicio'),
                'link' => $this->_url->getUrl('/')
            ]
        );
        $breadcrumbs->addCrumb('news',
            [
                'label' => __('Noticias'),
                'title' => __('Noticias'),
                'link' => $this->_url->getUrl('news')
            ]
        );      
    }
    
    public function execute() {        
        
        $page = $this->_pageFactory->create();
        $this->addbreadcrumb();
        return $page;
        
    }
}

namespace <vendor>\<pack>\Controller\Index;

use Magento\Framework\App\Action\Action;

use Magento\Framework\App\Action\Context;

use Magento\Framework\View\Result\PageFactory;

class Index extends Action {

protected $_pageFactory;

public function __construct(

Context $context,

PageFactory $pageFactory) {

$this->_pageFactory = $pageFactory;

parent::__construct($context);

}

public function addbreadcrumb() {

$pageFactory = $this->_pageFactory->create();

// @var \Magento\Theme\Block\Html\Breadcrumbs

$breadcrumbs = $pageFactory->getLayout()->getBlock('breadcrumbs');

$breadcrumbs->addCrumb('home',

[

'label' => __('Inicio'),

'title' => __('Inicio'),

'link' => $this->_url->getUrl('/')

]

);

$breadcrumbs->addCrumb('news',

[

'label' => __('Noticias'),

'title' => __('Noticias'),

'link' => $this->_url->getUrl('news')

]

);

}

public function execute() {

$page = $this->_pageFactory->create();

$this->addbreadcrumb();

return $page;

}

02.12.201802.12.2018

Filtrar Post de una Taxonomía en WordPress

En ocasiones querremos filtrar los post de una taxonomía perteneciente a algún post_type personalizado que tengamos creada.

En este caso por ejemplo filtramos los post_type hoteles y que pertenezcan a la categoría/tag de Madrid.

La Url de nuestro ejemplo sería /hoteles/madrid/

$postsTax = get_posts( [
    'posts_per_page' => -1,
    'post_type' => 'hoteles',
    'orderby' => 'date',
    'order' => 'asc',
    'tax_query' => [            
        ['taxonomy' => 'ciudades',                    
        'field' => 'term_id',
        'terms' => $term_id ]
    ],
] );

$postsTax = get_posts( [

'posts_per_page' => -1,

'post_type' => 'hoteles',

'orderby' => 'date',

'order' => 'asc',

'tax_query' => [

['taxonomy' => 'ciudades',

'field' => 'term_id',

'terms' => $term_id ]

] );

Si quisiéramos mostrar los post tan solo tenemos que recorrer el array.

foreach ($postsTax as $link) { ?>
    <a href="<?php the_permalink($link->ID); ?>" title="<?php echo $link->post_title; ?>">
    <?php echo $link->post_title; ?>
    </a><br /><?php
}

foreach ($postsTax as $link) { ?>

<a href="<?php the_permalink($link->ID); ?>" title="<?php echo $link->post_title; ?>">

<?php echo $link->post_title; ?>

</a><br /><?php

}

30.11.2018

Limitar el acceso a sus propios post al perfil author en WordPress

Tan solo hay que incluir este código en nuestro fichero functions.php de nuestro tema para que cada author solo puede tener acceso a los post que le pertenecen.

Pre_get_post es un hook que nos permite modificar las consultas a la base de datos y current_user_can() retorna true si tiene la capacidad de editar otros post por lo que le decimos que consulte solo los post del autor logueado.

function posts_for_current_author($query) {
    global $pagenow;
 
    if( 'edit.php' != $pagenow || !$query->is_admin )
        return $query;
 
    if( !current_user_can( 'edit_others_posts' ) ) {
        global $user_ID;
        $query->set('author', $user_ID );
    }
    return $query;
}
add_filter('pre_get_posts', 'posts_for_current_author');

function posts_for_current_author($query) {

global $pagenow;

if( 'edit.php' != $pagenow || !$query->is_admin )

return $query;

if( !current_user_can( 'edit_others_posts' ) ) {

global $user_ID;

$query->set('author', $user_ID );

}

return $query;

}

add_filter('pre_get_posts', 'posts_for_current_author');

30.11.201830.11.2018

Denegar el acceso a menús a un rol determinado de usuario en WordPress

Para quitar el acceso a menús del panel de administración a un rol determinado de usuario en WordPress, usaremos la función wp_get_current_user() que nos permite el acceso a información del usuario que ha logueado (email, nombre, roles, etc …).

Una vez que sabemos los roles del usuario logueado comparamos con el rol deseado y utilizamos remove_menu_page() para quitarle el acceso a post_types, páginas, plugins, etc …

function remove_menus(){       
    
    // Guardamos roles que tiene el usuario que ha logueado.
    $roles = wp_get_current_user()->roles;
                    
    // Si el rol "hotel-manager" existe en los roles de usuario
    / realizamos las acciones remove_menu_page() 
  
    if( !in_array('hotel-manager', $roles)){ return; }

    remove_menu_page( 'index.php' ); // dashboard  
    remove_menu_page( 'edit-comments.php' ); // Comments
    remove_menu_page( 'edit.php?post_type=portfolio' ); // portfolio
    remove_menu_page( 'wpcf7' ); // admin.php?page=wpcf7 // plugin page forms
    remove_menu_page( 'tools.php' ); // tools
                    
}    

add_action( 'admin_menu', 'remove_menus' , 100 );

function remove_menus(){

// Guardamos roles que tiene el usuario que ha logueado.

$roles = wp_get_current_user()->roles;

// Si el rol "hotel-manager" existe en los roles de usuario

/ realizamos las acciones remove_menu_page()

if( !in_array('hotel-manager', $roles)){ return; }

remove_menu_page( 'index.php' ); // dashboard

remove_menu_page( 'edit-comments.php' ); // Comments

remove_menu_page( 'edit.php?post_type=portfolio' ); // portfolio

remove_menu_page( 'wpcf7' ); // admin.php?page=wpcf7 // plugin page forms

remove_menu_page( 'tools.php' ); // tools

}

add_action( 'admin_menu', 'remove_menus' , 100 );

03.11.201830.11.2018

Creando un sencillo Plugin para WordPress de nuestro Bootstrap Slider, parte II

Vamos a crear un sencillo plugin de nuestro Bootstrap Slider para mantener organizado nuesto fichero functions.php. Para ello solo tendremos que mover el código que incluimos en nuestro fichero functions.php de como crear un Bootstrap slider para WordPress Parte I.

Crearemos una nueva carpeta en /wp-content/plugins/ y llamaremos por ejemplo bootstrapSlider/slider.php y en ella copiaremos el siguiente código.

<?php
/**
 * Plugin Name: Bootstrap Slider para Wordpress
 * Plugin URI: https://wwww.artegrafico.net
 * Description: Bootstrap slider para WordPress, nos permitirá gestioanr las imágenes y orden de las diapositivas
 * Author: José Luis Rojo Sánchez
 * Author URI: https://wwww.artegrafico.net
 * Version: 0.1
 * Date: 03-11-2018
*/

define( 'BOOTSTRAP_SLIDER_VERSION', '0.0.1' );
define( 'BOOTSTRAP_SLIDER_MINIMUM_WP_VERSION', '4.0' );
define( 'BOOTSTRAP_SLIDER_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

if ( is_admin() || ( defined( 'WP_CLI' ) && WP_CLI ) ) {
    require_once( BOOTSTRAP_SLIDER_PLUGIN_DIR . 'bootstrap-slider.php' );
    add_action( 'init', 'bootstrapSlider' );
}

<?php

/**

* Plugin Name: Bootstrap Slider para Wordpress

* Plugin URI: https://wwww.artegrafico.net

* Description: Bootstrap slider para WordPress, nos permitirá gestioanr las imágenes y orden de las diapositivas

* Author: José Luis Rojo Sánchez

* Author URI: https://wwww.artegrafico.net

* Version: 0.1

* Date: 03-11-2018

define( 'BOOTSTRAP_SLIDER_VERSION', '0.0.1' );

define( 'BOOTSTRAP_SLIDER_MINIMUM_WP_VERSION', '4.0' );

define( 'BOOTSTRAP_SLIDER_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

if ( is_admin() || ( defined( 'WP_CLI' ) && WP_CLI ) ) {

require_once( BOOTSTRAP_SLIDER_PLUGIN_DIR . 'bootstrap-slider.php' );

add_action( 'init', 'bootstrapSlider' );

}

El siguiente fichero que vamos a crear es bootstrap-slider.php con el código de nuestra función. Y un fichero index.php que dejaremos vacío para proteger el listado del directorio si fuera el caso.

<?php

function bootstrapSlider() {
    $labels = [
	'name'               => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __
	'singular_name'      => _x( 'Slide', 'txt-domain'), 
	'menu_name'          => _x( 'Bootstrap Slider', 'txt-domain'),	
	'add_new'            => _x( 'Incluir', 'txt-domain'), // texto para incluir 
	'add_new_item'       => __( 'Incluir diapositiva', 'txt-domain'), // Nombre
	'new_item'           => __( 'Nueva diapositiva', 'txt-domain'), //
	'edit_item'          => __( 'Editar diapositiva', 'txt-domain'),
	'view_item'          => __( 'Ver diapositiva', 'txt-domain'),
	'all_items'          => __( 'Todas las diapositivas', 'txt-domain'),
	'featured_image'     => __( 'Imagen destacada', 'txt-domain' ),
	'search_items'       => __( 'Buscar diapositiva', 'txt-domain'),
	'parent_item_colon'  => __( 'Padre de la diapositiva:', 'txt-domain'),
	'not_found'          => __( 'No se encontraron diapositivas.', 'txt-domain'),
	'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

    $args = [
	'labels'             => $labels,
	'menu_icon'	     => 'dashicons-format-gallery',
        'description'        => __( 'Description.', 'txt-domain'),
	'public'             => true,
	'publicly_queryable' => true,
        'exclude_from_search' => true,
	'show_ui'            => true, // genera un UI para administrar este tipo en el gestor de WordPress.
	'show_in_menu'       => true, // Lo muestra en el menú de administración de WordPres.        
	'query_var'          => true,
	'rewrite'            => true,
	'capability_type'    => 'post', 
	'has_archive'        => true,
	'hierarchical'       => true,
	'menu_position'      => null, // posición en el menú.
	'supports'           => array('title','editor','author','thumbnail','revisions','page-attributes') ];
        

    // Podremos usar esta función para themes y plugins.  
    // Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...) 
    // Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).
    // - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.
    // - argumentos (array)
    // https://codex.wordpress.org/Function_Reference/register_post_type
    register_post_type( 'slider', $args );
}

<?php

function bootstrapSlider() {

$labels = [

'name' => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __

'singular_name' => _x( 'Slide', 'txt-domain'),

'menu_name' => _x( 'Bootstrap Slider', 'txt-domain'),

'add_new' => _x( 'Incluir', 'txt-domain'), // texto para incluir

'add_new_item' => __( 'Incluir diapositiva', 'txt-domain'), // Nombre

'new_item' => __( 'Nueva diapositiva', 'txt-domain'), //

'edit_item' => __( 'Editar diapositiva', 'txt-domain'),

'view_item' => __( 'Ver diapositiva', 'txt-domain'),

'all_items' => __( 'Todas las diapositivas', 'txt-domain'),

'featured_image' => __( 'Imagen destacada', 'txt-domain' ),

'search_items' => __( 'Buscar diapositiva', 'txt-domain'),

'parent_item_colon' => __( 'Padre de la diapositiva:', 'txt-domain'),

'not_found' => __( 'No se encontraron diapositivas.', 'txt-domain'),

'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

$args = [

'labels' => $labels,

'menu_icon' => 'dashicons-format-gallery',

'description' => __( 'Description.', 'txt-domain'),

'public' => true,

'publicly_queryable' => true,

'exclude_from_search' => true,

'show_ui' => true, // genera un UI para administrar este tipo en el gestor de WordPress.

'show_in_menu' => true, // Lo muestra en el menú de administración de WordPres.

'query_var' => true,

'rewrite' => true,

'capability_type' => 'post',

'has_archive' => true,

'hierarchical' => true,

'menu_position' => null, // posición en el menú.

'supports' => array('title','editor','author','thumbnail','revisions','page-attributes') ];

// Podremos usar esta función para themes y plugins.

// Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...)

// Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).

// - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.

// - argumentos (array)

// https://codex.wordpress.org/Function_Reference/register_post_type

register_post_type( 'slider', $args );

}

Lo siguiente es abrir nuestro gestor y desde el menú plugins activarlo. De esta manera lo podremos reutilizar, mejorar, además de tenerlo todo más organizado.

02.11.201830.11.2018

Incluir un slider creado con Bootstrap 4.1 y administrable por WordPress.

Vamos a incluir a nuestro Theme de WordPress un slider creado con Bootstrap 4.1. También incluiremos de una forma muy sencilla un área gestionable para este tipo de post.

Lo primero que debemos hacer es editar el fichero functions.php de nuestro theme en el que incluiremos las llamadas a las librerías de bootstrap y sus dependencias (jQuery, etc …).

<?php
function add_styles() {
   wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
}

function add_scripts() {    
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
    wp_enqueue_script('jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
    wp_enqueue_script('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js');    
}

add_action('wp_enqueue_scripts', 'add_styles' );
add_action('wp_enqueue_scripts', 'add_scripts' );

<?php

function add_styles() {

wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

}

function add_scripts() {

wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');

wp_enqueue_script('jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');

wp_enqueue_script('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js');

}

add_action('wp_enqueue_scripts', 'add_styles' );

add_action('wp_enqueue_scripts', 'add_scripts' );

Lo segundo que incluiremos es el código de gestión del slider para así gestionarlo más fácilmente. Para ello usaremos la función register_post_type($type, $args).

<?php
function bootstrapSlider() {
    $labels = [
	'name'               => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __
	'singular_name'      => _x( 'Slide', 'post type singular name'), 
	'menu_name'          => _x( 'Diapositivas', 'txt-domain'),	
	'add_new'            => _x( 'Incluir', 'txt-domain'), // texto para incluir 
	'add_new_item'       => __( 'Incluir diapositiva', 'txt-domain'), // Nombre
	'new_item'           => __( 'Nueva diapositiva', 'txt-domain'), //
	'edit_item'          => __( 'Editar diapositiva', 'txt-domain'),
	'view_item'          => __( 'Ver diapositiva', 'txt-domain'),
	'all_items'          => __( 'Todas las diapositivas', 'txt-domain'),
	'featured_image'     => __( 'Imagen destacada', 'txt-domain' ),
	'search_items'       => __( 'Buscar diapositiva', 'txt-domain''),
	'parent_item_colon'  => __( 'Padre de la diapositova:', 'txt-domain'),
	'not_found'          => __( 'No se encontraron diapositivas.', 'txt-domain'),
	'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

    $args = [
	'labels'             => $labels,
	'menu_icon'	     => 'dashicons-format-gallery',
        'description'        => __( 'Description.', 'txt-domain'),
	'public'             => true,
	'publicly_queryable' => true,
        'exclude_from_search' => true,
	'show_ui'            => true, // genera un UI para administrar este tipo en el gestor de WordPress.
	'show_in_menu'       => true, // Lo muestra en el menú de administración de WordPres.        
	'query_var'          => true,
	'rewrite'            => true,
	'capability_type'    => 'post', 
	'has_archive'        => true,
	'hierarchical'       => true,
	'menu_position'      => null, // posición en el menú.
	'supports'           => array('title','editor','author','thumbnail','revisions','page-attributes') ];
        

    // Podremos usar esta funcion para themes y plugins.  
    // Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...) 
    // Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).
    // - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.
    // - argumentos (array)
    register_post_type( 'slider', $args );
}
add_action( 'init', 'bootstrapSlider' );

<?php

function bootstrapSlider() {

$labels = [

'name' => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __

'singular_name' => _x( 'Slide', 'post type singular name'),

'menu_name' => _x( 'Diapositivas', 'txt-domain'),

'add_new' => _x( 'Incluir', 'txt-domain'), // texto para incluir

'add_new_item' => __( 'Incluir diapositiva', 'txt-domain'), // Nombre

'new_item' => __( 'Nueva diapositiva', 'txt-domain'), //

'edit_item' => __( 'Editar diapositiva', 'txt-domain'),

'view_item' => __( 'Ver diapositiva', 'txt-domain'),

'all_items' => __( 'Todas las diapositivas', 'txt-domain'),

'featured_image' => __( 'Imagen destacada', 'txt-domain' ),

'search_items' => __( 'Buscar diapositiva', 'txt-domain''),

'parent_item_colon' => __( 'Padre de la diapositova:', 'txt-domain'),

'not_found' => __( 'No se encontraron diapositivas.', 'txt-domain'),

'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

$args = [

'labels' => $labels,

'menu_icon' => 'dashicons-format-gallery',

'description' => __( 'Description.', 'txt-domain'),

'public' => true,

'publicly_queryable' => true,

'exclude_from_search' => true,

'show_ui' => true, // genera un UI para administrar este tipo en el gestor de WordPress.

'show_in_menu' => true, // Lo muestra en el menú de administración de WordPres.

'query_var' => true,

'rewrite' => true,

'capability_type' => 'post',

'has_archive' => true,

'hierarchical' => true,

'menu_position' => null, // posición en el menú.

'supports' => array('title','editor','author','thumbnail','revisions','page-attributes') ];

// Podremos usar esta funcion para themes y plugins.

// Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...)

// Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).

// - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.

// - argumentos (array)

register_post_type( 'slider', $args );

}

add_action( 'init', 'bootstrapSlider' );

Ahora si entramos en nuestro gestor de WordPress veremos que se ha creado un nuevo menú para gestionar las entradas del slider. Si nos molestara podremos cambiarlo de posición.

El penúltimo paso es incluir es incluir nuestro slider al theme que estemos usando o el que estemos creando. En mi caso lo he incluido directamente al header.php. Lo que hago es y usar get_template_part() para llamar al fichero que contiene el código del slider y mantener un poco de orden en mi theme.

get_template_part('template-parts/header/slider', '');

1	get_template_part('template-parts/header/slider', '');

Y como último paso es incluir nuestro código el el fichero slider.php.

<div id="carousel-bootstrap-wordpress" class="carousel slide" data-ride="carousel">
  <!-- Indicadores de las diapositivas  -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-bootstrap-wordpress" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-bootstrap-wordpress" data-slide-to="1"></li>
    <li data-target="#carousel-bootstrap-wordpress" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <?php 
    $args = ['post_type' => 'slider', 
            'posts_per_page' => 5,
            'orderby' => 'date',
            'order' => 'desc',
            'exclude' => '',
            'post_status' => 'publish'];
    
        $slider = get_posts($args); ?>
      <?php $count = 0; ?>
      <?php foreach($slider as $slide): ?>
      <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
          <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive" />
          <div class="carousel-caption-template d-md-block animated fadeInUp" style="animation-name: fadeInUp;animation-delay: 1s;animation-duration: 2s;">
            <h4><?php echo $slide->post_title; ?></h4>
            <p><?php echo $slide->post_content; ?></p>
          </div>
      </div>
      <?php $count++; ?>
    <?php endforeach; ?>
  </div>

   <a class="carousel-control-prev" href="#carousel-bootstrap-wordpress" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-bootstrap-wordpress" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</ol>

<?php

$args = ['post_type' => 'slider',

'posts_per_page' => 5,

'orderby' => 'date',

'order' => 'desc',

'exclude' => '',

'post_status' => 'publish'];

$slider = get_posts($args); ?>

<?php $count = 0; ?>

<?php foreach($slider as $slide): ?>

<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive" />

<h4><?php echo $slide->post_title; ?></h4>

<p><?php echo $slide->post_content; ?></p>

</div>

<?php $count++; ?>

<?php endforeach; ?>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Os tendría que quedar algo parecido a esto (el estilado al 100% y otras detalles de CSS ya son personal de cada uno):

Y eso es todo!

31.10.201802.12.2018

Cómo utilizar correctamente register_nav_menus() y wp_nav_menu() en WordPress

Para poder utilizar varios menús en nuestro WordPress desde el apartado de apariencia del gestor tendremos que seguir unos pasos previamente.

Lo primero que vamos a realizar es registrar dichos menús (tantos como deseemos) para posteriormente poder utilizarlos. Para ello tenemos que editar el fichero functions.php de nuestro template de WordPress. Es en ese fichero donde utilizaremos la función register_nav_menus() para registrarlos o definirlos.

function artegraficoSetup() {
    
    // Registramos los menus que podriamos querer utilizar en nuestro theme.
    // Esto nos permitirá usarlos desde el gestor de WP.
    // Podemos registrarlos de uno en uno
    /*register_nav_menu( 'primary', 'TopMenu' );
    register_nav_menu( 'footer', 'FooterMenu' );    
    register_nav_menu( 'sidebar', 'SidebarMenu' );    */
    
    // register_nav_menus
    // vamos a registrar tres menús usando la sintaxis abreviada para definir arrays PHP 5.4> 
    register_nav_menus(
            ['first' => 'TopMenu',
            'second' => 'FooterMenu',
            'third' => 'SidebarMenu'] );            

}

/*
 * Hook / after_setup_theme 
 * Usaremos este hook para inicializar las opciones y configuraciones del theme
 * Init en cambio es mejor para inicializar plugins.
 */

add_action('after_setup_theme', 'artegraficoSetup');

function artegraficoSetup() {

// Registramos los menus que podriamos querer utilizar en nuestro theme.

// Esto nos permitirá usarlos desde el gestor de WP.

// Podemos registrarlos de uno en uno

/*register_nav_menu( 'primary', 'TopMenu' );

register_nav_menu( 'footer', 'FooterMenu' );

register_nav_menu( 'sidebar', 'SidebarMenu' ); */

// register_nav_menus

// vamos a registrar tres menús usando la sintaxis abreviada para definir arrays PHP 5.4>

register_nav_menus(

['first' => 'TopMenu',

'second' => 'FooterMenu',

'third' => 'SidebarMenu'] );

}

* Hook / after_setup_theme

* Usaremos este hook para inicializar las opciones y configuraciones del theme

* Init en cambio es mejor para inicializar plugins.

add_action('after_setup_theme', 'artegraficoSetup');

Una vez registrados los menús podemos ir a nuestro gestor de WordPress y en Apariencia->Menús->Gestionar Ubicaciones y ahí los tendremos que poder ver declarados. En como crear paginas y asignarlos a los menús no voy a entrar ya que eso es trivial.

El último paso es hacer cualquiera de esos menús visible en nuestro Theme. Para ello tendremos que editar el fichero header.php por ejemplo y le vamos a incrustar uno de los menus que hemos creado (en este caso el que indetifiqué como first) utilizando la función wp_nav_menu().

$conf = ['menu' =>  '', 
    'menu_id' =>  'menu-content', // <ul id="navMenu">
    'menu_class' => '', // <ul class="navMenu">
    'container' => 'nav', // <nav></nav>
    'container_class' => 'menu', // <nav id="navMenu">
    'container_id' => '',    // <nav class="navMenu">    
    'theme_location' =>  'first', // este sera el nombre del menu que le tengamos asignado en functions.php usando register_nav_menu()
    'echo' => true,
    'fallback_cb' => 'wp_page_menu', // en caso de que el menu no exista cargar wp_page_menu
    'before' => '', // texto antes del texto del enlace.
    'after' => '', // texto despues del texto del enlace.
    'link_before' => '<span>', // <a href=""><span> ....
    'link_after' => '</span>', // </span></a>
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'item_spacing' => 'preserve', // preserve / discard
    'depth' => 2, // numero de niveles que serán mostrados
    'walker' => '' ];
        
wp_nav_menu($conf); ?>

$conf = ['menu' => '',

'menu_id' => 'menu-content', // <ul id="navMenu">

'menu_class' => '', // <ul class="navMenu">

'container' => 'nav', // <nav></nav>

'container_class' => 'menu', // <nav id="navMenu">

'container_id' => '', // <nav class="navMenu">

'theme_location' => 'first', // este sera el nombre del menu que le tengamos asignado en functions.php usando register_nav_menu()

'echo' => true,

'fallback_cb' => 'wp_page_menu', // en caso de que el menu no exista cargar wp_page_menu

'before' => '', // texto antes del texto del enlace.

'after' => '', // texto despues del texto del enlace.

'link_before' => '<span>', // <a href=""><span> ....

'link_after' => '</span>', // </span></a>

'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',

'item_spacing' => 'preserve', // preserve / discard

'depth' => 2, // numero de niveles que serán mostrados

'walker' => '' ];

wp_nav_menu($conf); ?>

Muestro con un comentario todas las opciones que podemos utilizar para personalizar el menú usando wp_nav_menu() y que uso tendría cada una de ellas para que se entienda mejor.

Más información: wp_nav_menus() y register_nav_menus().

11.06.201712.06.2017

Netbeans, compresión CSS automática

Si estás utilizando SASS verás que por defecto los ficheros SCSS compilados no son optimizados para disminuir su tamaño.

Para ello tenemos que ir a las propiedades de nuestro proyecto en , File > Project Properties > CSS Preprocessors > Sass tab > Compiler options y en Compiler Options incluir la siguiente linea: –style compressed

En la imagen se puede ver más claro:

SASS define el style nested por defecto, que es el anidamiento en sangría de los estilos para que sea más sencilla y legible su lectura. También esta el style expanded que seria un estilo por linea pero sin la sangría del nested, (comúnmente usado por la mayoría de maquetadores web). Y el método style compact que agrupa todos los atributos en una sola linea.

25.05.201726.05.2017

PHP 7: Array de opciones en Sesiones

Array de opciones de sesión

Ahora con PHP7 podremos incluir un array de opciones a la función de sesión session_start() que sobrescribirán las directivas establecidas de nuestro fichero de configuración php.ini. Se acabó el tener que incluirlas una a una.

Puedes ver cuales son las opciones de configuración disponibles opciones de sesión en PHP.

session_start( [
   'cookie lifetime' => 86400,
   'cache_limiter' => 'private'   
] );

session_start( [

'cookie lifetime' => 86400,

'cache_limiter' => 'private'

] );