blog

Navegacion con React JS

En esta entrada os quiero contar como podéis realizar una simple navegación en react js. Tendremos en cuenta objetivos como:

  • Mostrar menú importado desde un file.json
  • Estructura JSX para el contenido
  • Estructura de las página a mostrar internas y externas
  • Aplicar clase active
  • librería de iconos
  • Estilos de css en línea y externo

Veremos todos estos pasos uno a uno y en el orden que hemos indicado.

1.Mostrar menú importado desde un file.json

En un fichero .json tendremos los elementos de nuestro menú con todas las características necesarias que queramos visualizar, veamos el código:

[
   {
      "id":1,
      "name":"login",
      "alias":"login",
      "icon":"fa fa-key",
      "url":"/"
   },
   {
      "id":2,
      "name":"Home",
      "alias":"home",
      "icon":"fa fa-home",
      "url":"/home/"
   },
   {
      "id":3,
      "name":"Dashboard",
      "alias":"dashboard",
      "icon":"fa fa-tag",
      "url":"/dashboard/"
   }
]

En este código podemos ver como el fichero json con el que vamos a trabajar tiene tres elementos principales con diferentes características como el id, nombre, alias, icono, ruta … Para poder trabajar con el fichero debemos importarlo en nuestro proyecto de la siguiente forma

import Menu from './data/menu.json';

Una vez importado ya podemos hacer uso de ello ahora vamos a recorrer el fichero para poder listar los elementos de menú.

class Showmenu extends Component{
    render() {
      return (
        <ul className="menu">
          {
            Menu.map( li=>{
              return(
              <li key={li.id}   >
                <NavLink data-alias={li.alias} to={li.url}   >
                  <span>{li.name}</span>
                </NavLink>
              </li>
              )
            })
          }
        </ul>
      )
  }
}

Usamos la función .map() para el tomar array que nos llegará a través del import del fichero.json.

2. Estructura JSX para el contenido

En el código anterior vemos como hemos incluido elementos de jsx necesarios para listar el menú.

Actualmente este es el resultado y código de nuestro proyecto.

import React, {Component} from 'react';
import { BrowserRouter, Switch, Route, NavLink, Redirect } from 'react-router-dom';
import Menu from './data/menu.json';


class Showmenu extends Component{
    render() {
      return (
        <ul className="menu">
          {
            Menu.map( li=>{
              return(
              <li key={li.id}   >
                <NavLink data-alias={li.alias} to={li.url}   >
                  <span>{li.name}</span>
                </NavLink>
              </li>
              )
            })
          }
        </ul>
      )
  }
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
          <div className="header">
                <Showmenu></Showmenu> 
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Mostramos a través de una lista el contenido del fichero json. La estructura del menú la tenemos guardada en una clase llamada Showmenú la cual estamos llamando en la función principal que va mostrar todo el contenido de nuestro proyecto.

A continuación veremos también la estructura necesaria para completar el proceso de navegación que será el resultado que se visualice en los diferentes enlaces del menú

3.Estructura de las página a mostrar internas y externas

Para poder mostrar dicho resultado crearemos diferentes funciones, cada una de ellas contiene el resultado a mostrar cuando se selecciona esa opción, este sería el código.

function Login() {
  return <h2>Login</h2>;
}
function Home() {
  return <h2>Home</h2>;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

Dentro de cada función introduciremos el código que consideremos necesario, puede ser tan extenso como queráis eso si recordar devolverlo en un único elemento para no tener error de código.

Actualmente la visualización de nuestro proyecto sigue siendo la misma, ya que aunque a pesar de tener la estructura para listar el menú y el contenido de cada sección no lo estamos vinculando. Para poder realizar esa vinculación cambiaremos la estructura de nuestra función principal App().

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <div className="header">
            
          <Showmenu></Showmenu> 
         
          </div>
          <div className="content">
            <Switch>
              <Route path="/" component={Login} />
              <Route path="/home/" component={Home} />
              <Route path="/dashboard/" component={Dashboard} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}

El uso de elementos como BrowserRouter, Switch , Route … son necesarios para el proceso de navegación y se declaran arriba del todo de nuestro fichero , nuevamente os dejo el código completo y la vista de nuestro proyecto actualmente así podéis ver la declaración de dichos elementos.

import React, {Component} from 'react';
import { BrowserRouter, Switch, Route, NavLink, Redirect } from 'react-router-dom';
import Menu from './data/menu.json';


function Login() {
  return <h2>Login</h2>;
}
function Home() {
  return <h2>Home</h2>;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

class Showmenu extends Component{
    render() {
      return (
        <ul className="menu">
          {
            Menu.map( li=>{
              return(
              <li key={li.id}   >
                <NavLink data-alias={li.alias} to={li.url}   >
                  <span>{li.name}</span>
                </NavLink>
              </li>
              )
            })
          }
        </ul>
      )
  }
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <div className="header">
            
          <Showmenu></Showmenu> 
         
          </div>
          <div className="content">
            <Switch>
              <Route path="/" component={Login} />
              <Route path="/home/" component={Home} />
              <Route path="/dashboard/" component={Dashboard} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}
export default App;

Como podéis comprobar actualmente tendríamos el proceso de navegación funcionando pero si no queremos mezclar en el mismo fichero unas estructuras con otras podríamos tener el contenido de la navegación en ficheros a parte.

Veamos un ejemplo, para ello crearemos el fichero home.js que contendrá la información a mostrar en esa opción.

import React from 'react';

function Home() {
  return (
    <div>
      Pagina de home externa
    </div>
  );
}

export default Home;

Lo incluiremos arriba en nuestro proyecto con el resto del elementos que hemos incluido anteriormente

import Home from './content/examples/Home';

Esta es otra forma de contener estructura jsx en diferentes ficheros. Es una opción más limpia ya que podemos tener tanto ficheros como necesitemos y cada uno de ellos recogerá su información correspondiente.

Ahora mismo se podría decir que tenemos nuestra navegación funcionando y en ficheros a parte, pero vamos a ver más cosas para completar este menú, como la funcionalidad de marcar como active el enlace del menú que estamos visualizando.

4.Aplicar clase active

Para poder destacar el enlace de menú que estamos visitando actualmente, usaremos la propiedad exact que es un booleano que nos ayudará ya que sirve para definir si la ruta será exacta o no.

Esta propiedad la colocaremos en dos lugares en los elementos navlink del menu y en los route que crean la vinculación. Si ambas son exactas pintaremos la clase active, veamos el ejemplo del código para dejarlo más claro.

<NavLink exact  data-alias={li.alias} to={li.url} activeClassName="active" >
         <span>{li.name}</span>
 </NavLink>
 <Switch>
     <Route exact path="/" component={Login} />
     <Route path="/home/" component={Home} />
     <Route path="/dashboard/" component={Dashboard} />
</Switch>

Si abrimos la consola de nuestro navegador y seleccionamos cualquier opción de menú veremos que la opción seleccionada contiene la clase active, para que todo esto quede más claro os ánimo a leer este artículo , el cual me ayudó a entender mejor los elementos de la navegación.

Continuemos completando el menú, para ello veremos como añadir iconos a los enlaces.

5. Librería de iconos

La librería de iconos que usaremos será font-awesome, si lo conocéis podéis visitar también este enlace.

Para poder dar uso de la librería en nuestro proyecto debemos importarla, os dejo otro enlace de un artículo que escribí y trata sobre esto mismo.

Nuevamente os dejo el código completo para que podáis tener todo lo que hemos ido viendo.


import React, {Component} from 'react';
import { BrowserRouter, Switch, Route, NavLink, Redirect } from 'react-router-dom';

import '../node_modules/font-awesome/css/font-awesome.min.css'; 


import Menu from './data/menu.json';
import Home from './content/examples/Home';


// Páginas internas

function Login() {
  return <h2>Login</h2>;
}


function Dashboard() {
  return <h2>Dashboard</h2>;
}

class Showmenu extends Component{
  render() {
    return (
      <ul className="menu">
         
          {
            Menu.map( li=>{
              return(
              <li key={li.id}   >
                <NavLink exact  data-alias={li.alias} to={li.url}  activeClassName="active" >
                  <i className={li.icon}></i>
                  <span>{li.name}</span>
                </NavLink>
              </li>
              )
            })
          }
        </ul>
    )
  }
}

function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <div className="header">
            
          <Showmenu></Showmenu> 
         
          </div>
          <div className="content">
            <Switch>
              <Route exact path="/" component={Login} />
              <Route path="/home/" component={Home} />
              <Route path="/dashboard/" component={Dashboard} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;
import React from 'react';

function Home() {
  return (
    <div>
      Pagina de home externa
    </div>
  );
}

export default Home;

Para completar nuestro tutorial sólo queda dar estilos al menú.

6. Estilos de css en línea y externo

Podemos dar los estilos en línea o de una forma más limpia importando un fichero .css externo, veamos ambas:

CSS en línea: Para ello crearemos unas constantes dentro del render que contendrá el css que queremos añadir en línea a cada elemento. Es un poco engorroso porque tenemos crear constantes diferente para cada elemento. Aquí os dejo algunos ejemplos.

     const styleUl = {
        display: "flex",
        padding: "10px",
        'flex-wrap':'wrap',
        'justify-content':'space-around',
        fontFamily: "Arial",
        'border-bottom':'1px solid #ddd'
      };
      const styleLi = {
        'list-style':'none',
      };

      const styleA = {
        display: "inline-block",
        'text-decoration':'none',
        padding:'8px',
        'border-radius':'4px',
        color: "white",
        backgroundColor: "DodgerBlue",
        fontFamily: "Arial"
      };

      

Para usar esos estilos sólo necesitamos indicar que elemento llevará esas constantes

 <ul  style={styleUl}>
         
          {
            Menu.map( li=>{
              return(
              <li key={li.id}  style={styleLi} >
                <NavLink exact style={styleA} data-alias={li.alias} to={li.url}  activeClassName="active" >
                  <i className={li.icon}></i>
                  <span>{li.name}</span>
                </NavLink>
              </li>
              )
            })
          }
        </ul>

Si nos fijamos en el código , hemos añadido esas contantes a los elementos ul, li , NavLink. Como comentamos anteriormente también es posible hacerlo de forma externa.

CSS externo: Sólo necesitamos importar el fichero con el contenido css arriba del todo en el fichero principal del proyecto y añadir esas clases o estilos a los elementos con los que estamos trabajando.

import styles from './css/style.css'; 

Hemos llegado al final del tutorial, ha sido un poco extenso pero espero que os haya servido de ayuda. a continuación os dejo el código completo con todo lo que hemos ido viendo.

Fichero App.js


import React, {Component} from 'react';
import { BrowserRouter, Switch, Route, NavLink, Redirect } from 'react-router-dom';

import '../node_modules/font-awesome/css/font-awesome.min.css'; 
import styles from './css/style.css'; 

import Menu from './data/menu.json';
import Home from './content/examples/Home';


// Páginas internas

function Login() {
  return <h2>Login</h2>;
}


function Dashboard() {
  return <h2>Dashboard</h2>;
}

class Showmenu extends Component{
  render() {

    return (
      <ul className="menu" >
         
          {
            Menu.map( li=>{
              return(
              <li key={li.id}   >
                <NavLink exact  data-alias={li.alias} to={li.url}  activeClassName="active" >
                  <i className={li.icon}></i>
                  <span>{li.name}</span>
                </NavLink>
              </li>
              )
            })
          }
        </ul>
    )
  }
}

function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <div className="header">
            
          <Showmenu></Showmenu> 
         
          </div>
          <div className="content">
            <Switch>
              <Route exact path="/" component={Login} />
              <Route path="/home/" component={Home} />
              <Route path="/dashboard/" component={Dashboard} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Fichero Home.js

import React from 'react';

function Home() {
  return (
    <div>
      Pagina de home externa
    </div>
  );
}

export default Home;

Fichero style.css

.menu{
    display: flex;
    padding: 10px;
    flex-wrap:wrap;
    justify-content:space-around;
    font-Family: "Arial";
    border-bottom:1px solid #ddd;
}
    .menu li{
        list-style: none;
    }
        .menu li a{
            display: inline-block;
            text-decoration:none;
            padding:8px;
            border-radius:4px;
            color: white;
            background-Color: DodgerBlue;
            font-Family: "Arial";
        }
        .menu li a.active{
            background-color: #ff1ed8;
        }
            .menu li a i{
                display: inline-block;
                margin-right: 5px;
            }

React js | font-awesome

Hace poco que he empezado una formación de react, y ya va dando sus frutos. Por aquí os iré dejando ejemplos que he ido aprendiendo.

Quizás algunos no estén bien del todo pero a medida que vaya viendo más formaciones y desarrollo iré mejorando el uso de react.

A continuación os dejó un ejemplo de como incluir font awesome a vuestro proyecto de react.

1º Paso instalar la última versión de font-awesome en la consola

npm install --save font-awesome

2º Paso importar la fuente que acabamos de instalar.

Actualmente está fuente se ha incorporado cómo módulo a nuestro proyecto de react, para poder trabajar con ella añadiremos está línea de código dentro de nuestro fichero app.js debajo del import React, {Component} from ‘react; de nuestro código.

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

3º paso Uso de la fuente:

<i className='fa fa-refresh'></i>

Con estos sencillos pasos ya podrás mostrar la librería font-awesome. Espero que os haya servido de ayuda.

Cómo sacar el máximo partido a CSS – Evento mowomo

Buenas, ayer 30 de abril di una charla para el evento #yomequedoencasa de mowomo .

A continuación os quiero dejar el contenido que usé en la ponencia. Por un lado está la presentación con ejemplos de código y por otro lado un pdf con la información más detallada

La presentación que estuvimos viendo durante la charla está hecha con la herramienta web-slides y tal cómo comenté os ánimo a que la conozcáis.


Es una herramienta que te ayuda a realizar presentaciones a base de código. Tienes muchos ejemplos en su web y su documentación es fácil de seguir.

Por aquí os dejo mi presentación para que la echéis un vistazo

Como he comentado al principio de este post también quiero dejaros un pdf donde tenéis explicado más en detalle todo lo que se ha hablado a lo largo de la ponencia.

Espero que toda esta información os sirva de ayuda y cualquier duda que queráis hacerme podéis hacerlo a través de mi Twitter.

¿Cómo crear bloque de Gutenberg?

Hola, Hace poco tiempo que me aventuré en el desarrollo de bloques de Gutenberg y he conseguido hacer algunos bloques. Con este tutorial aprenderás la base de como crear un bloque de Gutenberg y a la vez el desarrollo de un pequeño bloque para una galería.

Para poder desarrollar el bloque lo primero que haremos será crear un plugin y dentro de él desarrollaremos el registro del bloque y su funcionalidad. Dado que vamos a desarrollar un plugin es importante que le informes a cerca de cómo se lleva a cabo el proceso de creacion de plugin para WordPress.

  1. Paso – Crear un plugin: Dentro de nuestro WordPress en la carpeta wp-content/plugins/ añadiremos una carpeta para contener el plugin.
  2. Fichero index.php de registro del plugin: Se trata del fichero donde se va a declarar el plugin, por lo tanto, añadiremos en él las cabeceras necesarias para la declaración al igual que el registro de ficheros necesarios para el plugin. Este fichero irá dentro de la carpeta que acabamos de crear. (wp-content/plugins/carpeta-para-el-bloque/index.php )A continuación mostremos un ejemplo.
/*
Plugin Name:gallerynprd
Description: Plugin para crear un  bloque en Gutenberg para una galería 
Author: nadiaprd
Author URI: 
Version: 0.0.2
*/


function functionBack() {
	 
	wp_enqueue_script(
	    'gallerynprd',
 // nombre del bloque
	    plugin_dir_url(__FILE__) . '/js/gallerynprd.js',
	    array('wp-blocks', 'wp-i18n', 'wp-editor'),
	    true
	);
//Se encola el fichero donde se realizará la funcionalidad del bloque

	wp_enqueue_style(
		'editor', 
		plugins_url( 'css/editor.css', __FILE__ ), // css interno para el editor.
		array(),
		'4.7.0'
	);

//Se encola el fichero donde se realizarán los estilos de la parte interna del bloque en el escritorio de WordPress

}

add_action('enqueue_block_editor_assets', 'functionBack');
//Se añade esta función en la edición de bloques de Gutenberg


function funtionsFront() {
    
	wp_enqueue_style(
		'front-css', 
		plugins_url( 'css/front.css', __FILE__ ), // iconos font-awesome
		array(),
		'1.0.0'
	);
//Se encola el fichero donde se realizarán los estilos de la parte externa del WordPress, el resultado final y el que se mostrará al usuario.
    
}    
 
add_action('init', 'funtionsFront');

//Se añade esta función en el inicio de WordPress

En los fichero de ejemplo os dejado unos comentarios explicando cada elemento del fichero. A continuación veremos un ejemplo de como se registra un bloque y de toda la funcionalidad necesaria que necesitamos para su desarrollo.

Si estás realizando este tutorial a la vez que lo desarrollas tendrás la siguiente estructura:

wp-content/plugins/carpeta-para-el-bloque/index.php

Para seguir con el desarrollo, dentro de esa carpeta crearemos un otra para el javascript y dentro del ella añadiremos el fichero de desarrollo del bloque index.js. Volvamos a dejar clara la nueva estructura de carpetas:

wp-content/plugins/carpeta-para-el-bloque/index.php

wp-content/plugins/carpeta-para-el-bloque/js/index.js

Os mostraré un ejemplo de este fichero con el código completo sobre el desarrollo del bloque de la galería, también pondré comentarios explicando cada sección o elemento.

3. Fichero index.js de registro del plugin: Se trata del fichero donde se va a desarrollar el bloque y toda su funcionalidad necesaria. A continuación mostremos un ejemplo.


( function( blocks, components, i18n, element ) {

  var el = element.createElement; //nos ayuda a crear los elementos htmml
  var MediaUpload = wp.editor.MediaUpload; // funcionalidad del media de WP
  var InnerBlocks = wp.editor.InnerBlocks; // Funicionalidad para insertar bloques de Gutenberg
  var IconButton = components.IconButton;

 


  blocks.registerBlockType(
    'common/newgallery', {  // nombre para el bloque
    title: i18n.__( 'A new gallery' ),
    icon: 'book', //icono para el bloque
    category: 'common', //categoría a la que va a pertenecer el bloque
    attributes: { //variables con las cuales vamos a desarrollar
      title: {type: 'string'},
      date: {type: 'string'},
      text: {type: 'string'},
      mediaID: {
        type: 'number',
      },
      mediaURL: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
      }
    },

    edit: function( props ) {
      /*

 función editar en ella desarrollaremos todo la parte interna del bloque
 y es la que veremos dentro de la parte interna de nuestro WordPress

      */


      var focus = props.focus;
      var focusedEditable = props.focus ? props.focus.editable || 'name' : null;
      var alignment = props.attributes.alignment;
      var attributes = props.attributes;
      var contactURL = props.attributes.contactURL;


      function updateTitle(event) {
        props.setAttributes({title: event.target.value})
        // función para almacenar temporalmente el contenido de la variable title.
      }
     
      function updateText(event) {
        props.setAttributes({text: event.target.value})
        // función para almacenar temporalmente el contenido de la variable text.
      }

      var onSelectImage = function( media ) {
        // Evento para almacenar la información en la varibles relativas a la información de la imagen.
        
        return props.setAttributes( {
          mediaURL: media.url,
          mediaID: media.id,
        } );
      };
      
      return [

      /*
      Desarrollo del HTML necesario para la recogida de información con la que se va a trabajar
 en la parte interna del bloque.


      */
       
        el( 'div', { className: "wp-block-prd"},
          el( 'div', { className: "bloque-1 bloque"},
              el("h4", {className: "paso-1 paso "},
                 el("span", {className:'num'},'1'),
                  'Escoja la portada para la galería'
              ),
              el( 'div', {
                id: 'contenedor-1',
                className: attributes.mediaID ? 'cont  box-img' : 'cont  box-img',
                style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {}
              },
              el( MediaUpload, {
                onSelect: onSelectImage,
                type: 'image',
                value: attributes.mediaID,
                render: function( obj ) {

                  return el( IconButton, {
                    className: attributes.mediaID ? 'image-button' : 'button button-large',
                    onClick: obj.open
                    },
                    ! attributes.mediaID ? i18n.__( 'Adjuntar una imagen' ) : el( 'img', { src: attributes.mediaURL } )
                  );
                }
              } )
            )
           ),   
        
            el( 'div', { className: 'bloque-2 bloque' },
              el("h4", {className: "paso-2 paso "},
              el("span", {className:'num'},'2'),
              'Rellene los siguientes datos'
              ),

              el( "div", { id: "contenedor-2", class: "cont"},
                  el( "div", { class: "form-box col2"},
                        el("label", {},'Título de la galería'),
                        el("input", { type: "text", value: props.attributes.title, onChange: updateTitle }),
                  ),

                  el("div",{ class: "form-box col1"},
                        el("label", {},'Añade un comentario'),
                        el("textarea", { rows: "4", value: props.attributes.text, onChange: updateText }),
                  )
              )
            ),

        
          el("div", {className: "bloque-3 bloque"},
            el("h4", {className: "paso-3 paso "},
               el("span", {className:'num'},'3'),
                'Ahora añade el bloque de galería que ofrece Gutenberg'
            ),
            el("div", {id: ""},
                el(InnerBlocks, { 
                    allowedBlocks: [
                      'common/gallery',
                    ],
                 render: function( obj ) {

                }}),
            )
          )
        )
      ];
    },

    save: function( props ) {
      
      /*

 función save en ella desarrollaremos todo la parte externa del bloque
 y es la que veremos expuesta en la web, la que verá el usuario final.
 En ella desarrollaremos todos los elementos que consideremos necesarios para
 mostrar esa información que hemos recogido.

      */

      var attributes = props.attributes; 
      /*
      haremos relación a los atributos utilizados en la función edit para poder
 mostrar la información que hemos recogido anteriormente en los campos del
 formulario.

      */

      return (
        el( 'div', { className: props.className },
          el( "div",
            { class: "bloqueTimeline", 
              data_total: ""},

              el( "div",
                { class: "content"},
                el("div",
                  { class: "infoR"},
                  el( 'img', { src: attributes.mediaURL } ),
          
                  el("div",{ class: "text"},
                    el( "h3",{ class: "title"}, props.attributes.title), 
                    el('div', {numberOfLines: 10, class: "desc"}, props.attributes.text ),
                    el( InnerBlocks.Content, null ),

                  ),
                ),
                
              ), 
            )
        )
      );
    },
  } );
} )(
  window.wp.blocks,
  window.wp.components,
  window.wp.i18n,
  window.wp.element,
);

En el return de la funcion edit mostramos la información necesaria para la parte interna. En este caso el bloque que vamos a desarrollar es un galería y por ello preparemos:
– El selector media de WordPress para poder coger la foto de portada de la galería.
-un input texto donde le daremos un título a nuestra galería.
-un textarea, para aportar un comentaario a la galería.
-Por último ofreceremos la posibilidad de añadir el bloque de galería de Gutenberg.

En el return de la función save mostraremos todo el resultado final que queremos que el usuario final vea. Con los ficheros de estilo CSS que encolamos anteriormente podemos dar estilos a esta sección.

Si habéis ido realizando el tutorial a la vez veréis que ya tenemos completo nuestro bloque de galería para Gutenberg. Espero que este post os haya servido de ayuda para entender el proceso de desarrollo de un bloque.

¿Cómo hacer un tema de WordPress?

Hola si estás leyendo esto, es porque tienes intención de crear el propio tema para tu web en WordPress. Para poder llevar a cabo este objetivo tienes que tener conocimientos avanzados sobre desarrollo web ( HTML, CSS, PHP , JS …).

Para crear un tema desde cero es necesario que dentro del directorio wp-content/themes de tu WordPress generes la carpeta del tema a desarrollar, por ejemplo:

MiWordPress/wp-content/themes/nuevoTema

A continuación dentro de la carpeta /nuevoTema crearás los ficheros style.css e index.php, ya que son necesarios para el desarrollo del tema.

En el fichero style.css, incluiremos la información de nuestro tema, es decir las cabeceras del tema. Aquí os dejo un enlace al core de WordPress dónde se explica en detalle esto.

/*
Theme Name: first Theme
Theme URI: https://www.nadiaprd.com/
Author: Nadia Prida
Author URI: https://www.nadiaprd.com/
Description: Primera versión del tema de la web
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

En el fichero index.php, incluiremos el bucle que pintará las entradas de nuestro WordPress. Aquí te dejo toda la información a cerca del loop de WordPress.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <?php get_header();?>
 
    <?php if (have_posts()) :
 
        while (have_posts()) : the_post();?>
 
           
            <article id="post-<?php the_ID();?>" <?php post_class();?>>
                <h1><?php the_title();?></h1>

                <div class="entry-content">
                    <?php the_content();?>
                </div><!-- entry-content -->
            </article>
        
            <aside class="sidebar">
                <?php get_sidebar();?>
            </aside>
                    
 
        <?php endwhile;
    endif;?>
 
<?php get_footer();?>
</body>
</html>

Con estos dos ficheros ya puedes tener el “desarrollo de tu tema para WordPress”.

Con esto ya puedes activar tu tema, pero verás que el resultado todavía está bastante verde eso es por varias cosas:

Con estos ficheros hemos creado la estructura base para poder empezar a desarrollar nuestro tema, pero no significa que hayamos terminado o completado el proceso, quedan unos cuantos pasos más que iremos viendo más adelante.

Para poder seguir desarrollando el tema es importante que sigas las guías del core de WordPress, ya que son de gran ayuda.

En los siguientes post iré explicando más acerca de cómo desarrollar un tema de WordPress y poco a poco con cada post iremos dando vida al nuevo theme de nuestra web.

HasClass JQuery

HasClass: Método de jquery para conocer si un elemento del DOM contiene una clase o no.

RemoveClass: Método de jquery para eliminar un clase a un elemento del DOM.

Ejemplo

if($(this).hasClass(‘nameclass’))

{ $(this).removeClass(‘nameclass’);}

else{ $(this).addClass(‘nameclass’); }

Experiencia en la WordCamp Sevilla

Me gustaría contaros como fue mi experiencia en la WordCamp para desarrolladores.

Lo primero fue la gran apertura que montaron, me gustó mucho, muy bien currado chicos :P.
Después llegaron los taller y con ellos mi primer debut como ponente.

Impartí el taller de “Entiende y crea bloques de Gutenberg” y lo disfruté mucho. He tenido buen feedback del taller y salgo con muy buenas vibraciones.

Después de mi taller asistí al taller de “Crea un tema con React en menos de 30 minutos” que estuvo muy bien. Con esto se completó mi viernes de empiece de WordCamp Sevilla.

El sábado fue el segundo día y las charlas escogidas fueron muy buenas. Lo que más me gustó de todas ellas fue que abarcaban los temas más referentes que hay actualmente.

Charlas cómo las de:

  • Querying posts by custom fields vs. taxonomy’s terms – is there a difference in performance? | Magdalena Paciorek;
  • Git como estilo de vida | Juan J. Merelo Guervós;
  • Zona Crítica: WordPress, el desarrollo y las buenas prácticas” | JuanKa Díaz, Dario BF;
  • Mesa redonda: State of the Dev | Fran Torres, David Perálvaez, Sonia Ruiz, Marta torre;

Fueron las que más me sorprendieron gratamente.

Después de un largo día adquiriendo conocimientos, teníamos el after party para despejar y pasarlo bien.

Pero la WordCamp no terminaba aquí. Al día siguiente, domingo, tendríamos el Contributor Day; Donde aportamos nuestros conocimientos a WordPress con mesas de plugins, themes, traducción, comunidad …

En resumen mi experiencia en la WordCamp Sevilla ha sido muy satisfactoria y salgo de ella con muchas ganas de seguir aprendiendo y buenas oportunidades.