Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

2,982 views

Published on

Aprende a crear themes de WordPress desde cero. Todo lo que nos ofrece WordPress para crear nuestros propios themes.

Published in: Technology
  • My brother found Custom Writing Service ⇒ www.HelpWriting.net ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get the best essay, research papers or dissertations. from ⇒ www.WritePaper.info ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Posso recomendar um site. Ele realmente me ajudou. Chama-se ⇒ www.boaaluna.club ⇐ Eles me ajudaram a escrever minha dissertação.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

  1. 1. dariobf.com Desarrollo de Temas Archivos y plantillas del tema, Uso de plantillas, El Loop, Custom Post Types, Metaboxes, Functions.php, Crear tema desde cero, Child Themes, Starter Themes.
  2. 2. #1 ¿Qué es un tema? ¿Y cómo crearlo?
  3. 3. dariobf.com ¿Qué es un tema? Un tema es un conjunto de archivos que permite cambiar la apariencia de nuestro gestor de contenidos. Un tema WordPress nos permitirá personalizar las fuentes de los textos, el tamaño de la letra, los colores del texto, de los links, el fondo de la página; en definitiva, el aspecto del sitio web. •Blog. •Tienda online. •Sitio web corporativo. •Institucionales. •Educativos. •Comunidad. •Wiki. •Portal. •etc.
  4. 4. dariobf.com index.phpstyle.css ¿Cómo es un tema?
  5. 5. dariobf.com style.css Sin style.css no hay tema. function search_theme_directories(){ … if ( $theme_file == ‘style.css’ ) { $theme_files[$theme_dir] = array( ‘theme_file’ => $theme_dir . ‘/’ . $theme_file, ‘theme_root’ => $theme_root ); $found_stylesheet = true; break; … } … }
  6. 6. dariobf.com /* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one- column, two-columns, right-sidebar, flexible-width, custom- header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
  7. 7. dariobf.com style.css
  8. 8. dariobf.com style.css
  9. 9. dariobf.com index.php Plantilla más genérica. Se muestra si no hay otra plantilla más específica para el contenido que estamos mostrando. » home.php index.php »
  10. 10. dariobf.com WordPress nos permite modularizar el código; esto es, crear ficheros para jerarquizar el diseño (front-end). Además, nos permite modularizar funciones (plugins), de manera que podemos reciclar trozos de código en diferentes proyectos. Modularización
  11. 11. dariobf.com Ficheros habituales de un tema WordPress header.php footer.php sidebar.php
  12. 12. dariobf.com header.php footer.php index.php sidebar.php
  13. 13. dariobf.com header.php Declaración del documento. Inclusión de los estilos. Función wp_head();
  14. 14. dariobf.com wp_head() Función IMPRESCINDIBLE. Sinónimo de do_action(‘wp_head’); No acepta parámetros. Es dependiente del tema. Todos los plugins vuelcan sobre ella sus estilos y scripts. add_action('wp_head','hook_css'); function hook_css() { $output="<style> .wp_head_example { background-color : #f1f1f1;} </style>"; echo $output; }
  15. 15. dariobf.com footer.php Pié de página. Inclusión de Javascript. Función wp_footer();
  16. 16. dariobf.com wp_footer() Función IMPRESCINDIBLE. Sinónimo de do_action(‘wp_footer’); No acepta parámetros. Es dependiente del tema. Todos los plugins vuelcan sobre ella sus scripts. add_action('wp_footer','hook_javascript'); function hook_javascript() { $output="<script> //Mi función javascript. </script>"; echo $output; }
  17. 17. dariobf.com sidebar.php Barra lateral. Widgets.
  18. 18. dariobf.com Plantillas para contenidos home.php page.php single.php archive.php
  19. 19. dariobf.com page.php y single.php
  20. 20. dariobf.com Más plantillas 404.php category.php tag.php author.php …
  21. 21. dariobf.com index 404 archive author category tag taxonomy date home front_page page paged search single text, plain, text_plain (all mime types) attachment comments Todas las plantillas
  22. 22. dariobf.com Plantillas personalizadas contacto.php about.php location.php whatever.php …
  23. 23. dariobf.com Página especializada. Para una entrada, autor, página concretos. 1. page-{slug}.php 2. page-{ID}.php 3. category-{ID}.php 4. tag-{ID}.php 5. author-{ID}.php … Plantillas personalizadas
  24. 24. #2 El Loop
  25. 25. dariobf.com header.php footer.php index.php sidebar.php
  26. 26. El bucle (Loop) Determina qué contenido debe mostrar WordPress. Un sólo post o página. Un grupo de posts o páginas. Consulta parámetros (URL) <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h1><?php the_title() ?></h1> <div class='post-content'><?php the_content() ?></div> <?php endwhile; else: ?> Vaya, no hay entradas. <?php endif; ?>
  27. 27. Objeto $wp_query El Loop es utilizado para extraer y mostrar contenido de artículos (o posts), páginas y tipos de entrada personalizados (Custom Post Types). Los datos que obtenemos al consultar (consulta original, query_posts o WP_Query), estos se guardan en $wp_query (un objeto).
  28. 28. dariobf.com Objeto $wp_query Ejemplo - Ver posts o artículos: <pre> <?php print_r($wp_query->posts); ?> </pre> Ejemplo - Loop básico: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  29. 29. dariobf.com Objeto $wp_query Funciones del objeto $wp_query: <?php function the_post() { global $wp_query; $wp_query->the_post(); } ?>
  30. 30. dariobf.com Objeto $wp_query Objeto automático. WordPress basa el funcionamiento de $wp_query en la dirección web actual y configuraciones del wp-admin. WordPress necesita la URL para filtrar parámetros o páginas concretas. Por ejemplo, la URL http://ejemplo.com/etiqueta/pony le dice a WordPress que configure el objeto $wp_query con los artículos etiquetados con pony, exclusivamente. Mientras que http://ejemplo.com/ obtiene todos los artículos.
  31. 31. <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h1><?php the_title() ?></h1> <div class='post-content'><?php the_content() ?></div> <?php endwhile; else: ?> Vaya, no hay entradas. <?php endif; ?> Clase que modifica (o crea) el objeto $wp_query Loop por defecto: Clase WP_Query
  32. 32. <?php $args = array('cat' => 4); $category_posts = new WP_Query($args); if($category_posts->have_posts()) : while($category_posts->have_posts()) : $category_posts->the_post(); ?> <h1><?php the_title() ?></h1> <div class='post-content'><?php the_content() ?></div> <?php endwhile; else: ?> Vaya, no hay entradas. <?php endif; ?> Loop de WordPress con WP_Query Clase WP_Query
  33. 33. dariobf.com Loop normal vs Loop WP_Query: 1.Construir la consulta: Con WP_Query hay que indicar qué contenido queremos extraer de la base de datos. 2.Inicializar WP_Query y consultar. 3.Crear el loop. 4.Trabaja como siempre. Clase WP_Query
  34. 34. dariobf.com 1 - Construir la consulta: Con WP_Query hay que indicar qué contenido queremos extraer de la base de datos. 1. Controla los valores por defecto: • post_per_page • post_type • post_status • Más información. Clase WP_Query
  35. 35. <?php $args = array('cat' => 4); $category_posts = new WP_Query($args); if($category_posts->have_posts()) : while($category_posts->have_posts()) : $category_posts->the_post(); ?> <h1><?php the_title() ?></h1> <div class='post-content'><?php the_content() ?></div> <?php endwhile; else: ?> Vaya, no hay entradas. <?php endif; ?> 2 - Iniciar WP_Query y consultar. Clase WP_Query
  36. 36. <?php $args = array('cat' => 4); $category_posts = new WP_Query($args); if($category_posts->have_posts()) : while($category_posts->have_posts()) : $category_posts->the_post(); ?> <h1><?php the_title() ?></h1> <div class='post-content'><?php the_content() ?></div> <?php endwhile; else: ?> Vaya, no hay entradas. <?php endif; ?> 3 - Crear el Loop. Clase WP_Query
  37. 37. dariobf.com 4. Trabaja como siempre. 1. Añade tus etiquetas html, estructura o diseño. Consejos: No hagas consultas muy pesadas, sobretodo en alojamientos compartidos. – Más consultas a la base de datos = más consumo del servidor. – Siempre que puedas, utiliza la consulta por defecto de WordPress y el motor de plantillas. Clase WP_Query
  38. 38. dariobf.com /* Restore original Post Data * NB: Because we are using new WP_Query we aren't stomping on the * original $wp_query and it does not need to be reset with * wp_reset_query(). We just need to set the post data back up with * wp_reset_postdata(). */ wp_reset_postdata(); 5 - Resetea parámetros (evita problemas) Clase WP_Query
  39. 39. #3 Añadiendo menús personalizados
  40. 40. Podemos registrar tantos menús como queramos // Añado un menú sólo function register_my_menu() { register_nav_menu('header-menu',__( ‘Primary Navigation' )); } // Añado varios menús function register_my_menus() { register_nav_menus( array( 'header-menu' => __( ‘Primary Navigation’ ), 'extra-menu' => __( ‘Top Bar Navigation’ ) ) ); } add_action( 'init', 'register_my_menus' ); Añadiendo menús Apariencia»Menús {
  41. 41. dariobf.com Para mostrarlo en el front-end: <?php wp_nav_menu(array( 'theme_location' => 'header-menu')); ?> Añadiendo menús Más información <?php wp_nav_menu(array( 'theme_location' => ‘extra-menu', 'container_class' => ‘my_extra_menu_class' )); ?>
  42. 42. #4 functions.php
  43. 43. dariobf.com • Es un fichero de nuestro tema. • Es una de las formas de cambiar las características que WordPress ofrece por defecto. • El functions.php funciona como un plugin: • Añade mejoras y funcionalidades a un sitio WordPress. • Puedes utilizarlo para llamar funciones, tanto PHP como de WordPress. functions.php
  44. 44. dariobf.com Un plugin: • Requiere una cabecera específica, única • Se guarda en wp-content/plugins (Normalmente en subdirectorio • Se ejecuta sólo cuando está activado, a través del panel de plugins • Aplica sus funciones independientemente del tema • Debe tener un propósito; por ejemplo: convertir artículos en páginas, ofrecer mejoras de posicionamiento o ayudar con los backups functions.php Diferencias con un plugin
  45. 45. dariobf.com El fichero functions.php: • No requiere una cabecera única/propia. • Se guarda en el directorio de cada tema; wp-content/ themes/theme • Sólo se ejecuta cuando el tema al que aplica está activado. • Aplica sus funciones/cambios sólo al tema. Si se cambia el tema, la funcionalidad se pierde. • Puede tener varios bloques de código utilizados para diferentes propósitos. functions.php Diferencias con un plugin
  46. 46. ¡CUIDADO!: Si un plugin de WordPress llama a la misma función o filtro que tu functions.php, los resultados pueden ser…
  47. 47. #5 Custom Post Types
  48. 48. dariobf.com Custom Post Types Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.
  49. 49. dariobf.com Custom Post Types Utilidades: • Catálogos de productos. • El custom post type es el producto. • Portfolios. • Editorial. …
  50. 50. Custom Post Types 1 - Mostrar etiquetas del nuevo Post Type. // La función no será utilizada antes del 'init'. add_action( 'init', 'my_custom_init' ); /* Creamos labels personalizados para nuestro Post Type */ function my_custom_init() { $labels = array( ‘name’ => _x( 'Libros', 'post type general name' ), 'singular_name' => _x( 'Libro', 'post type singular name' ), 'add_new' => _x( 'Añadir nuevo', 'book' ), 'add_new_item' => __( 'Añadir nuevo Libro' ), 'edit_item' => __( 'Editar Libro' ), 'new_item' => __( 'Nuevo Libro' ), 'view_item' => __( 'Ver Libro' ), 'search_items' => __( 'Buscar Libros' ), 'not_found' => __( 'No se han encontrado Libros' ), 'not_found_in_trash' => __( 'No se han encontrado Libros en la papelera' ), 'parent_item_colon' => '' );
  51. 51. Custom Post Types 2- Definir propiedades del post type nuevo. // Creamos un array para $args $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => ‘post', 'hierarchical' => false, 'menu_position' => null, 'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ) ); //Registramos el Post Type register_post_type( 'libro', $args ); /* Registramos y a funcionar */ }
  52. 52. dariobf.com Custom Post Types Funciones para controlar el Custom Post Type: • post_type_exists() – Revisa si existe un custom post type. • is_post_type_hierarchical( $post_type ) – Cuándo el tipo de post es jerárquico. Si retorna falso es que no lo es. • get_post_type( $post ) – Recupera el tipo de entrada del artículo en cuestión o un post específico. • get_post_type_object( $post_type ) – Recupera un objeto del tipo de entrada por nombre. • get_post_types( $post ) – Obtiene una lista de todos los tipos de entrada. • register_post_type() – Registra un nuevo tipo de entrada. No utilizar antes del init. • get_post_type_capabilities() – Crea un objeto con todos los permisos de los tipos de entrada personalizados. Más información
  53. 53. Taxonomías Custom Post Types // Lo enganchamos en la acción init y llamamos a la función create_book_taxonomies() cuando arranque add_action( 'init', 'create_book_taxonomies', 0 ); // Creamos dos taxonomías, género y autor para el custom post type "libro" function create_book_taxonomies() { // Añadimos nueva taxonomía y la hacemos jerárquica (como las categorías por defecto) $labels = array( 'name' => _x( 'Géneros', 'taxonomy general name' ), 'singular_name' => _x( 'Género', 'taxonomy singular name' ), 'search_items' => __( 'Buscar por Género' ), 'all_items' => __( 'Todos los Géneros' ), 'parent_item' => __( 'Género padre' ), 'parent_item_colon' => __( 'Género padre:' ), 'edit_item' => __( 'Editar Género' ), 'update_item' => __( 'Actualizar Género' ), 'add_new_item' => __( 'Añadir nuevo Género' ), 'new_item_name' => __( 'Nombre del nuevo Género' ), );
  54. 54. Taxonomías Custom Post Types register_taxonomy( 'genero', array( 'libro' ), array( 'hierarchical' => true, 'labels' => $labels, /* ADVERTENCIA: Aquí es donde se utiliza la variable $labels */ 'show_ui' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'genero' ), ));
  55. 55. Taxonomías Custom Post Types // Añado otra taxonomía, esta vez no es jerárquica, como las etiquetas. $labels = array( 'name' => _x( 'Escritores', 'taxonomy general name' ), 'singular_name' => _x( 'Escritor', 'taxonomy singular name' ), 'search_items' => __( 'Buscar Escritores' ), 'popular_items' => __( 'Escritores populares' ), 'all_items' => __( 'Todos los escritores' ), 'parent_item' => null, 'parent_item_colon' => null, 'edit_item' => __( 'Editar Escritor' ), 'update_item' => __( 'Actualizar Escritor' ), 'add_new_item' => __( 'Añadir nuevo Escritor' ), 'new_item_name' => __( 'Nombre del nuevo Escritor' ), 'separate_items_with_commas' => __( 'Separar Escritores por comas' ), 'add_or_remove_items' => __( 'Añadir o eliminar Escritores' ), 'choose_from_most_used' => __( 'Escoger entre los Escritores más utilizados' ) );
  56. 56. Taxonomías Custom Post Types register_taxonomy( 'escritor', 'libro', array( 'hierarchical' => false, 'labels' => $labels, /* ADVERTENCIA: Aquí es donde se utiliza la variable $labels */ 'show_ui' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'escritor' ), )); } // Fin de la función create_book_taxonomies().
  57. 57. Taxonomías Custom Post Types —>
  58. 58. dariobf.com Funciones para controlar el Custom Post Type: • get_taxonomies() – Obtienes una lista de las taxonomías registradas. • get_object_taxonomies($object_type) – Retorna todas las taxonomías que pertenecen al $object_type especificado. • get_taxonomy() – Recupera la taxonomia especificada. • taxonomy_exists() – Comprueba que la taxonomía existe. Falso si no existe. • is_taxonomy_hierarchical() – Nos dice si una taxonomía es jerárquica. Falso en caso negativo. • register_taxonomy – Crea o modifica un objeto de taxonomía. No usar antes del init. Taxonomías Custom Post Types Más información
  59. 59. #6 Metaboxes
  60. 60. dariobf.com Metaboxes ¿Qué es?: • Nos permite añadir campos personalizados en la página de edición de los posts. • Guardar más información sobre un tipo de entrada (o todos) ¿Cómo se crean?: • Con plugin. • Con código.
  61. 61. dariobf.com Metaboxes <?php add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>
  62. 62. dariobf.com • $id el el ID html del metabox. Es útil, por ejemplo, si vas a utilizar un CSS custom para darle estilos a este metabox o incluso vas a hacer algo con Javascript; sino, no tiene mucha importancia. • $title es el título que será mostrado en la parte superior del metabox, como veremos próximamente. • $callback es la función que dará uso a nuestro metabox, lo veremos en el siguiente punto. • $page es donde queremos que se muestre nuestro metabox; podemos decidir que se muestre en los post, las páginas o un custom post type (nuestro caso). • $context es dónde queremos que se muestre nuestro metabox. “normal” significará que se muestre bajo el editor de la entrada o página, “side” coloca el metabox a la barra lateral de la página de edición y “advanced” lo coloca en la misma columna que el editor. • $priority le dice a WordPress dónde cargar el metabox en el contenido. “high”, “default” o “low” coloca la caja del metabox arriba, en su posición natural o abajo del todo respectivamente. Aunque, desde que todos los metaboxes de WordPress funcionan con el Drag and drop, $priority no tiene demasiado sentido. • $callback_args es de otra batalla. Metaboxes
  63. 63. dariobf.com Metaboxes <?php add_meta_box( ‘my-meta-box-id’, ‘Datos adicionales del libro’, ‘dariobf_metabox’, ‘libro’, ‘normal’, ‘high’ ); ?>
  64. 64. dariobf.com Metaboxes function dariobf_metabox( $post ){ ?> <p>Aquí pondremos todo el contenido de nuestro metabox</p> <?php }
  65. 65. dariobf.com Metaboxes function dariobf_metabox( $post ) { ?> <p> <label for="my_meta_box_text">ISBN</label> <input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?/>" /> </p> <?php } Añadiendo: Input
  66. 66. dariobf.com Metaboxes function dariobf_metabox( $post ) { $values = get_post_custom( $post->ID ); $text = isset( $values['my_meta_box_text'] ) ? esc_attr( $values['my_meta_box_text'][0] ) : ''; // We'll use this nonce field later on when saving. wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?> <p> <label for="my_meta_box_text">ISBN</label> <input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?/>" /> </p> <?php } Añadiendo: Input
  67. 67. dariobf.com Metaboxes Añadiendo: Select
  68. 68. dariobf.com Metaboxes ¿Qué hemos hecho?: • He añadido dos select, como hemos mencionado arriba. • He añadido, también, dos variables más ($select y $select2) donde recogo los datos de ambos select. Tal y como hicimos con el input del ISBN.
  69. 69. dariobf.com Metaboxes Guardando los datos: • Jamás te fíes del usuario. • Antes de guardar los datos vamos a comprobar que no hay nada malicioso en ellos. • Función esc_attr(). Codifica las comillas simples y dobles así como los símbolos mayor qué y menor qué en HTML. Más información. • Guardamos con update_meta(): • El ID del post • La “llave” (key) del meta • El valor.
  70. 70. Metaboxes add_action( 'save_post', ‘dariobf_metabox_save’ ); function dariobf_metabox_save( $post_id ) { // Controla si estamos haciendo un auto-guardado if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; // Si nuestro nonce no está, o no podemos verificarlo, fuera. if( !isset( $_POST['meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return; // Si el usury actual no puede editar este post, fuera. if( !current_user_can( 'edit_post' ) ) return; // Ahora podemos guardar los datos $allowed = array( 'a' => array( 'href' => array() ) );
  71. 71. Metaboxes // Nos aseguramos de que la información está definida antes de guardar. if( isset( $_POST['my_meta_box_text'] ) ) update_post_meta( $post_id, ‘my_meta_box_text', wp_kses( $_POST['my_meta_box_text'], $allowed ) ); if( isset( $_POST['my_meta_box_select'] ) ) update_post_meta( $post_id, 'my_meta_box_select', esc_attr( $_POST['my_meta_box_select'] ) ); if( isset( $_POST['my_meta_box_select_2'] ) ) update_post_meta( $post_id, 'my_meta_box_select_2', esc_attr( $_POST['my_meta_box_select_2'] ) ); } // Fin función dariobf_metabox_save
  72. 72. dariobf.com Metaboxes ¿Cómo muestro los datos en el Front-End? get_post_meta o get_post_custom // Obtenemos el ISBN del libro con ID 76 <?php $isbn = get_post_meta( 76, 'my_meta_box_text' ); ?>
  73. 73. #7 Post Formats
  74. 74. dariobf.com Post Formats Introducido en la versión 3.1 Un Post Format (Formato de publicación) es una información meta que se puede utilizar en un tema para personalizar la forma de presentación de la misma. En resumen, con un tema que soporte los Post Formats, el usuario final puede decidir la apariencia que tendrá cada publicación.
  75. 75. dariobf.com Post Formats • Aside - Generalmente se muestra sin título. Parecido a una publicación en el muro de Facebook. • Galería - Galería de imágenes. • Enlace - Un enlace a otro sitio web. • Imagen - Una única imagen. La primera etiqueta img en el artículo se considerará la imagen. • Cita - Una cita. Probablemente contendrá un blockquote con el contenido citado. Además, la cita será el contenido, con la fuente o autor como título. • Estado - Actualización de estado, similar a una actualización de Twitter. • Vídeo - Un video o playlist de vídeos. • Audio - Un fichero de audio o lista de reproducción. Puede utilizarse para Podcasting. • Chat - Transcripción de chat.
  76. 76. dariobf.com Post Formats ¿Cómo añado este soporte a mi tema? add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
  77. 77. dariobf.com Post Formats ¿Y a un tipo de entrada concreto? // Añado post-formats al post_type ‘page' - Páginas add_post_type_support( 'page', 'post-formats' ); // Añado post-formats al post_type ‘my_custom_post_type' add_post_type_support( 'my_custom_post_type', 'post-formats' );
  78. 78. dariobf.com Post Formats Para utilizarlos en el front-end: if ( has_post_format( 'video' )) { echo 'this is the video format'; }
  79. 79. #8 Imagen destacada
  80. 80. dariobf.com Imagen destacada También Post Thumbnail add_theme_support( 'post-thumbnails' ); has_post_thumbnail() - Pregunta the_post_thumbnail() - Muestra (Loop) get_the_post_thumbnail() - Muestra
  81. 81. #9 Customizer
  82. 82. dariobf.com Nos permite dejar ciertos valores a configurar por el usuario de nuestro theme. Por ejemplo: logotipos, fondo, imagen de cabecera, tamaño y características de la fuente… https://developer.wordpress.org/themes/advanced-topics/ customizer-api/ Customizer
  83. 83. #10 Child Themes Starter Themes
  84. 84. dariobf.com Un "tema hijo" en WordPress es un tema que hereda la funcionalidad de otro tema, llamado "tema padre”. Los temas hijos permiten modificar o añadir las funcionalidades del tema padre. Un tema hijo es la forma más segura y fácil de modificar un tema existente, tanto si se quiere hacer pequeños cambios como otros más amplios. En lugar de modificar los archivos del tema directamente, crear un tema hijo y hacerlo prevalecer sobre el tema padre. Child Themes
  85. 85. dariobf.com Si modificas un tema existente y se actualiza, se perderán los cambios. Con un tema hijo, puedes subir el tema padre (que puede ser importante por cuestiones de seguridad o funcionalidad) y seguir manteniendo los cambios. Puede acelerar el tiempo de desarrollo. Partimos de un tema desarrollado. Es una buena forma de empezar si se está empezando con el desarrollo de temas WordPress. Child Themes ¿Porqué utilizarlos?
  86. 86. dariobf.com Crea una carpeta para tu tema hijo en wp-content/themes. Recomendable “nombredeltemapadre-child”. Crea un style.css (único fichero obligatorio para crear un tema hijo) Child Themes /* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive- layout, accessibility-ready Text Domain: twenty-fourteen-child */ @import url("../twentyfourteen/style.css"); /* =Aquí empieza la personalización de tu tema -------------------------------------------------------------- */
  87. 87. dariobf.com Consejo: no utilizar @import para integrar la hoja de estilos del padre. Utilizar wp_enqueue_style en el functions.php Child Themes add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
  88. 88. dariobf.com underscores.me Es un tema sin estilos con el que empezar a trabajar. No utilizar como Parent Theme. Starter Themes
  89. 89. dariobf.com • La cantidad justa de plantillas HTML5, bien comentadas y modernas. • Una plantilla 404 útil. • Una implementación de “header” personalizado (opcional) inc/custom- header.php • Etiquetas personalizadas de plantilla en inc/template-tags.php que mantienen tus plantillas limpias y previenen la duplicación de código. • Algunos trucos en inc/extras.php que pueden mejorar tu experiencia desarrollando temas. • Un script en js/navigation.js que hace tu menú responsive en pantallas pequeñas. Preparado para tu creatividad CSS. • Dos ejemplos de plantillas CSS en layouts/: Una con barra lateral a la derecha y otra con barra lateral a la izquierda. • Starter CSS en style.css que te ayudará a empezar tu diseño rápidamente. • La licencia GPL en license.txt. Starter Themes

×